メッチャ手軽にウェブアプリ構築！Flask (Python ウェブフレームワーク) を初めて触る!

早くウェブアプリを作りたい！！

でも、初めてウェブアプリを作成をするにあたりどのウェブフレームワーク使えば良いんでしょ？

python 勉強していますので、一先ずの調査で Flask を触ってみることにしました！

(参考にした比較サイト: https://techacademy.jp/magazine/15502)

実際に使ってみるとすごい使いやすかったので、「何ができるの？」「どう使いやすいの？」が気になっている方に Flask の良さを紹介していきます！

コンテンツ内容

1 実行環境とファイル構成
- 1.1 実行環境
- 1.2 ファイル構成
2 Flask で色々なアウトプットをしてみる
3 まとめ

実行環境とファイル構成

こちらが利用した環境とファイル構成になります。

実行環境

基本的には Python が動く環境であれば、問題ありません。
念のために、私の環境はこちらです。

Windows 7 SP1 x64
VSCode 1.23.0
Python 3.6.5
Flask 1.0.2 (コマンドプロンプトから pip install Flask でインストールできます。)

ファイル構成

アプリを構築中には、徐々にファイルやフォルダを増えていきます。
こちらが最終的に出来上がるファイル構成です。

[]
　├─ application.py
　│　(Flask アプリのメインファイル)
　│
　├─ send_requests.py
　│　(POST リクエストをし、レスポンス結果を確認するファイル)
　│
　└─[] templates
　　　└─ index.html (jinja テンプレート)

Flask で色々なアウトプットをしてみる

Flask というものに慣れるために、シンプルなアウトプットから、jinja テンプレートを使ったアウトプットまで幅広く試していきます！

ベースとなるコード

# Flask クラスインポート
from flask import Flask

# 初期設定 (ほとんどのケースで必要)
app = Flask(__name__)

# # # # # # # # # # # # # # # # 
# ここにページの処理を書いていく #
# # # # # # # # # # # # # # # #

# この application.py が直接呼ばれた場合に、デバッグモードで実行する
if __name__ == '__main__':
    app.run(debug=True)
    # デフォルトでは、host='127.0.0.1' & port=5000 という指定になっていますが、もちろん変更も可能です。
    # デフォルトでは app.run(debug=True, host='127.0.0.1', port=5000) として実行されています。

実際には app.run() だけで動作するのですが、”debug=True” 引数を追加することで、何かしらのエラーが発生したときにどのようなエラーなのか見ることができ、大変便利です。こちらがエラーが発生した際の表示です。

「name_method() で yourname が引数指定されていない」ということがこのエラーからわかります。

気をつけてほしいのが、実運用では何かしらのエラーで内部情報を晒したくないので、開発時のみ使用するようにしましょ！

それでは「ここにページの処理を書いていく」で何を書くか見ていきましょ！

コード: TOP ページで「Hello World!」を表示

 # [application.py] ファイル
@app.route('/')
def index():
    return '<h1>Hello World!</h1>'

@app.route('/') でトップページを意味し、トップページにアクセスがあれば、index() 関数を実行する (Hello World! を出力する) という意味になります。

コード: 特定ページでインプットに合わせて表示を変える

# [application.py] ファイル
@app.route('/name/<yourname>')
def name(yourname):
    return '<h1>Hello {}!</h1>'.format(yourname)

@app.route('/name/<yourname>') で “yourname” を変数として扱うことを宣言し、URL にインプットされた変数を表示するという関数になります。

入力・出力例:

コード: HTTP リクエストの方法を変える

# [application.py] ファイル
@app.route('/name_method', methods=['POST'])
def name_method():
    return '<h1>Hello World!</h1>'

methods=['POST'] を追加することで、POST リクエストのみ受けと指定することができます (他にも GET, PUT, DELETE などがある) 。デフォルは “GET” なのですが、”POST” のみと指定していますので、通常のリクエスト (“GET”) をするとこのようになります。

それでは POST のリクエストを “send_requests.py” から送って結果を確認してみましょ！

少々ややこしいので、処理をまとめます。

application.py を実行し、サーバーを起動する
send_requests.py から “http://127.0.0.1:5000/name_method/” に対し、”username” = “mike” というデータを “POST” リクエストで送信
サーバー (application.py) が @app.route(/name_method) に関係する関数 (“def name_method()”) を実行
その関数 (“def name_method()”) では、送られてきた情報 (“username” = “john”) から “username” に入っている値 (“john”) をテキストで取得
取得したテキストをリクエスト元にレスポンス (= あんたが送ってきたデータはこれだよ！)
send_requests.py 側でレスポンス結果を “print” 関数で出力 (“john”)

という流れになります。

# [application.py] ファイル
from flask import request

@app.route('/name_method/', methods=['POST'])
def name_method():
    return str(request.values['username'])

POST リクエストはブラウザから簡単にできないので、Python の requests モジュールを使います。

# [send_requests.py] ファイル
import requests

# post リクエストを出し、そのレスポンス結果を "r" に入れる
r = requests.post(
    'http://127.0.0.1:5000/name_method/', data={'username': 'john'}
)

# レスポンス結果が入っている "r" の文字列を取得
print(r.text)

分かりにくかったら申し訳ありません。
実際には、DB と絡めてこのような処理を行います。

GET: DB 内のデータを取得
POST: データを DB に登録
PUT: DB 内のデータを更新
DELETE: DB 内のデータを削除

DB を使った実際のやり方は後日記事にします。そこでもう少し理解は深まると思います！

コード: テンプレートを使って表示を変える

Flask をインストールするとデフォルトで jinja テンプレートが使えるようになっています。このテンプレートを使うことで HTML 内で、IF 文や For 文を定義する事ができます。

# [application.py] ファイル
from flask import render_template

@app.route('/my-jinja-template')
def my_jinja_template():
    names = ['John', 'Mike', 'Carl', 'David', 'Lisa']
    return render_template('index.html', names=names)

render_template('index.html', names=names) で index.html に python 側で定義した names を index.html 内の names に値を渡しています。

<!-- template\index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>First Jinja Template</title>
</head>
<body>
    <h1>If and Loop Example</h1>
    {%if names %}
   
    {% for name in names %}
        <h2>Hello {{ name }}!</h2>
    {% endfor %}

    {% else %}

    <h2>Hello World!</h2>

    {% endif %}
</body>
</html>

HTML 側では、受け取った names に値があるかを IF 文 ({% if names%}) で確認し、あれば {% for name in names %} で1つづつ値を取得し H2 ヘッダーに出力しています。

入力・出力例:

このようにすることで、条件に合わせて HTML ファイル変更するのではなく、同一 HTML で出力内容を変更できるようになり、ファイルハンドリングが楽になります。

まとめ

いかがでしたでしょうか？

一見難しく感じるかも知れませんが、一度コードを書くと Flask がすごいシンプルなフレームワークだと気づきます。

本格運用では Django を使うと思いますが、サクッとウェブアプリ作成するには Flask はとても良いフレームワークだと思います。

ぜひお試しください！！

実行環境とファイル構成

実行環境

ファイル構成

Flask で色々なアウトプットをしてみる

ベースとなるコード

コード: TOP ページで 「Hello World!」を表示

コード: 特定ページでインプットに合わせて表示を変える

コード: HTTP リクエストの方法を変える

コード: テンプレートを使って表示を変える

まとめ

Reader Interactions

コメントを残す コメントをキャンセル

コード: TOP ページで「Hello World!」を表示

コメントを残すコメントをキャンセル