Builder の説明書

🔨 Builder の説明書

できること

書いた仕様から、ブラウザで開くだけで動く 1 枚のアプリ（HTML）を作ります。

作ったあとで、言葉で指示して直したり、1 つずつ押して確かめたりできます。

手元にある HTML を読み込んで、直すこともできます。

Builder を使うには、Pro か Max のプラン、または自前の API キーが要ります。

作れるものの目安

段階	どんなもの	具体例
◎ すぐ作れる	1 画面で、入れたら答えが出る小さな道具	電卓・割り勘の電卓・集中タイマー・単位の換算・英単語カード・じゃんけん
○ 作れる	記録をためて、一覧で見る道具	家計簿・やることリスト・体重の記録・備品の貸し出し
△ 工夫すれば作れる	画面がいくつかある・画像を扱う・データが多い	予約の管理・在庫の管理・写真にモザイクをかける・神経衰弱
▲ むずかしい	動きや状態が多い	弾を撃つアクションゲーム・RPG・表計算ソフトのような大きな道具
× 作れない	ブラウザで開く 1 枚だけでは動かないもの	何人かで同じデータを見る（ログインや共有）・ほかのサイトから自動で取ってくる（値段を調べるなど）・中で AI を動かす（鍵が要る）・動画や音声の編集

・段階は目安です。仕様の書き方で変わります

・まだ決まっていないことや、ぶつかっている決めごとが多い仕様は、小さなものでも止まりやすくなります。Baton で決めてから作ると通りやすくなります

ボタン

画面の左（スマホでは「履歴」のタブ）

・「＋新規で作成」… 最初から作り始めます。仕様の欄に書いたことも消えるので、先に確かめます

・「これまでに作ったもの」の一覧 … これまでに作ったアプリが並びます。押すと開いて、直せる状態になります。札の右の × で消します（元には戻せません）

・「📖 説明書」… このページです

画面の真ん中（スマホでは「生成」のタブ）

・「仕様書を入力」の欄 … 作りたいアプリの仕様を書きます。Baton で作った指示書を貼っても使えます

・「📋 テンプレート」… 記録・管理、計算・道具、覚える・遊ぶの、小さなアプリの仕様の見本です。押すと欄に入ります（作る前だけ出ます）

・作っている間 … 進み具合が出ます（要件 → 設計 → 実装の 3 段で、1〜3 分ほど）。「止める」で止められます。止めても、今月の回数は戻りません

・「プレビュー」… できたアプリが、その場で動きます。「🖥️」と「📱」で、パソコンとスマホの大きさを切り替えます

・「仕様書が決めていない点」… 仕様に書いていなかったので、Builder が自分の判断で埋めた所です。「🎽 Baton で決める →」で、Baton で決め直せます

・「修正指示」の欄 … 直すときに出ます。直したいことを書いて、右の「適用する」を押します

・「✨ 4段目の研磨」… 「✨ Fable で研磨する」の結果です。直したほうがいい所が、重い順に並びます。「この内容で直す →」で、修正指示の欄に入ります

・「設計書を見る」… 3 段の 2 段目で作った設計書を見られます

・「クリップボードからペースト」… 「手元のHTMLを直す」のときに出ます。HTML のファイルを落とすか、貼って読み込みます

画面の右（スマホでは「動作」のタブ）

・「コードを生成」… 仕様からアプリを作ります

・「前に作ったものに足す」… Baton で決め足して戻ってきたときに出ます。決めた分だけを、前のアプリに足します（作り直すより速く、前のアプリが保たれます）

・「押して確かめる →」… 決めたことを 1 つずつ押して確かめる画面へ移ります（下の『確かめる画面』）

・「見た目を動かす →」… 色・大きさ・余白を、つまみで動かす画面へ移ります。「この値で決める」で決めます

・「適用する」… 修正指示のとおりに直します。「↩ Undo」で 1 つ前に戻ります

・「📁 フォルダごと保存 ↓」… アプリ（index.html）と仕様の紙を、まとめて手元に保存します

・「📁 CSS と JS を分けて保存 ↓」… 同じく保存しますが、見た目（style.css）と動き（app.js）を別のファイルに分けます。ほかのエディタで続きを直したいときに使います。Builder の中では 1 枚のままです

・「このまま直す →」… できたアプリを、言葉で直せる状態にします

・「🛡️ Aegis で調べる →」… できたアプリを Aegis に渡して、動かして穴を探してもらいます

・「✨ Fable で研磨する」… 上位の AI（Fable）にコードを読ませ、直したほうがいい所を重い順に並べます。費用の目安がボタンの下に出ます

・「コードを見る」… できたアプリの中身（HTML）を見られます

・「仕様を直して作り直す」… 仕様は残したまま、入力に戻ります

・「言葉から作る」「手元のHTMLを直す」… 仕様から作るか、手元の HTML を直すかを切り替えます

・「API キー」… 自前キーを設定しているかが出ます。設定はプロフィールでします

確かめる画面（スマホでは「確かめる」のタブ）

・「○ そのとおりになった」「× ちがった」… 1 つずつ、やってみて印を付けます

・「この項目を直す →」… × を付けた項目だけを直します。× が 2 つ以上あると、まとめて直すボタンも出ます

・「仕様を変える」… やってみて、決めごとのほうを変えたくなったときに使います

・「← 作る画面に戻る」… 元の画面に戻ります。付けた印は残ります

手順

例：割り勘の電卓を作る

1.左の「＋新規で作成」を押す

2.真ん中の「📋 テンプレート」の『🧮 計算・道具』から『割り勘電卓』を選ぶ（Baton で作った指示書があれば、それを貼る）

3.右の「コードを生成」を押して、できるまで待つ（1〜3 分）

4.「プレビュー」で動かしてみる。「📱」でスマホの大きさでも見る

5.「押して確かめる →」で、1 つずつ「○ そのとおりになった」か「× ちがった」を付ける。× は「この項目を直す →」

6.ほかにも直したい所があれば、「このまま直す →」を押し、修正指示の欄に書いて「適用する」

7.「📁 フォルダごと保存 ↓」で手元に保存する

Tips

・仕様は、先に Baton で決めてから渡すと確実です。仕様に書いていない所は、Builder が自分の判断で埋めます

・「AI が考えることに上限を使い切り」と出て止まったときは、仕様の中の、まだ決まっていない所やぶつかっている所が多いことが多いです。Baton で決めてから、もう一度作ってください

・作ったアプリは、この端末の中に新しい 12 件まで残ります。大事なものは「📁 フォルダごと保存 ↓」で手元に保存してください。ほかの端末へは、🗂 棚（Shelf）の左ペインの『この端末の分を預ける』『預けた分を受け取る』で移せます（ログインが要ります）

・仕様の欄と修正指示の欄では、⌘（Mac）か Ctrl（Windows）を押しながら Enter でも動きます

・止めても、今月の回数は戻りません