FlaskアプリケーションでWebフォームを使用する方法

著者は、 Write for DOnations プログラムの一環として、 Free and Open SourceFundを選択して寄付を受け取りました。

序章

テキストフィールドやテキスト領域などのWebフォームを使用すると、ユーザーはデータをアプリケーションに送信して、アクションを実行したり、より広い領域のテキストをアプリケーションに送信したりできます。たとえば、ソーシャルメディアアプリケーションでは、ユーザーがページに新しいコンテンツを追加できるボックスをユーザーに提供できます。もう1つの例は、ログインページです。このページでは、ユーザーにユーザー名を入力するためのテキストフィールドと、パスワードを入力するためのパスワードフィールドを提供します。サーバー（この場合はFlaskアプリケーション）は、ユーザーが送信したデータを使用して、データが有効な場合はサインインするか、Invalid credentials!のようなメッセージで応答して、送信したデータがそうではないことをユーザーに通知します。正しい。

Flask は、Python言語でWebアプリケーションを作成するための便利なツールと機能を提供する軽量のPythonWebフレームワークです。このチュートリアルでは、Webフォームの使用方法を示す小さなWebアプリケーションを作成します。アプリケーションには、Pythonリストに保存されているメッセージを表示するためのページと、新しいメッセージを追加するためのページがあります。また、メッセージの点滅を使用して、ユーザーが無効なデータを送信したときにエラーを通知します。

前提条件

ローカルのPython3プログラミング環境については、 Python3シリーズのローカルプログラミング環境をインストールしてセットアップする方法のチュートリアルに従ってください。このチュートリアルでは、プロジェクトディレクトリをflask_appと呼びます。
ルート、ビュー関数、テンプレートなどの基本的なFlaskの概念の理解。 Flaskに慣れていない場合は、FlaskとPythonを使用して最初のWebアプリケーションを作成する方法およびFlaskアプリケーションでテンプレートを使用する方法を確認してください。
基本的なHTMLの概念の理解。背景知識については、HTMLを使用してWebサイトを構築する方法チュートリアルシリーズを確認できます。

ステップ1—メッセージの表示

このステップでは、Pythonディクショナリのリストに格納されているメッセージを表示するためのインデックスページを備えたFlaskアプリケーションを作成します。

まず、編集のためにapp.pyという名前の新しいファイルを開きます。

nano app.py

app.pyファイル内に次のコードを追加して、単一ルートのFlaskサーバーを作成します。

フラスコ_app/app.py

from flask import Flask, render_template

app = Flask(__name__)

messages = [{'title': 'Message One',
             'content': 'Message One Content'},
            {'title': 'Message Two',
             'content': 'Message Two Content'}
            ]

@app.route('/')
def index():
    return render_template('index.html', messages=messages)

ファイルを保存して閉じます。

このファイルでは、最初にFlaskクラスとrender_template()関数をflaskパッケージからインポートします。次に、Flaskクラスを使用して、appという新しいアプリケーションインスタンスを作成し、Flaskのセットアップに必要な特別な__name__変数を渡します。舞台裏のいくつかのパス。テンプレートのレンダリングについては、チュートリアルFlaskアプリケーションでテンプレートを使用する方法で説明されています。

次に、messagesというグローバルPythonリストを作成します。このリストには、Pythonディクショナリが含まれています。各辞書には2つのキーがあります。メッセージのタイトル用のtitleと、メッセージの内容用のcontentです。これは、データ保存方法の簡略化された例です。実際のシナリオでは、データを永続的に保存し、より効率的に操作できるデータベースを使用します。

Pythonリストを作成したら、@app.route()デコレータを使用して、index()というビュー関数を作成します。その中で、render_template()関数への呼び出しを返します。これは、ルートにHTMLテンプレートを表示する必要があることをFlaskに示します。このテンプレートにindex.htmlという名前を付け（後で作成します）、messagesという変数をテンプレートに渡します。この変数は、以前に値として宣言したmessagesリストを保持し、HTMLテンプレートで使用できるようにします。表示機能については、チュートリアルFlaskとPython3を使用して最初のWebアプリケーションを作成する方法で説明されています。

