Flask による Web アプリケーション制作

アプリケーション開発に必要なコードや機能をまとめたライブラリを アプリケーションフレームワークという。
本稿では、Python の Web アプリケーションフレームワークである flask を用いて、簡単なデータベース管理アプリケーションを制作してみた。

環境

macOS Catalina 10.15.1

アプリケーションの実装内容

Flask の使い方を習得すべく3つのパートに分けた。

Part1(本稿)

Web ブラウザの表示
Templates フォルダの html ファイルと連結

Part2(次稿)

データベース SQLite との連結
Bootstrap を用いた画面表示

Part3（次々稿）

POSTメソッドを用いた新規ユーザー登録

Part1のフォルダ構成

全てのコードは run.py によって実行される。

root
|--codes
| |--view.py
| |--templates
| | |--index.html
|--run.py

Flask のインストールとコマンドの実行

Flask は次のコマンドでインストールする。

ターミナル

pip install flask

ルートディレクトリにて、次のコマンドで run.py を実行する。

ターミナル

python run.py

Web ブラウザの表示

run.py のコードを以下に示す。コードに関する詳細はこちらを参考にした。

run.py

# codes/view.py にある app という変数を呼び出す。
# app には Flask モジュールが提供している flask クラスから作り出されたインスタンスが代入される。
from codes.view import app

# run.py がモジュールとして呼び出されたときは
# __name__ = run.py となり app は実行されない。
if __name__ == "__main__":
    app.run()

これにより、view.py で呼び出される app が実行される。
次に view.py のコードを以下に示す。

view.py

from flask import Flask

# Flask クラスから作成された インスタンスを app に代入する。
app = Flask(__name__)

# 　「/」へアクセスがあった場合に、"Hello World"の文字列を返す。
# 　この行が無いと Web に表示されない。
@app.route("/")

# hello 関数を定義する。インデントが戻るまでが関数に含まれる。
def hello():
    return "Hello World"

# 　debug=True で、ソースコード書き換えのたびに app を実行しなくても確認できる。
if __name__ == "__main__":
    app.run(debug=True)

run.py のターミナル出力結果が以下のようになっていれば成功である。

 * Serving Flask app "app.app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

上記の http://127.0.0.1:5000/ にアクセスすると 'Hello World' が表示される。

Templates フォルダの html ファイルと連結

では、Templates フォルダの html ファイルをブラウザに表示させるように、view.py を編集する。

view.py

# 　render_template は HTML を表示させるための関数である。
from flask import Flask,render_template, 

app = Flask(__name__)

# /index へアクセスがあった場合に、templates/index.html を返す。
@app.route('/index')

# index 関数を定義する。'キカガク' は html 内の name に代入される。
def index():
	name = 'キカガク'
	return render_template('index.html', name=name)

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

templates フォルダに以下の index.html を作成する。
templates フォルダは view.py と同じ階層に作ること。template (単数形) のように綴りが異なると flask は読み取れずエラーが起こる。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content = "width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<hl>Flask チュートリアル</hl>
	<p>名前: {{name}}</p>
</body>
</html>

http://127.0.0.1:5000/index にアクセスして以下がブラウザに表示されていれば成功である。

Flask チュートリアル
名前: キカガク

参考

参考：データ収集からWebアプリ開発まで実践で学ぶ機械学習活用ガイドの chapter 3-5