OpenClaw Canvas＆A2UIでリッチUI出力を実現する

AIエージェントの出力は「テキスト」が当たり前——でも、グラフ、ダッシュボード、インタラクティブな表で出力できたら、もっと便利だと思いませんか？

OpenClawのCanvas機能とA2UI（Agent-to-UI）パイプラインを使えば、エージェントが動的なWebUIを直接描画できます。テキストチャットの限界を超えた「見せるAI」を実現する、OpenClawの注目機能です。

この記事では、Canvasの基本操作からA2UIによるダッシュボード自動生成まで、実践的に解説します。

OpenClaw Canvasとは？テキストを超えた出力機能

Canvasの基本概念とユースケース

Canvasは、OpenClawのエージェントがHTML/CSS/JavaScriptをリアルタイムで描画するための出力チャネルです。

通常のエージェント出力がテキスト（メッセージ）であるのに対し、Canvasでは以下のような出力が可能です。

出力形式	例	従来のテキスト出力
グラフ・チャート	棒グラフ、折れ線グラフ、円グラフ	数値の羅列
ダッシュボード	KPI表示、リアルタイム監視	テーブル形式のテキスト
インタラクティブ表	ソート・フィルター可能な表	静的なマークダウン表
フォーム	入力フォーム、アンケート	テキストで質問
地図	位置情報の可視化	テキストで住所表示

Canvasの最大の強みは、エージェントが動的にUIを生成・更新できる点です。データが変わればUIも自動的に更新されます。

A2UI（Agent-to-UI）パイプラインの仕組み

A2UIは、エージェントからCanvas UIに構造化データを流し込むためのパイプラインです。

エージェント → JSONL定義 → A2UIパイプライン → Canvas描画

エージェントは、UIの内容をJSONL（JSON Lines）形式で定義します。A2UIパイプラインがそれをHTMLに変換し、Canvasにリアルタイムで描画します。

これにより、エージェント開発者はHTML/CSSの知識がなくても、データ定義だけでリッチなUIを出力できます。

Canvasの基本操作

present / navigate / eval / snapshot

Canvasの基本操作は4つのアクションで構成されています。

present：URLまたはHTMLコンテンツをCanvasに表示する

// URLを表示
canvas.present({ url: "https://example.com/dashboard" });

// HTMLを直接描画
canvas.present({
  html: "<h1>Hello Canvas</h1><p>リアルタイム描画テスト</p>"
});

navigate：Canvas内のページを遷移する

canvas.navigate({ url: "/reports/daily" });

eval：Canvas内でJavaScriptを実行する

// Canvas内のDOMを操作
canvas.eval({
  javascript: "document.getElementById('counter').textContent = '42'"
});

snapshot：Canvas の現在の状態をキャプチャする

// PNGでスナップショット取得
canvas.snapshot({ format: "png" });

HTML/CSS/JSをリアルタイムで描画

Canvasでは、エージェントが完全なHTML/CSS/JSを直接レンダリングできます。

<!-- エージェントが生成するHTML -->
<div style="font-family: system-ui; padding: 20px;">
  <h1 style="color: #4285f4;">📊 日次レポート</h1>
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
    <div class="card">
      <h3>ユーザー数</h3>
      <p style="font-size: 2rem; font-weight: bold;">1,234</p>
      <span style="color: green;">▲ 12%</span>
    </div>
    <div class="card">
      <h3>PV</h3>
      <p style="font-size: 2rem; font-weight: bold;">5,678</p>
      <span style="color: green;">▲ 8%</span>
    </div>
    <div class="card">
      <h3>CV率</h3>
      <p style="font-size: 2rem; font-weight: bold;">3.2%</p>
      <span style="color: red;">▼ 0.3%</span>
    </div>
  </div>
</div>

これにより、テキストでは表現しきれないリッチな情報をエージェントから直接出力できます。

A2UIでダッシュボードを自動生成する

JSONLフォーマットによるUI定義

A2UIのJSONLフォーマットは、UIコンポーネントを1行ずつ定義するシンプルな構造です。