次に、Flaskがテンプレートを検索するflask_appディレクトリにtemplatesフォルダーを作成し、base.htmlというテンプレートファイルを開きます。このファイルには、他のテンプレートが回避するために継承するコードが含まれています。コードの繰り返し：

mkdir templates
nano templates/base.html

base.htmlファイル内に次のコードを追加して、ナビゲーションバーとコンテンツブロックを含むベーステンプレートを作成します。

フラスコ_app/templates / base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        .message {
            padding: 10px;
            margin: 5px;
            background-color: #f3f3f3
        }
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% block content %} {% endblock %}
    </div>
</body>
</html>

ファイルを保存して閉じます。

この基本テンプレートには、他のテンプレートで再利用する必要があるすべてのHTMLボイラープレートが含まれています。 titleブロックは各ページのタイトルを設定するために置き換えられ、contentブロックは各ページのコンテンツに置き換えられます。ナビゲーションバーには2つのリンクがあります。1つはurl_for()ヘルパー機能を使用してindex()ビュー機能にリンクするインデックスページ用で、もう1つは[バージョン情報]ページ用です。アプリケーションで。

次に、index.htmlというテンプレートを開きます。これは、app.pyファイルで参照したテンプレートです。

nano templates/index.html

次のコードを追加します。

フラスコ_app/templates / index.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Messages {% endblock %}</h1>
    {% for message in messages %}
        <div class='message'>
            <h3>{{ message['title'] }}</h3>
            <p>{{ message['content'] }}</p>
        </div>
    {% endfor %}
{% endblock %}

ファイルを保存して閉じます。

このコードでは、base.htmlテンプレートを拡張し、contentブロックの内容を置き換えます。タイトルを兼ねる<h1>の見出しを使用します。

{% for message in messages %}行のJinjafor loop を使用して、messagesリストの各メッセージを調べます。 <div>タグを使用して、メッセージのタイトルとコンテンツを含めます。タイトルは<h3>の見出しに表示し、コンテンツは<p>タグに表示します。

仮想環境がアクティブになっているflask_appディレクトリで、FLASK_APP環境変数を使用してアプリケーション（この場合はapp.py）についてFlaskに通知します。

export FLASK_APP=app

次に、FLASK_ENV環境変数をdevelopmentに設定して、アプリケーションを開発モードで実行し、デバッガーにアクセスします。 Flaskデバッガーの詳細については、Flaskアプリケーションでエラーを処理する方法を参照してください。これを行うには、次のコマンドを使用します（Windowsでは、exportの代わりにsetを使用します）。

export FLASK_ENV=development

次に、アプリケーションを実行します。

flask run

開発サーバーが実行されている状態で、ブラウザーを使用して次のURLにアクセスします。

http://127.0.0.1:5000/

インデックスページに表示されるmessagesリストにメッセージが表示されます。

Webアプリケーションをセットアップしてメッセージを表示したので、ユーザーが新しいメッセージをインデックスページに追加できるようにする方法が必要になります。これは、次のステップで設定するWebフォームを介して行われます。

ステップ2—フォームの設定

このステップでは、ユーザーがWebフォームを介してメッセージのリストに新しいメッセージを追加できるようにするページをアプリケーションに作成します。

開発サーバーを実行したままにして、新しいターミナルウィンドウを開きます。

まず、app.pyファイルを開きます。

nano app.py

次のルートをファイルの最後に追加します。

フラスコ_app/app.py

# ...

@app.route('/create/', methods=('GET', 'POST'))
def create():
    return render_template('create.html')

ファイルを保存して閉じます。

