Canvas

Canvas は Agent がテキスト・データ・分析結果を統計カード、テーブル、チャートなどのレイアウト付きパネルとしてレンダリングする機能です。キャンバス上で直接アノテーションを付けて修正内容を伝えたり、ワンクリックでチームに共有したりできます。

​

Canvas とは

• Agent の出力の可視化：長いテキスト出力の代わりに、パネルごとに整理されたレイアウトで表示します。
• 標準の .canvas.tsx ファイル：Agent がこのファイルを生成・編集し、変更は Canvas プレビューにリアルタイムで反映されます。
• プロンプトで編集：ソースコードを手で書く必要はありません。会話で調整したい内容を伝えれば、Agent がソースを更新して再描画します。

​

適用シーン

• データダッシュボード：ログやメトリクスを分析したあと、Canvas 上に統計値と傾向チャート付きのダッシュボードを生成し、一目で把握できます。
• 構造化レポート：性能プロファイリングや依存関係分析などの複雑な分析結果を、長いテキストの代わりにパネル単位で提示します。
• アーキテクチャとフローの可視化：システムロジックの整理やドキュメント作成時に、状態遷移・モジュール依存・抽象アーキテクチャを構造図として描画し、チームの認識合わせを支援します。

​

使い方

会話で /canvas コマンドを使うと Canvas がトリガーされます:

• 初回生成：Canvas に何を表示したいかを伝えると、Agent が .canvas.tsx ファイルを作成し、Canvas プレビューでレンダリングします。
• 反復調整：同じ会話内で Agent に指示を続けるか、Canvas 上に直接アノテーションを付けると、Agent がソースを更新して再描画します。

​

アノテーション

アノテーションを使うと、Canvas 上で修正したい箇所を直接指し示せます。「3 番目のチャートの凡例」を言葉で説明するより、キャンバス上で直接指し示すほうが早く、あいまいさも減ります。 使い方:

• アノテーションモードに入る：Canvas 上のアノテーション入口をクリック。
• 対象を選択または囲む：特定の要素をクリックするか、注目したい領域をフリーハンドで丸く囲みます。
• コメントを追加：アノテーションに修正案やフィードバックを入力します。
• Agent に送信：アノテーションは会話のコンテキストとして添付され、Agent はそれを読み取って Canvas のソースを更新し、再描画します。

​

共有

Canvas はワンクリック公開に対応しており、キャンバスをチームメンバーに共有できます。公開された Canvas は 所属する組織内でのみ閲覧可能 で、外部には公開されないため、組織のデータを安全に保てます。

​

Canvas を公開する

Canvas のツールバーで Publish をクリックすると、現在のキャンバスを組織内に公開します。

• 公開ポップオーバーには "All team members can view" と表示されます。確認すると公開が完了します。
• 公開後、ボタンは Published に変わります。チームメンバーは共有リンクから組織内で該当キャンバスを閲覧できます。

​

公開後の操作

Published ボタンをクリックすると、次のメニューが開きます: メニュー上部には前回の同期時刻（例：Last synced 5 minutes ago）も表示されます。

​

My Shares

エンタープライズ管理コンソール左側ナビゲーションの My Shares に、Qoder IDE から共有したすべてのコンテンツ（現時点では Canvas）がまとまっています。

• 入口：エンタープライズ管理コンソール → My Shares（共有中のコンテンツがない場合は表示されません）
• 列項目：Canvas 名、公開 / 最終同期日時
• 行アクション：
  • Canvas 名をクリック — 公開版キャンバスをプレビュー
  • 右側の ... メニュー：Copy link、Delete（自分が公開したキャンバスの削除）

​

Skill としてパッケージ化する

同じ構造の Canvas を頻繁に生成する場合、ワークフロー全体を Skill としてパッケージ化し、簡単なトリガーで同じキャンバスを再現できます。 Canvas Skill には通常、以下が含まれます：

• トリガー説明 — どのシーンで Skill を呼び出すかを定義します。例：「今週のデプロイダッシュボードを生成」「障害振り返りパネル」。
• レイアウト仕様 — パネルの分割構造、カードタイプ、チャートスタイルを指定します。
• データソース — 生成時に Agent が実行する取得ロジック。データベースクエリ、API リクエスト、ログ分析スクリプトなど。
• フォーマット規約 — 数値精度、時刻形式、カラーコーディングなどの表示ルールを統一します。

パッケージ化後は、チームの誰でも短いプロンプトで Agent に最新データを取得・再生成させることができ、出力構造は常に一貫します。