{"type":"heading","text":"📊 SES BASE 日次レポート","level":1}
{"type":"metric","label":"ユーザー数","value":1234,"change":12,"unit":"%"}
{"type":"metric","label":"PV","value":5678,"change":8,"unit":"%"}
{"type":"metric","label":"CV率","value":"3.2%","change":-0.3,"unit":"pp"}
{"type":"chart","chartType":"line","title":"過去7日間のPV推移","data":[4200,4500,4800,5100,5300,5500,5678]}
{"type":"table","title":"流入元TOP5","headers":["チャネル","セッション","CV"],"rows":[["Organic Search",2100,45],["Direct",1500,32],["Social",800,12],["Referral",600,8],["Paid Search",400,15]]}

データ可視化（グラフ・チャート）の実装

A2UIでは、Chart.jsをベースとしたグラフ描画がサポートされています。

{"type":"chart","chartType":"bar","title":"技術スタック別案件数","labels":["Java","Python","TypeScript","Go","Rust"],"data":[120,95,88,45,22],"colors":["#4285f4","#34a853","#ea4335","#fbbc04","#9334e6"]}

対応するグラフタイプは以下の通りです。

• line：折れ線グラフ（時系列データに最適）
• bar：棒グラフ（カテゴリ比較に最適）
• pie / doughnut：円グラフ（構成比の表示）
• radar：レーダーチャート（多軸評価）
• scatter：散布図（相関分析）

OpenClaw公式ドキュメントにも、A2UIの詳細な仕様が記載されています。

実践例：GA4レポートをCanvasで表示

データ取得→Canvas描画の自動化フロー

実際にGA4のデータを取得してCanvasに表示するフローを実装してみましょう。

ステップ1：GA4データの取得

# gog（Google Workspace CLI）でGA4データを取得
gog analytics report --property GA4_PROPERTY_ID \
  --metrics "activeUsers,sessions,screenPageViews" \
  --dimensions "date" \
  --date-range "7daysAgo" "today" \
  --format json > /tmp/ga4-data.json

ステップ2：エージェントがA2UI JSONLを生成

{"type":"heading","text":"📊 GA4 週次レポート（3/5〜3/12）","level":1}
{"type":"chart","chartType":"line","title":"ユーザー数推移","labels":["3/5","3/6","3/7","3/8","3/9","3/10","3/11","3/12"],"data":[180,195,210,165,220,240,235,250]}
{"type":"metric","label":"週間ユーザー数","value":1695,"change":15}
{"type":"metric","label":"週間PV","value":4820,"change":12}

ステップ3：Canvasに描画

canvas.a2ui_push({ jsonlPath: "/tmp/ga4-report.jsonl" });

このフローをcronジョブで毎朝実行すれば、毎日自動的にGA4ダッシュボードが更新される仕組みが完成します。

ノード連携でモバイルにもCanvas出力

OpenClawのノード機能を使えば、Canvasの出力をモバイルデバイスにも表示できます。

// モバイルノードにCanvas出力を送信
canvas.present({
  url: "https://localhost:3000/dashboard",
  node: "iphone-yuya"
});

これにより、外出先でもスマートフォンからリアルタイムのダッシュボードを確認できます。SES現場での進捗報告や、クライアントへのデモにも活用できるでしょう。

トラブルシューティングとパフォーマンス最適化

よくある問題と解決策

問題	原因	解決策
Canvasが表示されない	Gatewayが停止している	openclaw gateway restart
グラフが描画されない	JSONLの構文エラー	jq でJSONLを検証
表示が遅い	データ量が多すぎる	ページネーションを実装
スナップショットが真っ白	レンダリング前にキャプチャ	delayMsを設定

パフォーマンス最適化のポイント

• 大量データはページネーションまたは無限スクロールで分割表示
• 画像やアセットはCDN経由で配信
• リアルタイム更新はWebSocketではなくポーリング間隔を調整
• スナップショットの解像度は用途に応じてwidthパラメータで調整

まとめ｜Canvasで「見せるAI」を実現する

OpenClawのCanvas＆A2UIは、AIエージェントの出力をテキストからリッチUIに進化させる機能です。

• Canvas：HTML/CSS/JSをリアルタイムで描画
• A2UI：JSONLベースでグラフ・ダッシュボードを簡単生成
• 実用例：GA4レポート・監視ダッシュボード・進捗報告
• ノード連携：モバイルデバイスにもCanvas出力可能

テキストチャットの限界を感じている方は、ぜひCanvasを試してみてください。「データを見せる」体験が劇的に変わります。

👉 OpenClaw 完全攻略シリーズを読む

関連記事

• OpenClaw AIアシスタントガイド
• OpenClaw ワークフロー自動化
• OpenClaw マルチエージェント設計