【無料】Project IDX + Cline + Gemini 2.0 Flashハンズオン【VS Codeインストール不要】
はじめに
別に1日30万円払わなくても、Clineは無料で誰でも簡単に使えますので、今回はProject IDX + Cline + Gemini 2.0 Flashの使い方を紹介していきたいと思います。
必要なものはGoogleアカウントとWebブラウザです。
以下のような人におすすめです。
- とりあえず無料でClineを試したい
- VimやEmacsを使っているので、VS Codeをインストールしたくない
- GitHubアカウントを持っていないので、GitHub Copilot(vscode-lm)が使えない
- Ollama(ollama)やLiteLLM(litellm)でModelを動かせるスペックのサーバーがない
- Bluetooth Keyboardを使用したiPadやiPhone、Android端末で使いたい
おことわり
実は2024年10月頃にProject IDXのGemini APIテンプレートを使ったハンズオン記事を書こうと思っていたのですが、書かないまま年が明けてしまいました。
Project IDX
Project IDXは、クラウドベースでGemini AIを活用したコード生成ができるGitHub Codespacesのような開発環境で、簡単に始めることができます。
実態はCloud Workstationsですが、Project IDXであれば無料で使うことができます。
ここから始めましょう。
まず、画面右上の「Get Started」ボタンをクリックして、Project IDXを使用する準備を整えます。
最初にProject IDXに関するGoogleとAndroidの利用規約が表示されるため、よく読んだ後チェックを入れて「Continue」ボタンをクリックします。
Project IDX内のGemini機能を使用するか聞かれるため「Enable AI Features」を選択します。
AIに関するプライバシーポリシーが表示されるため、よく読んだ後「Continue」ボタンをクリックします。
Project IDXのダッシュボードが表示されました。
テンプレートの使用
Project IDXにはGemini APIでWebアプリを作成できるテンプレートが用意されています。
まずはClineを使用する前に、Project IDXに慣れるためにやってみましょう。
Gemini APIテンプレートを選択し、新しいワークスペースを作成します。
新しいワークスペースの設定を済ませます。
とりあえずGoのWebアプリを選択しましたがJavaScriptでもPythonでもいいです。
ワークスペースの起動が始まります。
数分かかることがあるので、気長に待ちます。
ようやく起動が終わりました。
ただWebタブ画面を見る限り、Goのビルドがうまくいっていないようです。
WebタブのReloadボタンに「Full Reload」があるため選択します。
もし「Full Reload」を選択してもビルドがうまくいかない場合はワークスペースを開き直しましょう。
うまくいきました。
早速Webアプリ上のGemini機能を試そうとWebタブ画面の「Go」ボタンをクリックしたところ、エラーが発生しました。
どうやらAPIキーをmain.goに入力して再起動する必要があるようです。
Gemini API
Gemini APIテンプレートのWebアプリでGemini機能を利用するためには、Google AI StudioにアクセスしてAPIキーを取得する必要があります。
まずはmain.goのコメントに記載されたhttps://g.co/ai/idxGetGeminiKeyか、エラーメッセージに記載されているhttps://aistudio.google.com/app/apikeyへアクセスします。
「Get API Key」を選択します。
Google APIとGemini APIの利用規約、Googleに関するプライバシーポリシーが表示されるため、よく読んだ後チェックを入れて「続行」ボタンをクリックします。
「APIキーを生成」ボタンをクリックします。
利用規約に関する文章が表示されるため、よく読んだ後「OK」ボタンをクリックします。
「新しいプロジェクトでAPIキーを作成」ボタンをクリックすると、APIキーが生成されます。
プロジェクト名が「Gemini API」のAPIキーが表示されますので、クリックしてコピーします。
取得したAPIキーは、Gemini APIテンプレートのWebアプリとClineの設定で使用します。
必要に応じて、Google AI Studioや後述するGoogle CloudのダッシュボードからAPIキーの利用状況を確認したり、追加設定を行うことができますので、APIキーの表示方法をよく覚えておきましょう。
Project IDXのワークスペースに戻り、main.goのapiKey変数に先ほどコピーしたAPIキーをペーストします。
WebタブのReloadボタンに「Hard Restart」があるため選択して、ワークスペースを再起動します。
Webタブ画面の「Go」ボタンをクリックしてWebアプリ上のGemini機能が動作することを確認できました。
Google Developerの登録
新たにワークスペースを作成しようとProject IDXのダッシュボードに戻ってみると、このような画面になりました。
作成できるワークスペースの数には上限があり、Google Developer Programに参加することで、最大5つのワークスペースを作成できます。
「Join」ボタンをクリックすることでGoogle Developerに登録することができます。
居住地と開発者のタイプを聞かれるため入力し、必要に応じてコンテンツポリシーと利用規約、プライバシーポリシーを確認したら、「Continue」ボタンをクリックします。
Project IDX Userバッジ、ゲットだぜ！
確認したら、「Continue」ボタンをクリックします。
新たにワークスペースを作成できるようになりました。
「See all templates」をクリックするとすべてのテンプレートを確認することができます。
Tips: Google Developer Profileの設定
Google Developer Profileのダッシュボードは以下のページで確認することができます。
自分のプロフィールは以下のページで確認することができます。
歯車アイコンをクリックするとプロフィールの編集を行うことができ、先ほど設定した居住地と開発者のタイプを空欄にできます。
また、アカウント自体の設定は「設定」タブから行うことができ、プロフィールの公開設定やg.devドメインを使用したカスタムウェブアドレスの設定ができます。
Tips: Google CloudでGemini APIの設定
Google AI Studioで作成したGemini APIは以下Google Cloud Consoleでも確認できます。
他にGoogle Cloudでプロジェクトを作成していない場合は「Gemini API」が表示されているはずです。
もし表示されていない場合は表示されているプロジェクト名をクリックして切り替えましょう。
切り替え終えたら「ダッシュボード」をクリックします。
Google AI Studioで作成したGemini APIはGoogle Cloudのプロジェクトとして作成されているため、このように他のGoogle Cloudサービスと同様のダッシュボードで確認することができます。
とは言ってもAPIしか使っていませんので、この画面で必要になるのはAPIにある「APIの概要に移動」だけです。
クリックするとAPIとサービスについて確認できるダッシュボードが表示されます。
今回は認証情報でAPIにアクセスできるIPアドレスを制限したいので、画面左の「認証情報」を選択します。
APIキーの名前「Generative Language API Key」をクリックします。
（これはIPアドレスを設定した後のスクリーンショットです）
キーの制限にあるアプリケーションの制限が「なし」になっているので、「IPアドレス」に変更します。
「ADD」ボタンをクリックします。
IPアドレスを追加にあるアドレス（住所？）にfc00::/7を入力して、完了します。
あとは「保存」ボタンをクリックすれば設定は完了です。
また、課金が有効なプロジェクトでのGemini APIの使用には、従量課金制の料金が適用されますが、今回のプロジェクトでは課金が無効になっているはずです。
Clineを使う前に、以下のページでGemini APIが請求先アカウントにリンクされていないことを確認してみましょう。
Cline
Project IDXには空のテンプレートが用意されています。
このテンプレートは、シンプルでカスタマイズ可能な開発環境を提供しますので、Clineにはうってつけです。
Project IDXで新しい「Blank Workspace」を作成します。
空のワークスペースでGemini AIを使ってコードを生成するために、Cline拡張機能をインストールします。
Project IDXの「Extensions」メニューから「saoudrizwan.claude-dev」を検索します。
「Install」をクリックしてインストールします。
ちなみにOpen VSX Registryからインストールしています。
Clineの設定
Cline拡張機能をインストールした後、アクティビティバーのClineアイコンをクリックし、サイドバーから設定を行います。
「API Provider」を「Google Gemini」に設定し、APIキーを入力します。
これにより、Gemini AIを使ってコードを生成が可能になります。
プロンプト入力フォーム下を確認すると、gemini:gemini-2.0-flash-001になっていることが分かります。
生成と実行を自動化するために、Auto-approveの設定も行います。
Clineでコードを生成
いよいよClineでコードを生成してみます。
今回は以下のプロンプトを試してみました。
Node.jsとHonoでBasic認証つきWebサーバーを実装して、fetchでテストも行ってください。
このプロンプトを入力することで、AIに対して必要なコード生成を依頼することができます。
fetchではなくHonoのapp.request()でテストを行っていますが、まあいいでしょう。
ちなみにこの後$ npx vitestを実行したまま延々と終わらない状態になりました（$ npx vitest --runを実行する必要がある）
出力が英語なのはCustom Instructionsに何も入れていないのが原因です。
サイドバー右上の歯車アイコン(Settings)から設定できますので、"Speak in Japanese"と入力しましょう（忘れてた）
おわりに
これでProject IDX + Cline + Gemini 2.0 Flashのコーディングの準備が整いました。
Gemini AIと連携して無料でコードを生成し、実行することができますので、皆さんもぜひ一度は試してみてください。
mizchiさんのXのPostを見た後、課金しないとVertex AI(vertex)などでClaude 3.5 Sonnetが使えなかったため様子見する予定でしたが、syakejsさんのZennの記事がきっかけでProject IDX + Cline + Gemini 2.0 Flashに挑戦することができました。
ありがとうございました。
Discussion