この/createルートには、GETとPOSTの両方の要求を受け入れるためのタプル('GET', 'POST')を持つmethodsパラメーターがあります。 GETとPOSTはHTTPメソッドです。デフォルトでは、GETリクエストのみが受け入れられます。これらのリクエストは、サーバーにインデックスページやAboutページを要求するなどのデータの取得に使用されます。 POSTリクエストは、特定のルートにデータを送信するために使用されます。これにより、サーバー上のデータが変更されることがよくあります。

この例では、GETリクエストを使用してcreateページをリクエストします。 [作成]ページには、入力フィールドと[送信]ボタンを備えたWebフォームがあります。ユーザーがWebフォームに入力して[送信]ボタンをクリックすると、POSTリクエストが/createルートに送信されます。そこでリクエストを処理し、送信されたデータを検証して、ユーザーが空のフォームを送信していないことを確認し、それをmessagesリストに追加します。

create()ビュー関数は現在、1つのことだけを実行します。通常のGET要求を受信したときに、create.htmlというテンプレートをレンダリングします。次に、このテンプレートを作成し、次の手順でPOSTリクエストを処理するように関数を編集します。

create.htmlという名前の新しいテンプレートファイルを開きます。

nano templates/create.html

次のコードを追加します。

フラスコ_app/templates / create.html

{% extends 'base.html' %}

{% block content %}
    <h1>{% block title %} Add a New Message {% endblock %}</h1>
    <form method="post">
        <label for="title">Title</label>
        <br>
        <input type="text" name="title"
               placeholder="Message title"
               value="{{ request.form['title'] }}"></input>
        <br>

        <label for="content">Message Content</label>
        <br>
        <textarea name="content"
                  placeholder="Message content"
                  rows="15"
                  cols="60"
                  >{{ request.form['content'] }}</textarea>
        <br>
        <button type="submit">Submit</button>
    </form>
{% endblock %}

ファイルを保存して閉じます。

このコードでは、base.htmlテンプレートを拡張し、contentブロックをページのタイトルとして機能する<h1>見出しに置き換えます。 <form>タグで、method属性をpostに設定して、フォームデータがPOSTリクエストとしてサーバーに送信されるようにします。

フォームには、titleという名前のテキスト入力フィールドがあります。これは、タイトルフォームデータにアクセスするためにアプリケーションで使用する名前です。 <input>タグに{{ request.form['title'] }}のvalueを指定します。これは、ユーザーが入力したデータを復元して、問題が発生したときに失われないようにするのに役立ちます。たとえば、ユーザーが必要なcontentテキスト領域に入力し忘れた場合、リクエストがサーバーに送信され、エラーメッセージが応答として返されますが、タイトルのデータは失われません。 requestグローバルオブジェクトに保存され、request.form['title']からアクセスできます。

タイトル入力フィールドの後に、前述と同じ理由で、contentという名前のテキスト領域に値{{ request.form['content'] }}を追加します。

最後に、フォームの最後に[送信]ボタンがあります。

これで、開発サーバーが実行されている状態で、ブラウザーを使用して/createルートに移動します。

http://127.0.0.1:5000/create

メッセージタイトルの入力フィールド、メッセージのコンテンツのテキスト領域、および[送信]ボタンを含む[新しいメッセージの追加]ページが表示されます。

このフォームは、POSTリクエストをcreate()ビュー機能に送信します。ただし、関数にはまだPOSTリクエストを処理するコードがないため、フォームに入力して送信しても何も起こりません。次のステップでは、フォームが送信されたときに着信POSTリクエストを処理します。送信されたデータが有効（空ではない）かどうかを確認し、メッセージのタイトルと内容をmessagesリストに追加します。

ステップ3—フォームリクエストの処理

このステップでは、アプリケーション側でフォームリクエストを処理します。前の手順で作成したフォームを介してユーザーが送信したフォームデータにアクセスし、メッセージのリストに追加します。また、メッセージ点滅を使用して、ユーザーが無効なデータを送信したときにユーザーに通知します。 フラッシュメッセージは1回だけ表示され、次のリクエストで消えます（たとえば、別のページに移動した場合）。

