Run & Preview

コードを直して → 実行して → 結果を確認するループが Blyck の中で終わります。エラーはエディタマーカーとして戻り、Web画面はパネルにそのまま埋め込まれ、AIが画面を直接見て検証します。

Run & Observe — 実行して観測する

▶ 実行 ボタンを押すと、出力がただ流れていくのではありません。Problem Matcher がリアルタイム出力からエラーをパースして、ファイル · 行 · 重大度で構造化し、該当位置にエディタマーカー（赤い下線）を打ちます。エラーメッセージを目で追ってファイルを探しに行く必要がありません。

実行コマンドの自動検出

プロジェクトルートのマーカーファイルを見て、デフォルトの実行コマンドを自動的に提案します。

検出ファイル	提案コマンド
`package.json`	`npm start`（build · test スクリプトも認識）
`go.mod`	`go run .`
`Cargo.toml`	`cargo run`
`*.csproj` / `.sln`	`dotnet run`
`pyproject.toml` / `setup.py`	`pytest`
`Makefile`	`make`
単一の `.py` / `.js` ファイル	`python <ファイル>` / `node <ファイル>`

コマンドは自由に修正でき、プロジェクトごとに保存されます。出力パネルにはコマンド（$）·標準出力（白）·標準エラー（赤）がリアルタイムで流れ、最大5,000行を表示します。実行中はボタンが ■ 停止 に変わり、クリックすると即座にプロセスを中断します。

言語別エラーパース（Problem Matcher）

言語 / ツール	パース対象
Python	トレースバック（`File "...", line N`）
Go / Rust	コンパイルエラー（`filename:line:col`）
C / C++（gcc · clang）	警告·エラー
C#（MSBuild · dotnet）	ビルドエラー
Node.js	スタックトレース
カスタム	正規表現で matcher を直接追加

パースされたエラーは出力パネルで ファイル名:行番号 形式で強調表示され、クリックするとエディタが該当行に移動します。

Live Preview — アプリ内のブラウザ

開発サーバーを実行した後、パネルにWeb画面をそのまま埋め込みます。ブラウザを別途開いてウィンドウを行き来する必要なく、コード · ターミナル · 画面を一視野に保てます。

プレビューを開く

まずターミナルで開発サーバーを実行します（npm run dev、python -m http.server など）。
新規タブメニュー（+）→ 🌐 Webプレビュー… を選択。
URL入力欄にサーバーアドレスを入力します（例: http://localhost:3000）。

ヘッダーコントロール

ボタン	動作
更新	現在のURLを再ロード
ズーム `25%～500%`	倍率調整。倍率の数字をクリックすると100%に即座復帰
URLバー	別のパスへ直接移動

コンソールログと fetch/XHR ネットワーク応答は、それぞれ直近200個まで自動収集されます。AIが診断するときにこのデータを活用します。

AI Live Preview ツール

AIチャットからプレビューパネルを直接操作できます。AIチャットの Act（⚡）または Auto（🚀）モードで、下記のツールが有効になります。

ツール	動作
`panel_screenshot`	現在の画面をキャプチャ → AIが画像で確認（どのパネルでも種類を自動検出）
`preview_navigate`	指定URLへ移動
`preview_click`	座標またはセレクタをクリック
`preview_type`	テキスト入力
`preview_eval`	ページ内でJavaScriptを実行後に結果を返す
`preview_wait`	セレクタまたはN秒待機（ページロード完了待ち用）
`preview_console_logs`	コンソールエラー·警告を照会
`preview_network`	ネットワークリクエスト一覧を照会

paneId を省略すると、現在アクティブなプレビューパネルに適用されます。

プロンプト例:

ログインフォームにテストアカウント(test@example.com / 1234)を入れて送信してみて。
コンソールエラーがあれば原因を見つけて直して。

AIは preview_type → preview_click → preview_wait → panel_screenshot → preview_console_logs の順に自動実行します。

AIビジョン回帰検証

「直した」という言葉の代わりに、画面で証明します。コード修正前後の画面をピクセル単位で比較し、意図しない視覚的変化を自動的に検出します。

ビジョン回帰のフロー

baseline 保存 — 修正前の希望する状態で preview_baseline_set を実行
コード修正 — AI または手動編集
比較 — preview_baseline_diff を実行 → 変化率（%）と変化領域を赤いボックスで合成した画像を返す

AIがスクリーンショットを vision で読み、コンソールログを相互確認するため、意図した変更だけが起きたか · 他の場所が壊れていないか（視覚回帰）を自動的に捕まえます。

ツール	動作
`preview_baseline_set`	現在の画面を baseline として保存
`preview_baseline_diff`	現在の画面と baseline のピクセル比較、変化率 + diff 画像を返す

デスクトップアプリも対応

Webではないデスクトップアプリはデスクトップミラーで同じフローを使用します。新規タブメニュー → 🖥️ デスクトップキャプチャ… → アプリウィンドウ選択時にライブストリーミング（表示専用）。AIは panel_screenshot ツールでウィンドウをキャプチャし、アプリを再起動してもウィンドウタイトルで再び見つけて接続します。

制限事項

Live Preview の自動操作（クリック · 入力）は、埋め込まれたプレビューパネル内でのみ動作します。外部ブラウザウィンドウは操作できません。
視覚回帰比較は baseline を保存した時点のウィンドウサイズ基準です。パネルサイズが変わったら baseline を再保存してください。
▶ 実行ボタンはローカル保存ファイルでのみ表示されます。リモートSFTPファイルでは無効になります。
run_observe ツール（AIの自律実行）は、⚡ 実行+レビュー · 🚀 自動モードでのみ動作します。💬 チャット·📋 計画モードでは使用できません。
サーバー型プロセス（npm run dev など）は run_observe のタイムアウトが30秒に制限されます。

FAQ

Q. ▶ 実行ボタンが見えません。 → リモート（SFTP）ファイルか、まだ保存されていないファイルです。ローカルに保存してから再び開くと表示されます。

Q. プレビューがロードされません。 → 開発サーバーが実行中か確認してください。サーバーなしでは動作しません。ターミナルで npm run dev などでサーバーを先に実行してください。詳細はトラブルシューティングページを参照してください。

Q. AIプレビューツールを使うにはどうすればいいですか? → AIチャットで ⚡ 実行+レビュー（Ctrl+3） または 🚀 自動（Ctrl+4） モードに切り替えた後、プレビューパネルが開いている状態で要求してください。

Q. preview_eval が即座に失敗します。 → ページがまだロード中です。preview_wait でロード完了を待ってから再試行してください。

Q. エラーマーカーがエディタに打たれません。 → Problem Matcher が対応している言語か確認してください。カスタムエラー形式は正規表現 matcher を追加して登録できます。

Q. ビジョン回帰比較が見当違いに出ます。 → baseline 保存以降、パネルサイズが変わった可能性があります。preview_baseline_set で baseline を再保存してから比較してください。

Q. AIに自動でテストを実行させるには? → 🚀 自動モードで「テストを実行してエラーを直して」のように要求すると、AIが run_observe で実行→エラーパース→コード修正のループを自律的に繰り返します。関連内容は AIチャットページを参照してください。