YIC情報ビジネス専門学校についてはこちら

Tel:083-976-8354

今後の予定 |
6月13日(土)、6月15日(月)
以降の予定| 6月20日(土)、6月27日(土)、7月11日(土)、7月18日(土)、7月25日(土)、7月29日(水)、7月30日(木)
今スグ!お申し込み

Vibe4 AIと話してアプリを作ろう!落ち物キャッチゲーム作成体験

今日は「バイブコーディング」に挑戦します!
難しいプログラミングの言葉(コード)は一切キーボードで打ちません。AIに「日本語でお願いするだけ」で、君だけのオリジナルアプリを作ってみましょう!


🛠️ 準備:2つの画面を開こう

1)AIの画面(お願いをする場所)
 または




2)エディタの画面(アプリを動かす場所)

IDとパスワードが必要です。担当の先生から教えてもらいましょう

 

画面が左右に分かれていて、上に緑色の「Run」ボタンがあるページです。


ステップ1:まずは「手相アプリ」を作ろう!

さっそくAIに最初の「お願い(プロンプト)」をしてみましょう。
1)下の文章をコピーして、AIのチャット欄に貼り付けて送信してください。

【コピー&ペースト用プロンプト】
スマホでもPCでも遊べる、シンプルな「落ち物キャッチゲームアプリ」を作りたいです。
画面の上から「コイン(黄色い丸)」がランダムにゆっくり落ちてくるので、画面下にある「プレイヤー(青い四角)」を左右の矢印ボタン(またはタッチ、マウス移動)で動かしてキャッチするゲームです。
コインをキャッチすると10点加算され、制限時間は30秒です。画面に現在のスコアと残り時間を大きく表示してください。
※重要:HTML、CSS、JavaScriptのコードは、すべて1つのHTMLファイルにまとめて出力してください。

 

2)コードの終端</html>を確認して、コードエリアの右上にあるボタンを押します。


3)エディタ(Monaca Education)の中央画面(index.html)にある文字をすべて消して、コピーしたコードを貼り付けます。

4)左上にある保存ボタンを選択します。

5)右側の画面にアプリが表示されたら成功です!カメラ機能で手相を読み取ってみましょう。ただし、カメラがついていないパソコンでは、確認できません。

 

6)作成したアプリをスマホで確認しましょう。
「スマホでみる」を選択して、二次元コードが表示されたら、スマホで読み取りましょう。

 


 

 

 

 

 

 

🚀 ステップ2:自分好みに「バイブス」を上げよう!(アレンジ)

ここからが本番です!完成したアプリをもっと面白くするために、AIと会話して改造していきましょう。AIへの追加のお願いは、短い言葉でOKです。

【アレンジ例】
落ちてくるものをコインじゃなくて、絵文字の「寿司(🍣)」や「お金(💰)」にして、デザインをもっと可愛くして!



【アレンジ例】
時々、当たるとマイナス20点になる「爆弾(💣)」がランダムに落ちてくるようにして!



【アレンジ例】
残り時間が10秒になったら、落ちてくるスピードが3倍になる「無理ゲーモード」にして、背景を赤くして!

🔄 アレンジのやり方

  1. AIにアレンジのお願いを送信する。
  2. 新しく作ってくれたコードを「コピー」する。
  3. エディタの中央のindex.htmlコードをすべて消して、新しく「貼り付け」る。
  4. 「保存」して、「リロード」を押して変化を確認!


さあ、残り時間は自由です!
君のアイデアをどんどんAIにぶつけて、隣の友達が驚くような面白いアプリに進化させてみましょう!

 

 

 

 

 

 

🆘 もしエラーが出たら?(トラブルシューティング)

バイブコーディングでは、動かなくなることもよくあります。焦らなくて大丈夫!
自分で直そうとせず、AIに直してもらいましょう。

  • ボタンを押しても何も起きないとき
    → AIに「ボタンを押しても動きません。直したコードをもう一度出してください」と伝える。

  • デザインが変になったとき
    → AIに「文字がはみ出てしまいました。スマホ画面に収まるように修正して」と伝える。

  • よくわからなくなったとき
    → 「最初のアプリの状態に戻して!」とお願いすれば、元通りにしてくれます。