app.pyファイルを開いて編集します。

nano app.py

まず、Flaskフレームワークから以下をインポートします。

前の手順で作成したHTMLフォームを介して送信される受信リクエストデータにアクセスするためのグローバルrequestオブジェクト。
url_for（）関数を使用してURLを生成します。
flash（）関数は、リクエストが処理されたときにメッセージをフラッシュします（すべてがうまくいったことをユーザーに通知するか、送信されたデータが有効でない場合は問題を通知します）。
redirect（）関数を使用して、クライアントを別の場所にリダイレクトします。

これらのインポートをファイルの最初の行に追加します。

フラスコ_app/app.py

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

# ...

flash()機能は、フラッシュされたメッセージをクライアントのブラウザセッションに保存します。これには、秘密鍵を設定する必要があります。この秘密鍵はセッションを保護するために使用されます。これにより、Flaskは、新しいメッセージページからインデックスページへの移動など、あるリクエストから別のリクエストへの情報を記憶できます。ユーザーはセッションに保存されている情報にアクセスできますが、秘密鍵を持っていない限り変更することはできません。そのため、誰にも秘密鍵へのアクセスを許可してはなりません。詳細については、セッションのFlaskドキュメントを参照してください。

秘密鍵は長いランダムな文字列である必要があります。 osモジュールとos.urandom（）メソッドを使用して秘密鍵を生成できます。このメソッドは、暗号化に適したランダムなバイトの文字列を返します。それを使用してランダムな文字列を取得するには、新しいターミナルを開き、次のコマンドを使用してPythonインタラクティブシェルを開きます。

python

Pythonインタラクティブシェルで、標準ライブラリからosモジュールをインポートし、次のようにos.urandom()メソッドを呼び出します。

import os
os.urandom(24).hex()

次のような文字列が表示されます。

Output
'df0331cefc6c2b9a5d0208a726a5d1c0fd37324feba25506'

取得した文字列を秘密鍵として使用できます。

秘密鍵を設定するには、app.configオブジェクトを介してSECRET_KEY構成をアプリケーションに追加します。 messages変数を定義する前に、app定義の直後に追加します。

フラスコ_app/app.py

# ...
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your secret key'


messages = [{'title': 'Message One',
             'content': 'Message One Content'},
            {'title': 'Message Two',
             'content': 'Message Two Content'}
            ]
# ...

次に、create()ビュー関数を次のように変更します。

フラスコ_app/app.py

# ...

@app.route('/create/', methods=('GET', 'POST'))
def create():
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']

        if not title:
            flash('Title is required!')
        elif not content:
            flash('Content is required!')
        else:
            messages.append({'title': title, 'content': content})
            return redirect(url_for('index'))

    return render_template('create.html')

ifステートメントでは、比較request.method == 'POST'を介して、要求がPOST要求である場合にのみ次のコードが実行されるようにします。

次に、送信されたタイトルとコンテンツをrequest.formオブジェクトから抽出します。これにより、リクエスト内のフォームデータにアクセスできます。タイトルが指定されていない場合、条件if not titleが満たされます。その場合、flash()機能を使用して、タイトルが必要であることをユーザーに通知するメッセージを表示します。これにより、メッセージがフラッシュメッセージリストに追加されます。これらのメッセージは、後でbase.htmlテンプレートの一部としてページに表示されます。同様に、コンテンツが提供されない場合、条件elif not contentが満たされます。その場合は、フラッシュされたメッセージのリストに'Content is required!'メッセージを追加します。

メッセージのタイトルとコンテンツが適切に送信されている場合は、messages.append({'title': title, 'content': content})の行を使用して、ユーザーが指定したタイトルとコンテンツを含む新しい辞書をmessagesリストに追加します。次に、redirect()関数を使用して、ユーザーをインデックスページにリダイレクトします。 url_for()機能を使用して、インデックスページにリンクします。

