見出し画像
Photo by aihisyocreator

Gemini CLIを導入してアプリを作ってみた｜クマ共生ハッカソン進捗①

さくら

石川県オープンデータ利活用企画のクマ共生ハッカソンにチャレンジしています。

初回参加レポートはこちら。

今回からは日々の試行錯誤の状況をnoteに記事化していきます。


※注意
チームC全体の進捗ではなくあくまでも私個人の検証の進捗です。チーム内でのすり合わせはこれからやっていきます。

やったこと

まず今回のサマリです。今回やったことはこちら。非常にシンプルです。

  1. Gemini CLIのセットアップ

  2. Gemini CLIでアプリ作成

  3. アプリ実行

チーム内でいろいろ議論してアプリの仕様が決まってきたので、さくっとプロトタイプ作れないかなと思い、チャレンジしてみました。

せっかくなのでAIコーディングしたい！！！

という私の個人的希望でGemini CLIを使ってバイブコーディングしてみることにしました。

今回はWindows11マシンにGemini CLIをインストールするところから紹介しています。

Gemini CLIは無料で使えるAIエージェントツールなので興味を持った人はぜひ使ってみてください。

①Gemini CLIセットアップ

まずは、GeminiCLIをインストールしていきます。

今回は公式のクイックスタートの手順に従って、Windows11マシンでセットアップする手順を紹介します。

>> GeminiCLI公式サイトはこちら

①node.jsをインストールする

まずは自分のPCにnode.jsがインストールされているか確認します。
コマンドプロンプトを起動して以下のコマンドを実行します。

node -v

v20以上がインストールされていればOKです。
まだインストールしていない場合は以下よりインストールしましょう。

>> Node.js公式サイトはこちら

②GeminiCLIをインストールする

公式の手順に従って以下のコマンドを実行します。

npx https://github.com/google-gemini/gemini-cli

途中でインストール確認が求められるので、y（yes）を選択します。

③アカウント認証をします

インストールが終わると自動でGeminiCLIが起動します。

インストール後の画面

認証方法は以下の3つです。

  • Googleアカウントログイン

  • Gemini APIキー

  • Vertex AI API キー

今回はGoogleアカウントでログインします。

1を選択してエンターキーを押すと、ブラウザが起動してGoogleアカウント認証が行われます。

認証が終わるとGeminiCLIが使えるようになります。

GeminiCLIセットアップ完了

日本語で話しかけると応答してくれました。

「こんにちは」と言ってみた

※補足
npxコマンドによる実行の場合、毎回インストールが必要です。
2回目以降geminiコマンドでGemini CLIを起動できるようにするには、以下のようにnpmコマンドを実行してグローバルインストールしてください。

npm install -g @google/gemini-cli

npxはPC上にインストールせずに一時的に実行、npmはPC上にインストールして実行という違いがあります。

②プロジェクトをセットアップする

Gemini CLIは対話形式で指示するだけで簡単にアプリが作れます。

ただそれだと再現性が低いので、今回はGemini.mdという設定ファイルを作ってプロジェクトっぽくしてみます。

Gemini.mdをプロジェクトルートの置くことで、プロジェクト共通の設定ができるとのこと。

詳細はいろんな方が解説記事書いてくださっているので、それを参照してください。

今回はGemini.mdの作り方も分からなかったので、Geminiに作らせてみました。

これまでのCチームLINEで出ていた要件やFigmaで作っていただいたイメージ画像をもとにGemini.mdを作りました。

そして、以下のようにプロジェクトのルートディレクトリにGemini.mdを配置しました。

Gemini.mdの置き場所

③アプリを作る

それでは作ったGemini.mdをもとにアプリを作ってみます。

今回はGeminiで作ったGemini.mdを使って一発勝負でアプリを作らせてみます。

Gemini.mdの画面

指示したのは以下のみです。

設定ファイルの指示に従ってアプリを作って

試行錯誤しながらフロントエンドとバックエンドの処理を作ってくれました。

Gemini CLI実行中

Gemini CLIは作業するごとに確認を求めてきますが、正直、方式のイメージができていないので、すべてyesで処理を続けました。

途中で応答がなくなったので一度中断して再開しています。

Gemini CLI実行中

ただ再開しても処理が止まってしまいました。

ログの全文はこちら

ログを見るとフロントエンドとバックエンドの実装は終わっているとのことで、動かし方を聞いてみます。

動かし方を聞いてみた

Google Maps APIキーが必要とのことで以下のサイトの手順を参考に取得しようとしたのですが、いったんGoogle Mpas APIキーがなくても動くようにならないかなと方針転換しようと思いました。

Gemini CLIに方針転換お願いしてみます。

このプロジェクトを Googlemap apiキーを使わずに動くようにして

頑張って直してくれましたが、どうしていくかいろいろ相談が必要でした。

Gemini CLI実行中

Gemini CLIと相談して、以下の方針で進めてもらうことにしました。

  • 地図の表示は地図URLの埋め込みにする

  • 表示されている固定の住所（初版は石川県庁周辺）のクマ出現確率をバックエンドに問い合わせて表示する

実行する

Gemini CLIが作ったコードを実行してみます。

実行画面

ださださですが一応地図と出現確率表示されました。

地図の表示も固定、出現確率も固定、何もかも固定です。

フロントエンドは地図表示、バックエンドは確立を計算して返す。という基本ロジックだけつながりました。

まとめと今後やりたいこと

今回はチームCアプリのベースを作ってみました。

個人的には、Gemini CLIを使ってノーコードでアプリが作れるかやってみたかった。んです。

完成度はともかく目的は達成できたかなと思います。

今後は、GoogleMap APIを使ってユーザーがクリックした位置のクマ出現確率を問い合わせて表示する、といった流れを追加していきたいです。

ただ、Gemini CLIなどのAIコーディングツールは、既存のコードをどんどん変えてしまいます。

修正でもうまく使えるかは不安ですが、せっかくなのでもう少し使ってみます。

以上です。最後までお読みいただきありがとうございました！



いいなと思ったら応援しよう！