test

Cline – OpenRouterで1位

CLI と エディターを使用できる AI アシスタント、Cline をご紹介します。

Claude 3.7 Sonnetのエージェントコーディング機能により、Clineは複雑なソフトウェア開発タスクを段階的に処理できます。ファイルの作成と編集、大規模プロジェクトの探索、ブラウザの使用、そして（許可を得た上で）ターミナルコマンドの実行を可能にするツール群を備え、コード補完や技術サポートにとどまらない支援を提供します。Clineはモデルコンテキストプロトコル（MCP）を使用して新しいツールを作成し、独自の機能を拡張することもできます。自律型AIスクリプトは従来、サンドボックス環境で実行されますが、この拡張機能は、すべてのファイル変更とターミナルコマンドを承認するための人間参加型GUIを提供し、エージェントAIの可能性を安全かつアクセスしやすい方法で探求できるようにします。

1. タスクを入力し、画像を追加して、モックアップを機能的なアプリに変換したり、スクリーンショットでバグを修正したりします。
2. Clineは、ファイル構造とソースコードのASTを分析し、正規表現検索を実行し、関連ファイルを読み込むことで、既存のプロジェクトを迅速に進めることができます。コンテキストに追加される情報を慎重に管理することで、Clineは大規模で複雑なプロジェクトでも、コンテキストウィンドウを圧迫することなく、貴重な支援を提供できます。
3. 必要な情報を入手したら、Cline は次のことを実行できます。
   • ファイルを作成および編集し、その過程でリンター/コンパイラー エラーを監視して、インポートの欠落や構文エラーなどの問題を自分で積極的に修正できるようにします。
   • ターミナルで直接コマンドを実行し、作業中にその出力を監視して、たとえば、ファイルの編集後に開発サーバーの問題に対応できるようにします。
   • Web 開発タスクの場合、Cline はヘッドレス ブラウザでサイトを起動し、クリック、入力、スクロール、スクリーンショットとコンソール ログのキャプチャを行って、ランタイム エラーや視覚的なバグを修正できます。
4. タスクが完了すると、Cline はopen -a "Google Chrome" index.htmlのようなターミナル コマンドを使用して結果を表示します。このコマンドは、ボタンをクリックするだけで実行できます。

[!TIP] CMD/CTRL + Shift + Pショートカットを使ってコマンドパレットを開き、「Cline: 新しいタブで開く」と入力すると、拡張機能がエディタのタブとして開きます。これにより、Cline をファイルエクスプローラーと並べて使用し、ワークスペースがどのように変化するかをより明確に確認できます。

任意のAPIとモデルを使用する

Clineは、OpenRouter、Anthropic、OpenAI、Google Gemini、AWS Bedrock、Azure、GCP VertexなどのAPIプロバイダーをサポートしています。OpenAI互換のAPIを設定したり、LM Studio/Ollamaを介してローカルモデルを使用することも可能です。OpenRouterを使用している場合、拡張機能は最新のモデルリストを取得するため、最新のモデルが利用可能になり次第、すぐに使用できます。

この拡張機能は、タスク ループ全体と個々のリクエストの合計トークンと API 使用コストも追跡し、各ステップでの支出を常に把握できるようにします。

ターミナルでコマンドを実行する

VSCode v1.93 の新しいシェル統合アップデートにより、Cline はターミナル内で直接コマンドを実行し、出力を受け取ることができます。これにより、パッケージのインストール、ビルドスクリプトの実行、アプリケーションのデプロイ、データベースの管理、テストの実行など、幅広いタスクを実行できます。しかも、開発環境とツールチェーンに適応しながら、適切な作業を完了できます。

開発サーバーのような長時間実行されるプロセスの場合は、「実行中に続行」ボタンを使用して、コマンドがバックグラウンドで実行されている間もClineがタスクを継続できるようにします。Clineが作業している間、ターミナルに新しい出力があれば通知が届くので、ファイル編集時のコンパイル時エラーなど、発生する可能性のある問題に迅速に対応できます。

ファイルの作成と編集

Cline はエディター内で直接ファイルを作成・編集し、変更内容の差分ビューを表示できます。差分ビューエディター内で Cline の変更内容を直接編集したり元に戻したり、満足のいく結果が得られるまでチャットでフィードバックを送信したりできます。また、Cline はリンター/コンパイラーエラー（インポートの不足、構文エラーなど）も監視しているため、開発中に発生した問題を自分で修正できます。

Cline によって行われたすべての変更はファイルのタイムラインに記録され、必要に応じて変更を追跡したり元に戻したりすることが簡単になります。

ブラウザを使用する

