Claude Codeで、はじめてのアプリづくり自分専用の買い物リストを作ろう

1作る前に、構成を相談する

買い物のときに使う、シンプルな買い物リストのアプリを作りたいです。
今開いているフォルダの中に「買い物リスト」というフォルダを作って、その中に作ってください。
買うものを追加して、買ったものにチェックを付けたり、削除したりできるようにしてください。
データはこの端末のブラウザだけに保存して、ログインやデータベース、外部のサービスは使わないでください。
スマホでも使いやすいように、文字とボタンは大きめにしてください。
初心者なので、HTMLファイル1つだけの簡単な構成にしてください。
また、作る前に、どんな構成で作るか教えてください。

2よさそうなら、作ってもらう

いいですね。その内容で作ってください。

3ブラウザで開いて、触ってみる

作ったアプリをブラウザで開いて確認したいです。開き方を教えてください。

Finder で、作業用フォルダの中にできた「買い物リスト」フォルダを開き、HTMLファイルをダブルクリックしても開けます。

4変えたいところは、ふだんの言葉で

「文字をもう少し大きくして」「ボタンの色を明るくして」のように、ふだんの言葉で伝えればOKです。

言葉で説明しにくいときは、スクショ（画面の写真）を貼り付けて伝えると、AIにぐっと伝わりやすくなります。

貼り付けたスクショの「追加」ボタンを、もう少し大きくしてください。

1困りごとを選ぶ

気になるものを開くと、そのまま使えるプロンプトがあります。★が多いほど、少し時間がかかります。

買うものを「野菜・果物」「肉・魚」「乳製品・たまご」「日用品」「その他」の売り場に分けて、売り場ごとにまとめて表示してください。
追加するときに、売り場を選べるようにしてください。

よく買うものをボタンとして登録しておいて、押すだけでリストに追加できるようにしてください。
よく買うものは、あとから追加・削除できるようにしてください。

チェックしたもの（買ったもの）は、リストの一番下に移動して、薄く表示してください。
「買ったものをまとめて消す」ボタンも付けてください。

買うものに個数を入れられるようにして、「たまご ×2」のように表示してください。
個数は＋と−のボタンで変えられるようにしてください。

買うものに、だいたいの金額を入れられるようにしてください。
画面の上に合計金額を表示して、予算を決めたら、それを超えたときに分かるようにしてください。

「スーパー」「ドラッグストア」「100円ショップ」のように、お店ごとにリストを分けて、画面の上で切りかえられるようにしてください。
お店はあとから追加できるようにしてください。

買うものに「優先」マークを付けられるようにして、優先のものはリストの一番上に目立つように表示してください。

スマホを片手で持ったまま使いやすいように、チェックと削除のボタンを大きくして、入力欄を画面の下のほうに置いてください。

今の機能は変えずに、沖縄の海みたいな明るい雰囲気の色にしてください。

2ぴったりのものがなければ、AIに相談する

この買い物リストアプリに、機能を1つ足したいです。
私が買い物で困っているのは、（ここに困りごとを書く）ことです。
この困りごとを解決する方法を、いくつか提案してください。
まだ作らないでください。

提案を読んで「〇〇がいいので、それを作ってください」と伝えれば作ってくれます。

ホーム画面に追加する

公開したあとに、アプリを直したいとき

Artifact や ChatGPT Sites で公開したアプリは、公開したときのコピーです。PCのファイルを直しても、スマホで開くアプリは自動では変わりません。

1. PCでアプリを直す（機能を足す・見た目を変える など）
2. AIに「更新して」と頼む（下のプロンプト）
3. スマホでアプリを開き直して、変わったか確認する

前に公開したArtifactを、今のアプリの内容で更新してください。
ArtifactのURLは （ここにURLを貼る） です。URLは変えないでください。
データ連携版にしている場合は、今のリストは消さずに、見た目と機能だけを更新してください。

前に公開したChatGPT Sitesを、今のアプリの内容で更新してください。
アクセス範囲は所有者向けのままにしてください。
データ連携版にしている場合は、データベースのリストは消さずに、見た目と機能だけを更新してください。

PCとスマホで同じリストを使う

今日のアプリは、PCとスマホでリストが別々です。データ連携版にすると、家のPCで入れたリストを、お店でスマホから見られるようになります。

やり方は、プロンプトを1つ送るだけ

1. STEP3まで終わらせて、アプリを公開しておく
2. 使っているAIのタブを選んで、プロンプトをコピーして送る
3. AIが、リストの保存場所を「自分のアカウントの中」に作りかえてくれる
4. PCとスマホの両方で開いて、同じリストが見えるか確認する

この買い物リストアプリを、スマホとパソコンで同じリストを使えるClaude Artifact版にしてください。

買うものとチェックの状態はHTMLの中に保存してください。
追加・チェック・削除を操作するたびに、発行済みの元HTMLを読み直し、リストのデータの部分だけを書き換えて、同じArtifactの新しいバージョンとして自動保存してください。
表示中の画面全体を、そのまま保存しないでください。

自分のスマホとパソコンで同じArtifactを開き、追加・チェック・削除・再読み込み後も同じリストが見えるか確認してください。

この買い物リストアプリを、スマホとパソコンで同じリストを使えるデータ連携版にしてください。

localStorageではなく、ChatGPT SitesのD1データベースに保存してください。
画面を開いたとき、操作したあと、再読み込みしたときに、データベースから最新のリストを読み直してください。

ChatGPT Sitesへ公開し、アクセス範囲は所有者向けに限定してください。他のユーザーやインターネット全体には共有しないでください。
公開後にアクセス設定を確認し、自分のスマホのブラウザから同じChatGPTアカウントで開く手順とURLを教えてください。

個人情報や機密情報は保存しない前提にして、公開前に追加・チェック・削除・再読み込み・スマホとPCでの表示を確認してください。

おうちで挑戦：自分のURLで公開する

今日のアプリは、自分のアカウントの中だけにあります。Cloudflare（クラウドフレア）を使うと、自分専用のURLで公開できます。ホーム画面のアイコンも、自分の画像にしやすくなります。

今日の公開方法とのちがいは、アプリの公開方法の図で確認できます。

この買い物リストアプリを、Cloudflare Pagesで公開したいです。
初心者なので、アカウントの作成から公開まで、1つずつ手順を教えてください。
進める前に、公開すると誰が見られる状態になるのかも説明してください。

• Cloudflare のアカウント作成
• Cloudflare Pages の説明（英語）

分からなかったら、次回のオフ会で一緒にやりましょう。

今日の持ち帰りポイント

• 小さく作って、1つずつ足す
• 作る前に「どう作るか」をAIに聞く
• 困ったら、ふだんの言葉でそのままAIに相談する