【Flask】フォームとスタイルシート

code 9月 16, 2019

こんにちは、のっくんです。

今日の記事ではPythonのフレームワークFlaskを使ってフォームを実装する方法とスタイルシートを読み込む方法についてご紹介します。

Flaskを使うと簡単にフォームの実装ができて、スタイルシートによる装飾も簡単です。

簡単なサンプルアプリを作りながら仕組みを解説していきますね。

好きな食べ物を入力するとページに表示してくれるアプリを作ってみました。

1 フォームの実装
2 スタイルシートを適用してみる
3 参考

フォームの実装

まずはフォームを実装の仕方についてです。

フォームをHTMLファイルに追加するには以下のコードを追加します。

index.html

<div>
    <form method="POST" action="/">
        <input type="text" name="field">
        <input type="submit">
    </form>
</div>

inputタグが２つありますが、１つ目が入力するテキストフィールド、２つ目が提出ボタンです。

テキストに文字を入力し、ボタンを押すことで、テキストに書いた内容がPOSTされてサーバに届く仕組みになっています。

divタグで囲むことでフォームが１つのブロックとして処理できるようになるので、CSSシートで加工がしやすくなります。

次にpythonファイルの方を編集していきましょう。

app.py

@app.route("/", methods=["GET"])
def hello_world():
    return render_template("index.html",
                           title="フォームを試してみるよ",
                           message="好きな食べ物を教えてね")


@app.route("/", methods=["POST"])
def form():
    field = request.form["field"]
    return render_template("index.html",
                           title="フォームを試してみるよ",
                           message="あなたは , {} が好きなんですね".format(field))

GETが来た時とPOSTが送られてきた時それぞれで処理を分けています。

GETの時はhello_world()、POSTの時にはform()が呼ばれるようにしています。

POSTの時にはfieldという名前がつけられたテキストメッセージを取得し、それをテンプレートに書き出すようにしています。

スタイルシートを適用してみる

次に以下のようにスタイルシートで色をつけたり、文字を中央に寄せてみます。

staticフォルダを作成してその中にstyle.cssを作成します。

フォルダ構成は以下の通り。

style.css

body {
    margin: 10px;
    background-color: lightskyblue;
}

h1 {
    color: green;
    font-size: 36px;
    text-align: center;
}

p {
    font-size: 14pt;
    text-align: center;
}

div {
    text-align: center;
}

「フォームを試してみるよ」と書かれたのがh1タグ囲まれています。`color: green;`で文字色を緑を指定するようにして、`text-align: center;`にすることで文字を中央に寄せることができます。

「好きな食べ物を教えてね」と書かれているのがpタグ、フォームと送信ボタンはdivタグで囲まれています。同じように文字を中央に寄せています。

スタイルシートを読み込むには以下のように`url_for`関数を使います。

index.html

<head>
    <title>Youkoso</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}">
</head>

スタイルシートの反映がされない時

スタイルシートの変更が反映されない時には、http://localhost:5000/static/style.cssにアクセスしブラウザの更新ボタンを押します。

更新されたスタイルシートが表示されるのを確認してください。

次に、http://localhost:5000/に戻ってこちらでもブラウザの更新ボタンを押してみると、スタイルシートの変更が反映されていると思います。

参考

<br />