Flask+スクレイピングで記事一覧画面を作ろう③

<h2>概要</h2>
こちらは前回[Flask+スクレイピングで記事一覧画面を作ろう②](https://qiita.com/Yuthon/items/4c9754b0d14b40122165)の続きです。

<h2>テンプレートを作ろう</h2>
まずは、前回のFlaskScraping/app.pyに必要なモジュールのインポートを行います。
差分は(-)と(+)で表します。

```python: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ファイルに共通したルールなどをここでまとめて書いてしまおうということです。
コードは以下です。

```html:templates/base.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](https://getbootstrap.jp/docs/5.0/getting-started/introduction/)です。
BootStrapは、CSSで良い感じの見た目にされたページ機能を提供してくれているものです。
これで、サイトが一気にオシャレになることでしょう。
[チートシート](https://bootstrap-cheatsheet.themeselection.com/)に色々なコード例が載っています。
{% block content %}については、index.htmlで説明します。
とりあえず書いておきましょう。

では、index.htmlを書いていきましょう。
とりあえず、HelloFlask!と表示させてみましょう。

```html:templates/index.html
{% 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を継承することができます。
これにより、どのページからでも統一されたテンプレートを呼び出すことができるようになりました。
<h2>テンプレートを表示させよう</h2>
それでは、作成したテンプレートを表示させていきたいと思います。
app.pyからhtmlファイルを呼び出して表示させるのですが、ここでrender_templateの出番です。
render_template('index.html')と指定することで、pythonファイルからindex.htmlを呼び出すことができます。
実際にコードを書いてみましょう。

```python:FlaskScraping/app.py
...

# ルーティングの設定
@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)
```

では、実行してみましょう！

```terminal
(flaskenv)FlaskScraping$ python app.py
```

これで、HelloFlask!と表示されれば成功です！
<h2>今回実装したコード</h2>
以上で、テンプレートの作成と表示ができるようになりました。
今回実装したコードの全体像を表示しておきます。確認してください！

```python:FlaskScraping/app.py
# モジュールのインポート
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)
```

```html:templates/base.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>

```

```html:templates/index.html
{% extends 'base.html' %}
{% block content %}
<p>Hello Flask!</p>
{% endblock %}
```


次回は、スクレイピングしたデータを表示できるようにします。
ありがとうございました🙇‍♂️