前回
python webアプリ入門(1)
https://qiita.com/tom_sakaguchi/items/5550e50ab2a88f2c5f38
今回の目標
前回(ETロボコンに出たりでものすごく間が空いてしまいましたが・・・)は、簡単にflaskでwebアプリが作れるかどうかだけを試しました。ただ、最終的に何か実用的なものを作っていきたいという思いもあるので、もっと色々な機能を追加していこうかと思います。
あと、前回の記事を見返しましたが、結構穴だらけなのでその辺も適宜修正していこうと思います。
さて、今回の本題ですが、今回はテキスト入力機能を追加してみようと思います。ただ、単純に文字を入力できるだけではあまり楽しくないので、ちょっとした別の機能もつけてみようかと思います。
補足；今回から開発環境をMACにしました。開発環境の構築は以下を参考にしました。
(この記事に環境構築方法を書いたところで以下の参考リンクのコピペになりそうなのでやめておきます・・・)
https://www.simonsnote.com/entry/python-environment
ということで早速始めていきたいと思います。
テキスト入力
まず、今回作った「server.py」は以下のようになります。
（私の趣味で申し訳ないのですが、今回は入力した番号の値と同じ背番号の中日ドラゴンズの選手名を出すプログラムにしました。）
# server.py
from flask import Flask
from flask import render_template, request
list = ["高松", "友永", "荒木", "高橋", "藤井", "阿部"]
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"]) # ①GET,POST メゾッドを受け取れるように変更
def index():
if request.method == "GET": # ②GETメゾッドが受け取った時の処理
return """
下に５以下の背番号を入力してください。中日ドラゴンズの選手名を出力します
<form action="/" method="POST">
<input name="num"></input>
</form>"""
else: # ③POSTメゾッドが受け取った時の処理
if int(request.form["num"]) <= 5:
return """
{}は{}です！
<form action="/" method="POST">
<input name="num"></input>
</form>""".format(str(request.form["num"]), list[int(request.form["num"])])
else: # 簡単なエラー処理
return """
不正な入力です！
"""
if __name__ == '__main__':
app.run()
前回のソースからの変更をコメントにて番号をふったので、追って順に書いていこうと思います。
①これは、app.route内の「 methods=["GET","POST"] 」でhtmlのGETメゾッド、POSTメゾッドを受け取れるようにしています。これをやっておかないと入力フォームを作ったところでデータを送れないようです（この辺りは私もあまり詳しくないので以下の参考文献の方を参考にしてください）。
参考文献：https://qiita.com/nagataaaas/items/3116352da186df102d96
②これはGETメゾッドを受け取った際の処理です。はじめにブラウザでアクセスされた時に表示する画面の処理です。簡単な入力フォームの説明と入力フォームを作ります。
③これはPOSTメゾッドを受け取った際の処理です。入力された番号が背番号の選手の名前を表示します。
(続いて入力できるように、GETメゾッドを受け取った際の処理と同様に入力フォームとその説明も表示されます。)
動作確認
早速動作確認してみます。MACになったので以下のコマンドで動作しました。
$python server.py
* Serving Flask app "server" (lazy loading)
* Environment: production
WARNING: Do not use the development server in a production environment.
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」にログインしてみると、以下の表示になりました。成功のようです。
3を入力してreturnを押してみると・・・
問題ないようです！
最後に
個人的には、いつもCやC++、アセンブラばかりやっているのでなかなか慣れませんが、これからは折れずに更新していこうかと思います。
次はhtmlとの連携や画像のアップデートや画像処理もちょっとだけ入れていきたいです。