Flaskでフォーム送信部分を実装しよう
それでは、さっそくフォーム送信部分を実装しましょう。
仕様
- フォームには、ツイッターのID（screen_name）を入れられます
- screen_nameを送信すると、Twitter APIからそのscreen_nameのユーザーを取得します
- ユーザーから、投稿のいいね数とリツイート数を取得します
このレッスンでは、フォームに入れたツイッターIDを送信すると、そのIDをそのまま返してくれるように、HTMLとFlaskのフォーム送信部分の実装を入れます。
HTMLの実装
HTML部分では、Bootstrapを利用して、以下のような見た目を作っていきます。
HTMLの実装部分は、以下のコードになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrapの基本テンプレート</title>
<!-- ここがBootstrapのCDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css";; rel="stylesheet">
<!-- ここにstylesheetを追加 -->
<link rel="stylesheet" href="/static/css/style.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>;;
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>;;
<![endif]-->
</head>
<body class="bg-gray">
<main>
<div class="container">
<!-- 検索フォーム -->
<div class="row">
<div class="col-md-12 p-2">
<h1><a href="/" class="no-decoration">Toptweets</a></h1>
<p>ツイッターのIDを入れると、直近のいいね数とリツイート数、最もリツイートされたツイートが一覧できます。</p>
<form class="form-inline" method="post">
<div class="form-group">
<label class="sr-only" for="screen_name"></label>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input id="screen_name" name="screen_name" placeholder="ここにツイッターのIDを入力してください。" type="text" class="form-control">
</div>
<button type="submit" class="btn btn-primary">取得する</button>
</div>
</form>
{% if screen_name %}
<p>{{screen_name}}</p>
{% endif %}
</div><!-- col-md-12 -->
</div><!-- row -->
</div><!-- container -->
</main>
<! -- ここがBootstrapのCDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
詳細について解説します。
#1 FromタグでPostリクエストをおくる
formタグで、postリクエストを送ります。
<form class="form-inline" method="post"> <!-- #1 -->
#2 Formで送信する値を設定する
次に、送信する値の部分を設定します。Flaskでは、inputタグのname属性から、データを取得することになります。
<input id="screen_name" name="screen_name" placeholder="ここにツイッターのIDを入力してください。" type="text" class="form-control"> <!-- #2 -->
#3 Formで送信する
最後に、submitタグを利用して、送信します。
<button type="submit" class="btn btn-primary">取得する</button> <!-- #3 -->
#4 screen_nameが存在したら、screen_nameを返すようにする
以下のコードの部分で、screen_nameが存在する場合は、screen_nameを返すように処理しています。
{% if screen_name %}
<p>{{screen_name}}</p>
{% endif %}
Flaskでは、{%%}の処理で、計算式を扱います。また、{{}}の処理で、実際に文字の出力を行います。
Flaskの実装部分を確認してみよう
次に、Flaskの実装部分をみていきましょう。
from flask import Flask, render_template, request #1 requestをインポート
app = Flask(__name__)
@app.route('/', methods = ["GET" , "POST"]) #2 GETとPOSTをリクエストできるようにする
def index():
if request.method == 'POST': #3POSTの処理
screen_name = request.form['screen_name'] #4 formのname属性を取得
return render_template('index.html', screen_name=screen_name) #5 screen_nameを代入
return render_template('index.html') #6 GETの処理
if __name__ == '__main__':
app.run(host = '0.0.0.0', port = 50000, debug=True)
#1 まず、Formのデータを取得することができる、flaskのrequestモジュールをインポートします。
#2 次に、GETリクエストとPOSTリクエストの両方を受け付けられることを明示的に記載します。
#3では、POSTリクエスト、すなわちフォームを送信した時の処理を、以下のコードで実装します。
#4では、フォームのname属性がscreen_nameのものを取得して、その値をscreen_nameに代入します。
#5では、出力するHTMLと、送信する変数名を指定します。今回の場合は、screen_nameという値に、代入したscreen_nameを引数に入れます。
render_template関数の引数には、任意の引数を指定することができます。
フォーム送信以外の場合は、ただのindex.htmlを返しますようにします。
return render_template('index.html') #GETの処理
最後に動くかどうかみてみましょう。
フォームを送信すると、以下のように文字列が反映されていればOKです。
