はじまり

うーん、これは便利ですなあ。

うーん、コイツ、動くぞ・・・っ。
Cloud Shell EditorでClineを使う。
Google Cloudで無料で使えるオンラインエディタである「Cloud Shell Editor」で、現在流行りのコーディング用途としてAIエージェントを利用した拡張機能である「Cline」が利用できたので、その使用感をまとめてみたという記事です。「Cline」は、よくVisual Studio Codeの拡張機能として、紹介されています。
Cloud Shell Editorでは、「Eclipse Theia」というエディタを利用した開発環境を構築することが出来ます。このIDEでは、OpenVSXに登録されている拡張機能のパッケージをインストールして利用することが可能であり、そのパッケージの中に「Cline」が登録されていたので使ってみました。正直、すばらしすぎるツールでした。それでは行ってみましょう。
Clineのインストール
まずは、Clineをインストールしていきたいと思います。
と、その前に・・・、これから導入するパッケージが本当にあのClineなのかどうかを確認しました。
当初は、Web記事でちょくちょく「Cline」というワードを扱ったものが散見されていたので、そのClineのロゴには見覚えがあったのですが、cloud Shell上の拡張機能としてのClineのロゴはこんなイメージになっていました。

あれ・・・、ちょっと違う・・・?
そこで、この拡張機能をOpenVSX上で調べてみて、本当に巷で話題になっているClineと同じものなのかどうかを確認してみました。
OpenVSXのリポジトリの場所はここで、そこから遷移できたGitHubのリポジトリはここでした。デベロッパーの名前は同じみたいですね・・・。
ということで・・・、OpenVSX上に登録されているClineは、よく巷で話題になっているClineと同じパッケージであることが確認できました! 不審なパッケージをインストールしたくないですからね。
それでは、Cloud Shell Editor上にClineをインストールしていきます。

インストールに少し時間が掛かりましたが、無事にインストール出来ると、このようにClineのアイコンがサイドバーに表示されて、そのアイコンをクリックすると「Hi, I’m Cline」のメニューが表示されます。
ここで自分が利用したい大規模言語モデルのAPIを選択して、Clineを使用することが出来るようになります。

Clineを使ってみる。
それではインストールも済んだことなので、Clineを使ってみたいと思います。
今回は「OpenAI」を選択してOpenAIのAPIキーを入力して「Let’s go!」をクリックします。使用できるAIモデルはこの他にも、Anthropic、OpenRouter、DeepSeek、Google Gemini、GCP Vertex AI、AWS Bedrock、Ollamaなどがあります。(2025-01-26時点。)

無事にレッツゴーできれば、「What can I do for you?」のメニューが表示されます。ここからAIエージェントに対して指示を出すことが出来ます。

しかしClineに指示を出す前に、「Custom Instruction」を設定していきます。「- 日本語で回答して。」と指示を出しておきます。今回使ったモデルは、添付の画像上では「gpt-4o」となっていますが、「gpt-4o-mini」を使いました。
Clineを使用する上で掛かる金額は、インプットに$5.00/million、アウトプットに$15.00/millionらしいです。最大アウトプット長は4096トークン。

指示を出します。まずはテストコードを書くように依頼してみました。

すると、Clineがファイルへの書き込みの許可を依頼してくるので、その許可をするとテストコードを書き始めました。このコードを書いている途中に、画面を動かしてしまうと途中で処理が中断したり動かなくなったりしました。なので、Clineによる処理中はエディタは操作せずに静観した方が良さそうです。

コードが書き終わると、書く前のファイルの状態との差分を表示して、そのコードの修正を反映するかどうかを質問してきます。反映するように回答すれば無事に反映されるというわけでした。

また、反映されたテストコードを実行することも可能です。実行するように許可をすれば実際にテストを走らせて、その際に発生したエラーに基づいてさらにテストコードを修正したりもしてくれました。なんて有能なんだ・・・。
実行を拒否して自分で実行してカバレッジを確認することも可能です。その際に表示されたエラーメッセージを添えてClineに指示を出せば、その際にもテストコードの修正をしてくれそうでした。

