「Gemini CLI」を使ってみる！導入から、ゲームを作り始めるまで（作ったゲームも触れます）
最初に未完成のゲームを貼っておきます。次回ブログ記事にてもう少し進行版を貼ります。（まだゲームとしてはいまいちですが、とりあえず動く）
操作方法だけ、PCの場合、WASDとカーソルキーで移動、パワーアップはマウスで選択です。https://test.aisgm.me/test_prog/js/002/
画像クリックでも遊べます
ポイント
・Gemini CLIはマルチモーダル機能 様な入力から新しいアプリケーションを生成など
・大規模コードベースのサポート Geminiの100万トークンという広大なコンテキストウィンドウを最大限に活用し、大規模なコードベースのクエリや編集を効率的に行えます
・運用タスクの自動化 Git操作など、日常的なDevOps関連のタスクをAIが自動化
・豊富なツール統合 Gemini CLIの大きな強みです。Imagen（画像生成・編集）、Veo（動画作成）、Lyria（音楽生成）といったメディア生成モデルを含む新しい機能をModel Context Protocol (MCP) サーバーを通じて接続できます
「Gemini CLI」が何かとか、料金とか周辺の情報は大量にあるので、その辺は割愛します。
今回はWindowsPCにインストールして、実際に動かしてJavaScriptでゲームを作成して、プロトタイプがブラウザで遊べる所まで持って行きます。
新品価格 |  |
導入：Gemini CLIのセットアップ
前提条件
Gemini CLIは、Node.jsバージョン18以上が必要で、
node -v コマンドを実行することで簡単に確認できます 。
入っていない場合、
node : 用語 'node' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません
。名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してくださ
い。
発生場所 行:1 文字:1
+ node -v
+ ~~~~
+ CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
って、なるのでインストールから始めます。
インストールには２種類あって、「直接実行」と「グローバルインストール」があります。
違いは、
- 直接実行（インストール不要）:
この方法は、一時的にCLIを試したい場合や、特定のプロジェクトでのみ使用したい場合に特に適しています。システムに永続的なインストールを行うことなく、以下のコマンドをターミナルで実行するだけでGemini CLIを起動できます
npx https://github.com/google-gemini/gemini-cli
npx を使用した直接実行オプションは、ユーザーが気軽にGemini CLIを試せるようにするための重要なユーザーエクスペリエンス上の配慮です。これにより、永続的なインストールを躊躇するユーザーでも、手軽にAI機能を体験でき、ツールの普及を促進します。Googleがユーザーエンゲージメントの初期段階を重視していることが伺えます。 - グローバルインストール（推奨）:
システム全体で gemini コマンドを永続的に利用したい場合に推奨される方法です 。これにより、どのディレクトリからでも
gemini コマンドを直接実行できるようになります。以下のコマンドをターミナルで実行してインストールします 。
npm install -g @google/gemini-cli
という事だったんですが、「npm install -g @google/gemini-cli」を実行しても動かない。
調べてみると、権限が足りていない事なので、権限を付与します。
問題無く動く場合は、次へ進みます。
1.PowerShellを管理者権限で開く
・Windowsのスタートメニューを開き、「PowerShell」と検索します。
・「Windows PowerShell」を右クリックして「管理者として実行」を選択します。
2.現在の実行ポリシーを確認する
以下のコマンドを入力し、現在の実行ポリシーを確認します：
Get-ExecutionPolicy -List
これにより、現在のスコープごとの実行ポリシーが表示されます。Restrictedとなっている場合、スクリプトの実行が無効になっています。
3.実行ポリシーを変更する
実行ポリシーを変更するには、以下のコマンドを入力します：
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
コマンドの意味
RemoteSignedは、ローカルで作成したスクリプトを実行可能にし、インターネットからダウンロードしたスクリプトには署名が必要となる設定です。
-Scope CurrentUserは、現在のユーザーにのみ適用する設定です。
4.変更内容を確認する
再度以下のコマンドを実行して、設定が変更されたことを確認します：
et-ExecutionPolicy -List
5.PowerShellを閉じる
設定を適用するために、PowerShellを再起動
このあと、
npm install -g @google/gemini-cli
を実行
npm error code ENOENT
npm error syscall spawn git
npm error path git
npm error errno -4058
gitが入っていないというエラーなので、入れます
既に入っている場合は、インストールが進むはずです。
Git公式ダウンロードページ
https://git-scm.com/?locale=ja
こちらでダウンロードして入れます。
gitは設定項目が多いので、細かい事を知りたい場合は、個別に調査してください。
npm install -g @google/gemini-cli
このコマンドが実行されて、無事インストールが終わると、gemini と入力するだけで対話型CLIが起動します 。
Googleのアカウントと紐付けが必要で方法を聞かれるので、Googleアカウントでログインします。
ブラウザが起動して、そこでログインすると紐付けが完了します。
初回セットアップと認証プロセス
テーマの選択: まず、好みのテーマスタイルを選択するよう求められます 。これは、CLIの視覚的な体験をカスタマイズする最初のステップです。
サインイン方法の選択: 次に、Geminiへのログイン方法を選択します 。
ブラウザ認証を選択します。
ブラウザウィンドウが自動的に開き、Googleアカウントでログインするよう促されるので、ログインすれば利用できるようになります。
これで、沢山の人がこの画面をアップロードしていると思いますが、この画面が表示されます。
後は、使うだけですが、この状態でどうやって使うの？って感じになります。
普通のチャットと同じようにチャットします。
伊藤園 おーいお茶 ピュアグリーン 600ml×24本 緑茶 ペットボトル 新品価格 |  |
ここから、実際のプロンプトとGeminiからの回答を、少しはしょりながら紹介していきます。
最初のコマンドは
ローグライクシューティングゲームを作成してください
ここから、やりとりです。
✦ 承知いたしました。Webベースで動作する、シンプルな2Dローグライクシューティングゲームのプロトタイプを作成しま
す。
まずは、コアとなるゲームの仕組みを実装します。完成後、ランダム要素やアップグレードなどのローグライク要素を追
加していくことができます。
計画の概要
* アプリケーションの種類: Webベースの2Dシューティングゲーム
* 使用技術: HTML, CSS, JavaScript (Canvas API)
* 主な機能:
* プレイヤー: 三角形のキャラクターをキーボード（WASDまたは矢印キー）で操作します。
* 射撃: マウスクリックで、カーソルの方向へ弾を発射します。
* 敵: 四角形の敵が画面の外からランダムに出現し、プレイヤーを追跡します。
* 当たり判定: プレイヤーの弾が敵に当たると敵は消滅し、スコアが加算されます。敵がプレイヤーに触れるとゲ
ームオーバーになります。
* UI: 画面上に現在のスコアと、ゲームオーバー画面を表示します。
* デザインとUX:
* ミニマルなスタイルで、プレイヤー、敵、弾丸をそれぞれ異なる幾何学的な図形（三角形、四角形、円）で表現
し、視覚的に分かりやすくします。
* 直感的な操作性を重視します。
この計画で実装を進めてもよろしいでしょうか？
スマホ対応もしてください
✦ 承知いたしました。スマートフォン対応（レスポンシブデザインとタッチ操作）も考慮に入れます。
計画を更新します。
計画の概要 (更新版)
* アプリケーションの種類: Webベースの2Dローグライクシューティングゲーム（PC・スマホ対応）
* 使用技術: HTML, CSS, JavaScript (Canvas API)
* 主な機能:
* プレイヤー: 三角形のキャラクター。
* 操作方法:
* PC: キーボード（WASDまたは矢印キー）で移動、マウスクリックで照準の方向に射撃。
* スマホ: 画面左側の仮想ジョイスティックで移動、右側の仮想ジョイスティックで照準・射撃。
* 敵: 四角形の敵が画面の外からランダムに出現し、プレイヤーを追跡。
* 当たり判定:
プレイヤーの弾が敵に当たると敵は消滅し、スコアが加算。敵がプレイヤーに触れるとゲームオーバー。
* UI:
* あらゆる画面サイズに対応するレスポンシブなゲーム画面。
* 画面上部に現在のスコアを表示。
* ゲームオーバー画面を表示。
* デザインとUX:
* ミニマルなスタイルで、プレイヤー、敵、弾丸をそれぞれ異なる幾何学的な図形（三角形、四角形、円）で表現
。
* PCでもスマホでも直感的に操作できるUI。
この更新された計画で実装を進めてもよろしいでしょうか？
はい
実行方法
1. 作成された3つのファイル (index.html, style.css, game.js) を同じフォルダに保存します。
2. index.html をWebブラウザで開きます。
操作方法
* PC:
* 移動: WASDキー または 矢印キー
* 射撃: マウス左クリック
* スマートフォン:
* 移動: 画面左側をタッチして仮想ジョイスティックで操作
* 照準・射撃: 画面右側をタッチして仮想ジョイスティックで操作
今後、このプロトタイプをベースに、以下のようなローグライク要素を追加していくことができます。
* 経験値とレベルアップ
* 武器や能力のアップグレード
* 多様な種類の敵
* ボスキャラクター
* アイテムやパワーアップ
何か他に修正や追加したい機能はありますか？
経験値とレベルアップの機能を入れて、レベルアップで武器を増やすか、武器のレベルアップするか選べるようなシステムを入れてください
ここから対応を進めてもらって、実際のソースコードも生成された物が流れていきますが、量が多いのでここではコードを省略しています。
✦ これで、経験値、レベルアップ、武器のアップグレード機能の実装が完了しました。
主な変更点:
* 自動射撃: 武器は自動で発射されるようになりました。PCではマウスで照準を合わせ、スマホでは右のジョイスティ
ックで照準を合わせます。
* 経験値(XP): 敵を倒すとXPが手に入り、画面下部のXPバーが溜まります。
* レベルアップ: XPが最大になるとレベルアップし、ゲームが一時停止します。
* アップグレード選択:
* レベルアップ時に、最大3つのアップグレード選択肢が表示されます。
* 選択肢には、「新しい武器の入手（例：ショットガン）」や「既存武器の強化（例：連射速度アップ）」などが
あります。
* カードを1つクリック/タップして選択すると、ゲー``ムが再開します。
ファイルを再度ブラウザで開いて、新しい機能を試してみてください。
という、状態で完成したと、お知らせが届きます。
省略していますが、実際にはコードなどもメッセージに入っています。
凄いのは、Geminiを実行したフォルダに自動でファイルを作って全部準備してくれます。こちらは何もしなくても完成します。
修正とかもファイルを自分で読み込んで、必要部分を自分で修正してくれます。
コードが分からなくても、ホントに作成可能です。
で、実際できあがった物を実行してみると、エラーが出たり、思ったように動作しない事も多々あるので、その現象を報告します。
実際にエラーが出て、その時のやりとりをです。
新品価格 |  |
----------------------------------------
> レベルアップ時に次のエラーが出たので修正してください
game.js:440 Uncaught TypeError: Cannot read properties of undefined (reading 'maxLevel')
----------------------------------------
✦ ご指摘ありがとうございます。エラー報告、大変助かります。
エラーの原因は、レベルアップ時に武器の情報を参照するためのキーが正しく生成できていないことでした。「Basic
Gun」という名前からbasicgunというキーを生成していましたが、正しくはbasicであるため、情報が見つからずにエラ
ーとなっていました。
この問題を修正するために、プレイヤーが武器を取得する際に、元のキー情報（basicやshotgunなど）も一緒に保存す
るように変更します。これにより、武器情報を確実に見つけられるようになります。
以下の手順で修正します。
1. ゲーム開始時にプレイヤーへ渡す初期武器に、元のキーを追加します。
2. アップグレード選択ロジックを、名前の代わりに新しいキー情報を使うように修正します。
まず、startGame関数を修正します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit game.js: // Reset and setup weapons... => // Reset and setup weapons... │
│ │
│ 529 // Reset and setup weapons │
│ 530 player.weapons = []; │
│ 531 const basicWeapon = JSON.parse(JSON.stringify(WEAPONS['basic'])); // Deep copy │
│ 532 + basicWeapon.key = 'basic'; │
│ 533 basicWeapon.level = 1; │
│ 534 player.weapons.push(basicWeapon); │
│ 535 │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ 次に、アップグレードの選択肢を生成するgenerateUpgrades関数を修正します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit game.js: // Option 1: Upgrade exist... => // Option 1: Upgrade exist... │
│ │
│ 436 │
│ 437 // Option 1: Upgrade existing weapons │
│ 438 player.weapons.forEach(w => { │
│ 439 - const weaponDef = WEAPONS[w.name.toLowerCase().replace(' ', '')]; │
│ 439 + const weaponDef = WEAPONS[w.key]; │
│ 440 if (w.level < weaponDef.maxLevel) { │
│ 441 availableUpgrades.push({ │
│ 442 type: 'upgrade', │
│ 443 - weaponName: w.name, │
│ 443 + weaponKey: w.key, // Use key instead of name │
│ 444 text: `Upgrade ${w.name} (Lvl ${w.level + 1})`, │
│ 445 description: weaponDef.upgradeDescription │
│ 446 }); │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ 最後に、アップグレードを適用するapplyUpgrade関数を修正します。
╭───────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit game.js: if (selected.type === 'new... => if (selected.type === 'new... │
│ │
│ 497 │
│ 498 if (selected.type === 'new') { │
│ 499 const newWeapon = JSON.parse(JSON.stringify(WEAPONS[selected.weaponKey])); │
│ 500 + newWeapon.key = selected.weaponKey; │
│ 501 newWeapon.level = 1; │
│ 502 player.weapons.push(newWeapon); │
│ 503 } else if (selected.type === 'upgrade') { │
│ 503 - const weaponToUpgrade = player.weapons.find(w => w.name === selected.weaponName); │
│ 504 + const weaponToUpgrade = player.weapons.find(w => w.key === selected.weaponKey); │
│ 505 if (weaponToUpgrade) { │
│ 505 - const weaponDef = WEAPONS[weaponToUpgrade.name.toLowerCase().replace(' ', │
│ '')]; │
│ 506 + const weaponDef = WEAPONS[weaponToUpgrade.key]; │
│ 507 weaponDef.upgrade(weaponToUpgrade); │
│ 508 weaponToUpgrade.level++; │
│ 509 } │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ これでエラーが修正され、レベルアップが正常に機能するはずです。
お手数ですが、再度ブラウザでリロードしてお試しください。
表示が崩れて見にくいですが、イメージがつかめればという事で読み飛ばしてください↑
こんな風にソースコードで削除と、足す内容を行毎に示して、自動で修正してくれます。
今回はコードの量が少なかったので、全部記載しましたが、修正内容によっては結構な量のコードが示されます。
基本的に「ふむふむ・・・なるほどね～」って流しておけばOKですｗ
次にこのような指示を出します
敵のバリエーションを増やしてください。
以下のタイプを実装してください
・動きが速いタイプ
・耐久力が高いタイプ
・ゆっくり移動するが、耐久力が１０倍のタイプ
ご要望の3タイプ（高速、高耐久、超高耐久の低速）を追加します。これを実現するために、まず敵に「体力(HP)」の
概念を導入し、武器には「ダメージ」の概念を導入します。
実装計画:
1. 敵の体力(HP)と武器のダメージを導入:
* すべての敵にhpプロパティを持たせます。
* 弾が敵に当たった際、即座に消滅させるのではなく、弾のダメージ分だけ敵のHPを減らします。
* 敵のHPが0以下になったら、その敵を消滅させます。
2. 敵タイプの定義:
* 新しい敵の種類を管理しやすくするために、敵のステータス（HP、スピード、色、サイズ、獲得XPなど）を定義
した設定オブジェクトを作成します。
3. 敵の出現ロジックの変更:
* spawnEnemy関数を修正し、定義した敵タイプの中からランダムで1種類を選んで出現させるようにします。
それでは、実装を開始します。
まず、敵のタイプを定義するENEMIESオブジェクトをgame.jsに追加します。それぞれの敵に異なる色と形（四角、五角
形など）を与えて、視覚的に区別できるようにします。
✦ 以上で、敵のバリエーション追加が完了しました。
変更のまとめ:
* 4種類の敵:
* スタンダード (赤色の四角形): 基本的な敵。
* スカウト (黄色の三角形): 素早いが、HPは低い。
* ブルート (青色の五角形): HPが高く、少しタフ。
* タンク (紫色の八角形): 動きは遅いが、非常に高いHPを持つ。
* 体力(HP)システム: 敵はHPを持ち、弾を受けると減少します。HPが0になると倒されます。
* 体力バー: HPが満タンでない敵には、頭上に体力バーが表示されます。
* 武器ダメージ:
武器にはdamageプロパティがあり、これが敵に与えるダメージ量になります（現在はすべての武器で1）。
ブラウザでindex.htmlをリロードして、新しく追加された様々な敵との戦いをお楽しみください。
といった、返答が来て、敵の種類が追加されました。
こんな感じのやりとりを、何度か行い、自機の武器バリエーションを増やしたり、敵の動きのバリエーションを増やすなど、ゲームとしての機能を増やしていきます。
何度かやりとりを行って、画像を用意した物に差し替えてもらって、タイトル画面とゲームオーバー画面を追加など、修正や追加を繰り返し、ある程度できあがった物が以下になります。
スマホでも遊べると思いますが、あまりプレイしていないので、動作がおかしかったらごめんなさい。
まだ途中経過なので、次のブログでもう少し完成度が高い物をお見せできればと思います。
