エディタでドキュメントを作る

画面の構成

画面は 3 つに分かれています。左のオブジェクトツリー、中央のキャンバス、右のプロパティパネルです。キャンバスにはページが実寸で表示されます。下のほうに浮かんでいるバーがオブジェクトを追加する場所です。この 3 つの名前は、このドキュメント全体で使います。

キャンバスは絵ではなく、実際のレンダリング結果です。値を変えるとその場で描き直されるので、PDF を作らなくても折り返しやはみ出しが分かります。

上部のバーでは、表示倍率の変更と、ルーラー・グリッド・スナップの切り替えができます。保存していない変更があるかどうかもここに出ます — 何かを変えた瞬間に保存ボタンが有効になります。ルーラーは用紙の角ではなく、余白の内側のゼロから始まります。プロパティパネルの X・Y が数え始めるのと同じ位置です。グリッドの間隔は倍率に追従し、常に目盛りと揃います。グリッドは目安であり、オブジェクトが吸い付くことはありません。スナップはグリッドではなく、他のオブジェクトと用紙の端を基準にします。ルーラーもグリッドも保存されません。ページを読み込み直すと、どちらもオフから始まります。

ページ設定 — 用紙・余白・ヘッダー・フッター

用紙サイズ・向き・余白・ヘッダー・フッターは個々のオブジェクトではなくドキュメントに属するため、そのパネルは常に右側にあります — 先に何かを選ぶ必要はありません。用紙を変えるとキャンバスがその場で変わり、ルーラーとグリッドも追従します。

用紙は 4 種類です。A4（794×1123）・A5（559×794）・Letter（816×1056）・Legal（816×1344）で、それぞれ縦置きと横置きがあります。数値は 96 dpi の px で、選択肢にそのまま表示されるので、調べに行かなくても大きさを見比べられます。

余白は飾りではなく、オブジェクトの座標が数え始まる場所です。プロパティパネルの X・Y はその内側から測るため、余白を変えるとすべてのオブジェクトが一緒に動きます。ヘッダーとフッターには他のテキストと同じように {{ data.x }} を書けるほか、ページ番号用に [[page]] と [[pages]] が使えます。

API では同じ設定が page に入ります: {"size":"letter","orientation":"landscape"}。一覧にない値は、どの項目かを示すエラーで拒否します — 黙って直したりはしません。用紙サイズを勝手に直すと、お客様が頼んでいないドキュメントが印刷されてしまうからです。

オブジェクトを追加する

ツールバーのボタンを押すと、用紙の左上にオブジェクトが置かれます。少しずつずらして置かれるので、続けて押しても重なりません。

種類は 10 あります。あとから種類を変えることはできませんので、間違えて追加した場合は削除して、正しいものを追加してください。

• ラベル label
• 画像 image
• 線 line
• 四角形 rect
• 円 circle
• 表 table
• チャート chart
• QR・バーコード code
• 書式付き本文 html
• 入力欄 field

新しいオブジェクトは必ず見える状態で作られます。図形には枠線が、表には罫線と見出し行が、QR コードには実際に動く既定のアドレスが入っています。追加したのに何も見えない、ということが起きないようにするためです。

選ぶ・動かす・大きさを変える

キャンバス上をクリックすると選択できます。Shift を押しながらクリックすると複数選べます。選択範囲の周りに 8 つのハンドルが出るので、ドラッグして大きさを変えます。

ドラッグ中はガイドが表示され、他のオブジェクトやページの端と揃う位置で吸い付きます。正確に置きたいときは、上部のバーでスナップを切るか、プロパティパネルの X・Y に数値を入力してください。

矢印キーで 1px ずつ動かせます。複数選択したままでも動きます。重なりの前後を変えるには、プロパティパネルの「最前面へ」「最背面へ」を使います。

パネル下部のボックス整列は、選択したものをページ（または親）に対して揃えます。複数選んでいるときは、それらが作る矩形の中で揃えます — 3 つ選んで「左揃え」を押した人が求めているのは、その 3 つが揃うことであって、3 つとも用紙の端に寄ることではないからです。

オブジェクトツリー

左の一覧がドキュメントの構造です。字下げが親子関係を、上から下への並びが、重なったときにどちらが上に描かれるかを決めます。

行をドラッグすると並べ替えられます。行と行の間に落とすと順序が変わり、行の上に落とすとその中に入ります。複数選択したままドラッグするとすべて動きますが、親と子の両方を選んでいた場合は親だけが動きます — 子はどのみち一緒に付いていくからです。

行をダブルクリックすると名前を変えられます。名前はお客様のためのもので、PDF には出ません。

目のアイコンでオブジェクトを隠せます。隠したオブジェクトは編集画面だけでなく PDF からも外れます — 画面にないのに出力にある、という驚きのほうが厄介だからです。データによって出す・出さないを決めたい場合は、隠すのではなくプロパティパネルの「表示条件」をお使いください。

鍵のアイコンでオブジェクトをロックします。ロックしたオブジェクトはクリックも移動も削除もできず、プロパティパネル全体が操作できなくなります。親をロックすると子もロックされ、子の鍵をもう一度押すとその子だけが解除されます。中にロックされたものがある親も削除できません — 削除すると、ロックしたものまで一緒に消えてしまうからです。

プロパティパネル

右のパネルには、選択した 1 つのオブジェクトの値が表示されます。複数選んでいるときは何も表示しません — 異なる 2 つの値を 1 つとして見せる正直なやり方がないからです。

いちばん上が位置と大きさ（X・Y・W・H）です。単位は 96 dpi の px で（A4 は 794 × 1123）、原点はページ余白の内側です。高さを 0 にすると、内容に合わせて伸びます。