使用感
まるで魔法のようにコードをサクサクと書いてくれそうなClineですが、開発者側が意図しないような挙動を起こすこともあったりします。
GPT-4o-miniで使った金額
今回のClineの試用では、GPT-4o-miniを使っておおよそ$0.11ほどの利用料が掛かりました。実際にコーディングしていた時間は5時間ぐらいでした。ClineをGPT-4o-miniで使用する際の予算感は、大体それぐらいのボリュームです。
Clineによる処理中はエディタを触らない。
これに関しては先程も少し書きました。
AI がファイルを修正をしたり追記する場合、この作業中にエディタ上で他のファイルを開いていたりすると正しく差分が実装されず、全くもって正しくないコードが生成されてしまいます。その誤ったコードで編集内容をファイルに反映してしまうと、元に戻すのは困難だと思われます。Gitにコミットした直後であればすぐに戻せそうですが、Clineを使う場合は、エディタを静観するのと、コード修正後には少しまめにコミットする方が良さそうです。
既存のコードと重複したコードを追記することがある。
今回はClineに対してPythonスクリプトの修正作業を主に依頼しましたが、その修正結果を見てみると、既存のファイル内にて実装されていたimport句やdef句の部分をダブって追記していることがありました。まあ、その部分は修正内容を反映した後に消せばいいわけですが、そういう現象も起きたりします。こういった部分は、もしかしたらAIモデルによる部分もあるかもしれません。
Clineが永遠に修正し続けることがある。
Clineは、ファイルに対して修正を施した後にその修正内容を実際にファイルに反映するかどうかを質問されます。その際に、「Reject」つまり拒否することが出来るわけですが、その後に再びClineが同じファイルに修正作業を始めて、再びそのファイル修正内容を反映するかどうかを質問してきたりします。この修正内容も拒否したら再度また同じファイルに修正を施して・・・といった具合で、Clineがずーっと修正作業を行う現象が起こることがあります。この現象が発生すると、おそらく永遠にClineが修正作業を実行し続けるため、API料金が嵩み続けることになります。全く同じ内容で修正することもあるので、API料金の無駄遣いになります。
この現象が起きた場合には、Clineのメニュー画面の上部に「✕」ボタンがあるので、そこをクリックしてClineとのやり取りを強制終了しましょう。
まとめ
本記事では、Google Cloud Shell上でAIエージェントClineを利用した際の使用感をまとめた記事でした。
おかしな挙動を起こすこともある「Cline」ですが、基本的にはコードを光の速さで記述してくれて、かなり素晴らしいコーディングアシスタントでした。Cloud Shell Editorでは、Google Geminiを使ったコーディングアシスタントも利用できますが、正直言ってそのGeminiアシスタントよりもClineの方が使いやすくて、正しい実装を行ってくれているという所感を持ちました。このClineがオートコンプリート機能が働いてくれたりしたらさらに便利になりそうですが、そこはGemini Code Assistによるオートコンプリートを使っているのが現状です。(しかし、Geminiのオートコンプリートもとても助かっていますが。)
これからさらにコーディングの快適さが向上するのかと考えると、とても楽しみにさせてくれたClineでした。
PC作業のお供に
Amazonベーシック マウスパッド ゲーム用 Mサイズ ブラック 正方形
Logicool G 8000Hz 左右対称 PRO X SUPERLIGHT 2 ワイヤレス ゲーミングマウス G-PPD-004WL-BKd 44K DPI 8K ポーリングレート 軽量 60g LIGHTFORCE ハイブリッドスイッチ LIGHTSPEED USB Type-C 充電 国内正規品
PFU キーボード HHKB Professional Classic 英語配列/白
おしまい

なるほど、現状はこんな感じなんだな

まあでもかなり便利だよこれ。
以上になります!
コメント