LINE Echo Bot

「迷わず行けよ。行けばわかる。」――まずは“動いた”という成功体験から始めるための Codespaces 向けテンプレートです。Python(uv) + FastAPI + LINE Messaging API を devcontainer で束ね、受講生は 3分クッキング感覚ですぐにエコーボットを動かせます。

line-echo-bot/
├─ app/
│  └─ main.py
├─ .env.example
├─ pyproject.toml
├─ README.md
├─ .gitignore
└─ .devcontainer/
   ├─ devcontainer.json
   └─ Dockerfile

ねらい

• 文法丸暗記より先に “動いた喜び” を届ける
• クラウド IDE で PC ごとの差分トラブルを消す
• 秘密情報 (.env) の扱いを最初から教えて社会人基礎力に直結させる
• 初期状態ではテキストメッセージのみを Echo し、後からスタンプや条件分岐などを拡張する余白を残す

構成図（Mermaid）

sequenceDiagram
    box rgba(204, 232, 255, 0.6) スマートフォン
        participant C as LINE クライアントアプリ
    end
    box rgba(255, 253, 208, 0.6) クラウド
        participant P as LINE Platform
        participant F as FastAPI (Codespaces)
    end
    C->>P: メッセージ送信
    P->>F: Webhook POST /callback
    F->>P: Reply API 呼び出し
    P->>C: Echo 応答

Loading

事前準備

• GitHub アカウントを作成し、このテンプレートから自分のリポジトリを作れる状態にしておく
• LINE Developers で Messaging API チャネルを作成し、チャネルシークレットと長期アクセストークンを取得しておく（細かな画面手順は公式ドキュメントに従う）

3分クッキングセットアップ（受講生向け）

1. リポジトリを生成
   GitHub でこのテンプレートから「Use this template」→自分のリポジトリ作成→「Code」→「Create codespace on main」。
2. .env の準備

   cp .env.example .env

   LINE_CHANNEL_SECRET, LINE_CHANNEL_ACCESS_TOKEN を LINE Developers から貼り付け。
3. FastAPI サーバを起動
   uv sync は devcontainer の postCreateCommand が自動実行済み。

   uv run uvicorn app.main:app --host 0.0.0.0 --port 8000

4. Ports タブで 8000 を Public に
   URL（例: https://xxxx-8000.app.github.dev）に /callback を付けて Webhook 用に控える。
5. LINE Developers 側設定
   • Webhook URL = https://xxxx-8000.app.github.dev/callback
   • 「Use webhook = ON」→「Verify」→ 友だち追加してメッセージ送信 → 即 Echo♪

Verify で失敗したら /callback 付け忘れ、サーバ起動忘れ、ポート非公開をまず疑う。

ローカル（VS Code + Dev Containers）で動かす場合

Codespaces を使わず、手元 PC の Docker 上で devcontainer を開く場合も流れは同じです。

1. Docker Desktop を起動した状態で VS Code の Dev Containers（もしくは VS Code Insiders + Dev Containers 拡張）からこのリポジトリを「Reopen in Container」。
2. コンテナが立ち上がったら cp .env.example .env でテンプレをコピーし、LINE のシークレット／長期トークンを書き込む。
3. uv run uvicorn app.main:app --host 0.0.0.0 --port 8000 で FastAPI を起動。
4. ホスト側で ngrok http 8000 を実行し、払い出された https://<id>.ngrok.io/callback を LINE Developers の Webhook URL に設定。
5. 「Use webhook = ON」→「Verify」→ Bot を友だち追加して動作確認。

Codespaces の公開 URL が不要なだけで、.env 設定と uv run のステップは同じです。ローカルでも “3分クッキング” 感覚で再現できます。

講師用カンペ

1. 受講生の GitHub アカウントを整備
2. テンプレ repo から各自のリポジトリを生成
3. Codespaces を起動（devcontainer が自動で uv をセットアップ）
4. .env にシークレットを入れて uv run uvicorn ... を実行
5. Ports タブで 8000 を Public → URL を Webhook に設定
6. LINE Developers で「Use webhook = ON」→「Verify」
7. 友だち追加→メッセ→おうむ返しを確認
8. 仕組みの断面図解説＆小改造課題（Echo 削除、条件分岐、現在時刻、スタンプ対応、NG ワードフィルタ など）
9. 振り返りを1行で書かせる（Webhook 理解 / .env 学び / 条件分岐詰まり / “心中の賊” など）

セキュリティと運用

• .env は Git にコミットしない（.gitignore 済み）。必要に応じて Codespaces Repository Secrets に進級。
• 授業時間のみポートを Public に。終わったら Private に戻す。
• アクセストークン無効時は長期トークンを再発行し、サーバを再起動。

devcontainer のポイント

• Python 3.14 slim ベース + uv インストール済み
• postCreateCommand: uv sync で自動依存解決 → すぐ FastAPI を起動可能
• forwardPorts と portsAttributes を設定済みで、ポート公開が視覚的にわかりやすい
• Codespaces / ローカル VS Code のどちらでも同一環境

トラブル即答集

• Verify 失敗 → /callback 付け忘れ / サーバ停止 / Port Private
• 200 なのに返信なし → replyToken 使い回し禁止。イベントごとに reply_message する
• ngrok 利用時は uv run ngrok http 8000（Codespaces URL が届かない場合のみ）
• Codespaces が遅い → ブラウザリロード or 4-core インスタンスへ一時アップグレード

将棋流の学び

Codespaces 起動で駒を並べ、uv sync で陣形、Echo 成功で初勝利。条件分岐や Webhook 理解で中盤〜終盤の読み筋を育てる。動作する環境が最強の布陣です。

今後の拡張アイデア

• ngrok / Render / Railway へのデプロイ
• NG ワード配列やスタンプ対応など条件分岐課題
• OpenAI API を組み合わせた会話ボット

「学びの炉は、動いた瞬間に火がつく。」――このテンプレを配れば、初学者インターンでも迷いなくコードの本質に踏み込めます。