Flaskとは

Flask（フラスコ/フラスク）とは、PythonのWebアプリケーションフレームワークで、小規模向けの簡単なWebアプリケーションを作るのに適しています。
Webフレームワークとは、ウェブサイトやウェブアプリケーションを作るための機能を提供し、ウェブフレームワークを使わない時よりもより容易にWebアプリケーションを作ることができるものです。
ちなみに、PythonにはいくつものWebアプリケーションフレームワークがあり、例えば、Djnago(ジャンゴ)やpyramid、bottleなど他にもありますが、この章では、学習コストの低いFlaskを扱って行きます。また近年では、Gradio（グラディオ）と呼ばれる機械学習モデルのデモを行うWebアプリケーションを簡単に作ることができるライブラリも人気です。Flaskの基本を学んだ後に、Gradioも利用してみてください。

このサイトは、Pythonや生成AIなどを学べるオンラインプログラミングスクール AI Academy Bootcampが運営しています。

Flaskとは
Webアプリの開発をさらに深めたい方へ
オススメ記事

Flaskのインストール

pip install flask

Mac OSの方は、ターミナルを起動し、Windowsの方はコマンドプロンプト(cmd)を起動し、上記のpipコマンドにてflaskをインストールしてください。
インストールが終えたら、実際にインストールが成功したか確認します。

確認のため、Pythonの対話型シェルを起動します。
起動するには、pythonコマンドを入力&実行することで、Pythonの対話型シェル（インタラクティブシェル）に切り替えます。
それでは、以下のコードを実行してみましょう。

python

Pythonの対話型シェル（インタラクティブシェル）で入力&実行する部分は>>>の後からです。
次の>>>部分は入力してなくて大丈夫です。

>>> import flask
>>> flask.__version__
'0.12'

バージョンが表示されればインストール成功です。
ターミナルやコマンドプロンプトは一旦閉じて終了してください。
※ターミナルやコマンドプロンプトを終了する場合は、そのまま閉じるか、exit()コマンドを用いることでも終了可能です。
※表示されるバージョンはインストールした時期によってテキストと異なる場合がございます。

Flaskを動かしてみる

実際にFlask（フラスク）を動かしていきましょう。
下のプログラムをflask_sample.pyという名前でDesktop（デスクトップ）に保存してください。

from flask import Flask
app = Flask(__name__, static_folder='.', static_url_path='')
@app.route('/')
def index():
    return app.send_static_file('index.html')

app.run(port=8000, debug=True)

※Windows OSをご利用の方で、上記コードがエラーとなる場合、
port番号の部分、debugの部分を次のようにしてみてください。

app.run(port=12345, debug=False)

次に、index.htmlファイルを作ります。
拡張子はHTMLファイルですので、「.html」になります。
この際、index.htmlを保存するディレクトリはflask_sample.pyと同じ階層であることに注意してください。
HTMLに関しては、ドットインストールのHTMLなどを利用し予習してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>初めてのFlaskアプリケーション</title>
</head>
<body>
<p>Flask</p>
</body>
</html>

では、ターミナルまたはコマンドプロンプト上で、flask_sample.pyのあるディレクトリまでcdコマンドを用いて移動してみましょう。
＊この時、先ほどFlaskのバージョンを表示しているターミナルやコマンドプロンプトは一旦閉じて、再度ターミナルもしくはコマンドプロンプトを起動し、cdコマンドにより移動してください。

移動方法は、cdコマンドを利用します。
Macの方は、ターミナル、Windowsの方はコマンドプロンプト(cmd)を起動します。

cd ~/Desktop

で移動出来ます。
上記コマンドは、Desktopに保存したflask_sample.pyがある想定です。

では、移動出来ましたら次のコマンドでflask_sample.pyを実行しましょう。

python flask_sample.py

ターミナルもしくはコマンドプロンプトに、様々な出力があり、サーバーが起動した状態になります。
localhost:8000にアクセスし、上記の画面が表示されればOKです。

次に、hello関数を実装してみましょう。
＊Windowsユーザーの方で、app.run()の引数に、port番号を指定した場合、(例えば、app.run(port=12345, debug=False)など)『localhost:数字』の数字の部分を指定したport番号に変えて実行し直してみてください。

以下のコードをapp.run(port=8000, debug=True)の上に追加します。
（この時一番最後の行のapp.run(port=8000, debug=True)の上に記述してください。）

@app.route('/hello/<name>')
def hello(name):
    return name