ファイルを保存して閉じます。

次に、Webブラウザを使用して/createルートに移動します。

http://127.0.0.1:5000/create

選択したタイトルといくつかのコンテンツをフォームに入力します。フォームを送信すると、インデックスページに新しいメッセージが表示されます。

最後に、フラッシュされたメッセージを表示し、[新しいメッセージ]ページへのリンクをbase.htmlテンプレートのナビゲーションバーに追加して、この新しいページに簡単にアクセスできるようにします。基本テンプレートファイルを開きます。

nano templates/base.html

<nav>タグ内のナビゲーションバーのFlaskAppリンクの後に新しい<a>タグを追加して、ファイルを編集します。次に、contentブロックのすぐ上に新しいforループを追加して、ナビゲーションバーの下に点滅するメッセージを表示します。これらのメッセージは、Flaskが提供する特別なget_flashed_messages()機能で利用できます。次に、alertというクラス属性を各メッセージに追加し、<style>タグ内にいくつかのCSSプロパティを指定します。

フラスコ_app/templates / base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %} - FlaskApp</title>
    <style>
        .message {
            padding: 10px;
            margin: 5px;
            background-color: #f3f3f3
        }
        nav a {
            color: #d64161;
            font-size: 3em;
            margin-left: 50px;
            text-decoration: none;
        }

        .alert {
            padding: 20px;
            margin: 5px;
            color: #970020;
            background-color: #ffd5de;
        }

    </style>
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">FlaskApp</a>
        <a href="{{ url_for('create') }}">Create</a>
        <a href="#">About</a>
    </nav>
    <hr>
    <div class="content">
        {% for message in get_flashed_messages() %}
            <div class="alert">{{ message }}</div>
        {% endfor %}
        {% block content %} {% endblock %}
    </div>
</body>
</html>

ファイルを保存して閉じ、ブラウザにhttps://127.0.0.1:5000をリロードします。これで、ナビゲーションバーに/createルートにリンクする「作成」アイテムが表示されます。

フラッシュメッセージがどのように機能するかを確認するには、[作成]ページに移動し、2つのフィールドに入力せずに[送信]ボタンをクリックします。次のようなメッセージが表示されます。

インデックスページに戻ると、ベーステンプレートの一部として表示されていても、ナビゲーションバーの下にある点滅したメッセージが消えることがわかります。フラッシュされたメッセージでない場合は、ベーステンプレートからも継承されるため、インデックスページにも表示されます。

タイトルはあるが内容は含まれていないフォームを送信してみてください。「コンテンツが必要です！」というメッセージが表示されます。ナビゲーションバーのFlaskAppリンクをクリックしてインデックスページに戻り、[戻る]ボタンをクリックして[作成]ページに戻ります。メッセージの内容がまだ残っていることがわかります。これは、前のリクエストを保存するため、[戻る]ボタンをクリックした場合にのみ機能します。ナビゲーションバーの[作成]リンクをクリックすると、新しいリクエストが送信され、フォームがクリアされます。その結果、点滅しているメッセージが消えます。

これで、ユーザー入力を受け取る方法、それを検証する方法、およびデータソースに追加する方法がわかりました。

注： messagesリストに追加したメッセージは、サーバーが停止すると消えます。Pythonリストはメモリにのみ保存されるため、メッセージを永続的に保存するには、 SQLiteのようなデータベース。 Python 3でsqlite3モジュールを使用する方法をチェックして、PythonでSQLiteを使用する方法を学習してください。

結論

ユーザーがインデックスページに表示されるメッセージのリストにメッセージを追加できるFlaskアプリケーションを作成しました。 Webフォームを作成し、ユーザーがフォームを介して送信したデータを処理して、メッセージリストに追加しました。また、フラッシュメッセージを使用して、ユーザーが無効なデータを送信したときにユーザーに通知しました。

Flaskの詳細については、Flaskシリーズの他のチュートリアルをご覧ください。