Canvas Skill

• AIエージェントに生成したHTMLページ（ダッシュボード、ゲーム、ビジュアライゼーション）をMac、iPhone、またはAndroidデバイスにリアルタイムでプッシュさせたい場合。
• インタラクティブなHTMLコンテンツをプロトタイピングしていて、ライブリロードが必要な場合 — ファイルを保存すると、接続されたキャンバスが自動的に更新されます。
• 実行中のWebView内でエージェントにJavaScriptをリモート実行させる必要がある場合（例：フルリロードなしでチャートデータを更新するなど）。
• エージェントのワークフロー内からレンダリングされたキャンバスコンテンツのスクリーンショットをキャプチャしたい場合。

• OpenClaw ノードを使用していない場合 — このスキルは OpenClaw Mac/iOS/Android エコシステム専用です。
• コンテンツを公開または Tailscale 以外のピアに提供する必要がある場合；このサーバーはローカル/LAN/Tailscale アクセス専用です。
• フルブラウザを埋め込んだり、任意の外部 URL を表示したりしたい場合 — canvas ホストは設定されたローカルルートディレクトリからのファイルのみを提供します。

present、hide、navigate、eval、snapshot という5つの独立したアクションにより、エージェントはノード上に表示されるコンテンツをきめ細かく制御できます。URLの表示、navigate によるコンテンツの切り替え、リロードなしでのJavaScript実行、スクリーンショットのキャプチャなど、すべて単一のスキルから実行可能です。

liveReload: true（デフォルト）の場合、キャンバスホストはchokidarを使用してルートディレクトリを監視し、HTMLファイルにWebSocketクライアントを注入します。ファイルを保存すると、接続されたキャンバスが即座に更新されるため、HTMLの反復生成を迅速に行えます。

HTTPサーバーはループバック、LANインターフェース、Tailscaleインターフェースにバインドするか、自動的に選択することができます。正しいホスト名はブリッジを通じて自動的にノードに転送されるため、ネットワークトポロジーに関わらずコンテンツが正しく読み込まれます。

evalアクションを使用すると、エージェントはライブキャンバスのWebView内で任意のJavaScriptを実行できます。これにより、新しいページに移動することなく、チャートへの新しいデータのプッシュ、アニメーションのトリガー、DOMの状態の読み取りなど、動的な更新が可能になります。

snapshot アクションは、指定したノード上の現在のキャンバスのスクリーンショットを撮影し、エージェントに返します。これにより、レンダリングされたコンテンツの視覚的な検査やログ記録が可能になります。

エージェントがデータ（例：売上指標、システム統計）を集計したHTMLダッシュボードを生成し、~/clawd/canvas/dashboard.html に書き込みます。その後、canvas action:present を呼び出してMacノードをターゲットに指定すると、ダッシュボードがCanvas Skillのビューに即座に表示されます。

自己完結型のHTML5ゲームをキャンバスのルートにドロップし、エージェントが接続されたiPhoneノード上でそれを表示します。エージェントはその後、デバイス上での手動操作なしにhideを呼び出したり、別のデモに切り替えたりすることができます。

チャートページを一度表示した後、繰り返し eval アクションを使用して、実行中のJavaScriptコンテキストに新しいデータポイントをプッシュします。チャートはページをリロードすることなくリアルタイムで更新されるため、モニタリングやリアルタイムのエージェント出力に役立ちます。

開発中は、接続されたノード上でキャンバスを開いたままにし、キャンバスのルートディレクトリにあるHTMLファイルを編集します。保存するたびに自動リロードがトリガーされ、手動でページを更新したりコマンドを再実行したりすることなく、即座に視覚的なフィードバックを得ることができます。