PR

GitHub Copilot appキャンバス機能の仕組みと作成手順

IT

AIエージェントとのやり取りは、テキストチャットを往復させる形が一般的でした。GitHub Copilot appに導入されたキャンバス機能は、自然言語の指示から専用の操作画面を立ち上げ、ユーザーとエージェントが同じ画面を共同で更新できる仕組みです。

この記事の結論

GitHub Copilot appのキャンバス(canvas extension)は、エージェントとユーザーがリアルタイムに共有・操作できる双方向の作業画面です。/create-canvasスキルを使い、対象の業務フロー、自分が操作したい内容、エージェントに任せる処理の3点を指定するだけで生成できます。コードを書かずに作成でき、プロジェクトでの共有や個人用ツールとして保存・再利用が可能です。

GitHub Copilot appの作業画面イメージ

チャット欄だけで終わらない「キャンバス」とは何か

既存の開発ツールや管理ツールの多くは、あらかじめ用意された画面構成にユーザー側が作業手順を合わせる必要がありました。これに対してGitHub Copilot appのキャンバス(canvas extension)は、自分が必要とする作業手順に合わせて画面そのものを生成するアプローチをとっています。

キャンバスは、カンバンボード、課題の優先順位付けボード(トリアージボード)、リリースの確認リスト、ダッシュボード、入力フォーム、簡易スプレッドシートなど、多様なUIとして構成できます。生成された画面はGitHub Copilot appの右側パネルに表示され、ユーザーとAIエージェントの双方が同じ情報をリアルタイムに扱えます。

最大の特徴は、単なる情報の出力領域ではなく「双方向(bidirectional)」に操作できる点です。画面上に配置されたボタン、カード、フィルターなどをユーザーが手動で動かすこともできれば、背後で動くエージェントに頼んでカードを追加・移動してもらうこともできます。

キャンバスを作成する3つの指定項目

キャンバスの立ち上げに、HTMLやCSSのコーディング、画面レイアウトの細かい手作業は必要ありません。エージェントセッションを開き、組み込みスキルの1つである「/create-canvas」を入力して、作りたいツールの内容を自然言語で説明します。

指示文(プロンプト)を組み立てる際は、次の3つの要素を盛り込む設計になっています。

  • 支援させたいワークフロー(作業の流れや目的)
  • ユーザー自身が画面上で行いたい操作(確認、並び替え、手動入力など)
  • エージェント側に実行させたい操作(自動追記、状態更新など)

たとえば、複数セッションにまたがる開発履歴をまとめたい場合は、次のような形式で指示を出します。

/create-canvas Create a release notes canvas for tracking new feature work completed across GitHub Copilot app sessions. Include controls for reviewing and organizing entries and allow the agent to add and update them.

この指示を入力すると、エージェントが必要なコンポーネントを組み立て、右側の専用パネルに直接ツールを展開します。ファイルを手作業で作成したり、配置を設定ファイルに書き込んだりする工程を挟まずに利用を開始できます。

キャンバス機能によって生成される双方向UIパネルのイメージ

従来のチャット入力とキャンバスはどう違う?

チャット型のAI対話では、ユーザーが指示を送り、AIが文章やコードを返し、それを見て次の指示を出すという一問一答の繰り返しが基本でした。画面の状態を共有しているわけではないため、直前の会話が長くなると文脈の把握が難しくなる課題があります。

キャンバスを導入した環境では、作業状態が1つの独立した画面として保持されます。ユーザーがカードをドラッグしたり入力欄を更新したりすると、送信操作を個別に行わなくても、その状態が即座にエージェントと同期されます。

従来のチャット型指示文を送信して待機AIのテキスト返答を確認履歴が流れると文脈が埋もれやすいキャンバス型(共有画面)ユーザーがUIを手動操作⇅ リアルタイム共有 ⇅エージェントが自律更新共通の作業盤を双方向から随時更新

逆に、エージェントに対して「この項目を完了リストに移して」と依頼すれば、画面上のカードがその場で移動します。コマンドを投げて結果を待つだけの関係から、同じホワイトボードを挟んで作業を進める関係へ移行する点が大きな違いです。

対話による画面調整と拡張機能としての保存

最初に生成された画面は完成形である必要はありません。作業を進める中で変更したい点が出てきたら、エージェントに対話形式で追加の要望を伝えるだけで柔軟にレイアウトを更新できます。

たとえば「レビュー済みの列を追加したい」「特定の条件で絞り込むフィルターが欲しい」「リポジトリの未処理プルリクエストを一覧に読み込みたい」といった要望を出すと、エージェントが既存の画面構造を維持しながらUIを改修します。

調整を終えたキャンバスは、拡張機能(extension)として保存が可能です。保存先は作業目的に応じて分けられます。

  • プロジェクト単位の保存:リポジトリ内に保持し、チームメンバー全員で同じワークフロー画面を共持っている
  • 個人単位の保存:自分専用の拡張機能として登録し、どの作業セッションでも呼び出せるようにする

一度保存しておけば、使い捨てのチャットログとは異なり、定期的なリリース作業や日々のタスク管理ツールとして何度でも呼び出して再利用できます。

ユーザーとエージェントがリアルタイムに共有画面を同期する概念図

自作するか既存テンプレートを使うかの判断

ゼロから指示文を書いて作成するだけでなく、コミュニティが作成した既存のキャンバスを利用する方法も用意されています。コミュニティリポジトリの「Awesome Copilot」では、リリースノート管理や課題トリアージ向けなど、公開済みのキャンバス拡張機能が共有されています。

導入の判断基準としては、次の2つの段階を分けるとスムーズです。

  • 標準的なカンバンやトリアージを行いたい場合:Awesome Copilotで近い構造の拡張機能を探してインストールし、不足している項目だけをエージェントに調整してもらう
  • 独自のチェック手順や特殊な入力項目がある場合:エージェントセッションを開いて「/create-canvas」を実行し、3つの要素(目的・自分の操作・エージェントの操作)を明記して新規生成する

機能の詳細な仕様や利用イメージについては、GitHub公式ブログの解説記事でも紹介されています。まずは日々の作業で使う小さなチェックリストやタスクボードなど、シンプルな画面の作成から試して操作性を確かめるのが現実的です。

🐕

この記事を書いた人

現場の業務改善担当(AIで自動化) / サイト運営者

工場での生産設備保守や不良原因調査を経験したあと、人事総務・CS(カスタマーサポート)領域で業務改善に関わってきました。現場で「同じ作業に時間を取られすぎる」と感じたことをきっかけに、Pythonや生成AIを使った自動化ツールを作り始めています。
Nexistixでは、AI・自動化・ガジェットのニュースや話題を、個人利用・副業・業務効率化の目線で読み解いています。
休日はバスケをしたり、愛犬のハク(クリーム色の豆柴)とゆっくり過ごすのが楽しみです。


KEEP READING
次に読むなら

この記事と近いテーマで、設定・機材・作業環境の判断材料になる記事です。

IT
スポンサーリンク
シェアする

コメント