実行 · プレビュー · デザイン
作ったプログラムを 動かしてみる（実行）、中をのぞく（デバッグ）、Web 画面を見る（Web プレビュー）、デザインをチェックする（デザインワークベンチ） ための機能です。直して → 動かして → 確かめる作業が Blyck の中で完結します。
| 機能 | 無料 / Pro |
|---|---|
| ▶ 実行、出力ウィンドウ、エラー位置の表示 | 無料 |
デバッグウィンドウ(Ctrl+Shift+D)を見る | 無料 |
| Web プレビュー、ブックマーク | 無料 |
| キャプチャ・録画を AIチャットに送る | Pro |
| AI による実行・観察(Run & Observe)、AI デバッグツール・自動調査、AI によるプレビュー操作、ビジュアル回帰、デザインワークベンチ | Pro |
コードの実行（▶ 実行）
Section titled “コードの実行（▶ 実行）”
- ▶ 実行 — ローカルに保存したファイルをボタン 1 つで実行（実行中は ■ 停止） · 横の ▾ から「デバッグ」(F5)も選べます（Python · JavaScript）
- 状態表示 — 終わると「終了コード 0」· [■ 停止] [クリア] [✕]
- 出力パネル — 先頭に $ コマンド（琥珀色）、プログラムの出力、最後に [終了コード 0]（緑）
エディタで、いまのファイル（またはそのプロジェクト）を ボタン1つで実行 し、エディタの下の 出力ウィンドウ で結果をリアルタイムに見ます。
- ファイルを 先に保存 します(
Ctrl+S)。▶ 実行はディスクに保存された内容を実行します。 - エディタのヘッダー行の [▶ 実行] を押します(
Ctrl+F5)。出力ウィンドウが開きます。 - 実行中は、ボタンが赤い [■ 停止] に変わります。
- 終わると 終了コード {n} と、エラーが見つかった場合は {n} 件の問題 が表示されます。
▶ 実行は ローカルに保存されたファイル でだけ表示されます（リモートのファイル・名前のないファイルにはありません）。
どのコマンドで実行するか
Section titled “どのコマンドで実行するか”Blyck がファイルとプロジェクトを見て、コマンドを自動で決めます。
| 対象 | 実行コマンド |
|---|---|
.py · .rb · .php · .lua · .sh ファイル | そのファイルを直接実行（python ファイル など） — プロジェクトより優先 |
go.mod | go run . |
Cargo.toml | cargo run |
*.sln · *.csproj | dotnet run |
pubspec.yaml | flutter run |
pom.xml / build.gradle | mvn exec:java / gradle run |
package.json | npm start |
目印のファイルがない .js / .go | node ファイル / go run ファイル |
出力ウィンドウとエラー位置
Section titled “出力ウィンドウとエラー位置”- いちばん上に
$ コマンド、ふつうの出力、エラー出力（赤）、最後に終了コードが表示されます。最近の 5,000行 まで保管します。 - [クリア] は出力を消し、[✕] はウィンドウを隠します（プログラムは止まりません）。
- 出力からエラーの形式（Python、Go、Rust、gcc/clang、C#、TypeScript など）を読み取り、開いているファイル に赤（エラー）・黄（警告）の下線を付けます。エラーの行を押すと、そのファイルのその行に移動します。
デバッグで実行 — 赤い点で止めて値を見る
Section titled “デバッグで実行 — 赤い点で止めて値を見る”この PC に保存した Python · JavaScript ファイルを好きな行で止め、そのときの変数の値を見ながら 1 行ずつ進めます。print を入れる必要はありません。
- 止めたい行の行番号の左を押すか
F9— 赤い点（ブレークポイント） が付きます。 - ヘッダー行の ▶ 実行 ▾ → デバッグ（または
F5）。Python は初回だけデバッガー（debugpy、約 33MB）を受け取ります。JavaScript は Node.js に入っているデバッガーを使います。 - 止まるとその行が黄色になり、行の端に今の値が薄く付き、下に 変数 · 呼び出し順 の欄が開きます。変数にマウスを乗せると値が見えます。
- 続行(
F5) · 次の行(F10) · 関数の中へ(F11) · 関数の外へ(Shift+F11) · デバッグを停止(Shift+F5)。
- 止まった場所で AIに聞く を押すと、止まった行 · エラー · 今の値 · 呼び出し順 · 出力を一緒に送ります (Pro)。
- AI チャットが直接デバッグ (Pro):「原因を探して」と頼むと、AI が赤い点を付け、デバッグで実行して値を読みます(
dbg_breakpoint·dbg_start·dbg_step·dbg_inspect)。自分のエディタ画面がそのまま一緒に動き、ステータスバーに AIチャットがデバッグ中 と出ます。⚡ 実行 · 🚀 自動モードで使えます。 - リモート（SFTP）のファイルとその他の言語はまだ使えません。
AI が実行して直す — Run & Observe (Pro)
Section titled “AI が実行して直す — Run & Observe (Pro)”AIチャットに「テストを動かして、失敗したら直して」と頼むと、AI が 自分で実行 → 出力・エラーを確認 → コードを修正 → もう一度実行 を繰り返します。出力をコピーして貼り付ける必要はありません。
- AIチャットのモードを ⚡ 実行 または 🚀 自動 にします（💬 チャット・📋 プラン モードでは実行できません）。
- 「pytest を動かして失敗を直して」のように頼みます。
- ファイルを移動したり上書きしたりするコマンドでは、承認カードが出ます。とても危険なコマンドは 🚀 自動モードでも確認します。
- 既定の待ち時間は 30秒 です。サーバーのように動き続けるプログラムは、それまでの出力を返します。
- AIチャットのプロジェクトフォルダがリモート(SSH)なら、サーバーで実行します。
デバッグウィンドウと AI Debug Bridge
Section titled “デバッグウィンドウと AI Debug Bridge”
- 絞り込み — label · loc 欄、level · source の選択 / 🔕 AI自動調査 · ⏸ 一時停止 · 🗑 クリア · ✕ 閉じる
- 記録の 1 行 — [段階] 名前 値 · 出どころ(terminal / preview)
プログラムが動いている最中の 中の値（変数の値など） を、AI が直接読めるようにする仕組みです。コードに @BLYCK@ … という形の記録行を1行入れておくと、その行が Blyck のターミナルや Web プレビューに出力されたときに Blyck が集めておき、AI がそれを読んで原因を探します。ふつうは AI が自分で入れ、使い終わったら自分で消します。
Ctrl+Shift+Dで、集まった記録をリアルタイムで見る 🐞 Debug Bridge ウィンドウを開きます（無料）。名前・位置・段階で絞り込めます。- 🔔 AI による自動調査（Pro、既定はオフ）をオンにすると、
error・assertの記録が出たときに AI が自動で調査を始めます。AI を使うので費用がかかります。 - ▶ 実行の出力ウィンドウや、Blyck の外で出力された記録は集めません。
詳しい使い方は AIデバッグブリッジ を見てください。
Web プレビュー (Live Preview)
Section titled “Web プレビュー (Live Preview)”
- エディタ — 画面を作るコード(app.py)
- Web プレビューのバー — ← → ↻ ☆ · アドレス欄 · − 100% + · 📷 キャプチャ · 録画
- Blyck の中の小さなブラウザに表示した開発中の画面
作っている Web サイトを Blyck のパネルの中に表示する、小さなブラウザです。自分でクリックして試せるうえ、AI も画面を見て操作できます。プレビュー自体は 無料 です。
- 先に開発サーバーを起動します（例：ターミナルで
npm run dev）。 Ctrl+Alt+B（または新規タブメニュー → Webプレビュー アイコン）を押します。- アドレスを入力します（既定値
http://localhost:3000）。[開く]。
http://を書かなければ自動で付きます。PC 内の HTML ファイルはfile:///C:/…/index.htmlのように開きます。
| ボタン | すること |
|---|---|
| ← / → / ↻ | 戻る / 進む / 再読み込み |
| ☆ | ブックマーク（ブラウザからインポート） |
| アドレス欄 | アドレスを入力して Enter |
| − / 100% / + | 縮小 / 倍率（押すと100%に） / 拡大。25%〜500% |
| 📷 キャプチャ | 画面を撮ってキャプチャエディタを開き、そのあと AIチャットに添付 |
| 赤い点 録画 | 0.5秒ごとに画面を撮る（最大60枚、約30秒） → 送る場面を選んで AIチャットに添付 |
- キャプチャ・録画を AI に送るのは Pro です。送る前に AIチャットパネルを先に開いておいてください（ないと描いた内容が消えます）。
- ☆ ブックマーク：初めて押すと [{ブラウザ}からインポート] ボタンが表示されます。Chrome・Edge・Brave・Vivaldi（Mac は Safari も）の既定のプロフィールのブックマークを取り込みます。Firefox はできません。
- Google・GitHub のような新しいウィンドウでのログインは、本物のウィンドウで開くのでログインできます。
- コンソールの記録とネットワークの記録を、それぞれ最近の 200件 ずつ集めておきます（AI が読みます）。
- アプリを再起動すると、アドレスだけ が復元されます。
AI がプレビューを見て操作する (Pro)
Section titled “AI がプレビューを見て操作する (Pro)”AIチャットが Web プレビューを直接見て、クリックし、入力し、コンソールのエラーを読んで直します。
ログインフォームにテスト用アカウントを入れて送信してみて。コンソールにエラーがあれば原因を探して直して。AI は、入力 → 待機 → 画面を撮る → コンソールを読む、の順で進めます。
| できること | 承認 |
|---|---|
| 画面を撮る、コンソール・ネットワークの記録を読む、アドレスの移動、待機 | 不要 |
| 要素のクリック、文字の入力、ページでの JS 実行 | ⚡ 実行モードで必要 |
- クリック・入力・JS 実行は 💬 チャット・📋 プラン モードではブロックされます。
- AI が画面を撮るには、プレビューパネルが 画面に見えている 必要があります。
ビジュアル回帰 — 直す前と後の画面を比べる (Pro)
Section titled “ビジュアル回帰 — 直す前と後の画面を比べる (Pro)”コードを直す 前の画面 を基準として保存しておき、直した 後の画面 と比べて、「意図せず画面が崩れていないか」を探します。Web プレビュー、デスクトップミラー、デザインワークベンチで使えます。
この機能は AI に言葉で頼みます。 自分で押すボタンはありません。
- 「いまの画面を基準にして、ボタンの色を変えてから比べて」と頼みます。
- AI が基準の画面を保存し、コードを直してから比べます。
| 判定 | 意味 |
|---|---|
| 合格 | 変わった部分が 2% 以下 |
| 確認が必要 | 2% 超 |
| 回帰 | 画面のサイズ自体が変わった（レイアウト崩れの疑い） |
比較の画像は左が BEFORE、右が AFTER で、変わった場所が赤い枠で示されます。基準の画面はメモリにしかないので、パネルを閉じたりアプリを再起動したりすると消えます。
デザインワークベンチ (Pro)
Section titled “デザインワークベンチ (Pro)”AI が作った デザインの部品（色・余白のようなトークン、ボタンのようなコンポーネント、画面、画面の流れ）をカードの一覧で見て、Web・タブレット・スマホのサイズでプレビューしながらチェックするパネルです（名札は デザイン、🎨）。
- プロジェクトフォルダの
design-systemフォルダに、デザインの一覧ファイル_ds_manifest.jsonを置きます。ふつうは AI（Claude・Codex）が作ってくれます。 - AIチャット（⚡ 実行 または 🚀 自動 モード）で「デザインパネルを開いて」と頼みます。新規タブメニューやショートカットからは開けません。
- カードを押すと大きく表示します（Web ならモバイル・タブレット・デスクトップの3つ）。← 一覧 で戻ります。
| ボタン | すること |
|---|---|
| [トークンをエクスポート ↓] | デザイントークンを Flutter(app_tokens.dart)・CSS(tokens.css)のファイルに書き出す |
| [ゴールデンハーネス ↓] | iOS・Android の画面比較テストのファイル(.dart)を作る |
| プラットフォーム の選択 | すべて / web / desktop / iOS / Android |
- デザインパネルが開いていると、AI は一覧にあるトークン・コンポーネントを使い回すよう案内を一緒に受け取ります。
- ビジュアル比較で問題が見つかると、回答の下に [デザインを再生成] / [閉じる] ボタンが付きます。
- リモート(SFTP)のプロジェクトフォルダの
design-systemは読み込みません。
よくある質問
Section titled “よくある質問”Q. ▶ 実行ボタンが見当たりません。 リモートのファイルか、一度も保存していない名前のないファイルです。ローカルに保存したファイルでだけ表示されます。
Q. 「実行コマンドが見つかりません」と出ます。 対応していない種類か、CMake・Make のプロジェクトです。ターミナルで直接実行してください。
Q. 直した内容が実行に反映されません。
保存していません。Ctrl+S のあともう一度実行してください。
Q. Web プレビューが真っ白、または「ページの読み込みに失敗しました」と出ます。 開発サーバーが起動しているか、アドレス・ポートが正しいかを確認してから ↻ を押してください。リモートのプロジェクトなら、サーバーはリモートで動いているので、サーバーのアドレスで開いてください。
Q. AI が画面を撮れません。 プレビューパネルが隠れています。そのタブを前に出して見えるようにしてください。
Q. デバッグウィンドウに何も出ません。 ▶ 実行の出力ウィンドウか、Blyck の外で実行しています。Blyck のターミナルか Web プレビューで実行してください。
Q. ビジュアル比較で「ベースラインがありません」と言われます。 アプリの再起動やパネルを閉じたことで基準が消えました。AI に基準から取り直させてください。
Q. デザインパネルが開きません。 💬 チャット・📋 プラン モードになっています。⚡ 実行モードに切り替えて、もう一度頼んでください。
Q. (Mac) ブックマークに Safari がありません。 システム設定 → プライバシーとセキュリティ → フルディスクアクセス で Blyck を許可してください。