前回の記事👆ではAPIを使って欲しい情報を取得したので今回はブラウザ上にそれらを表示したいと思います。
👆こちらは完成したアプリです。GitHubでスター数が多い人気リポジトリーTOP5をスクレイピングしてます。
まずはresults.html
{% extends 'base.html' %}
{% block body %}
<div class="card text-center" style="margin: 150px;">
{% for result in results %}
<h3>{{ result }}</h3>
{% endfor %}
<form action="/">
<button class="btn btn-secondary" type="submit">戻る</button>
</form>
</div>
{% endblock %}
こちらのHTMLはシンプルに仕上げました。まずは上から順に説明します。
{% extends 'base.html' %}
こちらはflaskのお決まりの呪文。HTMLタグやHEADタグは別のbase.htmlに置いてそこから引っ張ってきてます。コードがスッキリしていい感じ。{% block body %}
そしてこちらのblockからbody部分を書いていきたいと思います。（注: block直下のdivタグですがこれはbootstrapでデザインを整えてます。今回は結果表示の解説メインなのでこちらは割愛します）
まず５つ取った結果をfor文で回し表示させます。FlaskではHTMLでもfor文が使えるので大変ありがたい。
使い方は波括弧とパーセント記号で囲むだけ。ただ注意したいのは結果を入れた変数（今回はresult）は二重の波括弧で囲う必要があります。
そして最後に再び波括弧とパーセントでendforと書くだけ。
慣れてしまえば割と記述方法は簡単だと思います。
ちなみにこの右側の変数resultsはどこから来ているのかというと、
{% for result in results %}
👆これ
app.route('/results', methods=['POST'])
def do_scraping():
results = git.git_api()
return render_template('results.html', results=results)
前に他の記事で紹介したapp.pyから来てます。
関数do_scraping()の中でTOP5の結果が入ってる別の関数git_api()を引っ張ってきてresultsに格納してます。そしてそのresultsは直下のrender_templateでさらに同じ名前のresultsに格納してます。
・・・なんかわかりずらいですね汗
順番としては..
前回紹介したファイルgit.pyをインポートしそのファイル内にある関数git_api()を呼び出してます。
pythonのお決まりの書き方で.pyを省略して書きます。なのでgit.git_api()に書き直して変数resultsに入れます。
この時点でresultsには関数git_api()が入ってます。関数git_api()には既にTOP5の結果が入ってます。・・ということはresultsにはもうTOP５が入ってるワケですね。
そしてそのTOP5をさらにrender_template内で変数resultsに入れます（！？）
これ名前が一緒だからややこしいんですがこの時のresults=resultsは、右側がたった今TOP５を入れたresults、左側がHTMLで使うresultsなんです。
そう、さっきfor文で回したresultsはここで作られてたんですね。
（ちなみにこの二つの変数、名前を一緒にする必要はありません。なので左側をたとえばresults_for_htmlみたいな名前にしてもオッケーです。ただ他の方々が解説してるのを見ると名前の統一は一般的みたいです。その方がシンプルな記述になるからだと思いますが慣れない内は変数名を変えて工夫してみましょう）
これでやっとHTMLにTOP5が表示できます。
仕上げにformタグでボタンを作って最初のページに戻れるようにしましょう。
actionでTOPページのURLについてるスラッシュを指定します。buttonを作りTOPページに戻れるように"submit"
これでひとまず最低限の機能を備えたスクレイピングアプリが完成しましたね。ふぅ・・
これからもっとデザインを調整したり機能を追加してポートフォリオにしたいと思います。
次はbootstrapをマスターしてその辺の解説も追加予定。
まだまだ課題は残ってますがこれでひとまずスクレイピングアプリ編は終了。
はぁ、長かった・・w
ここまで読んでくださった方、本当にありがとうございます。次回はbootstrapとか、もっとスクレイピングに特化した記事を書きたいと思います