4.帳票エディタの使用

配置可能なオブジェクトは以下です。

	Line(直線)
	Square(四角)
	Ellipse(楕円)
	Text(テキスト)
	Text Variable(テキスト変数)
	Matrix(マトリックス)
	Page Variable(ページ変数)
	Image(イメージ)
	Barcode(バーコード)
	QR Code(QRコード)

ここではSquare(四角)を例に説明します。
オブジェクトを配置するには、メニューバーのOBJECT(オブジェクト)よりSquare(四角)を選択するか、ツールバーのをクリックします。クリック後、マウスカーソルが十字に変更されます。

メニューバー	ツールバー

レイアウトビュー上でドラッグ＆ドロップしてSquare(四角)を配置します。

※メニューバーとツールバーでは同様の操作を行うことができます。本マニュアルではツールバーを使用して説明します。

対象のオブジェクトをダブルクリックする事でオブジェクトの詳細を設定することができます。
以下はSquare(四角)をダブルクリックした例です。

各オブジェクトの設定内容は以下を参照ください。

	Line(直線)
	Square(四角)
	Ellipse(楕円)
	Text(テキスト)
	Text Variable(テキスト変数)
	Matrix(マトリックス)
	Page Variable(ページ変数)
	Image(イメージ)
	Barcode(バーコード)
	QR Code(QRコード)

オブジェクトを移動するには、対象のオブジェクトを選択した状態でドラッグ＆ドロップして移動します。複数オブジェクトを選択している場合も同様に操作します。

オブジェクトをのコピー＆ペーストするには、対象のオブジェクトを選択した状態でツールバーのをクリックしてオブジェクトをコピーし、で貼り付けを行います。
([Ctrl]+C, [Ctrl]+Vでも同様の操作が可能です。詳細はキーバインドを参照ください。)

オブジェクトを削除するには、対象のオブジェクトを選択した状態でツールバーのをクリックします。
(Deleteでも同様の操作が可能です。詳細はキーバインドを参照ください。)

オブジェクトを選択した状態でツールバーの いずれかをクリックする事でオブジェクトの重なり順を変更できます。

	Bring to Front(最前面へ移動)	選択したオブジェクトを最前面へ移動します。
	Bring Forward(前面へ移動)	選択したオブジェクトを前面へ移動します。
	Send Backword(背面へ移動)	選択したオブジェクトを背面へ移動します。
	Send to Back(最背面へ移動)	選択したオブジェクトを最背面へ移動へ移動します。

以下は青いEllipse(楕円)を最背面へ移動した例です。
オブジェクトリストは前面に表示されているオブジェクト順に表示されます。

複数オブジェクトを選択した状態でツールバーの いずれかをクリックする事でオブジェクトを整列できます。

	Left Alignment (左揃え)	選択したオブジェクトを左揃えします。基準は一番左のオブジェクトです。（複数選択時のみ動作）
	Centerred Alignment (中央揃え(水平))	選択したオブジェクトを中央揃え(水平)します。（複数選択時のみ動作）
	Right Alignment (右揃え)	選択したオブジェクトを右揃えします。基準は一番右のオブジェクトです。（複数選択時のみ動作）
	Top Alignment (上揃え)	選択したオブジェクトを上揃えします。基準は一番上のオブジェクトです。（複数選択時のみ動作）
	Center Alignment (中央揃え(垂直))	選択したオブジェクトを中央揃え(垂直)します。（複数選択時のみ動作）
	Bottom Alignment (下揃え)	選択したオブジェクトを下揃えします。基準は一番下のオブジェクトです。（複数選択時のみ動作）

以下は左揃えした例です。

