気ままに趣味旅行

面白いコト「拡がる／拡げる」

トップ > Python > WEBアプリケーションを作る3ーFlask編ーくじ引きアプリ

WEBアプリケーションを作る3ーFlask編ーくじ引きアプリ

Python

どうもhiroakiです。

 

今回は、Flaskを使ったWEBアプリケーションを作る方法を紹介します。前回の続きになりますので、読まれていない人は前回の記事もご参考ください。HTMLとCSSについてもまとめています。

 

Flaskを使ったくじ引きWEBアプリ

これから、Flaskを使ったくじ引きアプリを作っていきます。以下の【完成イメージ】から、作成するものを大まかにつかんでください。これを作ります。

【完成イメージ】

▼index.html

f:id:hiroakies4463:20181208175833j:plain

▼result.html(/result/1/)

f:id:hiroakies4463:20181208175851j:plain

▼output.html

(/output/1/?name=hiroaki)

f:id:hiroakies4463:20181208175904j:plain

【フォルダツリー】
templates/
  ├index.html
  ├output.html
  └result.html
tests
  └test.py
main.py
requirements.txt

  1. < -- templatesファイル内のindex.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>選択 - くじ引き</title>
  7. </head>
  8. <body>
  9. <h1>くじ引き</h1>
  10. <p>番号を選んで果物を受け取りましょう。</p>
  11. <ul>
  12. <li><a href="/result/1/">1番</a></li>
  13. <li><a href="/result/2/">2番</a></li>
  14. <li><a href="/result/3/">3番</a></li>
  15. </ul>
  16. </body>
  17. </html>
  1. < -- templatesファイル内のresult.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>結果 - くじ引き</title>
  7. </head>
  8. <body> <h1>結果</h1> <p><strong> {{ fruit }} </strong>が当たりました。</p>
  9. <form method="get" action="{{ url_for('output', fruit_no=fruit_no) }}">
  10. <p>名前：<input type="text" name="name" size="40"></p>
  11. <button type="submit">送信</button>
  12. </form>
  13. <p><a href="/">戻る</a></p>
  14. </body>
  15. </html>
  1. < -- templatesファイル内のoutput.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>お名前の表示</title>
  7. </head>
  8. <body>
  9. <p>「{{ name }}」は、 <strong>{{ fruit }}</strong>を受け取りました。</p>
  10. <p><a href="/">戻る</a></p>
  11. </body>
  12. </html>
  1. #main.py
  2. from flask import Flask, render_template, request
  3. app = Flask(__name__)
  4. fruits = {'1': 'もも', '2': 'りんご', '3': 'みかん'}
  6. @app.route("/")
  7. def index():
  8.     return render_template('index.html')
  10. @app.route("/result/<fruit_no>/")
  11. def result(fruit_no):
  12.     return render_template('result.html',
  13.     fruit=fruits[fruit_no],
  14.     fruit_no=fruit_no)
  16. @app.route("/output/<fruit_no>/")
  17. def output(fruit_no):
  18.     your_name = request.args.get('name','')
  19.     return
  20.     render_template('output.html', name=your_name, fruit=fruits[fruit_no])

くじを選ぶ画面では、クエリストリングではなく /result/1/ とアドレスを指定しています。サーバー側は ＠app.route("/result/<fruit_no>") と指定します。これで /result/1/ と指定すると result 関数の引数 fruit_no に 1 が代入されます。

名前を送信するアドレスを <form> タグの action 属性に指定します。ここでurl_for 関数を使います。引数に関数名を入れると、route メソッドで指定されたアドレスが戻り値になります。また、第２引数に関数の引数に代入する値を指定できます。

action="{{ url_for('output', fruit_no=fruit_no) }}" と指定すると、 main.py の中から output 関数を探します。fruit_no=fruit_no の右側の fruit_no は関数 result から渡された値 1 です（main.py14行目）。そして、output 関数に指定されているアドレス通りに/output/1/ というアドレスが作成されます。

 

他のフォルダについての解説は次回以降に回したいと思います。

 

POSTでデータを送信する

前回、<form>タグのmethod属性にはgetとpostを指定できるとお伝えしました。覚えていますか。ちなみに、postでのデータ送信はgetとほとんど同じです。

これまで、request.args.get() で、クライアント（ブラウザ）から渡されたデータをサーバーが受け取っていました。GETとPOSTでは、Flaskで受け取る際のコードが変わります。POSTではformオブジェクトを通じて取得します。

送信方法 Flaskのコード 
 GET request.args['name'] 
 POST request.form['name'] 

例えば、「templatesファイル内のresult.html」の9行目のmethod属性を「method="post"」と変更し、「main.py」の16行目を「@app.route("/output/<fruit_no>/", methods=['POST'])」、18行目を「your_name = request.form['name']」と変更してみてください。

すると、先ほどと同じものが出てきますね。

しかし、URLを見てみてください。GETと違い、入力時のクエストリングが表示されていないことが確認できます。

 

また、何かを入力する際は、GETよりPOSTが適しています。HTTPメソッドであるgetとpostの違いについて以下にまとめているので、簡単に押さえましょう。

GET...Webサーバーに対してヘッダーとコンテンツを双方をリクエスト
POST...Webサーバーに対して新しいデータを送信

例えば、ブラウザーでURLを入力してWebページを表示する時は「GET」を利用します。GETはサーバーにあるコンテンツを取得する場合に使われます。

例えば、クライアントからデータを送りたい場合には「POST」を利用します。良くWebページに設置されてるお問い合わせフォームのように、主にデータをWebサーバーへ送信する目的で利用されます。

 

 

今回は以上です。次回は上記POSTとHTTPメソッドについて少し補足していきます。

もし不明点等ありましたら、気軽にコメントください。一緒に頑張りましょう。

 

では。