ビルダーでアプリを開発する
ビルダーは PlantPulse Studio の作業台です。左のチャット欄に日本語で指示すると AI エージェントが実際のアプリを修正し、中央のプレビューが即座に切り替わります。完成したら [デプロイ] 一度で現場へ配信できます。
ビルダーを開く方法は 2 つあります。
- ホームで一文からアプリを作成するとビルダーがそのまま開きます → ホームでアプリを作る
- 既に作成済みのアプリは、サイドバーの アプリケーション(fa-grid-2) でカードの [開く] → アプリカタログと共有
画面構成
ビルダーは縦 3 列です。
| 位置 | 名称 | 役割 |
|---|---|---|
| 左 | Agent Console | エージェントと対話するチャット欄。何を作るか・直すかを指示します |
| 中央 | Live Preview | 現在作成中のアプリ画面。指示が完了すると自動的に再読み込みされます |
| 右 | Context | このアプリが使うデータ・スキル・状態を表示する細いレール。既定では閉じています |
左と中央の間の縦線をマウスでドラッグすると、チャット欄の幅を広げたり狭めたりできます。
上部ツールバー
左から 戻る(fa-arrow-left, 애플리케이션 목록으로)、アプリ名、ステータスインジケータ(세션 준비 중… →
준비됨 → 指示の処理中は 생성 중…) があり、右側には次のボタンがあります。
| ボタン | アイコン | 説明 |
|---|---|---|
| デプロイ | fa-rocket-launch | 現在の状態を現場で利用できるように配信します |
| スキル抽出 | fa-lightbulb | 今回の対話で得たノウハウをスキルとして保存 → 現場スキル |
| テンプレートとして保存 | fa-bookmark | このアプリ構成を次のアプリの出発点として保存 |
| データ | fa-database | データエクスプローラを開く |
| コード | fa-code | コードビューを開く |
| 履歴 | fa-clock-rotate-left | 変更履歴を開く |
| エクスポート | fa-download | アプリファイル全体を圧縮ファイルでダウンロード |
| リモートプッシュ | fa-cloud-arrow-up | 社内 Git リポジトリへ送信(管理者設定が必要) |
| コンテキストレール | fa-sidebar-flip | 最も右 のボタン。右レールを開閉します |
一度でもデプロイしていれば [デプロイ] の隣に v1 앱 열기 ↗ チップが表示され、その隣のアイコンからリンク共有とデプロイバージョン一覧をすぐ開けます。
最下部のステータスバーの アプリ 項目を押すと、アプリが現在 실행 중 か 정지됨 か、ログの状況を確認し、[再起動] できます。
最初の指示を送る
チャット欄上部の [ビルド] / [クエリ] トグルで ビルド が選択されているか確認し、やりたいことを記入します。 (クエリはアプリを変更せず、データだけを問い合わせるモードです → チャットでデータを問い合わせる)
- Enter で送信、Shift+Enter で改行
- クリップ(fa-paperclip)で写真・スケッチ・CSV を添付すると、その画面をそのまま再現して作成します
- 処理中は送信ボタンが赤い 中断 ボタンに変わります
対話が空の場合は 사이트 목록을 카드로 보여줘 のような例文が表示されるので、押して始めても構いません。
一度に 1 つずつ、具体的に。3番ラインの温度・圧力を大きな数値カードで表示して、90度を超えたら赤く表示して のように 対象・表現方法・条件 を書くと結果がはるかに正確になります。
エージェントが作業している間、チャットには 도구 호출: …、파일 변경: …、커밋 … のような作業ログが蓄積されます。
파일 변경: の行を押すと、コードビューがそのファイルを開いて表示します。
3 つのモード
チャット入力欄のすぐ上に プラン・自動・受入 のセグメントがあります。選択したモードは次回開いたときも保持されます。
| モード | アイコン | 動作 | こんなときに |
|---|---|---|---|
| プラン | fa-list-check | すぐには作成せず、画面構成案 を先に提示します。빌드 플랜 カードで画面・ウィジェット・必要なデータを確認し、[承認してビルド] を押すと実際の作業が始まります | 初めて作る画面、要件の大きい作業。見当違いな方向へ進むのを事前に防げます |
| 自動 | fa-bolt | 指示すると即座に修正し、保存まで自動(既定値) | 小さな修正、素早い反復 |
| 受入 | fa-check-double | 修正するが 保存は保留 します。プレビューで確認したうえで自分で受け入れると確定します | 稼働中のアプリを手直しするとき、結果を必ず目視確認してから進めたいとき |
受入モード で変更が発生すると、入力欄の上に黄色いレビューバーが表示されます。
変更レビュー待ち — プレビューで確認したうえで受け入れるか元に戻してください [元に戻す] [受入(コミット)]
- [受入(コミット)] — 変更を確定し、変更履歴に記録します
- [元に戻す] — 今回の変更をまるごと破棄し、直前の状態へ戻します
빌드 플랜 カードの [閉じる] を押すと、元の依頼文が入力欄に戻ります。文章を修正して再送信すると新しい構成案が得られます。作成に時間がかかるときは [キャンセル] で停止できます。
スラッシュコマンド
入力欄に / を入力するとコマンド一覧が表示されます。ビルドモードでのみ動作します。
| コマンド | 引数 | 役割 |
|---|---|---|
/plan | 必要 | 画面構成案を先に受け取り、承認後にビルド |
/build | 必要 | この内容で即座にビルド |
/review | — | 直近の変更をレビュー(ファイル修正なし) — 問題点と改善案のみを提示します |
/fix | — | エラーを検出して修正を指示 |
/test | — | 型チェック(tsc)を実行 — アプリに構文・型エラーがないか点検します |
/loop | 任意 | チェックを通過するまで修正を反復(最大 3 回) |
/deploy | — | デプロイダイアログを開く |
/plan・/build は後ろに内容を付ける必要があります(例: /plan 보일러 압력 대시보드)。省略すると 이 명령에는 내용이 필요합니다 の案内が表示され、入力はそのまま残ります。
/test でまずエラーの有無を確認し、あれば /loop を実行してください。実行中も中断ボタンで停止でき、完了すると ✅ /loop 완료 または ⚠️ /loop 3회 반복 후에도 오류가 남았습니다 で結果を通知します。
プレビューを活用する
プレビューのヘッダー行で画面サイズを切り替えられます — デスクトップ(fa-display) · タブレット(fa-tablet-screen-button) · モバイル(fa-mobile-screen-button)。現場でスマートフォンから見るアプリなら、モバイルにしたまま作成してください。隣の 再読み込み(fa-rotate-right)・新しいタブ(fa-arrow-up-right-from-square) もよく使います。
直したい箇所を直接指定して指示する
言葉で位置を説明しづらいときに使います。
- プレビューのヘッダー行の [要素選択](fa-arrow-pointer) を押します →
요소를 클릭하세요…に変わります - プレビューで直したい箇所をクリックします
- チャット入力欄の上に、選択した要素名とともにクイック指示ボタンが表示されます — 文言修正・色変更・もっと大きく・削除、そして 直接入力
ボタンを押すと 선택한 요소 [○○] — 색 변경 のような文章が即座に送信され、直接入力 を選ぶとその文章が入力欄に入り、後ろに任意の内容を続けて書けます。
4 つのドロワー
ツールバーのアイコンを押すと右側からドロワーが開きます。Esc で閉じます。
| ドロワー | 開く場所 | 内容 |
|---|---|---|
| 変更履歴 | fa-clock-rotate-left | これまでの変更一覧。行を押すと何が変わったかを展開して表示します |
| コード | fa-code | アプリを構成するファイル一覧と内容(読み取り専用) |
| デプロイバージョン | v1 チップの fa-chevron-down | デプロイ済みバージョン一覧・ロールバック・公開可否の切り替え |
| データエクスプローラ | fa-database | サイト → アセット → タグをたどって確認し、[挿入] でその対象をチャット入力へ貼り付けます |
データエクスプローラの [挿入] は特に便利です。設備名と ID が正確に入力されるため、エージェントが見当違いの設備を掴むことが減ります。
変更履歴と元に戻す
指示が 1 回終わるたびに、その時点のアプリ状態が 自動的に保存 されます。別途保存ボタンを押す必要はなく、気に入らなければいつでも過去に戻せます。
- ツールバーの 履歴(fa-clock-rotate-left) を開きます
- 最上部の項目に
현재バッジが付いています。各行を押すと変更内容が展開されます - 戻りたい時点で [この時点へ] → 確認ダイアログで承認
이후 변경은 사라집니다. 戻した時点より後に行った作業は失われます。元に戻す前にプレビューと変更内容を確認してください。
変更履歴はアプリごとに自動で残る記録であり、チャットに書いた文章がその記録にそのまま残る可能性があります。API キー・パスワード・トークンはチャット欄に貼り付けず、管理者に依頼して 環境設定 で登録してください。
Studio は sk-…、glpat-…、Bearer … のように 広く知られた形式のキーは自動的に *** でマスクしますが、世の中のすべてのキー形式を判別できるわけではありません。
右側のコンテキストレール
ツールバー最右端の fa-sidebar-flip で開きます。このアプリが何を素材として使っているかを一目で示します。
- データ接続 — このアプリが扱うサイト・設備・タグをあらかじめ決めておきます。[データ接続] を押して選択すると、エージェントが ID を推測せず正確な対象で作成します。アプリを作る前に一度指定しておくと結果の品質が大きく向上します
- データバインディング — 現在の画面が実際に使っている設備 ID・照会パス
- 適用スキル — 今回の作業で参照した 現場スキル
- 状態 — 最後の保存ポイントとデプロイバージョン
デプロイする
ツールバーの [デプロイ] を押すと進行ウィンドウが表示され、ビルド準備 → プロダクションビルド → 配信バージョン切り替え の 3 段階が進みます。通常 20〜60 秒かかり、進行中はウィンドウを閉じられません。
完了すると v1 배포됨 とともに QR コード が表示されます。現場のスマートフォンでスキャンすればすぐ開けます。
- デプロイするたびに バージョンが 1 つずつ積み上がります(v1, v2, v3 …)
- 問題が発生したら デプロイバージョン ドロワーで以前のバージョンの [このバージョンへ] を押して戻します。現在稼働中のバージョンには
서빙 중バッジが付きます - 同じドロワーの上部で 公開 / 非公開 を切り替えます。誰が閲覧できるか、リンク・QR でどのように配布するかは アプリカタログと共有 で説明します
デプロイはその時点のコピーを配信するものです。デプロイ後もビルダーで修正を続けられ、現場で使うアプリは 再度デプロイするまで変わりません。
行き詰まったとき
| 症状 | こうしてみてください |
|---|---|
| プレビューがずっと準備中 | しばらく待ってから [再試行]。それでも駄目ならステータスバーの アプリ → [再起動] |
| 画面が真っ白になる | /test でエラーを確認 → /loop で自動修正 |
| 指示が見当違いに反映される | 変更履歴 で直前の時点に戻したうえで、より具体的に指示し直す |
| 応答が長すぎる | 中断ボタンで停止し、依頼を小さく分割して再実行 |
| 接続が切れたという案内が出る | 結果は反映されている可能性があります。まずプレビューと変更履歴を確認してください |
より詳しい対処は トラブルシューティング を参照してください。