住所録を作る

Flaskの基礎を読んだ人は、FlaskでWEBページを切り替える方法を理解できたと思います。それではもう少し実用的な、住所録アプリを作ってみましょう。

ソースコード

app.py

# coding: utf-8

# いくつか関数が必要になるので import に追加してあります。
from flask import Flask, render_template, request, redirect, url_for
 
app = Flask(__name__)

# グローバル変数address_bookにデータを持ちます。
# [名前,住所]を要素とする二次元配列となります。
address_book = []

# 初期画面ではその時点での住所録データを表示します。
@app.route('/')
def index():
    # address_book=address_book によって現在のデータをＨＴＭＬテンプレートに渡します。
    return render_template('index.html', page='menu', address_book=address_book)

# 住所入力の画面を表示します。 
@app.route('/input')
def input():
    return render_template('index.html', page='input')

# 入力された住所データを受け取ります。 
@app.route('/checkin', methods=['GET', 'POST'])
def checkin():
    try:
        if request.method == 'POST':
            name = request.form['name']
            address = request.form['address']
        else:
            name = request.args.get('name', '')
            address = request.args.get('address', '')
    except Exception as e:
        return str(e)

    # データをグローバル変数に保存します。
    global address_book
    address_book = address_book + [[name, address]]

    # 初期画面に遷移します。
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

# coding: utf-8

# いくつか関数が必要になるので import に追加してあります。

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# グローバル変数address_bookにデータを持ちます。

# [名前,住所]を要素とする二次元配列となります。

address_book = []

# 初期画面ではその時点での住所録データを表示します。

@app.route('/')

def index():

# address_book=address_book によって現在のデータをＨＴＭＬテンプレートに渡します。

return render_template('index.html', page='menu', address_book=address_book)

# 住所入力の画面を表示します。

@app.route('/input')

def input():

return render_template('index.html', page='input')

# 入力された住所データを受け取ります。

@app.route('/checkin', methods=['GET', 'POST'])

def checkin():

try:

if request.method == 'POST':

name = request.form['name']

address = request.form['address']

else:

name = request.args.get('name', '')

address = request.args.get('address', '')

except Exception as e:

return str(e)

# データをグローバル変数に保存します。

global address_book

address_book = address_book + [[name, address]]

# 初期画面に遷移します。

return redirect(url_for('index'))

if __name__ == '__main__':

app.run(debug=True)

index.html

<!--index.html-->
<!DOCTYPE html>
<html>
 
<head>
    <title>Flask Sample</title>
</head>
 
<body>
    <h2>Flaskテスト</h2>
 
    {% if page == "menu" %}
    これはFlaskのテストです。</br>

    <table border="1">
        <th>名前</th><th>住所</th>
        {% for record in address_book %}
        <tr>
            <td>{{ record[0] }}</td><td>{{ record[1] }}</td>
        </tr>
        {% endfor %}
    </table>

    <a href="/input">住所録を入力。</a>

    {% elif page == "input" %}
    <form method="POST" action="/checkin">
        <div>名前：<input type="text" name="name"></div>
        <div>住所：<input type="text" name="address"></div>
        <input type="submit" value="送信">
        <input type="reset" value="取消">
    </form>

    {% else %}
    ここには来ないはずです。
 
    {% endif %}
 
</body>
 
</html>

<!DOCTYPE html>

<html>

<head>

<title>Flask Sample</title>

</head>

<body>

<h2>Flaskテスト</h2>

{% if page == "menu" %}

これはFlaskのテストです。</br>

{% for record in address_book %}

<tr>

<td>{{ record[0] }}</td><td>{{ record[1] }}</td>

</tr>

{% endfor %}

</table>

<a href="/input">住所録を入力。</a>

{% elif page == "input" %}

</form>

{% else %}

ここには来ないはずです。

{% endif %}

</body>

</html>

躓きそうなところを説明しておきます。

    <table border="1">
        <th>名前</th><th>住所</th>
        {% for record in address_book %}
        <tr>
            <td>{{ record[0] }}</td><td>{{ record[1] }}</td>
        </tr>
        {% endfor %}
    </table>

{% for record in address_book %}

<tr>

<td>{{ record[0] }}</td><td>{{ record[1] }}</td>

</tr>

{% endfor %}

</table>

ここは住所録を表組みにして表示しています。HTMLで表を描く方法が分からなければ、<table>、<th>、<tr>、<td> 等のタグについて調べてください。{ } で囲まれた部分は Jinja2 によってHTMLが加工されます。Pythonプログラムの render_template( 〜, address_book=address_book) の関数を通して住所録データがHTMLに渡され、HTML側では Jinja2 経由で address_book という変数として参照できます。address_book は住所録レコードの配列なので {% for record in address_book %} の for文で１レコードずつ処理を行い、名前と住所をそれぞれ {{ record[0] }}、{{ record[1] }} で参照しています。

    <form method="POST" action="/checkin">
        <div>名前：<input type="text" name="name"></div>
        <div>住所：<input type="text" name="address"></div>
        <input type="submit" value="送信">
        <input type="reset" value="取消">
    </form>

</form>

この部分は純粋に HTML の構文で、名前、住所の入力欄とボタンを２個実装しています。分からなければ、HTML を勉強してください。

アプリケーションの実行

３つのファイルを以下のように配置してください。Flask以外に追加で必要なモジュールはありませんので、requirements.txt は以前のファイルがそのまま使えます。

app
   +-- app.py
   +-- requirements.txt
   +-- templates
           +-- index.html

app

+-- app.py

+-- requirements.txt

+-- templates

+-- index.html

以前やったようにプログラムを実行してください。

$ cd app
$ virtualenv sample_env
$ source sample_env/bin/activate
$ pip3 install -r requirements.txt
$ python3 app.py

$ cd app

$ virtualenv sample_env

$ source sample_env/bin/activate

$ pip3 install -r requirements.txt

$ python3 app.py

localhost:5000 にアクセスして、いくつかデータを入力するとこのようになります。