上記コードはブラウザのURLにてlocalhost:8000/hello/python
と入力し、ブラウザにアクセスすると、次のように画面に表示されます。
(＊上記リンクを飛ぶと環境によっては、真っ白いページになる場合がありますので、その場合リロード（再読み込み）してみてください。)

@app.routeの関数内の<・・・>の部分に任意の名前(ここでは)を記述することで、その名称を次の関数(ここではhello関数)にてroute内の<・・・>で記述した値を引数として利用することが可能になります。
今回は’/hello/’としましたが、<・・・>の・・・の部分は自由な名称をつけることが可能です。

次にルーティングの説明です。
ルーティングとは、URLとFlaskの処理を対応づけることで、URLと関数を紐付けることが出来ます。
Flaskでルーティングを記述するには、route()を用います。
flask_sample.pyの全体像は次のようになります。

import os
from flask import Flask, url_for

app = Flask(__name__)

# ルーティング
@app.route("/hello")
def hello_world():
    return "Hello world"

@app.route("/")
def index():
    return url_for("show_user_profile", username="ai_academy")

@app.route("/user/<username>")
def show_user_profile(username):
    return "UserName: " + str(username)

@app.route("/post/<int:post_id>")
def show_post(post_id):
    return "Post" + str(post_id)


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

プログラムの解説を致します。
まずは、何もrouting設定しなかった場合、show_user_profile()という16行目で定義した関数が走ります。
引数では、username=”ai_academy”が渡され、表示は以下のようになります。
http://127.0.0.1:8000/

次に以下のURLにアクセスしてください。
http://127.0.0.1:8000/user/AI
ここでURLの中にある、AIの部分を変えて挙動を確認してください。

次に、 http://127.0.0.1:8000/hello では、Hello World!が出力されるのをみてください。

次に、型を指定したURL参照をしてみましょう。数値123を他の値に変えることで参考にできます。
URLは http://127.0.0.1:8000/post/123 をみてください。

flask側で型を固定してあるので、違う型のものを入れるとエラーが出るかと思います。
URLは http://127.0.0.1:8000/post/test をみてください。

サーバ側のプログラムをPython(Flask)で記述することで、動的な処理ができるようになります。
なお、「動的な動き」という表現はよく聞きますが、対照的なものとして、「静的な動き」という表現があります。
例えばhtmlファイル(index.html等)は静的なファイルですので、記述されたことが表示されるだけで、動的な動きはしません。
こちらに何かしらの値を、サーバー側から出力させたいときに動的な動きをさせる必要があります。

render_templateによる読み込み

Flaskでは、render_template関数を使う方法でも、htmlファイルを表示させ、htmlファイルに簡単に値を入れることができます。
render_templateを使う場合には、importによる記述と、templatesフォルダを新たに作成しそこにhtmlファイルを置きます。
render_templateを用いる際には、templatesフォルダを作成する必要があり、作成していないとhtmlファイルを読み込むことが出来ませんのでご注意ください。

まずは、階層を以下のように作ってください。

- app.py(flaskでサーバー処理を行うpythonファイル)
- templates(HTMLファイルが沢山入るフォルダ)
　　　 └ index.html
    └form.html

app.pyを以下の内容を記述し、保存してください。

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', message="花子さん")

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

※Windows OSをご利用の方で、上記コードがエラーとなる場合、
port番号の部分、debugの部分を次のようにしてみてください。

app.run(port=12345, debug=False)

また、Jupyter Notebookを用いてFlaskを動作させる場合、
合わせて、if name == “main“:の部分をコメントアウトし次のようにしてみてください。

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html', message="花子さん")

app.run(port=12345, debug=Falase)

続いて、templatesフォルダ内にindex.htmlを作成して以下コードを記述し、保存してください。

<!DOCTYPE html>
<html>
<head>
  <title>flask練習</title>
</head>
<body>
  <h1>こんにちは{{ message }}</h1>
</body>
</html>

では、再度ファイルの構成を確認してみましょう。
上記で作成したコードは次のようになっていますでしょうか?

- app.py(flaskでサーバー処理を行うpythonファイル)
- templates(HTMLファイルが沢山入るフォルダ)
　　　 └ index.html

上記の構成であれば、app.pyを起動し動作確認してみましょう。

Mac OSの方は、ターミナルを起動し、Windowsの方はコマンドプロンプト(cmd)を起動し、以下のコマンドを実行してみましょう。

python app.py

その後、ターミナル（もしくはコマンドプロンプト）の方に、次のようなログが出力されていれば、OKです。

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:8000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 284-231-902

http://127.0.0.1:8000/にアクセスしてみると、以下のように出力がされるはずです。