「表示条件」を空にしておくと、そのオブジェクトは常に表示されます。{{ data.paid }} のように書くと、その値が真のときだけ表示されます — 値がないときに空行が残るのを避ける方法がこれです。

その下が文字のスタイルです。フォント・サイズ・太さ・斜体・文字色・背景色・水平方向と垂直方向の配置・行の高さ・不透明度・枠線・角の丸みがあります。日本語・中国語・韓国語が入りうるものには「Noto Sans CJK KR」を選んでください — 欧文だけのフォントでは、それらの文字がまるごと欠けます。

スタイルはオブジェクト間で共有されます。共有されているスタイルを編集すると、こちらでそのオブジェクトを複製したスタイルに移し替えるので、同じものを使っていた他のオブジェクトはそのまま残ります。気にせず編集してください。

その先は種類によって変わります。画像にはファイル選択が、表には行・列とセル編集が、フィールドには種類と名前が、コードにはエンコードする値が、チャートには配列のパスと 2 つの式があります。

データを入れる

ラベルに {{ data.title }} と書くと、そこに値が入ります。書いた瞬間にそのパスがデータタブにチップとして現れ、プレビュー用のサンプルデータも作られます — 値が入っていないと、折り返しやはみ出しが確かめられないからです。

データタブのチップを押すと、選択中のラベルの末尾にパスが挿入されます。チップはラベルを選んでいる間だけ有効です。

同じタブの JSON 欄を編集すると、ご自身の値でプレビューできます。このデータはプレビュー専用で保存されません — 実際の値は API リクエストの data として渡します。

式の中では関数も呼べます。金額であれば {{ format(data.total, "currency", "USD", "en-US") }} のように書くと $12,000 と表示されます。使える関数の一覧は、スキーマドキュメントの式の節にあります。

表を作る

表には 2 種類あります。手で組む格子は 1 つ 1 つのセルに文字を打ち込むもの、繰り返し表は配列から行が生まれるものです。表のプロパティの上部で切り替えられ、列の幅と数は切り替えても残ります。

手で組む格子では、キャンバス上のセルをクリックして選びます。セルごとに文字・背景・配置・余白・枠線を変えられ、右または下のセルと結合もできます。1 行目は最初から見出し行になっているので、見出しの背景色がすぐ目に入ります。

繰り返し表では、配列のパス（たとえば data.items）と列を決めます。列ごとに見出しとセルのテンプレートがあり、そのテンプレートの中では item が現在の行を指します — {{ item.name }} のように書きます。

余白は表全体にも、セルごとにも設定できます。セルを選ぶと表全体の余白は隠れ、そのセルの分だけが表示されます — 並べて出すと、どちらを編集しているのか分からなくなるからです。上下と左右は別々の値で、真ん中のリンクを押すと 2 つが一緒に動きます。

行が増えて表が下のものを押し下げる場合、押される側のオブジェクトはフロー領域に置く必要があります。スキーマドキュメントの「伸びる表」をご覧ください。

ひとかたまりを繰り返す

長方形に繰り返しを設定すると、その中にあるものが配列の要素ごとに 1 組ずつ描かれます。表では表せない繰り返しに使ってください — 会社ごとの集計、人ごとのカードなどです。

配列のパスと、現在の要素を指す名前を決めます。co と名づけたら、中では {{ co.name }} と書きます。要素ごとに改ページする、1 組がページ境界で分断されないようにする、といった指定もできます。

画面で編集できるのは 1 組目だけです。2 組目以降はお客様のデータから作られるので、そこには編集するものがありません。

受け取った人が記入する欄

フィールドは、PDF を開いた相手があとから記入する空の欄です。こちらで値を印字するものではなく、相手がビューアで入力します。データタブに出てこないのも、JSON を足しても何も描かれないのも、そのためです。

値を印字したい場合は、フィールドではなく {{ data.x }} を書いたラベルを使ってください。この 2 つの取り違えが、この機能でいちばん多い誤解です。

画面上では枠線のある空の箱に見えます。実際の見た目は PDF ビューアが描くからです。ですから枠線は描いてください — 紙に印刷するとビューアはなく、線がなければどこに書けばよいのか分かりません。

プレビュー・保存・書き出し

キャンバスがそのままプレビューです。こちら側でブラウザを起動せずにお客様の画面で描いているので、費用はかかりません。

保存すると新しいバージョンが作られます。保存したテンプレートは API から template_id で呼べるので、呼び出し側のコードに触れずにドキュメントの見た目を変えられます。

PDF ボタンは、現在のデータで実際の PDF を生成してダウンロードします。これは実際のレンダリングなので、月間クォータを 1 件消費します。

キーボードショートカット

• ← 左へ1px（Shiftで10px）
• → 右へ1px（Shiftで10px）
• ↑ 上へ1px（Shiftで10px）
• ↓ 下へ1px（Shiftで10px）
• Delete 削除
• Backspace 削除
• ⌘/Ctrl D 複製
• ⌘/Ctrl Z 元に戻す
• ⌘/Ctrl ⇧ Z やり直す
• ⌘/Ctrl ] 最前面へ
• ⌘/Ctrl [ 最背面へ
• ⌘/Ctrl G グループ化
• ⌘/Ctrl ⇧ G グループ解除
• ⌘/Ctrl A すべて選択
• Esc 選択解除

元に戻す操作は 30 手分まで保持します。文字入力は 1 文字ごとに 1 手にはならず、値の編集を終えた時点で 1 手として記録されます。