1. このラボの目的
このハンズオンラボでは、Gemini CLI をインストールして認証し、いくつかの基本的なユースケースを試します。
学習内容
- Gemini CLI の基本を理解する。
- Gemini CLI を使用して基本的なタスクを実行する方法を学習する。
2. 始める前に
- 使用できるプロジェクトがまだない場合は、GCP コンソールで新しいプロジェクトを作成する必要があります。
- このラボでは、GCP Cloud Shell を使用して次の手順を実行します。Cloud Shell を開き、Cloud Shell を使用してプロジェクトを設定します。
- Cloud Shell エディタ ボタンを押して、GCP Cloud Shell エディタを開きます。[シェルを承認] ポップアップが表示されたら、クリックして Cloud Shell エディタを承認します。
- 次のコマンドを使用して、プロジェクトがすでに認証されているかどうかを確認できます。
gcloud auth list
- Cloud Shell で次のコマンドを実行して、プロジェクトを確認します。
gcloud config list project
- プロジェクトが設定されていない場合は、次のコマンドを使用して設定します。
gcloud config set project <YOUR_PROJECT_ID>
- このラボを実行するには、いくつかのサービスを有効にする必要があります。Cloud Shell で次のコマンドを実行します。
gcloud services enable aiplatform.googleapis.com
3. インストールと認証
インストール
Gemini CLI は、GCP Cloud Shell エディタにプリインストールされています。すぐに使用を開始できます。
ローカル環境に Gemini CLI をインストールすることもできます。
ローカル環境に Gemini CLI をインストールするには、Nodejs 20 以降が必要です。次のコマンドを実行して、Gemini CLI をインストールできます。
npm install -g @google/gemini-cli
最新バージョンにアップグレードするには、次のコマンドを使用します。
npm update -g @google/gemini-cli
ターミナルで次のコマンドを実行して Gemini を実行します。
gemini
認証
GCP Cloud Shell エディタを使用している場合は、実行中にシェルを認証することに同意していれば、すでに認証されています。
ローカルで実行していて、まだ認証していない場合は、次のような画面が表示されます。
「/auth」と入力して、下の画面を表示することもできます。
図 1: Gemini CLI には、認証を行う 3 つの方法があります。
まず、/quit コマンドを使用して Gemini CLI を終了します。
Authenticate with Google: コンソールで /auth を実行すると、認証オプションが表示されます。オプションから [Google でログイン] を選択します。ブラウザに Google 認証画面が表示されます。ログインが完了すると、コンソールも認証されます。認証は完了していますが、Gemini CLI を実際に使用するには、Google Cloud プロジェクトを指定する必要があります。コンソール画面に戻り、次のコマンドを実行してプロジェクトを指定します（.env ファイルで指定することもできます）。
export GOOGLE_CLOUD_PROJECT=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
API キーで認証: API キーで認証するには、API キーが必要です。API キーは aistudio.google.com から生成できます。API キーが発行されたら、次のようにコンソールで設定します。
export GEMINI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Vertex AI で認証する: Vertex AI 経由で Gemini API を使用するには、次の手順を行います。
まず、次のコマンドを使用して Google Cloud に認証します。
gcloud auth application-default login
その後、ターミナルで次のコマンドを実行します。
export GOOGLE_GENAI_USE_VERTEXAI=true export GOOGLE_CLOUD_PROJECT=Your GCP Project Name export GOOGLE_CLOUD_LOCATION=us-central1
4. Gemini CLI を試す
これで、Gemini CLI を試す準備が整いました。次のユースケースをお試しください。
まず、my_cli_project というプロジェクト フォルダを作成します。
mkdir my_cli_project cd my_cli_project
プロジェクト フォルダから Gemini を実行すると、そのフォルダの境界内で Gemini CLI を安全に実行できます。
- 簡単なプロンプトを実行する:
What is the weather today in Tokyo
これで、東京の天気が表示されます。このコマンドを実行すると、
GoogleSearch ツール！
- インストールされたツールを確認する: 次のコマンドを実行します。インストールされているツールのリストが表示されます。
/tools
図 2: 表示されたツールのリスト
- ローカル ニュース サイトからニュースを入手する:（例: https://mainichi.jp を、お住まいの地域のニュースサイトに変更します）。
Get me the news summary from https://mainichi.jp/
ローカル ニュース サイトからニュースの概要が表示されます。エージェントは WebFetch ツールを自動的に使用してニュース サイトからコンテンツをダウンロードし、要約を作成します。
- 複数ステップのタスクを実行する（ローカルサイトに変更してください）: https://mainichi.jp/ からニュースを取得し、スポーツ ニュースのみをフィルタして、要約してください。
Get me the news from https://mainichi.jp/ and filter in only the sports news and summarize that for me.
- Run System Commands : システム コマンドを実行するには、! を押します。コマンドを入力します。通常モードに戻すには、「!」と入力します。〈座ります〉
Type ! and Enter key. This starts the command mode. ls pwd Type ! to go back to normal mode.
- 三目並べゲームを作成する 次のプロンプトを入力します（英語版）。
Please develop a Tic-Tac-Toe game that meets the following requirements. The solution should be split into separate HTML, CSS, and JavaScript files, with the JavaScript file handling the majority of the game logic independently.
1. General Requirements
The game format should be a match between one human player and one computer player.
When the game ends (a win/loss is determined, or a draw occurs), display "GAME OVER" on the screen along with the winner's name ("X wins!," "O wins!," or "Draw!").
Provide a "Reset" button to start a new game.
2. HTML (index.html)
Create the basic page structure.
The game board should consist of nine squares (cells). Each cell should be clickable and display the player's mark (X or O).
Provide an element to display the game status (e.g., current player's turn, game result).
Place the reset button for starting a new game.
Link the CSS and JavaScript files appropriately.
3. CSS (style.css)
Style the game board and cells so they are visually clear and easy to understand.
Add borders to the cells to indicate they are clickable areas.
Set appropriate font size and color for the X and O marks to ensure good visibility.
Style the game status display and the "GAME OVER" message to make them stand out.
Consider responsive design to ensure appropriate display on various screen sizes.
4. JavaScript (script.js)
It is strongly requested that the JavaScript file handle all the game logic.
4.1. Game State Management
Define an array or object to manage the game board state (e.g., ['', '', '', '', '', '', '', '', '']).
Define a variable to track the current player (X or O). The initial value should be X.
Define a boolean value to track whether the game has ended (win/loss or draw).
4.2. Game Initialization
Create a function to initialize the game board upon page load.
Clear all cells.
Set the current player to X.
Reset the game end flag.
Clear the game result display.
4.3. Player Interaction
Set up event listeners for cell clicks.
Only place the current player's mark and update the board state if the clicked cell is empty.
After placing the mark, execute the following:
Call the win/draw check function.
If a winner is not yet determined, switch the player (X to O, O to X).
4.4. Computer AI Logic
Create a function that is called when it is the computer's (O) turn.
Implement a simple logic where the computer randomly selects an empty cell to place its mark. (While difficulty can be increased in the future, random selection is sufficient initially.)
After the computer places its mark, perform the win/draw check, and if the game is not over, switch the turn back to the human player.
4.5. Win/Draw Determination
Create a function that determines the win/draw status based on the current board state.
Check the following winning conditions:
Three rows
Three columns
Two diagonals
If a player meets a winning condition, declare that player the winner.
If all cells are filled and no player meets a winning condition, declare a draw.
If a win or draw is determined, set the game end flag to true and display the "GAME OVER" message and the result.
4.6. Game End Handling
When the game ends (win/loss or draw), prevent further clicks on the cells.
Display the text "GAME OVER" followed by the message "X wins!," "O wins!," or "Draw!" underneath it.
4.7. Reset Functionality
When the "Reset" button is clicked, call the function to return the game to its initial state.
次のプロンプトを入力します（日本語版）
以下の要件を満たす三目並べ（Tic-Tac-Toe）ゲームを開発してください。HTML、CSS、JavaScriptの各ファイルに分割し、JavaScriptはゲームロジックの大部分を単独で処理するようにしてください。
1. 全体要件
プレイヤーは人間1人、コンピューター1人の対戦形式とする。
ゲーム終了時（勝敗が決まった場合、または引き分けの場合）は、画面上に「GAME OVER」と表示し、勝者の名前（「Xの勝利！」「Oの勝利！」または「引き分け！」）も併記すること。
新しいゲームを開始するための「リセット」ボタンを設けること。
2. HTML (index.html)
基本的なページ構造を作成してください。
ゲームボードは、9つのマス目（セル）で構成されるようにしてください。各セルはクリック可能で、プレイヤーのマーク（XまたはO）が表示されるようにします。
ゲームの状態（現在のプレイヤーのターン、ゲーム結果など）を表示する要素を設けてください。
ゲームをリセットするためのボタンを配置してください。
CSSファイルとJavaScriptファイルを適切にリンクしてください。
3. CSS (style.css)
ゲームボードとマス目が視覚的に分かりやすいようにスタイルを設定してください。
マス目には枠線をつけ、クリック可能な領域であることがわかるようにする。
XとOの表示は、見やすいように適切なフォントサイズと色を設定する。
ゲームの状態表示、および「GAME OVER」メッセージが目立つようにスタイルを設定してください。
レスポンシブデザインを考慮し、様々な画面サイズで適切に表示されるようにしてください。
4. JavaScript (script.js)
JavaScriptファイルがゲームロジックの全てを処理することを強く要請します。
4.1. ゲームの状態管理
ゲームボードの状態を管理する配列またはオブジェクト（例: ['', '', '', '', '', '', '', '', '']）を定義してください。
現在のプレイヤー（XまたはO）を追跡する変数を定義してください。初期値はXとする。
ゲームが終了したかどうか（勝敗が決まったか、引き分けか）を追跡するブール値を定義してください。
4.2. ゲームの初期化
ページ読み込み時にゲームボードを初期化する関数を作成してください。
全てのマス目を空にする。
現在のプレイヤーをXに設定する。
ゲーム終了フラグをリセットする。
ゲーム結果表示をクリアする。
4.3. プレイヤーの操作
マス目をクリックした際のイベントリスナーを設定してください。
クリックされたマス目が空の場合のみ、現在のプレイヤーのマークを配置し、ボードの状態を更新する。
マークを配置した後、以下の処理を実行する。
勝敗判定関数を呼び出す。
勝敗が決まっていない場合、プレイヤーを交代する（XからO、OからXへ）。
4.4. コンピューターの思考ロジック
コンピューター（O）が手番の時に呼び出される関数を作成してください。
コンピューターは、空いているマス目の中からランダムに選択してマークを配置するシンプルなロジックを実装してください。（将来的に難易度を上げることも考慮できるが、最初はランダムで十分です）
コンピューターがマークを配置した後、勝敗判定を行い、勝敗が決まっていない場合はプレイヤーを人間に戻す。
4.5. 勝敗判定
現在のボードの状態に基づいて勝敗を判定する関数を作成してください。
以下の勝利条件をチェックする。
3つの行
3つの列
2つの対角線
勝利条件を満たすプレイヤーがいる場合、そのプレイヤーの勝利とする。
全てのマス目が埋まり、かつ勝利条件を満たすプレイヤーがいない場合、引き分けとする。
勝敗または引き分けが決まった場合、ゲーム終了フラグをtrueに設定し、「GAME OVER」メッセージと結果を表示する。
4.6. ゲーム終了時の処理
ゲームが終了した場合（勝敗が決まったか、引き分けか）は、それ以上マス目をクリックできないようにする。
「GAME OVER」というテキストと、その下に「Xの勝利！」「Oの勝利！」または「引き分け！」というメッセージを表示する。
4.7. リセット機能
「リセット」ボタンがクリックされた際に、ゲームを初期状態に戻す関数を呼び出す。
同じフォルダでターミナルを開き、HTTP サーバーを起動します。
python3 -m http.server 8080
ブラウザで開きます（Cloud Shell を使用している場合は Ctrl+クリック）。
http://localhost:8080
5. Gemini CLI 拡張機能を実行する
Gemini CLI には、簡単にインストールして実行できる非常に便利な拡張機能が用意されています。これらの拡張機能を使用すると、さまざまなサービスに接続して使用できます。https://geminicli.com/extensions/ に、利用可能な拡張機能のリストが掲載されています。このリストは日々更新されています。Gemini CLI 拡張機能の詳細については、https://medium.com/google-cloud/gemini-cli-tutorial-series-part-11-gemini-cli-extensions-69a6f2abb659 をご覧ください。
Gemini Nanobanana 拡張機能をインストールして実行してみましょう。
拡張機能をインストールするには、次のコマンドを実行します。
gemini extensions install https://github.com/gemini-cli-extensions/nanobanana
拡張機能をインストールしたら、Gemini CLI を再起動します。これで、Gemini CLI から次の nanobanana コマンドを実行できるようになります。
/generate- スタイル/バリエーション オプションを使用した単一または複数の画像の生成/edit- 画像編集/restore- 画像復元/icon- アプリアイコン、ファビコン、UI 要素を複数のサイズで生成する/pattern- 背景用のシームレスなパターンとテクスチャを生成する/story- 視覚的なストーリーやプロセスを伝える一連の画像を生成する/diagram- 技術図、フローチャート、アーキテクチャのモックアップを生成する/nanobanana- 自然言語インターフェース
いくつかのコマンドを実行してみましょう。
Nanobanana を実行する前に、aistudio.google.com から Gemini API キーを取得して、ここに設定する必要があります。
export NANOBANANA_GEMINI_API_KEY=YOUR_API_KEY
公式に翻訳された英語版については、
# Single image /generate "a watercolor painting of a fox in a snowy forest" # Multiple variations with preview /generate "sunset over mountains" --count=3 --preview # Style variations /generate "mountain landscape" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "coffee shop interior" --variations="lighting,mood" --preview
日本語版
# Single image /generate "雪の森のキツネの水彩画" # Multiple variations with preview /generate "山にかかる夕焼け" --count=3 --preview # Style variations /generate "山岳風景" --styles="watercolor,oil-painting" --count=4 # Specific variations with auto-preview /generate "コーヒーショップのインテリア" --variations="lighting,mood" --preview
画像を編集
ファイルの名前をローカル ファイル名に変更します。
/edit my_photo.png "change the color of fox to blue"
6. 完了
これで完了です。これで完了です。詳しくは、以下のリソースをご覧ください。