ツールバーの いずれかをクリックする事でレイアウトビューの拡大、縮小等を行うことができます。

	Zoom In(拡大)	レイアウトビューを拡大します。（10%毎に拡大されます。）
	Zoom Out(縮小)	レイアウトビューを縮小します。（10%毎に縮小されます。）
	100%(100%)	レイアウトビューを100%で表示します。
	Show All(ページ全体を表示)	ページ全体を表示します。
	Show Fit(画面に合わせて表示)	画面サイズに合わせて表示します。

※Google Chromeのディフォルトの設定では最小フォントサイズは10となっている為、縮小してもフォントサイズは10以下にはなりません。フォントサイズを10以下で表示するには、以下の設定を行ってください。
①画面右上の「Google Chromeの設定」⇒「設定」をクリック
②表示された画面下にある「詳細設定を表示」をクリック
③「ウェブコンテンツ」の「フォントをカスタマイズ」をクリック
④「最小フォントサイズ」を「極小」に設定

ツールバーの をクリックする事で操作履歴を元に戻す、やり直しを行うことができます。操作履歴はテンプレートの保存を行うとリセットされます。

	Undo(元に戻す)	直前の操作を取り消し、元に戻します。
	Redo(やり直し)	Undo(元に戻す)操作を元に戻します。

ツールバーの をクリックする事でテンプレートの保存、名前を付けて保存を行うことができます。

	Save(保存)	編集中のテンプレートを上書き保存します。
	Save As(名前を付けて保存)	編集中のテンプレートを名前を付けて保存します。

※テンプレートを上書き保存すると直ぐに変更が反映されます。運用中のテンプレートの変更の際にはで別名保存してからの変更をお勧めします。

ツールバーのをクリックするとテンプレート一覧が表示されます。
開きたいテンプレートのread(読込)をクリックする事でテンプレートが表示されます。またdelete(削除)をクリックするとテンプレートの削除を行います。

ページ設定を行うにはツールバーのをクリックします。設定後、APPLY(適用)をクリックする事で設定が反映されます。

設定内容詳細は以下を参照ください。

Paper Size(用紙サイズ)

paper (用紙)	size (サイズ) 用紙サイズを選択します。 layout (向き) 用紙向きを選択します。 width (幅) 用紙幅を任意で指定します。[mm] specifes the size(サイズを指定する)がチェックされている必要があります。 height (高さ) 用紙高さを任意で指定します。[mm] specifes the size(サイズを指定する)がチェックされている必要があります。
margin (余白)	Top (上) 用紙上部の余白を設定します。[mm] Right (右) 用紙右部の余白を設定します。[mm] Bottom (下) 用紙下部の余白を設定します。[mm] Left (左) 用紙左部の余白を設定します。[mm]

layout setting(レイアウト設定)

grid interval (グリッド間隔)	horizontal(横) / vertical(縦) それぞれのグリッド間隔を設定します。[mm]
snap Interval (スナップ間隔)	horizontal(横) / vertical(縦) それぞれのスナップ間隔を設定します。[mm]
heder/footer (ヘッダー/フッター)	ページのヘッダー、フッター領域を設定します。[mm]

background image(背景画像)

背景画像	レイアウトビューの背景画像を設定します。 既存の帳票イメージ等を背景画像として設定する事で、背景画像をなぞることで簡単にレイアウトを行うことができます。画像の大きさは用紙サイズと合わせる必要があります。 (例)以下は勤務表を背景画像に設定した例です。
opacity (不透明度)	背景画像の不透明度を設定します。

プレビューを行うにはツールバーのをクリックします。
以下の画面が起動します。

RUN(実行)をクリックする事でプレビュー画面が表示されます。

各機能の詳細は以下を参照ください。

Preview(プレビュー)

Add the file (ファイルを追加)	プレビュー時に使用するJSONファイルを追加します。
run (実行)	指定されたJSONファイルを使用してプレビューを実行します。
download (ダウンロード)	指定されたJSONファイルをダウンロードします。
下部のRUN(実行)	JSONファイルを使用せずプレビューを実行します。変数タイプのオブジェクトが存在しない場合に使用します。