スクレイピング×Django×ワードクラウドで小説を画像化するウェブアプリを作ろう。

どうもChampignon(きのこ)です。

今回はプログラミングのお話です。

この記事を読んでいただきたい方
●Djangoを使ってウェブアプリを作りたい方
●Djangoにスクレイピングを実装したい方
●ワードクラウドに興味がある方

その中でも最近私がはまっている、
Pythonを用いたウェブアプリのフルスタック・フレームワークである“Django”を使って作ったアプリについて書いていきたいと思います。

そもそもDjangoって?

プログラミングを仕事にしているわけではなく、あくまで趣味レベルなので、正確なところはググっていただければと思いますが、
「Pythonで動く、ウェブアプリケーションを作るために必要なパッケージを取り揃えてくれているフレームワーク)」「ウェブアプリを作るためのお道具箱」というイメージです。
(Djangoにはフレームワークって言葉使うけど、ライブラリとは違うのかな?今度調べてみよう。)

その他、ワードクラウド(Word Cloud)というのは、おそらく一度は目にしたことがあると思いますが、

テキストデータの斬新な視覚表現であり、通常はWebサイトでキーワードメタデータ(タグ)を描写したり、自由形式のテキストを視覚化するが、通常タグは単一の単語であり、各タグの重要性はフォントサイズまたは色で示される[2]。(Wikipediaより)

って意味らしいです。実物はこの後出てくるのでお楽しみに!!!

今回やったこと

前置き

Djangoのチュートリアルを一通りやったので、何か自分がPythonでできることと組み合わせて、ウェブアプリを作ってみたいなーと思うようになりました。
(全部レベルは低いですが、)私がPythonでできることは大体以下の通り。

ですが、前二つの機械学習・AI系は、マシン(CPU、GPU、TPU)の力がものをいうようになってから、少し気持ちが冷めているのと、いきなりウェブアプリに取り込むのには、少しハードルが高いかな、、、

ということで、お手軽で実用的なスクレイピングを選択しました。

最初の一歩は、どこかのレシピサイトから「料理名」、「写真」、「材料」、「レシピ」とかをとってきてアーカイブできる、みたいなアプリケーションにしようかなーとざっくり考えていました。

しかし、
「なんか、スマホのアプリでそんなんあったな。。。」と思ってしまい、急に冷めてしまいましたw
そのため、もう一工夫しようということで、考え始めました。

そこで、私は、Python始めたてのときに、触っていた”WordCloud”を思い出しました。
(最初の方は、人生でプログラミングなんてやったことなくて、難しすぎて、現実逃避のために使ってました。なんとなくOutputが出てくるので、やった感あるんですよねw)
「スクレイピングでとってきた文章をワードクラウドに変換したら、面白いかも!」ということで、

最終的には、「Django」×「スクレイピング」×「WordCloud」のコラボレーションで、初の自作ウェブアプリを作ろうと考えました!!

(Word “Cloud”なので、雲にしてみました笑)

構成

普通にプログラミングをやったことがある方であれば、後ろ側の動き方は想像に難くないと思いますが、一応ご説明させていただきます。
(こういうときの図形の書き方のお作法があったら教えていただきたいです。。。めっちゃ見づらくて申し訳ないです。)

ひとつずつ、もう少し深堀していきます。

  1. ユーザーインターフェース(UI)の部分は、ほとんどDjangoのマニュアルのままです。もう少し勉強が進んだら見栄えが良くなるようにしてみようと思います。
  2. UIで入力してもらうURLは、青空文庫の文庫ページの「いますぐXHTML版で読む」です。(ここももう少しフレキシビリティを付けられるようにしたいです。)以下は同サイトより。
  3. 入力したURLがサブミットされると、スクレイピングが開始されます。ここで行う処理は、「タイトル」、「著者」、「本文」をとってくる、です。本を読むページなので、非常にHTMLの構成はシンプルで取得しやすいです。(注:1冊しか取ってこないので、挙動がおかしくなることはあまりないと思いますが、URLが見つからない場合や、サーバーが見つからない場合などの例外処理はきっちりしておきましょう!私は、こちらでお作法を学びました。
  4. 続いて、「本文」から、このアプリのメインである「Word Cloud」を生成する必要があります。
    ここが若干面倒ですが、
    「テキストを綺麗にして」
    「品詞ごとにわけて」
    「Word Cloudにする品詞を選択して(今回は名詞と形容詞)」
    「ストップワード(「それ」「こと」など、名詞ではあるものの、Word Cloudにしてもつまらないもの)を削除して」
    「画像として保存する」
    という流れになります。
  5. ここまで来たらあと一息です!スクレイピングでとってきた「タイトル」と「著者」、そしてさきほど生成したWord Cloudの画像をUIに返してやります。
  6. 完成です!!!!!!!!!!!

補足

4.のWord Cloudの補足ですが、

  • 「テキストを綺麗にして」では、不要な文字などを削除しています。具体的には、「改行」「数字」「句読点」「スペース」「その他記号」を削除しています。
  • 「品詞ごとにわけて」は、MeCabというライブラリを使っております。

完成品

上記アプリケーションを動かした動画がこちらです!!

生成したWord Cloud

『人間失格』太宰治

『細雪(上)』谷崎潤一郎

これらを読んだことがある方はわかっていただけると思いますが、要点を捉えていて、内容がよみがえってくるようじゃないですか??
大きい文字の部分もそうですが、よくよく細かいところまで眺めていくと、より楽しめると思います。
(個人的には、案の定というか、『人間失格』のキーワードがどれも暗すぎて笑えますw)

まとめ

いかがだったでしょうか。もしいろいろな方からご希望をいただいたときは、ソースコードも公開してみようと思います!!
独学でコードが汚いことは自覚しているので、自分からは踏ん切りがつきませんでしたw

個人的には、非常に楽しく取り組めましたが、それと同時に、やはりプログラミングはチュートリアルを写経して動かして満足、というのでは不十分で、
こんな風にアウトプットをして初めて力になる、というのを痛感しました。
ちょっとコードを変えるととたんに動かなくなり、その原因を自ら突き止めて改良していく、そうすることでチュートリアルでやったことが身に付き、
またできることが増えていくものだと思います。(わかっていながら、エラー吐くと、イラついて、投げ出したくなりますがw)

このアプリケーションにもいろいろな改良ポイントがあると思っているので、自分で手を動かしながら、改良を加えていきながら、勉強していきたいと思います。

最終的には、自分のサイトにアップロード(サーバーにおいてドメインつなげたい)したいので、セキュリティなど、やらないといけないことは山積みです。。。

こういう本とか、ウェブで公開とかまでフォローされてるのかな、、、気になる、、、

ほか、さいなら。