App Canvas を作った理由

App Canvas を作った理由

AI でページを増やすのは簡単になりましたが、成長するアプリを理解するのは簡単になりませんでした。全画面をクリックして回ったり、別のデザインファイルを維持したりせず、実装と失敗状態をまとめて見たかったのです。

App Canvas はレビューを移動可能な景観にします。エージェントがリポジトリ固有の統合を担当し、共通ツールがキャンバス、実コードの Web プレビュー、カメラ追従、検証付き再生を提供します。

StoolSense は合成の公開例です。本番セッション、実際の健康記録、AI リクエストはありません。任意の匿名利用イベントはアプリデータと別です。

全体を見る、操作する、再生する

既存リポジトリから対話的なキャンバスへ

リポジトリを読み書きし、コマンドを実行できるエージェントに依頼します。既存の Storybook や手作業の画面一覧は不要。インストールだけで画面が揃うわけではありません。

エージェントに貼り付ける指示

Read https://github.com/tombelieber/app-canvas/blob/v0.12.0/AGENT_GUIDE.md and add a completely populated App Canvas to this repository. Discover all screens, components, variants, states and navigation from the whole application source. Use original UI code. Create the missing synthetic fixtures and render harnesses. Reconcile an independent source inventory with rendered cases and source-linked runtime checks. Add checked happy, failure and recovery journeys. Run --complete against the original source root. Continue until the full landscape is populated and verified; report genuine blockers as incomplete. Keep production sessions, credentials and real user data out of previews.

1. 共通ツールを導入

   Node.js 22+ とプロジェクトのパッケージ管理・lockfile を使用。固定した GitHub リリースとブラウザをインストールします。npm 12 が直接 Git 依存を拒否する場合のみ --allow-git=root を追加。グローバル設定は変更しません。

   npm install --save-dev github:tombelieber/app-canvas#v0.12.0
   npx app-canvas browsers

2. ケース選択の前に棚卸し

   アプリ全体のルートで discover を実行。エージェントは全ソース領域と候補を確認し、pending を解消。catalog とは独立して意味のある状態を列挙します。未解決の問題は残して明示します。

   npx app-canvas discover --source-root . --out .artifacts/app-canvas/inventory.json
   npx app-canvas pending --inventory .artifacts/app-canvas/inventory.json

3. Fixtures で元の UI を描画

   ui-review/canvas.config.mjs、catalog、合成 fixtures、preview entry、検証付き journeys を作成。Web adapter は元のページ、providers、CSS を取り込みます。fixtures はデータと依存関係を置換し、UI は複製しません。未知の通信を拒否します。

   ui-review/
     canvas.config.mjs
     catalog.json
     frame.jsx
     fixtures.js
     README.md
   .artifacts/app-canvas/inventory.json

   // package.json → scripts
   "ui:review": "app-canvas --config ui-review/canvas.config.mjs"

   React/Vite · エージェントガイド

4. 状態と操作を検証

   通常、空、読み込み、エラー、アクセス拒否、ダイアログ、復旧を網羅。全ケースを確認し、連続フローで実際のコントロールを操作。inventory、ソースに紐づく assertions、routes を照合し、同じルートで --complete を通します。

   npx app-canvas --config ui-review/canvas.config.mjs --check
   npx app-canvas --config ui-review/canvas.config.mjs --verify
   npx app-canvas --config ui-review/canvas.config.mjs --complete --source-root .

5. ソースからレビューと保守

   ui:review で全体と状態図を確認し、フローを再生。変更は実際のアプリソースへ依頼します。既存プレビューは再構築されます。新ルートや状態には inventory、fixture、journey の更新が必要。引き渡し前に完全性検証を必須にします。

   npm run ui:review

アプリ側に保持するもの

共通パッケージは viewer、CLI、skill を管理。各リポジトリは adapter、fixtures、独立 inventory、catalog、操作検証を管理します。動作する React/Vite 例を参考にし、他の構成には専用 adapter を用意します。

任意のエージェント Skill

Codex と Claude Code には同梱 skill を導入可能。他のエージェントは AGENT_GUIDE.md を直接読めます。Canvas runtime はモデルを呼ばず API キーも不要。利用するエージェント自体の料金と権限は別です。

npx app-canvas install --target both

プライバシーとテレメトリ

最小限の利用イベントを任意で Cloudflare 経由で PostHog に送信します。ページ内容、コード、名前、パス、メール、IP アドレスは PostHog に転送しません。無効にできます。

プライバシーとテレメトリ ↗

このリリースの範囲と限界

• Web は実際の HTML/CSS と操作時の元の JavaScript を利用。UIKit、SwiftUI、Android は元の runtime による harness と証拠が必要です。キャプチャ画像は操作可能なネイティブアプリではありません。
• カバレッジは確認済みのソースとケースの対応です。全業務条件の自動発見ではなく、バックエンド、医療精度、モデル精度の保証でもありません。
• Viewer は英語が既定で11言語に対応。公開デモは固定の合成フロントエンドです。ローカル統合はソースに追従します。実機 iPad の性能は未測定です。