前回【WSL/Anaconda/Flask】仮想環境の作成とFlaskのインストール、簡単なWebアプリ作成 - よちよちpython のつづき。

今回は、pythonのWebフレームワークFlaskの render_template モジュールを使って、「pyファイルとWebコンテンツ内容を切り離し、別個にhtmlテンプレートファイルにする方法」です。
内容的には簡単です。直ぐできます。

pyファイルを書き換える
htmlファイルを新規作成する
実行確認

実行環境

前回【WSL/Anaconda/Flask】仮想環境の作成とFlaskのインストール、簡単なWebアプリ作成 - よちよちpythonはWSL:Ubuntuに入れたAnacondaでやったのですが、今回はWindows上に直で入れたAnacondaで行います。

Windows10 Home
Anaconda 4.11.0
Python 3.9.7
VSCode 1.63.2
外部ライブラリ
- Flask 2.0.2
- colorama （Windowsユーザーは、No Module エラーが出れば手動でインストールする。）

バージョン確認はターミナルから以下のコマンドでできます。

# Anacondaのバージョン
PS > conda -V 

# pythonのバージョン
PS > python -V

# VSCodeのバージョン
PS > code --version

# pythonライブラリのバージョン確認等、詳細情報
PS > pip show flask

ディレクトリ構成

プロジェクトフォルダ名「flask_app」の中で作業しております。

./flask_app/
└── app.py

0 directories, 1 file

前回作ったpyファイルが1つある。

手順

最初に書いた通り、今回行うことは

pyファイルを書き換える
htmlファイルを新規作成する
実行確認

pyファイルを書き換える

前回作ったpyファイル内容 (ファイル名 : app.py)

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    html_text = """
        <h1>Hellow Flask !!</h1>
        <p>2行目</p>
        <p>3行目</p>
    """
    return html_text

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

実行するには、

(仮想環境名) PS @プロジェクトフォルダ > python app.py

ブラウザのURL窓に「localhost:5000」「127.0.1:5000」「http://127.0.1:5000」のどれかを入力、アクセスするとFlaskのサーバが立ち上がり app.py のindex関数に書いたものがブラウザに表示される。

もっと豪華なページにしたければ上のコードの index関数のreturn で返している html を豪華に書けばいいのですが、そうするとpyファイルをhtmlが埋め尽くして読みにくくなる。
そこで、pyファイルとhtmlファイルを分けて書きましょう、という方法がとられます。第一、pyファイルにhtmlを書くとVSCodeなんかを使ってる場合は自動入力補完が効きません。分けた方が入力も楽。

py と html を別けるために、app.py ファイルを次のように書き替えます。

# モジュールを追加
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を追加
index関数内の html文を削除
index関数の return に render_template で index.html を返すよう書き換え

これで「index.html」ファイルをレンダリングするように出来ます。
「ルートディレクトリにアクセスした方には「index.html」を読ませる」

その index.html ファイルを次に作ります。

htmlファイルを新規作成

app.py のindex関数のreturnで返した render_template('index.html') のhtmlファイルを作成します。
htmlテンプレートファイルの保存場所
Flaskでは、htmlファイルの保存場所であるディレクトリ名が「templates」フォルダと決まっています。頭文字を大文字で「T」と書いたり最後の「s」が抜けてもエラーが出るので間違えないように。

まずはテンプレートファイル保存用ディレクトリを作成

# プロジェクトフォルダ内にtemplates フォルダを作成
(仮想環境名) PS @プロジェクトフォルダ > mkdir templates

templatesフォルダに空のinde.htmlファイルを作成

templatesフォルダの中にindex.htmlを新規作成します。コマンド(PowerShell)で打つなら

# templatesフォルダ内に 空のindex.html を作成
(仮想環境名) PS @プロジェクトフォルダ > New-Item -type file ./templates/index.html

ここまで済んだら、ディレクトリ構成は次のようになっている。

flask_app/
├── app.py
└── templates
    └── index.html

index.htmlの中身を書く

index.htmlを開いて中身を書いていきます。

<h1>render_templateテスト</h>
<p>成功しました！</p>

ファイルを保存し「Ctrl + s」しましょう。

実行

ここまでで、pyファイルとhtmlファイルの切り分けは完了です。動くかどうか確認します。
ターミナルからapp.py を実行します。そしてブラウザで「http://127.0.1:5000」「127.0.1:5000」「localhost:5000」のどれか（全部同じもの）にアクセスして index.html 通りに表示されれば成功です。