こんにちは、AWSグループのホンドウです。 この度は、Kiroを使う機会をいただいたため、開発スーパー初心者の私がAIに頼り切ってwebコンテンツを作成してみました。
まず、どんなツールを作ろうかという段階です。 Kiroという謎のお化けにビビりまくっている私は、まず親交の深いChatGPT先生に相談します。
AIにも敬意を払うタイプのエンジニアですので、もちろん敬語です。 何を作るかいろいろ提案してくれましたが、どれもピンとこなかったため、狸のゲームを作りたいと相談たところ…
案①「タヌキ発見ゲーム（現実×収集型）」 案②「タヌキ見分けクイズ（狂気寄り）」 案③「タヌキ旅すごろく」 案④「タヌキ擬態ゲーム（ミニアクション）」 案⑤「タヌキ育成 × 図鑑」
こんなに考えてくれました。
こうしてKiroへの指示出しの仕方を一通り教えてもらい、Kiroへの対戦準備が整いました。
いざ尋常に勝負
まず環境設定です。 デフォルトの言語が英語なので、日本語にします。これをしなくても、プロンプトに日本語で入力すれば日本語を返してくれるので必須ではありません。
Ctrl+Shift+P (MacはCmd+Shift+P) でコマンドパレットを開き、「display」と入力。
リストから日本語をクリックすると再起動の確認が表示されるのでRestartをクリック
再度Kiroを開くとメニュー表示が日本語になり、インストール済みの拡張機能にJapanese Language Pack for Visual Studio Codeが追加されます。
慣れ親しんだ言語、ほっとします。
次に作業フォルダを開きます。 画面中央のOpen a projectをクリックし、任意のフォルダを選択するとLet’s buildと表示されます。
今回はVibeモードを使っていきます。
※モードの違いは…ググってね。
画面下部の入力ウィンドウに用意しておいたプロンプトを入力します。
▼今回使用したプロンプト
目的： ブラウザで遊べるミニアクションゲームを作成したい。 プレイヤーは信楽焼のタヌキを操作し、「置物のふり（擬態）」をしながら 観光客に見つからないように生き延びるゲームとする。 ゲーム概要： ・プレイヤーキャラクターはタヌキ ・画面内を自由に移動できる ・一定時間ごとに観光客（NPC）が画面内を歩き回る ・観光客の視界内で動いているとゲームオーバー ・停止している間は「擬態状態」となり、観光客に見つからない ・画面内に配置された花や果物などのアイテムをゲットするとポイントアップ 操作仕様： ・矢印キー（またはWASD）で移動 ・スペースキーを押している間は停止（擬態） ・擬態中はタヌキの見た目を「置物風」に変える ルール： ・生存時間がスコアになる ・時間経過で観光客の人数や移動速度が増える ・観光客に一定時間見られると発見扱いとなりゲームオーバー ・一瞬視界に入るだけでは即アウトにならないよう猶予時間を設ける 画面構成： ・ゲーム画面（中央） ・スコア表示（生存時間） ・スタート画面 ・ゲームオーバー画面（スコア表示＋リトライボタン） 技術要件： ・HTML / CSS / JavaScriptで実装 ・Canvas または DOM ベースどちらでもよい ・外部ライブラリは使用しない（または最小限） ・1ファイルでも動作可能な構成にする その他： ・全体的にゆるくて可愛い雰囲気 ・タヌキの動きが分かりやすいこと ・コードは読みやすくコメントを付ける デザイン方針： ・全体の雰囲気は「ゆるい・かわいい・少しシュール」 ・信楽焼タヌキをモチーフにした和風テイスト ・子供向けすぎず、大人がクスッとする感じ 色・見た目： ・背景は落ち着いたベージュや薄いグレー ・タヌキは茶色ベース ・擬態中は彩度を下げて置物感を出す ・観光客はシンプルなシルエットで描写する UIデザイン： ・スコア表示は画面端に小さく配置 ・フォントは丸みのある読みやすいもの ・ボタンは大きめでシンプル アニメーション： ・タヌキの移動は少しだけもっさりした動き ・擬態に入る時に一瞬「カチッ」と止まる演出 ・観光客は一定のリズムで歩く 視認性： ・プレイヤーと観光客の区別が一目で分かること ・擬態中／非擬態中の違いが明確であること
指示を投げると画面構成が変わり、左側で選択したファイルの記載内容が中央に、右側にKiroとのやり取りが表示されます。
1分ほどでファイルが出来上がりました！
早速tanuki-game.htmlをブラウザで開いてみます。
シンプルなスタート画面ですね。
しかし、ゲームを開始するとゲームの経過時間がカウントされず、また通行人が一度通り過ぎると二度と出てこないので永遠に終わらない…
追加の指示を出してみます。
時間がカウントされませんでした。
また、観光客が一度消えると二度と出てこないので、一人ではなく複数人出現するようにしてください。
動きも一方向ではなく停止したり周りを見渡すような動きを追加してください。
背景も観光地っぽいお店などがあると良いです。
観光客ももう少し人間らしいイラストに変更してください。
生存時間の表示がされないままなので、もう一度修正してもらいます。
時間のカウントがされないままです。
アイテムゲットのポイントと、生存時間のポイントを加算して、ゲーム中の画面とゲームオーバー画面に表示させるようにしてください。
こんなかんじで、動かしてみては気になったところを指摘するというようなやり取りを何度か繰り返し、
30分もかからず実際に遊べるゲームを作ることができました。
作成されたのは930行ほどのhtmlファイルが1つです。 1ファイルでゲームが動かせるんですね！ 記念すべき初めてのwebゲーム製作でした。
対戦後記
実際にKiroを使ってみた感想は、味方にしたら超心強いぞ！です。 実現したい内容を日本語で説明すると、抽象的なイメージだったとしてもそれをくみ取って具現化してくれるなんとも便利なツールでした。 エラーの調査についても、まずどんなことを確認するのか説明しながら進めてくれますので、今後の調査に活かせるのではないかと思います。
こんなに簡単にwebコンテンツが作れるとなると、創作意欲が湧いてきますね！ 次は何を作ってみようか…わくわくが止まりません。
皆さんも恐れることはありません。AIと手を取り合いましょう！
