00:00:00エンジニアリングは、その仕事の規模や関わる役割の多さから、常に高度な協力プロセスを必要としてきました。
00:00:05AIの登場によってその姿は変わりつつありますが、同時に新しいコラボレーションの形も生まれています。
00:00:09AIモデルにはそれぞれ、得意とする役割やコスト面での強みがあります。
00:00:13一つの例を見てみましょう。
00:00:14最新のGeminiモデルがデザインにおいて非常に優れていることは、よく知られた事実です。
00:00:18指示が少ない場合、GeminiはどのClaudeモデルよりもはるかにクリエイティブな成果を出します。
00:00:23しかし、全体的な性能で見れば、Opus 4.6は極めて優秀なモデルです。
00:00:26特に周辺ツールのClaude codeは、Gemini CLIよりもはるかに安定したツールとして機能します。
00:00:31しかし、これらを一つの共通ワークフローで効率的に組み合わせる方法はありませんでした。
00:00:35併用しようとしても、結局は多くの手作業が発生してしまい、
00:00:38これらのエージェントに自律的に仕事をさせる術もなかったのです。
00:00:41最近、異なるモデルを搭載したエージェント同士を対話させることで、
00:00:46この連携の課題を解決し、人間を介在させずに済むツールを見つけました。
00:00:50それが「Agent Chatter」です。これはAIエージェントがリアルタイムで調整を行うためのチャットインターフェースです。
00:00:55Claude code、Gemini CLI、Codexといった人気の高いエージェントに加え、
00:01:00KimiやQwenなどのオープンソースモデルにも対応しています。
00:01:03例えば、高価なClaudeにプランニングを任せ、実装はKimiやGLMに担当させることで、
00:01:07コストを抑えながら運用することも可能です。
00:01:10複数のチャンネルを持つ共有チャットを使用し、エージェント同士が会話しながら、
00:01:14連携して機能を実装していくことができます。
00:01:16このツールの第一印象では、デフォルトのUIがあまり洗練されていないと感じました。
00:01:20しかし、オープンソースプロジェクトなので、元のリポジトリをフォークして、
00:01:24独自のビジュアルレイヤーを作成しました。見た目も良くなり、
00:01:28自分たちのニーズに合わせてナビゲーションも改善しています。
00:01:31元の機能は維持しつつ、このバージョンをフォークしたリポジトリに公開しました。
00:01:35もちろん、このプラットフォームの基盤となる設計の功績は、すべて元の開発者にあります。
00:01:40さて、このプロジェクトには、エージェントを初期化するために
00:01:43一度だけ実行する必要があるスクリプト群が含まれています。
00:01:46これらのスクリプトはシステム実行の入り口であり、
00:01:49これらなしではエージェントを動かすことはできません。
00:01:51スクリプトにアクセスするには、リポジトリ全体をクローンする必要があります。
00:01:54リポジトリには、各エージェントを個別に初期化するためのスクリプトが揃っています。
00:01:58ただし、macOSやLinuxを使用している場合は、事前にTMUXをインストールしておく必要があります。
00:02:02TMUXは、いわゆるターミナルマルチプレクサです。
00:02:05複数のターミナルセッションを作成し、一つの場所からすべてを制御することができます。
00:02:09Agent Chatterはバックグラウンドでこれを利用し、
00:02:11実行中の各ターミナルエージェントにタスクを送信しています。
00:02:14Windowsユーザーの方は、スクリプトを直接実行するだけで動作します。
00:02:18各エージェントの実行コマンドは、すべてリスト化されています。
00:02:21例えば、Claude codeとGemini CLIを併用したい場合は、
00:02:26それぞれのコマンドをコピーし、リポジトリをクローンしたフォルダのターミナルに貼り付けます。
00:02:31動かしたいエージェントに合わせて、自由に関数を選択できます。
00:02:34コマンドを貼り付けると、TMUXセッション内にエージェントのセッションが立ち上がります。
00:02:38構成に合わせて、好きな数だけエージェントを使用できます。
00:02:40例えば、3つのClaudeセッションと1つのGeminiセッションで、計4つのエージェントを立てることも可能です。
00:02:44ただし、いくらエージェントを増やしても、それぞれに専用のターミナルが必要になります。
00:02:494つのセッションを動かすなら、4つのターミナルを並列で動かすことになりますが、
00:02:53操作自体はツールの単一のチャットセッションからすべて行えます。
00:02:56インストール完了後、localhostにアクセスすると、
00:03:00起動したすべてのエージェントがチャットパネルに表示されるはずです。
00:03:03このツールを最大限に活用し、
00:03:06効率的に作業を進めるためには、いくつか重要なステップがあります。
00:03:09まず、ツールを使う前に、アプリ構築に使用するフレームワークを初期化しておくことをお勧めします。
00:03:14これを怠ると、役割を分担していても複数のエージェント間で競合が発生しやすいためです。
00:03:20Next.jsなどのフレームワークは、作業開始前に必ず初期化しておいてください。
00:03:25次に、各エージェントは独立したClaudeやGeminiのセッションとして動作するため、
00:03:29権限の承認を個別に手動で行う必要があります。
00:03:33権限確認をスキップするモードのスクリプトも用意されていますが、
00:03:36複数のエージェントが動く環境では、一方が他方の作業を誤って削除するリスクが高まるため、非推奨です。
00:03:42そのため、Claude codeとGemini CLIの両方のsettings.jsonで、適切な権限を設定しておく必要があります。
00:03:48こうすることで、ファイルの編集やビルドコマンドの実行時に手動の承認待ちが発生せず、
00:03:53同時に危険なコマンドに対しては制御を維持できます。
00:03:56また、MCPツールの設定もファイル内で行っておかないと、
00:04:01それらについても一々承認が必要になってしまいます。
00:04:03次に、agents.mdファイルを作成してください。
00:04:05これは現在、エージェントを利用するための最適化された構造を持つテンプレートとして機能し、
00:04:09後ほどエージェントによって内容が埋められていきます。
00:04:11ここには、エージェントが従うべき役割のルール、行動指針、原則がすべて含まれます。
00:04:15さらに、PRD（製品要求仕様書）やバックエンド、UIスペックのテンプレートなどの設計ファイルも必要です。
00:04:20これらもテンプレートを用意しておけば、後でプランニング・エージェントが内容を記述してくれます。
00:04:24テンプレートを使う目的は、構造を定義することで、エージェントが不要なコンテンツを追加するのを防ぐためです。
00:04:30これらのテンプレートはすべてAI Labs Proで公開されており、ダウンロードして自由に使用できます。
00:04:35私たちの活動に価値を感じ、チャンネルをサポートしたいと考えてくださるなら、
00:04:38AI Labs Proが最適な方法です。
00:04:40リンクは概要欄にあります。
00:04:42このツールのもう一つの特徴は、各エージェントに名前を付け、特定の役割を割り当てられることです。
00:04:47これによりエージェントの識別が容易になり、個別に調整された役割に従って動かすことができます。
00:04:52例えば、UIデザインにGeminiを使う場合、
00:04:55名前を変更し、UI/UXエキスパートというカスタムロールを割り当てることができます。
00:04:59名前と役割を与えることで、エージェントは設定されたペルソナ通りに動いてくれます。
00:05:04最後に、エージェントが適切にタスクを遂行するためのルールを設定する必要があります。
00:05:09先ほどagents.mdを使うと言いましたが、
00:05:12本来Claudeはclaude.md、Geminiはgemini.mdを参照し、
00:05:16互いの指示ファイルを確認することはありません。
00:05:19そこで、両者が共通の指針としてagents.mdを参照するようにルールを追加し、連携させます。
00:05:25ニーズに合わせて複数のルールを好きなだけ設定できます。
00:05:29ただし、作成したルールは最初は「ドラフト」状態にあります。
00:05:31エージェントに認識させるには、手動で「アクティブ」に移動させる必要があります。
00:05:35ルールはチャットのトリガー10回ごとに更新されますが、この間隔は調整可能です。
00:05:39また、「ループガード」にも注目してください。デフォルトでは4に設定されています。
00:05:43ループガードとは、エージェント間でタスクをパスし合う最大回数のことで、
00:05:46これに達するとタスクを一時停止し、ユーザーの入力を待ちます。
00:05:49これは、エージェント同士が延々と質問を繰り返すループに陥るのを防ぐための機能です。
00:05:53ループガードの上限に達すると通信が止まるので、
00:05:56再開するには「continue」コマンドを送る必要があります。
00:05:59長時間にわたって高度な連携をさせたい場合は、この数値を増やしておくと良いでしょう。
00:06:03実装の計画に入る前に、スポンサーのAirtopをご紹介します。
00:06:06毎週何時間もかけて手動でデータをスクレイピングしたり、
00:06:10大量のブラウザタブをクリックしたりしているなら、もっと良い方法があります。
00:06:13Airtopは、AIエージェントが人間と同じようにWebを操作できるようにするクラウドプラットフォームです。
00:06:19カスタムまたは既存のテンプレートを使って、面倒な手作業を自動化できます。
00:06:23いわば、あらゆる雑務をこなしてくれるクラウドブラウザです。
00:06:27例えば、競合の価格調査をするテンプレートを使ってみます。
00:06:30コードは一切不要で、普通の言葉で指示を出すだけで、
00:06:33エージェントがサイトを巡回し、ログインを済ませ、必要なデータを綺麗な形式で抽出してくれます。
00:06:39特に素晴らしいのは、従来の自動化ツールが苦手とする
00:06:43アンチボット対策やCAPTCHAを回避できる点です。
00:06:46そのため、大量の作業でも非常に高い信頼性で実行できます。
00:06:48数分で信頼性の高い自動化を構築できます。今すぐAirtopに無料で登録しましょう。
00:06:53固定コメントのリンクから、今日から自動化を始められます。
00:06:56さて、すべての準備が整ったので、いよいよ実装に移ります。
00:07:00常々申し上げている通り、実装前のプランニングは非常に重要です。
00:07:03ここでもまず計画から始めましょう。
00:07:05Slackのように、このツールでも異なるチャンネルを作成できます。
00:07:09フロントエンド用とバックエンド用で、別々のチャンネルを用意するのが望ましいでしょう。
00:07:12アプリのアイデアを伝えると、ツールがTMUXセッションにリクエストを送り、
00:07:16メンションされたメッセージを確認するようにエージェントを促します。
00:07:18プランナー・エージェントが全体の計画を作成して通知し、承認や変更の有無を求めてきます。
00:07:23計画は、最初に追加したテンプレートのPRD（製品要求仕様書）に直接書き込まれます。
00:07:28必要に応じて変更を指示すれば、PRDもそれに合わせて更新されます。
00:07:32このツールはMCPを利用して、Claudeがチャットインターフェースから返信を送ったり、内容を読み取ったり、
00:07:37双方向のコミュニケーションを可能にしています。
00:07:39計画が確定したら、作業を進めるように指示します。
00:07:41PRDが承認されると、ツールが自動でGeminiに通知し、
00:07:44UIスペックドキュメントの実装を依頼します。
00:07:47そこからは、UIデザイナーとプランナーのエージェントが、
00:07:51プランナーによる提案とUIデザイナーによる取り込みという形で、
00:07:54実装の詳細について何度もやり取りを繰り返しながら調整を進めます。
00:07:59一点注意が必要なのは、今回ループガードを8に設定したのですが、
00:08:02なぜかそれがうまく反映されませんでした。
00:08:04結局、4回のイテレーションで最大ループ数に達し、会話の継続を促されました。
00:08:08その後、UIデザイナーから計画が整ったことがビルダー・エージェントに伝えられます。
00:08:13ビルダーは計画を受け取ったことを報告し、実行の承認を待ちます。
00:08:18デザイナーもUI実装を進めたいと言ってきますが、
00:08:22まずは自分自身で計画をしっかり確認するまで、待機させておくのが賢明です。
00:08:25バックエンドのチャンネルでは、ビルダーとプランナーにbackend.mdを確認させます。
00:08:30これはプランナーがPRDを作成する際に、あわせて作成したものです。
00:08:33彼らは互いに連携してドキュメントを検証しますが、
00:08:37時には実装上の欠落が見つかることもあります。
00:08:40その場合は、UIデザイナーも巻き込んでUIスペックとの整合性をとりながら、
00:08:44協力して問題を修正していきます。
00:08:47すべてが実装されたら、最後にもう一度プランナーにレビューを依頼します。
00:08:50私たちのケースでは、最終レビューでさらにいくつかの問題が見つかりました。
00:08:54それらを修正した後、すべてのエージェントが問題解決を確認し、
00:08:56ようやくアプリ構築の準備が整いました。
00:08:59しかし、まだビルドしてはいけません。もう一つ重要なステップがあります。
00:09:02エージェント同士で計画を相互レビューさせるのです。
00:09:04このツールには複数のモードがありますが、まずは「プランナーモード」を試すべきです。
00:09:08他にもデザインレビューやコードクリティークなど、多くのモードがあります。
00:09:12これらのモードは3つのフェーズで構成され、異なるモデルがそれぞれの役割を演じます。
00:09:16プランナーを「プレゼンター」に設定してこれまでの成果を発表させ、
00:09:20レビュー担当を「チャレンジャー」にして、その内容に厳しく反論させます。
00:09:24そしてプランニング・エージェントを「シンセサイザー（統合役）」とし、双方の知見をまとめます。
00:09:28セッションが始まるとプレゼンターが発表し、チャレンジャーがそれを徹底的に分析、
00:09:32ストレスドキュメントをテストして、多くの見落としを浮き彫りにします。
00:09:36エージェント同士が互いに問い詰めることで、
00:09:38普通なら見逃してしまうような多くの問題を特定し、修正することができます。
00:09:42こうして最終的な計画が完成し、3フェーズのセッションが終了します。
00:09:46コンテンツを楽しんでいただけているなら、ぜひ高評価（Hype）ボタンをお願いします。
00:09:50励みになりますし、より多くの方に動画を届けることができます。
00:09:54レビューが終わったら、プランナーをオーケストレーター（統括役）として、
00:09:58適材適所のモデルを使ってプロジェクトの実装を指揮させます。
00:10:03プランナーの指示により、デザイナーとビルダーが並行して作業を開始します。
00:10:06バックエンドとフロントエンドの両方のチャンネルに指示が飛び、ビルダーには構築開始のゴーサインが、
00:10:10フロントエンド・エンジニアにはデザイン実装の着手許可が出されます。
00:10:15この環境での作業は非常に興味深いものです。基本的に
00:10:18タスクをプランナーに丸投げして、進捗状況を聞くだけで済むからです。
00:10:22エージェント同士がミスを指摘し合う様子は見ていて飽きません。
00:10:26例えば、UIデザイナーが本来ビルダーが担当すべき
00:10:30エラーの解決を勝手にやろうとしたことがありました。
00:10:32すると、プランナーとビルダーの両方が「お前の仕事じゃない」と指摘しました。
00:10:37ビルダーが作業中のファイルを上書きしてしまったからです。
00:10:39各エージェントに専用のワークツリーを持たせれば、さらにスムーズになるでしょう。
00:10:44一人のエージェントが全体をマージしてレビューするようにすれば、
00:10:47エージェント同士が作業を上書きし合う問題も解消できるはずです。
00:10:50より複雑な構成を考える際のヒントにしてください。
00:10:53次にプランナーがレビュー・エージェントを起動し、細かな問題を特定させ、
00:10:57詳細なレポートを作成させて各エージェントにタスクを割り振ります。
00:11:01「何か必要なら互いに頼み合うこと」というルールを設定していたので、
00:11:04UIデザイナーがビルダーに特定の変数へのアクセスを要求し、
00:11:09ビルダーがそれを許可するという場面もありました。
00:11:10彼らのレビューが終わると、プランナーから最終的なフロントエンド確認を求められます。
00:11:15開発サーバーを確認してみると、
00:11:17思い描いていた通りのゲーム風のUIが完成していました。
00:11:20ランディングページはコントラストが高く、まるでゲームのような雰囲気です。
00:11:23意欲をそそる言葉や引用が散りばめられていて、ワクワクする作りになっています。
00:11:26タイピングテストを終えると、パフォーマンスレポートが表示されます。
00:11:29ダッシュボードには最高速度や、
00:11:33現在のレベル、進捗状況が表示され、没入感のあるデザイン体験が得られます。
00:11:37これで今回の動画は終わりです。もし活動をサポートし、
00:11:40このような動画制作を続けてほしいと思っていただけるなら、下の「スーパーサンクス」から支援をお願いします。
00:11:45いつもご視聴ありがとうございます。それでは、また次の動画でお会いしましょう。