WebアプリとAPI ― Flaskでサーバーを立てる

1. Networkタブを開くブラウザで F12 → 「Network」タブ → ページを再読み込みします。1行 = 1往復の一覧が流れます。
2. ステータスコードを覚えるStatus列の数字が返事の種類です。200 = 成功 / 404 = 見つからない / 500 = サーバー側の故障。まずこの3つで足ります。
3. 404を見るURLの末尾に /nai-page をつけて開き、404を観察します。
4. 観察メモ「リクエスト = 」「レスポンス = 」「404 = 」を自分の言葉で3行にまとめます。来週から、この返事を自分で書きます。

1. Flaskを取り寄せるターミナルで pip install flask を実行します。
2. app.pyを書く

   from flask import Flask
   
   app = Flask(__name__)
   
   @app.route("/")
   def home():
       return "こんにちは、私のサーバーです!"
   
   if __name__ == "__main__":
       app.run(debug=True)

   @app.route("/") は「このURLに来たら、下の関数で返事する」という割り当てです。
3. 起動するpython app.py。ターミナルに http://127.0.0.1:5000 と出たら、それをブラウザで開きます。挨拶が表示されたら ― あなたのパソコンは、いまサーバーです。
4. 窓口を増やす

   @app.route("/omikuji")
   def omikuji():
       import random
       return random.choice(["大吉", "中吉", "小吉", "凶"])

   /omikuji を開くたびに運勢が変わります。Step 3のおみくじが、Webサービスになりました。
5. 止め方と直し方止めるのは Ctrl + C。debug=True のおかげで、コードを保存すると自動で再起動されます。エラーもブラウザに詳しく表示されます (開発中だけの特権です)。

お題: ①/jikan = 今の日時を返す ②/saikoro = 1〜6の数を返す ③/aisatsu/yamada のように名前つきで呼ぶと「yamadaさん、こんにちは」と返す、の3窓口を足します。

1. テンプレートを置くtemplates フォルダを作り、index.html を入れます。

   <h1>{{ title }}</h1>
   <ul>
     {% for item in items %}
     <li>{{ item["name"] }} ― {{ item["price"] }}円</li>
     {% endfor %}
   </ul>

   {{ }} が値の差し込み口、{% for %} が繰り返しです。
2. Pythonから渡す

   from flask import Flask, render_template
   
   @app.route("/")
   def home():
       items = [
           {"name": "メロンパン", "price": 180},
           {"name": "クロワッサン", "price": 220},
       ]
       return render_template("index.html", title="パンの森", items=items)

3. データベースとつなぐitemsを手書きのリストから、ユニット3の pan.db をSELECTした結果に差しかえます。データベース → Python → テンプレート → ブラウザ。この一本の流れが、世の中のWebアプリの背骨そのものです。

1. テーブルを設計するユニット3の流儀で、まず紙に書きます。今回は1テーブルで十分です。

   nippo: id, day, name, content

2. フォームを置くテンプレートに追加します。

   <form action="/add" method="post">
     <input name="name" placeholder="名前">
     <textarea name="content" placeholder="今日やったこと"></textarea>
     <button>記録する</button>
   </form>

3. 受け取って保存する

   from flask import request, redirect
   import sqlite3
   
   @app.route("/add", methods=["POST"])
   def add():
       con = sqlite3.connect("nippo.db")
       con.execute(
           "INSERT INTO nippo (day, name, content) VALUES (date('now'), ?, ?)",
           (request.form["name"], request.form["content"]))
       con.commit()
       con.close()
       return redirect("/")

   request.form["name"] がフォームの値の受け取り口、最後の redirect("/") は「保存したら一覧に戻す」の定番です。
4. 一覧に出すトップの関数で SELECT * FROM nippo ORDER BY id DESC した結果をテンプレートに渡し、新しい順に表示します。
5. 循環を確かめる書く → 戻る → 一覧に増えている → サーバーを再起動しても残っている。ここまで動けば、基本循環の完成です。

1. jsonifyで返す

   from flask import jsonify
   
   @app.route("/api/nippo")
   def api_nippo():
       con = sqlite3.connect("nippo.db")
       rows = con.execute(
           "SELECT day, name, content FROM nippo ORDER BY id DESC").fetchall()
       con.close()
       return jsonify([
           {"day": r[0], "name": r[1], "content": r[2]} for r in rows
       ])

2. ブラウザで見るhttp://127.0.0.1:5000/api/nippo を開くと、日報がJSONで返ります。郵便番号APIで見たのと同じ景色を、自分が提供しています。
3. 件数の窓口も足す/api/count = 日報の合計件数を {"count": 12} の形で返す窓口を、自分で書いてみます (SELECT COUNT(*) の出番です)。