Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Flask】電子掲示板を作る~②テンプレートを表示する~


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20210718062603p:plain

おはようございます。Shotaです。

今日も昨日に引き続いて、PythonのFlaskを用いた簡単な電子掲示板の作り方を解説していきます。

今日はテンプレートとなるhtmlファイルをFlaskで表示します。



テンプレートの作り方

昨日の記事では、文字列を戻り値に設定することでhtmlファイルに文字を表示できることを学びました。

しかし、一つのPythonファイルにhtmlの文字列を書き連ねるのはあまり得策ではありません。フロント部分はhtmlファイルに書き、Pythonではhtmlファイルを表示するバックエンドの処理だけを書いてあげるのが非常に望ましいです。

まずは、htmlファイルを作成してあげましょう。

新しく「templates」フォルダを作って、その中に「index.html」ファイルを作ります。ただし、フォルダ名は必ず「templates」にしてください。そうしないと、Flaskがテンプレートであるhtmlファイルを読み込みことができません。

作った「index.html」の中身には、以下のコードを書いてみます。(書けない場合はいったんコピペしても大丈夫です。)

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAMPLE_APPLICATION</title>
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

ここまで書けたら、Pythonで表示するロジックを書きます。そのためには、render_templateを使います。

Pythonファイルの中身を、以下のように書き換えます。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

render_templateはflaskモジュールにあるクラスの一つなので、Pythonファイルに書かれている最初の行にrender_templateと最初に書きます。これを忘れるとエラーが発生して動かなくなりますので、絶対に忘れないように。

上述のPythonファイルを実行してみましょう。

f:id:ShotaNukumizu_1000:20210822164448p:plain

このように表示されていると思います。わかりにくければ、htmlファイルの中身を少し変更してみましょう。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAMPLE_APPLICATION</title>
</head>
<body>
    <h1>Index Page</h1>
</body>
</html>

変更を保存して、ブラウザを更新してみます。

f:id:ShotaNukumizu_1000:20210822164636p:plain

このように、しっかりと変更した内容が反映されていることがわかりますね。

これでhtmlを表示する部分が完成しました。


基盤となるテンプレートを用意する

例えば、「Create Page」と書かれたhtmlファイルを追加で用意したい時、どのようにhtmlを書くのでしょうか?

おそらく思いつくのは、次のようなhtmlファイルを記述することですよね。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAMPLE_APPLICATION</title>
</head>
<body>
    <h1>Create Page</h1>
</body>
</html>

上述のようなコードを記述すれば、新しく「Create Page」が表示されるページを作成できます。

でも、これは少し冗長になってしまいますのであまり良いとは言えません。

htmlファイルの構造が同じで中身だけを変えるとき、flaskでは基盤になるhtmlファイルを準備して、その他のファイルを他のhtmlに継承させられます。

基盤になるテンプレートをここで用意しましょう。

まずは「templates」フォルダに「base.html」を用意して、以下のようにコードを書きます。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAMPLE_APPLICATION</title>
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

このように書くことで、基盤となるテンプレートを作成することができます。あとは、「index.html」ファイルに次のようなコードを書いてみましょう。

{% extends 'base.html' %}

{% block body %}
<h1>Index Page</h1>
{% endblock %}

{% extends %}タグがここではポイントになります。それはこのテンプレートに、他のテンプレートを継承することを意味します。継承したいテンプレートの名前は文字列で表示します。これは一番最初に書きましょう。

このように編集したら、サーバを立ち上げて実行していきましょう。以下のように画面が表示されているはずです。

f:id:ShotaNukumizu_1000:20210822164636p:plain

このように見ると、base.htmlのファイル内容をしっかりと反映できていることがわかります。base.htmlを拡張してあげれば、少ないコード量でページを追加することができます。


まとめ

今日の記事では、Flaskのrender_templateクラスを使ってhtmlファイルを表示する方法について解説しました。

明日の記事では電子掲示板のデータベースを構築する方法を解説していきます。

今日の記事はこれで終了です。

【参考サイト】

tech-diary.net