第4回 PythonAnywhereでWebサイトを作ろう・・・チュートリアル編 Step2（２）

　では、コードの主要部分の解説をしていきます。
　最初は flask_app.pyのコードです。

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

app = Flask(__name__)
app.config["DEBUG"] = True

comments = []

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("main_page.html", comments=comments)

    comments.append(request.form["contents"])
    return redirect(url_for('index'))

　テキストボックスに入力されたコメントを格納するリスト型の変数「comments」を定義します。

comments = []

　ユーザがこのサイトのトップページを開いたときに、GETメソッドであればmain_page.htmlを表示します。
　POSTメソッドであった場合は、テキストボックスに入力された値を、変数「comments」に格納します。そして、@app.routeで追加したルートはurl_for関数でURLを取得することができるので、引数としてindexを渡すことでトップページをGETメソッドで呼び出します。

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("main_page.html", comments=comments)

    comments.append(request.form["contents"])
    return redirect(url_for('index'))

　次に、main_page.htmlのコードです。ボタンが押されたときのアクションとしてPOSTメソッドをしています。
　< textarea >タグでテキストエリアのname属性を「contents」としています。このテキストエリアに入力された内容が先程のflask_app.pyのコードのcomments.append(request.form["contents"])に渡されます。

            <div class="row">
                <form action="." method="POST">
                    <textarea class="form-control" name="contents" placeholder="Enter a comment"></textarea>
                    <input type="submit" class="btn btn-success" value="Post comment">
                </form>
            </div>

　最後に、入力されたコメントを表示させる部分のコードです。入力されたコメントは繰り返し表示する必要があります。FLASKでは、{%..%}の中にforとendforと書くことでForループにすることができます。また、{{..}}内で指定した変数の値を表示させることができます。

        <div class="container">

            {% for comment in comments %}
                <div class="row">
                    {{ comment }}
                </div>
            {% endfor %}