おみくじ

今回のリクエスト：POST
        中吉
選択肢：大吉・中吉・小吉・末吉

いつものおみくじ（GET）
大吉・吉・凶の中から1つ選ぶよ。
[いつものおみくじを引く]

オリジナルおみくじ（POST）
選択肢（空白で区切って書こう）
[大吉 中吉 小吉 末吉        ]
[オリジナルおみくじを引く]

2_get_post
├── get_post.md       
├── app.py
├── templates
│   └── index.html
└── static
    └── style.css

python -m pip show flask
copy

python -m pip install flask
copy

import random

from flask import Flask, render_template, request


app = Flask(__name__)

# いつものおみくじの選択肢
DEFAULT_CHOICES = ["大吉", "吉", "凶"]


@app.route("/", methods=["GET", "POST"])
def omikuji():
    if request.method == "POST":
        # フォームに書いた選択肢を、空白で区切ってリストにする
        choices = request.form.get("choices", "").split()
    else:
        choices = DEFAULT_CHOICES

    # 選択肢が空のときは、いつものおみくじにする
    if not choices:
        choices = DEFAULT_CHOICES

    result = random.choice(choices)

    return render_template(
        "index.html",
        method=request.method,
        choices=choices,
        result=result,
    )


if __name__ == "__main__":
    app.run(debug=True, port=8000)
copy

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>おみくじ</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <main>
        <h1>おみくじ</h1>

        <section class="result">
            <p>今回のリクエスト：{{ method }}</p>
            <p class="fortune">{{ result }}</p>
            <p>選択肢：{{ choices | join("・") }}</p>
        </section>

        <section>
            <h2>いつものおみくじ（GET）</h2>
            <p>大吉・吉・凶の中から1つ選ぶよ。</p>
            <form action="/" method="get">
                <button type="submit">いつものおみくじを引く</button>
            </form>
        </section>

        <section>
            <h2>オリジナルおみくじ（POST）</h2>
            <form action="/" method="post">
                <label for="choices">選択肢（空白で区切って書こう）</label>
                <input id="choices" name="choices" type="text" placeholder="例：大吉 中吉 小吉 末吉" required>
                <button type="submit">オリジナルおみくじを引く</button>
            </form>
        </section>
    </main>
</body>
</html>
copy

body {
    margin: 0;
    padding: 24px;
    background: #f5f3eb;
    color: #24352b;
    font-family: sans-serif;
    line-height: 1.8;
}

main {
    max-width: 680px;
    margin: 0 auto;
}

section {
    margin-bottom: 24px;
    padding: 16px 24px;
    background: white;
    border-radius: 8px;
}

h2 {
    font-size: 1.1rem;
}

.result {
    text-align: center;
    border: 3px solid #b23a2e;
}

.fortune {
    margin: 0;
    color: #b23a2e;
    font-size: 3rem;
    font-weight: bold;
}

form {
    display: grid;
    gap: 8px;
}

input, button {
    padding: 10px;
    font: inherit;
}

button {
    background: #b23a2e;
    color: white;
    border: none;
    cursor: pointer;
}
copy

python app.py
copy

http://127.0.0.1:8000/

<form action="/" method="get">
    <button type="submit">いつものおみくじを引く</button>
</form>
copy

<form action="/" method="post">
    <input id="choices" name="choices" type="text" ... required>
    <button type="submit">オリジナルおみくじを引く</button>
</form>
copy

入力欄に「大吉 中吉 小吉 末吉」と書く
        ↓ ボタン
POST /
  choices = 大吉 中吉 小吉 末吉

choices = request.form.get("choices", "").split()
copy

"大吉 中吉 小吉 末吉"
        ↓ split()
["大吉", "中吉", "小吉", "末吉"]

@app.route("/", methods=["GET", "POST"])
def omikuji():
    if request.method == "POST":
        choices = request.form.get("choices", "").split()
    else:
        choices = DEFAULT_CHOICES
copy

ページを開く・いつものボタン → GET  / → choices = ["大吉", "吉", "凶"]
オリジナルのボタン           → POST / → choices = フォームに書いた選択肢

if not choices:
    choices = DEFAULT_CHOICES
copy

result = random.choice(choices)
copy

return render_template(
    "index.html",
    method=request.method,
    choices=choices,
    result=result,
)
copy

<p>今回のリクエスト：{{ method }}</p>
<p class="fortune">{{ result }}</p>
<p>選択肢：{{ choices | join("・") }}</p>
copy

<form action="/" method="get">
copy

http://127.0.0.1:8000/?choices=カレー+ラーメン+すし