公開日：5/11/2020
    シェア：

    (Flask)のチュートリアルをやってみる！メッセージフラッシング

    　

    今回は、ユーザーへのフィードバックに便利なメッセージフラッシングを実装してみます。
    前回のセッションと組み合わせてログイン機能に追加実装しながら動きや機能を見ていきましょう。

    HTMLファイルを準備する

    今回は公式のサンプルに合わせてHTMLファイルを準備します。ファイル名とコードは次の通り

    layout.html

    <!doctype html>
    <title>My Application</title>
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul class=flashes>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}
    {% block body %}{% endblock %}

    flash_test.html

    {% extends "layout.html" %}
    {% block body %}
      <h1>Overview</h1>
      <p>Do you want to <a href="{{ url_for('login') }}">log in?</a>
    {% endblock %}

    login.html

    {% extends "layout.html" %}
{% block body %}
  <h1>Login</h1>
  {% if error %}
    <p class=error><strong>Error:</strong> {{ error }}
    <p>Do you want to <a href="{{ url_for('login') }}">log in?</a>
  {% else %}
  <form action="" method=post>
    <dl>
      <dt>Username:
      <dd><input type=text name=username value="{{
          request.form.username }}">
      <dt>Password:
      <dd><input type=password name=password>
    </dl>
    <p><input type=submit value=Login>
  </form>
  {% endif %}
{% endblock %}

    pyファイルに実行用のコードを書いていく

    続いて、pyファイルに次のコードを追加・書き換えをしていきます。前回の気zでセッションを実装しているので、うまく利用しながら組み立てていきましょう。

    追加

    @app.route('/flash_test/')
    def fkash_test():
        return render_template('flash_test.html')

    修正

    @app.route('/login/', methods=['GET', 'POST'])
def login(): #ログインの処理
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or \
           request.form['password'] != 'password':
            flash('ログイン名かパスワードが違う！')
            error='もう一度確認'
        else:
            flash('ログインしました')
            flash('よかったですね～')
            return redirect(url_for('flash_test'))
    return render_template('login.html', error=error)
    では、動作確認をしながらコードを解説していきます。

    動作確認と解説

    ①http://127.0.0.1:5000/flash_test/　にアクセスする。

    まず、@app.route('/flash_test/')が実行されるので、return render_template('flash_test.html')に進んで「flash_test.html」が表示されます。

    flash_test.htmlの構成をみると、最初に{% extends "layout.html" %}とあるので「layout.html」の内容が先に処理されて、そのあとに続くコードにすすみます。

    layout.htmlを見ると、まず<title>My Application</title>とあり、ブラウザのタイトルが「My Application」になります。
    続いて、{% with messages = get_flashed_messages() %}があるので、Flashに入っているデータをmesseagesの変数に入れて、もしmasseagesにデータが入っていたら一個ずつリストで表示します。

    この処置が終わると、flash_test.htmlの <h1>Overview</h1> と <p>Do you want to <a href="{{ url_for('login') }}">log in?</a>が実行されます。
    2つのhtmlファイルが一つの画面に表示されるイメージです


    ②「log in」をクリックする。

    Loginをクリックするとリンク先の「@app.route('/login/', methods=['GET', 'POST'])」が実行されます。ここもGET/POSTで分けられています。
    最初に「error = None」で、エラーの変数を空にしておきます。

    最初はmethods=GETの状態でアクセスすることになるので、「return render_template('login.html', error=error)」が実行されます。

    「login.html」も「layout.html」の内容が先に処理されて、そのあとに続くコードにすすみます。

    「{% if error %}」では、変数「eroor」になにか入っていたら続くところで「error変数の中身」を表示します。

    変数「error」に何も入っていなかったら「{% else %}」から続くコードが実行されます。ここには、入力ボックスと入力されたデータの格納先。ボタンを設置するための記述があります。

    ③ユーザー名とパスワードを入力する

    適当な「Username」と「Password」を入力して「Login」をクリックします。すると「「@app.route('/login/', methods=['GET', 'POST'])」」の「POST」側が実行されます。

    ここでは、入力された「Username」が「admin」になっていて「Password」が「password」になっているかを判断して、違っていれば「flash('ログイン名かパスワードが違う！')」と「error='もう一度確認'」が実行されて「login.html」が表示されます。

    では、改めて「logn in」をクリックして次は「Username」に「admin」・「Password」に「password」と入力して「Log in」をクリックしてみましょう。

    今度は「@app.route('/login/', methods=['GET', 'POST'])」のelseに続く部分が実行されるので、Flashに「ログインしました」「よかったですね～」の２つのデータを入れて「flash_test.html」を表示します。

    以上、メッセージフラッシングでした。公式では「リクエストの末尾でメッセージを記録することと、次のリクエストだけにアクセスすることを可能」と言っており、デバックやエラー表示などで利用できそうな機能です。