概要
こちらは前回[Flask+スクレイピングで記事一覧画面を作ろう②](https://qiita.com/Yuthon/items/4c9754b0d14b40122165)の続きです。テンプレートを作ろう
まずは、前回のFlaskScraping/app.pyに必要なモジュールのインポートを行います。 差分は(-)と(+)で表します。# モジュールのインポート
from flask import Flask, (+)render_template
(+)import requests
(+)from bs4 import BeautifulSoup
# Flaskアプリのインスタンスを作成
app = Flask(__name__)
...
requestsとBeautifulSoupはスクレイピングを行うためのモジュールですね。
render_templateは、簡単に言うと、対応するhtmlファイルを表示することができるという関数です。
後ほど使うので、頭の片隅に置いておいてください。
続いて、テンプレートを作っていきます。
FlaskScraipingフォルダ内にtemplatesフォルダを作成してください。
FlaskScraping
| - templates
そして、templatesフォルダ内にbase.htmlとindex.htmlを作りましょう。
FlaskScraping
| - templates
| | - base.html
| | - index.html
まずはbase.htmlから描いていきましょう。このファイルはhtmlファイルのベースとなるファイルです。つまり、htmlファイルに共通したルールなどをここでまとめて書いてしまおうということです。
コードは以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Flask+スクレイピングで記事一覧画面を作ろう</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
今回、使用するUI(デザイン)はBootStrapです。
BootStrapは、CSSで良い感じの見た目にされたページ機能を提供してくれているものです。
これで、サイトが一気にオシャレになることでしょう。
チートシートに色々なコード例が載っています。
{% block content %}については、index.htmlで説明します。
とりあえず書いておきましょう。
では、index.htmlを書いていきましょう。
とりあえず、HelloFlask!と表示させてみましょう。
{% extends 'base.html' %}
{% block content %}
<p>Hello Flask!</p>
{% endblock %}
ここで、index.htmlにも{% block content %}というのがありますね。
これは、まず1行目の{% extends 'base.html' %}でbase.htmlを読み込みます。
そして、base.htmlタグのbodyタグの中にある{% block content %}をindex.htmlから呼び出すことで、base.htmlを継承することができます。
これにより、どのページからでも統一されたテンプレートを呼び出すことができるようになりました。
テンプレートを表示させよう
それでは、作成したテンプレートを表示させていきたいと思います。 app.pyからhtmlファイルを呼び出して表示させるのですが、ここでrender_templateの出番です。 render_template('index.html')と指定することで、pythonファイルからindex.htmlを呼び出すことができます。 実際にコードを書いてみましょう。...
# ルーティングの設定
@app.route('/')
def index():
(-)return '<h1>Hello World!</h1>'
(+)return render_template('index.html')
# このコードによって、Flaskがweb上で走ります
if __name__ == '__main__':
# debug=Trueとすることで、保存するだけで変更が適用されます
# エラーも見やすくなります
app.run(debug=True)
では、実行してみましょう！
(flaskenv)FlaskScraping$ python app.py
これで、HelloFlask!と表示されれば成功です！
今回実装したコード
以上で、テンプレートの作成と表示ができるようになりました。 今回実装したコードの全体像を表示しておきます。確認してください！# モジュールのインポート
from flask import Flask, render_template
import requests
from bs4 import BeautifulSoup
# Flaskアプリのインスタンスを作成
app = Flask(__name__)
# ルーティングの設定
@app.route('/')
def index():
return render_template('index.html')
# このコードによって、Flaskがweb上で走ります
if __name__ == '__main__':
# debug=Trueとすることで、保存するだけで変更が適用されます
# エラーも見やすくなります
app.run(debug=True)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>Flask+スクレイピングで記事一覧画面を作ろう</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
{% extends 'base.html' %}
{% block content %}
<p>Hello Flask!</p>
{% endblock %}
次回は、スクレイピングしたデータを表示できるようにします。
ありがとうございました🙇♂️