Vibe2 AIと話してアプリを作ろう!手相診断アプリ作成体験
今日は「バイブコーディング」に挑戦します!
難しいプログラミングの言葉(コード)は一切キーボードで打ちません。AIに「日本語でお願いするだけ」で、君だけのオリジナルアプリを作ってみましょう!
🛠️ 準備:2つの画面を開こう
1)AIの画面(お願いをする場所)
または
2)エディタの画面(アプリを動かす場所)
IDとパスワードが必要です。担当の先生から教えてもらいましょう
画面が左右に分かれていて、上に緑色の「Run」ボタンがあるページです。
ステップ1:まずは「手相アプリ」を作ろう!
さっそくAIに最初の「お願い(プロンプト)」をしてみましょう。
1)下の文章をコピーして、AIのチャット欄に貼り付けて送信してください。
| スマホで動くような、おしゃれな「手相アプリ」を作りたいです。 カメラ機能を使い、リアルな診断をしてください。 診断内容は、総合的なことについて大きく表示されるようにしてください。 ※重要:HTML、CSS、JavaScriptのコードは、すべて1つのHTMLファイルにまとめて出力してください。 |
2)コードの終端</html>を確認して、コードエリアの右上にある
ボタンを押します。
3)エディタ(Monaca Education)の中央画面(index.html)にある文字をすべて消して、コピーしたコードを貼り付けます。
5)右側の画面にアプリが表示されたら成功です!カメラ機能で手相を読み取ってみましょう。ただし、カメラがついていないパソコンでは、確認できません。

6)作成したアプリをスマホで確認しましょう。
「スマホでみる」を選択して、二次元コードが表示されたら、スマホで読み取りましょう。
🚀 ステップ2:自分好みに「バイブス」を上げよう!(アレンジ)
ここからが本番です!完成したアプリをもっと面白くするために、AIと会話して改造していきましょう。AIへの追加のお願いは、短い言葉でOKです。
| 総合運でなく、勉強運と恋愛運、健康運を表示して! |
| 診断結果が良かった時には明るい背景色、悪かった時には暗い背景色にしてください! |
| 2人分読み取って、相性診断を表示して! |
| おみくじじゃなくて、RPGの『ガチャ(N, R, SR, SSR)』みたいに変更して! |
🔄 アレンジのやり方
- AIにアレンジのお願いを送信する。
- 新しく作ってくれたコードを「コピー」する。
- エディタの中央のindex.htmlコードをすべて消して、新しく「貼り付け」る。
- 「保存」して、「リロード」を押して変化を確認!
さあ、残り時間は自由です!
君のアイデアをどんどんAIにぶつけて、隣の友達が驚くような面白いアプリに進化させてみましょう!
🆘 もしエラーが出たら?(トラブルシューティング)
バイブコーディングでは、動かなくなることもよくあります。焦らなくて大丈夫!
自分で直そうとせず、AIに直してもらいましょう。
-
ボタンを押しても何も起きないとき
→ AIに「ボタンを押しても動きません。直したコードをもう一度出してください」と伝える。 -
デザインが変になったとき
→ AIに「文字がはみ出てしまいました。スマホ画面に収まるように修正して」と伝える。 -
よくわからなくなったとき
→ 「最初のアプリの状態に戻して!」とお願いすれば、元通りにしてくれます。











