Gemini CLIとは
Gemini CLIとはGoogleが開発したGeminiの生成AIモデルをコマンドライン上（ターミナルやPowerShell）で操作できる開発者向けツールです。
Gemini CLIをインストールすれば、無料でターミナルから簡単に実行できます。
Gemini CLIのインストール
ターミナルやPowerShellで以下のコマンドを実行するだけでインストールできます。
npm install -g @google/gemini-cliGemini CLIの起動
「gemini」と入力して実行するだけでGemini CLIが起動します。
gemini初回起動時はブラウザが開いて、Googleのログイン画面が表示されますのでログインしてください。
ほかにもいくつか許可を求められるので、すべて許可してください。
以上の手順が完了すればGemini CLIが使用可能になります。
試しに「1 + 2」と入力して、Enterキーを押すと「3」が返ってきます。
基本的な使い方はChatGPTと同じですが、画像の生成はできません。
> 公園で座っている柴犬のイラスト画像を生成して
✦ 申し訳ありませんが、画像を生成することはできません。Webアプリの開発方法
Gemini CLIでWebアプリを開発するには以下のように「アプリ名、要件、デザイン、ファイル構成」のプロンプトを実行します。
長いのでプロンプトを作成する際は、エディタなどでテキストを作成してからコピーして貼り付けてください。
以下の条件の「おみくじ」Webアプリを作成してください
# 要件
- 「おみくじを引く」ボタンを押すと、おみくじの結果がボタンの下に表示される
- おみくじの結果は「大吉」「中吉」「吉」「凶」「大凶」の5つ
- おみくじの結果の下には「Xにおみくじの結果をポスト」のボタンを表示して、「私の今日の運勢は〇〇」とポストできるようにする
- おみくじの結果が表示されたあとは「おみくじを引く」ボタンが「もう1度を引く」ボタンに変わる
# デザイン
- 白と赤を貴重とした神社のようなデザイン
# ファイル構成
omikuji
- index.html
- style.css
- script.jsファイル構成の「omikuji」は生成されるファイルを格納するフォルダ名です。
実行するとAllow execution? (実行を許可するか？)と何度か聞かれるので、「Yes, allow always」を選択して許可してください。
いくつかの実行を許可するとWebアプリが出来上がります。(所要時間1分以内)
※ Gemini CLIを使用したWebアプリ開発では要件が多い場合、所要時間が1分以上かかることがあります。
作成されたファイルの入ったディレクトリ(omikujiフォルダ)をサーバーにアップロードするとブラウザでWebアプリを表示確認できます。
「Xにおみくじの結果をポスト」ボタンの色が水色なのは、ボタンのデザインを指定しなかったため、生成AIがTwitterの水色を適用したためです。
「# デザイン」に「Xにおみくじの結果をポスト」ボタンは黒色と指定していれば黒になります。
ReactでWebアプリを作成する方法
Gemini CLIを使用して、ReactでWebアプリを作成したい場合は以下のように「Reactで作成してください」と指定して、「ファイル構成」は「プロジェクトフォルダ」に変更します。
今回は「# デザイン」に『「Xにおみくじの結果をポスト」ボタンは黒色』を追記しました。
以下の条件の「おみくじ」WebアプリをReactで作成してください
# 要件
- 「おみくじを引く」ボタンを押すと、おみくじの結果がボタンの下に表示される
- おみくじの結果は「大吉」「中吉」「吉」「凶」「大凶」の5つ
- おみくじの結果の下には「Xにおみくじの結果をポスト」のボタンを表示して、「私の今日の運勢は〇〇」とポストできるようにする
- おみくじの結果が表示されたあとは「おみくじを引く」ボタンが「もう1度を引く」ボタンに変わる
# デザイン
- 白と赤を貴重とした神社のようなデザイン
- 「Xにおみくじの結果をポスト」ボタンは黒色
# プロジェクトフォルダ
react-omikujiGemini CLIで実行して完成したものを「npm run build」でビルドなどをしてアップロードしたものが以下になります。
見た目と機能は先程とほぼ同じですが、ソースコードを確認するとReactが使用されており、ポストのボタン色が黒色になっていることが確認できます。
Reactで作成するとViteが使用されるため、要件にtitleを指定しないと「Vite + React + TS」というタイトルになってしまうので注意が必要です。(faviconもVite)
まとめ
このようにGemini CLIを使用すれば、ターミナルから簡単にWebアプリの開発ができます。
開発だけでなく作成したWebアプリの修正、試験、レビューなどもできますので、まだインストールしていない方は、ぜひ一度お試しになることをオススメします。
