Reports Web ブラウザ版デザイナーズガイド
ブラウザですぐ帳票を作り、同じPREPDJをWPF、Pure Java、Pure Pythonでも使えます。このガイドは、最初の一枚を保存するまでと、日常的に迷いやすい操作に絞っています。
画像は実装確認時の画面です。配置や文言は製品版の更新により一部変わることがあります。
1. 5分で作るRM001
- デザイナーを開き、何も選んでいない状態のプロパティで用紙（はがき・A5・B5・A4・B4・A3・任意）と向き（縦・横）を選びます。
- 文字、線、四角、画像、バーコードなどをツールから用紙へ配置します。
- 動的に値を入れる項目には、プログラムから指定しやすい固有の名前を付けます。
- 右側のプロパティで位置、サイズ、文字配置、色、線、繰返しを整えます。
- プレビューで確認し、
保存から.prepdjをダウンロードします。
2. 画面の見方RM002
- 上部: 新規、開く、保存、元に戻す／やり直す、プレビュー等の主要操作。
- ツール領域: 帳票へ配置するオブジェクト。
- 中央: 印刷される用紙。選択、移動、サイズ変更をここで行います。
- プロパティ: 選択中オブジェクトの名前、座標、寸法、見た目、繰返し等。
3. ファイルを開く・保存するRM003
開くで.prepdj、または従来形式.prepdを選ぶか、ファイルを画面へドラッグ＆ドロップします。保存はブラウザのダウンロードとして行われます。
- 保存のファイル名は、開いたファイルの名前です（
invoice.prepdjはinvoice.prepdj、請求書.prepdは請求書.prepd）。新規の帳票は帳票名で保存します。PDF出力の名前は帳票名です。 - 形式は開いたファイルと同じです。旧形式
.prepdで保存した帳票は、旧形式を扱うほかの製品でもそのまま出力できます。旧形式で表せない内容がある場合は、保存せずにお知らせします。 - ブラウザによっては、同じ名前のファイルがあるとダウンロード時に名前を変えます。採用する定義ファイルはプロジェクト側で明確に管理してください。
- 編集せずに保存した場合、数値は元のファイルのまま書き出します。
- 帳票の寸法は、mmの帳票はmm、pxの帳票と新規はpxで表示・入力します。
保存後は、一度そのPREPDJを開き直し、画像、フォント、繰返し、オブジェクト名が保たれていることを確認します。
4. オブジェクトを作るRM004
角丸・枠線幅・円弧の厚み・文字輪郭幅は帳票の単位（mm／px）で表示・入力します。
- 固定文字: 見出し、社名、注意書き。
- 動的文字: お客様名、日付、金額など、プログラムから書き込む項目。
- 線・四角・楕円: 罫線、枠、背景。
- 画像: ロゴ、角印、写真。動的画像ではプログラムから差し替えます。表示方法のクリップは画像を縮めずに、1 ピクセルを 1/96 インチとして置きます。枠からはみ出した部分も描かれます。
- バーコード: QR、JAN、Code 39、Code 128等。入力値の仕様は業務側でも検証します。表せない値のバーコードがあっても定義は開けます。そのバーコードの枠に赤で「バーコードエラー：値」と表示し、PDF出力では対象名・値・日本語の理由を知らせ、そのバーコードを描かずに出力を完了します。
- 繰返し: 明細行、宛名一覧、ラベル等。同じオブジェクトを規則的に並べます。
装飾文字（ArtText）は表示・編集せず、読み込み時にお知らせします。元の内容を保持し、共通 JSON にも保存します。WPF 版では作成・描画できます。ブラウザ版は ReportsWeb 名前空間に保持します。
文字列オブジェクト：伸縮文字RM005
伸縮文字は、文字列の形をオブジェクトの幅・高さに合わせて伸ばしたり縮めたりする機能です。文字間隔を広げる「均等割り付け」や、文字に効果を付ける「装飾文字」とは異なります。長い文字列を縮めるだけでなく、短い文字列を拡大する場合もあります。
| 設定 | 初期値 | 意味 |
|---|---|---|
| 伸縮自在 | しない | 「する」のときに、以下の条件に従って伸縮します。 |
| 指定桁超え伸縮 | 0 | 指定した文字数を超えたときだけ伸縮します。0は文字数による制限なしです。 |
| 指定バイト数超え伸縮 | 0 | Shift_JISで数えたバイト数を超えたときだけ伸縮します。0はバイト数による制限なしです。 |
| フォント高さ固定 | しない | 「する」なら設定フォントの高さを基準に保ち、横幅を伸縮します。「しない」なら幅・高さの両方を枠に合わせます。 |
文字数とバイト数は、どちらか一方を選んで指定します。デザイナーで一方に正の値を設定すると、もう一方は0に戻ります。両方が0なら、空でない文字列は長さにかかわらず伸縮します。「伸縮自在」が「しない」なら、しきい値を設定しても伸縮しません。
例：文字数を10にした場合、10文字までは通常の文字として描画し、11文字から伸縮します。文字数は全角・半角を区別せず数えます。ただしUTF-16の単位で数えるため、一部の絵文字などは2として数えます。
例：バイト数を10にした場合、半角英数字は通常1バイト、漢字・ひらがなは通常2バイトです。あいうえお は10バイトなので通常描画、あいうえおA は11バイトなので伸縮します。UTF-8のバイト数ではありません。Shift_JISで表せない文字は文字コード変換の代替処理が入るため、この例と同じ数え方とは限りません。
条件に達しない文字列は、通常のフォント・配置設定で描画します。空文字は描画しません。空白や改行を取り除いてから数える仕様ではありません。
フォント高さ固定時は、縦位置の上・中央・下の設定で配置します。固定する高さより枠が小さい場合に、高さまで自動的に縮める機能ではないため、十分な高さを確保してください。「伸縮自在」と「均等割り付け」は同時に有効にできず、後から有効にした方を使用します。
この版の対応状況（2026年9月22日）： WASM版には文字数・バイト数を条件にする伸縮処理があります。PHPなどの呼出し言語が違っても、同じWASMエンジンを利用します。ただし、縦書き・改行・枠より大きい固定高さなどとの組合せまで、すべての条件を確認したものではありません。
5. きれいに揃えるRM006
Ctrl／⌘+矢印は0.1mm移動、Shift+矢印は1pxだけ寸法を変えます。グリッド吸着ありではグリッド幅を使い、移動位置をグリッドへ丸めます。
左右・上下の整列は、選択した物体のいちばん外側の端に揃えます。横中央は最も上（同じなら最も左）の物体、縦中央は最も左（同じなら最も上）の物体を基準にします。選択順には依存しません。
複数選択して、左／右／上／下、中央、間隔、同じ幅・高さ等の整列機能を使います。細かい位置はプロパティの数値で確定します。罫線に文字が接触しないよう、右寄せ金額にも内側の余白を残します。
Undo／Redo、コピー、貼り付け、削除、グリッドやスナップも利用できます。操作後は見た目だけでなく、選択したオブジェクト名が意図どおりか確認してください。
| 操作 | Windows・Linux | Mac |
|---|---|---|
| コピー／切り取り／貼り付け | Ctrl+C／Ctrl+X／Ctrl+V | ⌘C／⌘X／⌘V |
| 元に戻す | Ctrl+Z | ⌘Z |
| やり直す | Ctrl+Y または Ctrl+Shift+Z | ⌘⇧Z |
| 削除 | Delete または Backspace | delete |
| 追加して選ぶ | Shift または Ctrl を押しながらクリック | Shift または ⌘ を押しながらクリック |
文字の入力欄やプロパティの欄では、これらのキーは文字の編集として働きます。
色の欄では、下の「透明」をオンにすると色なしになります。色を付けた後でも透明に戻せます。
6. プログラムから値を書くための約束RM007
行背景の図形を出すには値を書かず drawObject を使うか null を書きます。setValue('LineRect', '', 0) は空文字なので図形を描きません。値を書かない繰返し物体は1行目に1回だけ描きます。
オブジェクト名はAPIのキーになります。たとえばお客様名、請求番号、明細金額のように、用途が分かり重複しない名前にします。名前を変更したら、PHPやJava等のsetValue側も同時に変更します。
7. 画像とフォントRM008
サーバーでは、定義にパス参照の画像があっても各ページで画像データを値として渡せば出力できます。パスのままなら HTTP 400 になります。
デザイナーで画像が見えても、実行環境からそのパスを読めるとは限りません。配布可能な相対URL、data URI、またはプログラムからの動的設定を選びます。フォントも実行環境に存在するものを使い、PDF出力を代表帳票で確認します。
8. 完了前チェックRM009
- PREPDJを保存し、開き直せる。
- 動的項目の名前が重複していない。
- SVGプレビューとPDFで主要な位置・改ページが一致する。
- 日本語、右寄せ金額、罫線、画像、角印、バーコードが欠けない。
- 小さな画面でも編集不能な領域が残らない。