外部（Claude in Chrome 等）から window.formBuilder を介して操作できます。座標とサイズはすべて元画像のピクセル単位、原点は左上です。
getImageInfo() — 画像情報を返す。戻り値は loaded（真偽値）、width、height、fieldCount を持つオブジェクト。
addField(オブジェクト) — 欄を追加する。引数オブジェクトの中身：
- x — 数値、元画像基準の横位置（必須）
- y — 数値、元画像基準の縦位置（必須）
- width — 数値、欄の幅（必須）
- height — 数値、欄の高さ（必須）
- value — 文字列、初期値（任意）
- label — 文字列、欄の名前（任意）
- fontSize — 数値、文字サイズ（任意、未指定時は欄の高さ×0.55）
- letterSpacing — 数値、文字間の追加スペース 元画像 px 単位（任意、デフォルト 0）。負の値で詰める
戻り値は追加した欄のID（文字列）。
listFields() — 現在の全フィールドを配列で返す。各要素は id、x、y、width、height、value、label、fontSize、letterSpacing を持つ。
updateField(id, props) — 指定IDの欄を更新する。props には変更したいプロパティのみ含めればよい（部分更新）。戻り値は成功時 true、IDが見つからなければ false。
removeField(id) — 指定IDの欄を削除する。
clear() — 全欄削除。
print() — 印刷ダイアログを開く。注意: Claude in Chrome 等のエージェントが制御したタブには可視化インジケータ (用紙外周の赤系の縁取り) が残り、`print()` 経由で PDF にすると焼き付きます。これは Cowork (Anthropic) 側の仕様で、ページ側 CSS では抑制できません。回避策: フィールド配置を終えた段階で、該当タブをタブバーごとドラッグして別ウィンドウへ分離するとインジケータがリセットされます。その状態でエージェントは触らず、ユーザーが UI の「印刷プレビュー」ボタンから印刷するとクリーンな PDF が得られます。分離後にエージェントが javascript_tool 等の実行系を叩くとそのウィンドウでインジケータが再点灯するため、分離 → 印刷の間はエージェント操作を控えること。
previewMode(on) — 入力済み画像プレビューモードのトグル。on=true で paper-wrap だけが画面に残り、ヘッダ・サイドバー・フッタ・フィールドの編集UIが全て非表示になる。印刷時の見た目を画面内で確認できる(ダイアログは開かない)。AI エージェントから配置結果を視覚的にレビューしたい時に、(1) previewMode(true) 呼び出し、(2) read_page でスクリーンショット取得、(3) previewMode(false) で編集モードに戻る、というフローで使う。print() と違ってインジケータ焼き付きの問題が無く、Cowork からの利用がスムーズ。戻り値は現在のプレビューモード状態 (真偽値)。
使い方の例
まず getImageInfo で画像サイズを取得し、それを元に座標を決めて addField を呼ぶ。値を後から入れたい場合は updateField で value プロパティを更新する。配置位置は元画像のピクセル座標で考えるため、画面上の見た目のサイズではなく画像本来のサイズを基準にすること。
キーボードショートカット (フィールド選択中、テキスト編集中は無効)
- 矢印キー (↑↓←→): 選択中のフィールドを 1 image px ずつ移動
- Shift + 矢印キー: 10 image px ずつ移動 (粗い位置調整)
- Option (Alt) + ←/→: 文字間隔 (letter-spacing) を 1 image px ずつ調整 (詰める/広げる)
- Delete / Backspace: 選択中のフィールドを削除
- Escape: フィールドの選択解除、またはプレビューモード解除
テキスト編集モード (フィールド内をクリックして文字入力中) では上記すべて無効。Tab キーで編集モードを抜けてからキー操作する。
プリセットの保存と復元
同じ書式を繰り返し使う場合、最初の1回だけ座標推定をして配置情報を JSON として保存しておくと、次回からは1ステップで再現できます。paperscribe は保存先を持たないため (バックエンド不要の設計を維持)、JSON の書き出し・読み込みはエージェント側に委ねます。
- 保存:
listFields() を呼び、戻り値の配列を JSON でファイルに書き出す。各要素は x, y, width, height, value, label, fontSize を含む(すべて元画像のピクセル単位)
- 復元: ファイルを読み込んで配列に戻し、各要素を
addField() に渡してループする。id は再発行されるが、座標・値・ラベルはそのまま再現される
- 推奨形式は
{ source, units: 'px', imageWidth, imageHeight, fields: [...] }
頻出パターンの扱い (Tips)
- 「年 月 日」テンプレートのある日付欄: 日付文字列全体を1つの欄に置くのではなく、年・月・日の数字をそれぞれ別の addField で配置すること。例えば「2026年5月27日」を埋めるなら、「2026」を「年」の左、「5」を「月」の左、「27」を「日」の左に、3つのフィールドとして置く。
- チェックボックス・ラジオボタン: 専用UIはない。チェック対象のボックスの位置に「✓」や「レ」を1文字テキストとして addField で配置する。
- フリガナ欄: 対応する漢字欄の上にある小さな帯。漢字欄より高さを低めに、文字サイズも小さめに指定して配置する。
- 〒マーク付き郵便番号欄: 〒記号は既に書類に印字されているので含めない。郵便番号7桁の数字 (またはハイフン区切り) のみを 〒 の右隣に配置する。
- 罫線で区切られた表形式の欄: 「氏名」など1行に見える欄でも、罫線で囲まれた領域に対して1フィールドを置く。複数のセルがある表は、各セルごとに1フィールドずつ配置する。