Flaskとは、Pythonで開発する際のWebフレームワークの1つで、HTMLファイル内ではテンプレートエンジンである Jinja2を利用することで、条件に基づいて表示を分岐することができる。
今回は、入力画面・確認画面・完了画面の3画面を含み、HTMLオブジェクトとしてテキストボックス・ラジオボタン・チェックボックス等を含むWEBアプリケーションを作成してみたので、そのサンプルプログラムを共有する。
前提条件
下記記事のFlaskによる環境構築と実装が完了していること。
Pythonフレームワーク「Flask」を利用したWebアプリケーションを作成してみたFlaskは、Pythonで開発する際のWebフレームワークの1つで、マイクロフレームワーク(軽量で必要最低限の機能が搭載されているフレ...
サンプルプログラムの作成
作成したサンプルプログラムの構成は、以下の通り。
なお、上記の赤枠は、前提条件のプログラムから追加・変更したプログラムである。
input.htmlの内容は以下の通りで、入力画面を作成している。なお、(確認画面から戻ってきて)form_dataが存在する場合は、その値を表示するようにしている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>入力画面</title> </head> <body> 下記必要事項を記載の上、「確認」ボタンを押下してください。 <br/><br/> <form action="/confirm" method="post"> <table> <!-- 名前 --> <tr> <td align="left" valign="top">名前：</td> <td> <input type="text" id="name" name="name" {% if form_data %} value="{{ form_data.name }}" {% endif %} /> </td> </tr> <!-- 生年月日 --> <tr> <td align="left" valign="top">生年月日：</td> <td> <input type="text" id="birthYear" name="birthYear" size="4" maxlength="4" {% if form_data %} value="{{ form_data.birthYear }}" {% endif %} />年 <select name="birthMonth" id="birthMonth"> <option value=""></option> {% for month in range(1, 12+1) %} <option value="{{ month }}" {% if form_data and form_data.birthMonth == month|string %} selected {% endif %}> {{ month }} </option> {% endfor %} </select>月 <select name="birthDay" id="birthDay"> <option value=""></option> {% for day in range(1, 31+1) %} <option value="{{ day }}" {% if form_data and form_data.birthDay == day|string %} selected {% endif %}> {{ day }} </option> {% endfor %} </select>日 </td> </tr> <!-- 性別 --> <tr> <td align="left" valign="top">性別：</td> <td> <input type="radio" id="sex_1" name="sex" value="1" {% if form_data and form_data.sex=='1' %} checked {% endif %} /> <label for="sex_1">男</label> <input type="radio" id="sex_2" name="sex" value="2" {% if form_data and form_data.sex=='2' %} checked {% endif %} /> <label for="sex_2">女</label> </td> </tr> <!-- メモ --> <tr> <td align="left" valign="top">メモ：</td> <td> <textarea rows="6" cols="40" id="memo" name="memo">{% if form_data %}{{ form_data.memo }}{% endif %}</textarea> </td> </tr> <!-- 入力確認 --> <tr> <td align="left" valign="top">入力確認：</td> <td> <input type="checkbox" id="checked" name="checked" {% if form_data and form_data.checked=='on' %} checked {% endif %} /> <label for="checked">確認済</label> </td> </tr> </table> <br/><br/> <input type="submit" value="確認" /> </form> </body> </html> |
また、confirm.htmlの内容は以下の通りで、確認画面を作成している。入力画面の値を表示すると共に、他画面にhidden属性で各項目値を送信 できるようにしている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="../static/demo.js"></script> <title>確認画面</title> </head> <body> <p>入力内容を確認し、問題なければ「送信」ボタンを押下してください。</p> <form> <table border="0"> <tr> <td align="left" valign="top">名前： </td> <td>{{ form_data.name }}</td> </tr> <tr> <td align="left" valign="top">生年月日： </td> <td> {% if form_data.birthYear != '' and form_data.birthMonth != '' and form_data.birthDay != '' %} {{ form_data.birthYear }}年{{ form_data.birthMonth }}月{{ form_data.birthDay }}日 {% else %} 不明 {% endif %} </td> </tr> <tr> <td align="left" valign="top">性別： </td> <td> {% if form_data.sex == '1' %} 男 {% elif form_data.sex == '2' %} 女 {% else %} 不明 {% endif %} </td> </tr> <tr> <td align="left" valign="top">メモ： </td> <td> <!-- テキストエリアの改行コードを変換し、改行された状態で表示 --> {{ form_data.memo.replace("\r\n", "<br>") | safe }} </td> </tr> <tr> <td align="left" valign="top">確認チェック： </td> <td> {% if form_data.checked == 'on' %} 確認済 {% else %} 未確認 {% endif %} </td> </tr> </table> <br/><br/> <input type="button" value="送信" onclick="send()" /> <input type="button" value="戻る" onclick="back()" /> <!-- 次画面で利用できるよう、hidden属性で、入力画面の各項目値を送信 --> <input type="hidden" id="name" name="name" value="{{ form_data.name }}" /> <input type="hidden" id="birthYear" name="birthYear" value="{{ form_data.birthYear }}" /> <input type="hidden" id="birthMonth" name="birthMonth" value="{{ form_data.birthMonth }}" /> <input type="hidden" id="birthDay" name="birthDay" value="{{ form_data.birthDay }}" /> <input type="hidden" id="sex" name="sex" value="{{ form_data.sex }}" /> <input type="hidden" id="memo" name="memo" value="{{ form_data.memo }}" /> <input type="hidden" id="checked" name="checked" value="{{ form_data.checked }}" /> </form> </body> </html> |
さらにcomplete.htmlの内容は以下の通りで、完了画面を作成している。
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>完了画面</title> </head> <body> お申し込みが完了しました。 </body> </html> |
また、views.pyの内容は以下の通りで、各画面でボタンが押下された場合の処理を定義している。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | from demo import app from flask import render_template, request # 初期表示処理 @app.route("/") def index(): return render_template("input.html") # 確認画面遷移処理 @app.route("/confirm", methods=["POST"]) def confirm(): return render_template("confirm.html", form_data=request.form) # 確認画面_完了画面遷移処理 @app.route("/send", methods=["POST"]) def send(): return render_template("complete.html") # 確認画面_戻るボタン押下処理 @app.route("/back", methods=["POST"]) def back(): return render_template("input.html", form_data=request.form) |
さらに、demo.jsの内容は以下の通りで、確認画面で各ボタンが押下された場合の、views.py内のメソッド呼出を行っている。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 'use strict'; // 確認画面_送信ボタン押下処理 function send(){ let form = document.getElementsByTagName("form")[0]; form.action="/send"; form.method="post"; form.submit(); } // 確認画面_戻るボタン押下処理 function back(){ let form = document.getElementsByTagName("form")[0]; form.action="/back"; form.method="post"; form.submit(); } |
その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/python/tree/master/make-flask-web-somescreen/
フリエン(furien)は多くの案件を保有しフリーランス向けサービスも充実しているエージェントだったフリエン(furien)は、ITフリーランス（個人事業主）エンジニア専門のエージェントであるアン・コンサルティング株式会社が運営する業界...
サンプルプログラムの実行結果
サンプルプログラムの実行結果は、以下の通り。
1) コマンドプロンプトでserver.pyが入っているフォルダに移動し、server.pyを実行する。
2) Webブラウザで「http://127.0.0.1:5000/」とアクセスすると、以下のように、入力画面が表示される。
3) 以下のように、入力画面で各項目を指定し「確認」ボタンを押下すると、確認画面に入力画面の内容が表示される。さらに「戻る」ボタンを押下すると、入力画面に戻り入力値が復旧されることが確認できる。
4) 以下のように、メモを入力しないで「確認」ボタンを押下した場合も、確認画面に入力画面の内容が表示される。さらに「送信」ボタンを押下すると、完了画面に遷移することが確認できる。
要点まとめ
- Flaskでのルーティング(リクエスト先のURIと実際に処理する関数を紐づけること)は、views.py内で@app.route()関数を利用することで実現できる。
- Flask のHTMLファイル内ではテンプレートエンジンである Jinja2を利用することで、条件に基づいて表示を分岐することができる。