Claude 3.5 Sonnetの新機能「コンピュータ使用」により、Clineはブラウザを起動し、要素をクリック、テキストを入力し、スクロールしながら、各ステップでスクリーンショットとコンソールログをキャプチャできます。これにより、インタラクティブなデバッグ、エンドツーエンドのテスト、さらには一般的なWeb操作が可能になります。これにより、ユーザーがエラーログをコピー＆ペーストする必要なく、Clineが視覚的なバグやランタイムの問題を修正できるようになります。

Cline に「アプリをテストして」と指示してみてください。npm npm run devのようなコマンドを実行し、ローカルで実行中の開発サーバーをブラウザで起動し、一連のテストを実行してすべてが動作するか確認します。デモはこちらをご覧ください。

「...ツールを追加します。」

モデルコンテキストプロトコル（MCP）のおかげで、Clineはカスタムツールを通じて機能を拡張できます。コミュニティ製のサーバーを使用することもできますが、Clineは独自のワークフローに合わせてツールを作成し、インストールすることができます。Clineに「ツールを追加」するように指示するだけで、新しいMCPサーバーの作成から拡張機能へのインストールまで、すべてをClineが処理します。これらのカスタムツールはClineのツールキットの一部となり、将来のタスクですぐに使用できるようになります。

• 「Jira チケットを取得するツールを追加する」: チケット AC を取得して Cline を機能させる
• 「AWS EC2を管理するツールを追加する」: サーバーのメトリクスをチェックし、インスタンスをスケールアップまたはスケールダウンする
• 「最新のPagerDutyインシデントを取得するツールを追加する」：詳細を取得し、Clineにバグ修正を依頼する

コンテキストを追加する

**@url :**拡張機能が取得してマークダウンに変換するURLを貼り付けます。Clineに最新のドキュメントを提供したい場合に便利です。

@problems : Cline が修正するためのワークスペースのエラーと警告 (「問題」パネル) を追加します

**@file :**ファイルの内容を追加するので、ファイルの読み取りを承認する API リクエストを無駄にする必要がなくなります (+ タイプしてファイルを検索します)

**@folder :**フォルダー内のファイルを一度に追加して、ワークフローをさらに高速化します

チェックポイント: 比較と復元

Cline がタスクを実行すると、拡張機能は各ステップごとにワークスペースのスナップショットを作成します。「比較」ボタンをクリックすると、スナップショットと現在のワークスペースの差分を確認できます。また、「復元」ボタンをクリックすると、その時点までロールバックできます。

例えば、ローカルウェブサーバーで作業している場合、「ワークスペースのみを復元」を使用してアプリのさまざまなバージョンを素早くテストし、ビルドを続行したいバージョンが見つかったら「タスクとワークスペースを復元」を使用できます。これにより、進捗を失うことなく、安全にさまざまなアプローチを試すことができます。

貢献

プロジェクトへの貢献をご希望の方は、まずは貢献ガイドで基本を学んでください。また、 Discordに参加して#contributorsチャンネルで他の貢献者とチャットすることもできます。フルタイムの仕事をお探しの方は、採用情報ページで募集中のポジションをご確認ください。

1. リポジトリをクローンします*（ git-lfsが必要です）* :
   git clone https://github.com/cline/cline.git
2. VSCode でプロジェクトを開きます。
   code cline
3. 拡張機能と webview-gui に必要な依存関係をインストールします。
   npm run install:all
4. F5 （またはRun ] -> Start Debugging ]）を押して起動すると、拡張機能が読み込まれた新しい VSCode ウィンドウが開きます。（プロジェクトのビルドで問題が発生した場合は 、esbuild 問題マッチャー拡張機能のインストールが必要になる場合があります。）
5. PR を作成する前に、変更セット エントリを生成します。
   npm run changeset
   これにより、次のプロンプトが表示されます。
   • 変更の種類（メジャー、マイナー、パッチ）
     • major → 破壊的変更 (1.0.0 → 2.0.0)
     • minor → 新機能 (1.0.0 → 1.1.0)
     • patch → バグ修正 (1.0.0 → 1.0.1)
   • 変更内容の説明
6. 変更と生成された.changesetファイルをコミットします。
7. ブランチをプッシュし、GitHub に PR を作成してください。CI は次の処理を行います。
   • テストとチェックを実行する
   • Changesetbotはバージョンの影響を示すコメントを作成します
   • メインにマージされると、changesetbot はバージョン パッケージ PR を作成します。
   • バージョンパッケージPRがマージされると、新しいリリースが公開されます

ライセンス

Apache 2.0 © 2025 Cline Bot Inc.