- 開発未経験の方向けのワークショップです
- AI(Claude.app)を利用して、LINE で料理名を送るとレシピを返してくれる bot を作ります
- その名も、「美味しんぼット」
通常のワークショップは下の「はじめに」から進めてください。 この節は、Claude API を使わない別実装を試したい開発者向けです。
このリポジトリには、OpenAI Codex App Server で動かす実装も含まれています。
- 実装:
codex-app-server/ - LINE のトークルームごとに会話を分離
- Codex App Server は
stdioの子プロセスとして起動 - Docker Compose でアプリと公開トンネルを分離
- API キーや認証ファイルは Git に含めない構成
詳しくは codex-app-server/README.md を参照してください。
LINE で料理名(例:「カレー」)を送ると、 レシピが返ってくる「美味しんぼット」を作ります。 ただし今日の本当のゴールは、bot を作ることではありません。 「自分でも動くものが作れる」という感覚を持ち帰ってもらうことです。
数年前まで、何かアプリやツールを作りたければ 「プログラミングを学ぶ」しかありませんでした。 AI の登場により、AI に指示を出せば、コードは AI が書いてくれます。 「コードを書く能力」ではなく、「何を作りたいかを言語化する能力」で、 動くものが作れます。 今日は実際にそれを体験してもらいます。
ここが今日一番大事な話です。
英語のプロ 100 人を前に「英語を教えてください」と言っても、 いい授業は返ってきません。 あなたが ABC レベルなのか、ビジネス英語が必要なのか、TOEIC を受けるのか、 海外旅行で使いたいのか…背景と目的を共有して初めて、 相手は的確に教えてくれます。
AI も全く同じです。「アプリ作って」では何も作れません。 「LINE で料理名を送ったらレシピを返す bot を Node.js で作って」まで言って、 ようやく動くものが返ってきます。
AI が賢くなれば指示は適当でいい、は嘘です。 むしろ AI が賢くなるほど、適当な指示は適当な結果を、 丁寧な指示は丁寧な結果を返すようになります。
今日作る美味しんぼットは「動くもの」です。 「リリースできるアプリ」ではありません。 本物のサービスには、ユーザー認証、データベース、エラー対応、 セキュリティ、課金、規約…無数の要素が必要です。
でも、それは今日考えなくていいです。まず「動くもの」で遊んでみる。 これが全ての入り口です。 料理を始めるときに、いきなりレストランの事業計画なんて書きません。 今日の一歩がなければ、その先もありません。
sequenceDiagram
actor あなた
participant bot as 美味しんぼット
あなた->>bot: LINE で「カレー」と送信
Note over bot: 数秒後
bot-->>あなた: カレーの作り方を教えます。<br/>材料:玉ねぎ 2 個、にんじん 1 本…<br/>手順:1. 野菜を切る…
今日作るシステムの登場人物は 4 人(4 つ)です。 あなた → LINE → あなたの PC の Node.js → Claude API、 の順番でメッセージが流れて、また逆順に返ってきます。
sequenceDiagram
actor User as あなた
participant LINE as LINE サーバー
participant Node as Node.js<br/>(Mac / Windows / サーバー)
participant Claude as Claude API<br/>(Anthropic)
User->>LINE: 1. 「カレー」と送信
LINE->>Node: 2. Webhook で「メッセージ届いたよ」と通知
Node->>Claude: 3. 「カレーのレシピ教えて」と問い合わせ
Claude-->>Node: 4. レシピのテキストを返答
Node-->>LINE: 5. 返信メッセージを送信(Messaging API)
LINE-->>User: 6. LINE トーク画面にレシピを表示
- あなたが LINE で「カレー」と送信
- LINE のサーバーが、あなたの PC に「メッセージが届いたよ」と知らせる(Webhook)
- あなたの PC で動いている Node.js が、Claude API に「カレーのレシピ教えて」と聞く
- Claude API が答えを返す
- その答えを Node.js が LINE のサーバー経由であなたに送り返す
- あなたの LINE にレシピが届く
Note
今日コードを書くのは Claude.app(デスクトップアプリ) ですが、 出来上がった bot が動かしている AI も Claude(API 経由) です。 「コードを書く Claude」と「bot の頭脳になる Claude」があります。
| 用語 | シンプルな説明 |
|---|---|
| Claude.app | AI と話しながらコードを書いて、その場で動かせるデスクトップアプリ |
| サーバー | パソコンのこと。今日はあなたの MacBook / Windows PC がこれになる |
| Node.js | パソコンの上で JavaScript というプログラムを動かすための道具 |
| API | あるサービスに「こういう情報ください」と聞ける窓口 |
| ngrok | あなたの PC を、一時的に世界からアクセスできるようにする道具 |
| Webhook | 「何かが起きたら教えてね」という通知の仕組み |
コードを書く前に、コードを動かす準備をします。 今日は ほとんどクリックだけで進められる ようにしました。 ターミナル(黒い画面)はほぼ触りません。
「Claude.app」は AI と話しながらコードを書いてもらえる Anthropic 公式の デスクトップアプリです。今日のコードは Claude が書いて、Claude が動かします。
- ブラウザで https://claude.ai/download を開く
- お使いの OS のインストーラをダウンロードしてインストール
- アプリを起動し、アカウント作成、もしくは既存アカウントでログイン
Note
Claude.app の無料プランでも進められますが、短時間で利用回数の上限に達することがあります。 ワークショップ中に上限で止まらないよう、Pro プランがあると安心です。
今日以降、AI で何か作るときの 「作業場所」 になるフォルダを作ります。
- マウスでデスクトップに 「プロジェクト」 という名前のフォルダを作成 or 移動
- これでデスクトップに
プロジェクト/フォルダができました プロジェクト/oishinbotを作成してください
Note
来週別のものを作りたくなったら、同じ「プロジェクト」フォルダの中に また別のサブフォルダを作ればいい、という考え方です。
- Claude.app を起動
- 新しい会話を開始
- 「+」 → 「フォルダを追加」から、先ほど作った
プロジェクト/oishinbotフォルダを選択 - Claude が
プロジェクト/oishinbotフォルダの中でファイルを読み書き・コマンド実行できる状態になります
Note
ここから先、Claude が「コマンドを実行してもいいですか」と聞いてきたら、 毎回 「許可」 を押してください。
bot は Node.js という道具の上で動きます。 これは「JavaScript というプログラム言語をパソコン上で動かすための道具」です。 入っているかどうかを確認して、入っていなければ Claude に入れてもらいましょう。
Claude.app に以下を送ります:
今日は LINE bot を一緒に作ることが目的です。
まず私の PC に Node.js が入っているか確認してください。
入っていなければ、私の OS に合った方法でインストールしてください。
最後に `node -v` を実行して、バージョンを教えてください。
v22.x.x のような表示が返ってくれば、環境は OK です。
Note
Mac の場合、Claude が Homebrew 経由でインストールしようとして Homebrew 自体のインストールから始まります。 数分かかることもありますが、最後まで「許可」で進めれば大丈夫です。 https://nodejs.org/ の LTS 版 を自分でダウンロードしてインストールしても OK。
3 つのサービスにアカウントを作ります。 それぞれ「何のためか」を意識すると迷いません。
LINE bot を動かすには、LINE 側に「これから bot を作ります」と登録する必要があります。
- https://developers.line.biz/console/ にアクセス
- 右上の「ログイン」→ 普段使っている LINE アカウントでログイン
- 開発者情報(名前とメールアドレス)を入力
- 「プロバイダー」を作成 → 名前は自分の名前や好きな名前で OK
- プロバイダーの中で 「Messaging API」チャネルを作成
- チャネル名:好きな名前(例:「美味しんぼット」)
- チャネル説明:何でも OK
- 大業種・小業種:「個人」→「個人(その他)」など
- 作成後、チャネルの設定画面で以下 2 つの値を取得します:
| 名前 | どこにあるか |
|---|---|
| チャネルシークレット | 「チャネル基本設定」タブ |
| チャネルアクセストークン | 「Messaging API 設定」タブ → 「チャネルアクセストークン(長期)」→「発行」ボタン |
Note
チャネルアクセストークンは「発行」ボタンを押さないと表示されません。 発行後はメモしておいてください(漏らさないように)。
LINE bot の設定は 2 つの管理画面で行います。混乱しないように整理します。
- LINE Developers Console (今開いている画面): Webhook や API キーなど開発者向け設定
- LINE Official Account Manager (別サイト): 応答モードやあいさつなど運用向け設定
「Messaging API 設定」タブにある「応答メッセージ」「あいさつメッセージ」の 「編集」ボタンは、クリックすると LINE Official Account Manager に遷移します。 LINE Developers Console 単体では応答系の設定は変更できない、と覚えておいてください。
「Messaging API 設定」タブで以下を変更してください:
- 「Webhook の利用」: 有効にする(これがないと、メッセージが届きません)
Webhook URL は Part 3 で設定します。
https://manager.line.biz/ にログインし、 今作ったアカウントを選択 → 右上の「設定」→ 左メニューの「応答設定」を開き、 以下のように設定してください:
- 応答モード: 「Bot」を選択(Messaging API を動かすためにこれが必須)
- あいさつメッセージ: オフ(任意ですが、邪魔なので OFF 推奨)
- 応答メッセージ: オフ(LINE の自動返信を OFF にして、bot の応答だけにする)
- Webhook: オン
Note
「応答モード」が「チャット」のままだと、Webhook が送られても bot が反応しません。 必ず「Bot」に切り替えてください。 2022 年 11 月以降は Webhook とチャットの併用も可能ですが、 今日はシンプルに「Bot」モードで進めます。
「Messaging API 設定」タブの下の方に、QR コードがあります。 スマホの LINE で読み取って、自分の美味しんぼットを友だち追加してください。
美味しんぼットの頭脳となる Claude AI を呼び出すための「鍵」を取得します。
Note
これは Claude.app のログインとは 別物 です。 Claude.app は「あなたが Claude と話す」もの、API キーは「あなたの bot が Claude と話す」ためのものです。
- https://console.anthropic.com/ にアクセス
- アカウント作成(Google ログインが楽)
- ログイン後、左メニューの 「API Keys」 をクリック
- 「Create Key」 をクリック → 名前は何でも OK(例:「oishinbot」)
- 表示された API キー(
sk-ant-...で始まる長い文字列)をコピーしてメモ
Warning
このキーは一度しか表示されません。 閉じる前に必ずメモしてください。 万が一なくしても、削除して再発行すれば大丈夫です。
Claude API は使った分だけ課金されます。少額のクレジットを追加しておきます。
- 左メニューの 「Billing」
- 「Add to credit balance」 から $5 ほどチャージ
- クレジットカード情報を入力
Note
今日のワークショップで使う API 呼び出しは、Haiku モデルなら 1 回あたり 0.001 ドル前後です。 $5 もあれば数千回試せます。
LINE のサーバーは、あなたの PC に「メッセージが届いたよ」と知らせる必要があります。 でも普通、家の PC には外からアクセスできません。
ngrok は「一時的に表札を出してくれる道具」です。
- https://ngrok.com/ にアクセス
- 「Sign up」 からアカウント作成
- ログイン後、ダッシュボードに表示される authtoken をコピーしてメモ
Your Authtokenという欄の長い文字列
ngrok 本体のインストールと設定は Part 3 で Claude にお任せします。
ここからは Claude.app に話しかけるだけ で進みます。 ターミナル（黒い画面）は Claude が裏側で勝手に叩いてくれます。
Part 1-3 で開いた プロジェクト/oishinbot フォルダがそのまま「作業場所」になります。
Claude.app の入力欄に、以下を丸ごとコピペしてください:
今開いているこのフォルダの中に、LINE bot を Node.js で作ってください。
要件:
- LINE で料理名(例: カレー、肉じゃが、麻婆豆腐)を送ると、その料理のレシピを返す bot
- レシピは Anthropic の Claude API(モデル: claude-haiku-4-5)を使って生成する
- ローカル(私の PC)で動かす想定。ngrok 経由で LINE と通信する
- Express を使って Webhook を受け取る。ポートは 3000 で起動する
- 環境変数(.env ファイル)で以下の値を管理:
- LINE_CHANNEL_ACCESS_TOKEN (LINE にメッセージを返信するため)
- LINE_CHANNEL_SECRET (Webhook の署名検証に使う)
- ANTHROPIC_API_KEY
- Webhook のエンドポイントは /webhook
- LINE_CHANNEL_SECRET を使った Webhook 署名検証も実装してください
- package.json も作ってください
- 起動コマンドは npm start で動くようにしてください
作成が完了したら、npm install まで実行して、エラーが出ないか確認してください。
Note
このプロンプトの「具体性」 を意識してください。 「LINE bot を作って」だけだと、何で作るか、どうやって動かすか、どこに何を保存するか、全部 AI 任せになります。 具体的に指示すると、具体的な答えが返ります。
Claude が プロジェクト/oishinbot/ の中にファイルを作り、パッケージのインストールまで実行してくれます。
コマンド実行の許可を求められたら 「許可」 を選択してください。
Claude が .env.example のようなテンプレートを作ってくれているはずです。
Claude に以下のように頼みます:
.env.example をコピーして .env を作って、以下の値を入れてください:
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxx
LINE_CHANNEL_ACCESS_TOKEN=ここに長いトークンを貼り付け
LINE_CHANNEL_SECRET=ここにシークレットを貼り付け
(sk-ant-xxxxxxxxxxx などの部分は、Part 2 で取得した自分の値 に置き換えてください)
Warning
= の前後に スペースを入れないでください。
KEY = value ではなく KEY=value です。
Claude に以下を一気に頼みます:
bot を起動して、ngrok で公開するところまでやってほしいです。
1. npm start で bot をバックグラウンドで起動
2. ngrok がまだなければインストール
3. ngrok の authtoken を設定(私の authtoken は xxxxxxxxxx です)
4. ngrok http 3000 でバックグラウンドで公開
5. 公開された https の URL を教えてください
(xxxxxxxxxx の部分は、Part 2-3 でコピーした 自分の authtokenに置き換えてください)
Claude が順番に実行してくれて、最終的に https://abcd-1234-5678.ngrok-free.app のような URL を教えてくれます。
Note
ターミナルウィンドウを 2 つ開いて切り替えて…のような操作は不要です。 Claude.app が裏でプロセスを起動しっぱなしにしてくれます。 コマンド実行の許可は毎回「許可」を押してください。
Claude が教えてくれた URL を、LINE Developers 側に貼り付けます。
- LINE Developers のあなたのチャネルを開く
- 「Messaging API 設定」タブ
- 「Webhook URL」 に以下を入れる:
https://abcd-1234-5678.ngrok-free.app/webhook
(abcd-... の部分は、Claude が教えてくれた URL に置き換える。末尾の /webhook を忘れずに付けてください)
- 「更新」ボタン → 「検証」ボタン → 「成功」と出れば OK
- 「Webhook の利用」が ON になっていることを確認
スマホの LINE で、自分の美味しんぼットに料理名(例:「カレー」)を送ってみてください。
数秒後にレシピが返ってきたら 🎉 大成功です!
落ち込まないでください。エラーが出るのは普通です。
Claude.app の良いところは、ログも Claude 自身が読める ことです。以下のように聞くだけで OK です:
LINE に送ってもレシピが返ってきません。
何が起きているか調べて、直してもらえますか?
Claude が:
- bot のログを確認
- ngrok のログを確認
- 怪しいところを特定
- 必要なら修正してテスト
までやってくれます。 LINE 側にエラーメッセージが見えていれば、それも貼ってあげると精度が上がります。
何かしらの情報を、任意のタイミングで、取得して、返した。
これだけです。でもこれが、世の中のあらゆる Web サービスの基本形です。
- 「やりたいこと」を具体的に言語化できれば、AI が手伝ってくれる時代
- エラーは怖くない。エラーの状況を AI に共有すれば、9 割は解決する
- 「動くもの」が作れた今日の体験は、AI 時代の第一歩
問題は、すばらしいアイデアとすばらしい製品の間には、とてつもない職人技の積み重ねが必要だということなんだ。 それに、アイデアを発展させていく過程で、そのアイデアは変貌し、成長する。 とりかかった時点で考えていたものと同じものができあがることなんて絶対にない。 細部を詰めていくに従って多くのものを学ぶし、妥協しなければならない点も無数に出てくるからだ。 電子にはできないことが必ずある。 プラスチックにはできないこと、ガラスにはできないこと、工場やロボットにはできないことがね。 こういったことすべてが絡んでくるから、製品を設計するというのは、5000のことを頭の中で考えるのと同じなんだ。 そうしたコンセプトを一つにまとめて、 それまでとは異なる新しいやり方で組み合わせたりして、自分がほしいものを生み出す。 問題であれチャンスであれ、毎日何かしら新しいものが現れるたびに、全体をまた少し違った形で組み直すことになるわけだ。 その過程がマジックなんだよ。
- 美味しんぼットの機能を増やしてみる(例:「献立提案して」「カロリーも教えて」)
- 別の API を使ってみる(例: 天気、為替、ニュース)
- パソコンを開いていない時にも使いたい！(deploy, GitHub, Vercel...)
- 「コードを読む」「ターミナルから動かす」に挑戦してみたければ、また別日に!
- X/Twitter の AI 驚き屋は全てブロックしてください
- これからはエンジニアリングではなくてプロンプトエンジニアリング笑
- AI Agent で 30人の部下を作って会社経営しています笑
- これからの時代はハーネスエンジニリング笑
- 速報！ついに AI で自動的に収益が出せる仕組みが出ました笑
- これからはエンジニア不要！エンジニアの仕事は無くなります笑
- これらは全部ゴミでありクソ、ノイズです
- 何を発信しているのか？ではなくて、何を作っているのか以外は信じる必要なし
- わからないことがわからない、という状況を認めて、常に AI に相談しましょう
- AI は間違えることがあります
- ただし、AI は 99%以上の人類より賢いです
- では、なぜ間違えるのか？この問いを持つことが大事です
- 質問の方法は十分に妥当だったのか？ウェブ検索をして最新の情報を取得してもらっているのか？
- AI はなぜこのように振る舞うのか？これは実は科学的には完全に解明されていません
- 飛行機はなぜ飛ぶのか？自転車はなぜまっすぐ走れるのか？科学よりも工学の方が先行していることを理解しましょう
| 用語 | 説明 |
|---|---|
| API | あるサービスに「こういう情報ください」と聞ける窓口 |
| API キー | API を使うときの「身分証明書」。漏らすと悪用される |
| Claude.app | AI と話しながらコードを書けるデスクトップアプリ |
| Express | Node.js で Web サーバーを作る道具(フレームワーク) |
| Node.js | パソコンで JavaScript を動かすための道具 |
| npm | Node.js のパッケージ管理ツール。npm install ◯◯ で道具を入れる |
| ngrok | ローカルの PC を一時的に外部公開する道具 |
| package.json | プロジェクトに必要な道具一覧を書いたファイル |
| Webhook | 「何かが起きたら教えてね」という通知の仕組み |
| 環境変数 | コードに直接書かない秘密の値(API キー等)。.env に書く |
お疲れさまでした! 🎉