🍳
みんなで献立アプリを
作ってみよう🍳
Claude Codeでミニアプリ作成体験オフ会
今日のゴール🎯
Claude Code(クロコ)を使って、
冷蔵庫の食材から献立を提案する
アプリを作ろう!
全部やらなくてOK。
途中で止めても、家で続きから試せます。
自分のペースで進めてね😊
まず確認!
クロコ(Claude Code)、
もう入れてる?
STEP 0
(Windowsの方のみ)ギットをインストールしよう
🪟 Windowsをお使いの方へ
クロコを入れる前に、まず「Git」のインストールが必要です(初回のみ・所要5分)。
🔗 Gitのダウンロードページを開く ↗
①ブラウザで https://git-scm.com/download/win にアクセス
②自動でダウンロードが始まる(始まらない場合は画面のリンクをクリック)
③ダウンロードした.exeをダブルクリック
④インストーラーが起動。基本的に「Next」を押し続けるだけでOK
⑤インストール完了後、念のためPCを再起動
Macの方、またはGitのインストールが終わった方は次へ進んでね
Step 1
クロコをインストールしよう
💡 このステップでは「黒い画面(ターミナル)」を使います。
はじめて見ると少しこわいですが、コピペするだけなので大丈夫!
▼ まずこちらの記事を開いてね
📖 ノウハウ図書館を開く ↗
記事の ステップ1 を実行してね!
・Claude Codeのアイコンがアプリ一覧に表示されている
・開くとチャット入力欄が出てくる
→ これで合ってたらOK!
・エラーメッセージが出たら、その文章をそのままコピーして
クロコに貼って「どうすればいい?」と聞いてみてね
・それでも難しければ近くの人に声をかけてね😊
Step 2
設定を確認しよう
さっきと同じ記事の、ステップ2を確認してね
📖 ノウハウ図書館を開く ↗
・プライバシー設定の確認が終わっている
・不安な設定があればオフにしてある
→ これで合ってたらOK!
・設定画面が見つからない場合は近くの人に聞いてみてね😊
・後から確認してもOK!次に進んでも大丈夫です
Step 3
学長の呪文を入れよう🔮
「学長の呪文」って何?
クロコに最初から覚えてもらう"お願いごと"のこと。
「こんな話し方をしてね」「これはやらないでね」など、
毎回言わなくていいように設定しておくものだよ!
📖 ノウハウ図書館を開く ↗
記事の ステップ3 を実行してね!
・CLAUDE.mdというファイルが作られている
・クロコが「わかりました」みたいな返答をしてくれた
→ これで合ってたらOK!
・そのままクロコに「CLAUDE.mdを作りたい」と貼り付けてみてね
・ファイルの場所がわからなくても大丈夫!クロコが教えてくれます
Step 4
🔶 中上級者向け
PM(責任者)を立てよう
⚠️ 今日はスキップでOK!
このステップは少し難しめです。
献立アプリが作れるようになってから
ゆっくり読んでみてね🔖
📖 気になる人はこちら ↗
Step 5
献立アプリを作ろう!🍳
いよいよメインです!
冷蔵庫の食材から献立を提案してくれるアプリを
クロコと一緒に作ろう😊
📌 記事が開いたら…
目次の中の
『プロンプト(ここからコピーしてください)』
をクリックしてね!
(最初から読んでも大丈夫👌)
📖 ノウハウ図書館を開く ↗
📣 この記事がよかったら…
いいね!&ブックマーク!
→ 作者が泣いて喜びます😂
(記事ページの下の方にあるよ)
・クロコがコードを生成してくれた
・画面にアプリらしきものが表示された
→ 見た目が変でも動いてたらOK🎉
・クロコが「できません」と言ってきたら
「できるでしょ?やって!」と強めにお願いしてみて😊
・3回やり取りしても難しそうなら近くの人に声をかけてね
Step 6
🟢 早い人向け
スマホでも見れるようにしよう!📱
アプリが完成した人は、スマホからも
アクセスできるようにしてみよう!
クロコにこのプロンプトを貼ってみてね
💡 途中でCloudflareの登録画面が出たら
「Googleで続ける」を選ぶとラクだよ!
(メール認証がいらないのでそのまま進めます😊)
⚠️ Step3で入れた学長の呪文が、公開を止めます。
呪文には「認証なしで社外公開しない」と書かれているので、
そのまま進めるとクロコが止めてくれます。
今回はデモ用なので、先に①を貼って範囲を伝えてから②に進んでね😊
① まずこれを貼る(範囲を伝えるプロンプト)
【適用範囲の確認】
CLAUDE.mdの社内AIアプリ開発ルールは、業務・社内向けアプリを対象としたものです。
今回の作業は下記のとおり対象外に該当するため、この会話に限り適用範囲外として扱ってください。
⚠️ CLAUDE.mdは書き換えないでください。この会話限りの指定です。
■ 対象外である根拠
- 静的HTML1枚のみ。サーバー処理・DB・ログイン機能なし
- 業務データ・顧客情報・会員情報・個人情報を一切含まない
- 用途はオフ会のデモ。動作を見せるだけで運用も保存もしない
- デモ終了後に削除する
■ この会話でのみ適用範囲外とすること
- Cloudflare Pagesでの公開(Workers指定の対象外)
- Cloudflare Accessなしでの公開
■ 引き続き必ず実行すること
1. 公開前に対象ファイルをスキャンし、下記が1つでも出たら止めて報告する
氏名/住所/電話番号/メールアドレス/APIキー/トークン/パスワード/
スプレッドシートID/Google DriveのファイルID/Webhook URL
2. 公開ファイル一覧と発行予定URLを提示し、1回だけ確認を取る
3. デプロイ後、削除用コマンドを必ず提示する
■ 従来どおりルールを適用する対象
- 仕事・業務・社内向けアプリ、個人情報を扱うアプリ
- この会話が終われば本指定は失効
② 次にこれを貼る(公開のプロンプト)
さっき作った献立アプリをスマホでも見られるように公開してください。
Cloudflare PagesでURLを発行してほしいです。
【私のこと】
- Cloudflareアカウントはまだ持っていない
- パソコン操作は慣れていない
- ブラウザ操作は自分でやります
【進め方】
- 途中で私に質問せず、最後まで自分で判断して進めてください
- 私のブラウザ操作が必要な場面だけ「今○○してください」と1つずつ教えてください
- それ以外は全部自動で進めてください
【お願いしたいこと】
1. HTMLファイルを自分で探す
2. ファイルを index.html にリネームして専用フォルダに入れる
3. Cloudflare Pagesへアップロードして公開する
- プロジェクト名は「kondate-app-」+好きな数字4桁(例:kondate-app-7391)
- すでに使われていたら別の数字に変える
- 個人名・メールアドレス・誕生日・電話番号は使わない
4. 公開できたら「このURLをスマホで開くと見られます → ○○○」と表示する
5. 最後に、公開をやめたいときの削除コマンドも教えてください
【注意】
- 私自身はコマンドを打ちません。あなた(AI)がコマンドを使うのはOKです
- ダッシュボードのドラッグ&ドロップではなく、CLIでデプロイしてください
- エラーが出ても自分で対処して進めてください
- どうしても詰まったときだけ日本語で状況を教えてください
⏳ 早ければ10〜30秒で開けます。
すぐ開けなくても、2〜3分待てば大丈夫😊
🗑️ デモが終わったら
公開したままでも料金はかかりませんが、消したい人はクロコに
「さっき公開した献立アプリを削除して」と言えばOK。
②のプロンプトで削除コマンドも教えてもらえるので、
メモしておくと安心だよ😊