帳票作成｜Step.1 エレメントの配置

Step1では、レイアウト上に必要なエレメントを配置し、外観を整えます。

用語説明

このステップで登場する用語です。

  • レイアウト
    帳票レイアウトのこと。
    ここで作成するレイアウトを用いて帳票が出力される。
    　
  • エレメント
    レイアウトに配置するアイテムのこと。
    テキストやテーブル、画像など種類がある。

　

事前準備

レイアウトの新規作成

まずは新規でレイアウトを作成します。

  1. チュートリアル用の新規作成画面を開く

    チュートリアル用の画面の開き方はサービスごとに異なるため、開発者に確認してください。

    以下のようなダイアログが表示される。

  2. レイアウト設定を行う
    　1. [レイアウト名称] に任意のレイアウト名称を入力する
    　 　 ※今回は 『基本レイアウト（チュートリアル）』 とする
    　2. [ページサイズ] [ページの向き] は変更しなくて良い

  3. [作成開始] ボタンをクリック

　

エレメントを配置する

レイアウトにエレメントを配置していきます。

タイトル

タイトルは帳票の見出しとして利用するエレメントです。

以下の部分を追加します。

  1. 「エレメントパレット」で [タイトル] エレメントをクリック
  2. 「メインエリア」に追加されたエレメントをクリック
  3. 入力モードに変わるので、 『請求書』 と入力

（操作後の状態）

　

テキスト

テキストは固定文字列を表示するためのエレメントです。

以下の部分を追加します。

  1. 「エレメントパレット」で [テキスト] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置を調整する
    位置の設定方法は2通り

    • 方法1
      エレメントをマウスでドラッグして好きな位置へ移動させる

    • 方法2
      「プロパティパネル」の [位置とサイズ > X（Y）] に以下のように任意の値を入力する

      X Y
      20pt 80pt

  3. 「メインエリア」でエレメントをクリック
    入力モードになるので、 『下記の通りご請求申し上げますので、ご確認の程宜しくお願い致します。』 と文章を入力

  4. エレメントの幅を調整する
    幅の調整方法は2通り

    • 方法1
      エレメントの右端をドラッグして幅を調整する

    • 方法2
      「プロパティパネル」の [位置とサイズ > 幅] で以下のように任意の値を入力する

      幅
      550pt

（操作後の状態）

　

データ

データはプログラムから受け取った数値や文字、日付などの情報を表示するためのエレメントです。

以下の部分を追加します。

  1. 「エレメントパレット」で [データ] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置とサイズを以下のように調整

    X Y 幅
    20pt 115pt 300pt

  3. 罫線を追加する
    「プロパティパネル」で [罫線 > 外枠] の「下」をクリック

  4. 文字サイズを調整する
    「プロパティパネル」で [文字 > サイズ] に『16（pt）』と入力

（操作後の状態）

以下、同様にテキストエレメントとデータエレメントを配置します。

テキスト

番号 X Y 幅 入力テキスト
1 350pt 115pt 100pt 『日付:』
2 350pt 140pt 100pt 『請求書番号:』

データ
※（）は初期値と同じ

番号 X Y 幅 文字 > 位置 文字 > サイズ
3 450pt 115pt 100pt 右寄せ (12pt)
4 450pt 140pt 100pt 右寄せ (12pt)
5 350pt 165pt (200pt) (左寄せ) (12pt)
6 350pt 185pt (200pt) (左寄せ) 10pt
7 350pt 200pt (200pt) (左寄せ) 10pt
8 350pt 215pt (200pt) (左寄せ) 10pt
9 350pt 230pt (200pt) (左寄せ) 10pt
10 350pt 250pt (200pt) (左寄せ) 10pt
11 20pt 155pt 300pt (左寄せ) 10pt
12 20pt 170pt 300pt (左寄せ) 10pt
13 20pt 185pt 300pt (左寄せ) 10pt
14 20pt 200pt 300pt (左寄せ) 10pt

（操作後の状態）

　

テーブル

テーブルは複数のテキストやデータを表形式で扱うためのエレメントです。

以下の部分を追加します。

テーブルにはテーブル全体（親）のプロパティとセル個別のプロパティがあります。
まずはエレメントを追加し、親の設定から行いましょう。

テーブル（親）

  1. 「エレメントパレット」で [テーブル] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置を以下のように調整

    X Y
    20pt 245pt

  3. テーブルの外枠を設定
    「プロパティパネル」で [背景と罫線 > 外枠を強調] をONにする

テーブル（親）の選択方法
セル選択状態から親のプロパティへ移動する方法：
「プロパティパネル」上部の [← テーブル（XXXXX）] をクリックします。

（操作後の状態）

　
これでテーブルの外枠の設定ができました。
続いて各セルの設定を行ないます。

テーブル（セル）

  1. [小計] のテキストを設定
    　1. 左上のセルをクリック
    　2. 「エレメントパレット」で [プロパティ > テキスト > テキスト] に『小計』と入力
    　3. 「プロパティパネル」で [文字 > 位置] を「中央」にする
    　4. 「プロパティパネル」で [サイズ > 幅] に『80(pt)』と入力

  2. [消費税] のテキストを設定
    　1. 中央上のセルをクリック
    　2. 「小計」の2〜4と同様に設定する

  3. [合計金額] のテキストを設定
    　1. 右上のセルをクリック
    　2. 「小計」の2、３と同様に設定する
    　3. 「プロパティパネル」で [サイズ > 幅] に『140(pt)』と入力
    　4. 「プロパティパネル」で [文字 > サイズ] に『16(pt)』と入力

  4. [小計] のデータを設定
    　1. 左下のセルをクリック
    　2. 「プロパティパネル」で [全般 > 値の種類] を「データ」にする
    　3. 「プロパティパネル」で [文字 > 位置] を「右寄せ」にする

  5. [消費税] のデータを設定
    　1. 中央下のセルをクリック
    　2. 「小計」の2、3と同様に設定する

  6. [合計金額] のデータを設定
    　1. 中央下のセルをクリック
    　2. 「小計」の2、3と同様に設定する
    　3. 「プロパティパネル」で [文字 > サイズ] に『16(pt)』と入力

（操作後の状態）

同様に以下の振込情報のテーブルを追加します。

テーブル（親）

列の数　　 X Y 外枠 内枠 外枠を強調
3 20pt 325pt 上、下 水平 ON

テーブル（セル）

対象のセル 値の種類 幅 入力テキスト
左上（振込期日） テキスト 100pt 『振込期日』
右上（振込期日） データ (100pt) -
左下（振込先） テキスト 200pt 『振込先』
右下（振込先） データ (200pt) -

（操作後の状態）

　

データリスト

データリストは該当するデータの数だけ繰り返し行を増やして表示するエレメントです。

以下の部分を追加します。

テーブルと同様に全体（親）のプロパティと各列ごとのプロパティがあります。
まずはエレメントを追加し、親の設定から行いましょう。

データリスト（親）

  1. 「エレメントパレット」で [データリスト] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置とサイズを以下のように調整

    X Y 幅
    20pt 410pt 550pt

  3. 行数を設定
    「プロパティパネル」で [行 > 最低行数] に『7』と入力

    データが少ない場合でも最低行数分の空行が表示されます。

  4. 列を追加
    　1. 「プロパティパネル」で [列] の [＋追加] をクリック
    　2. 再度 [＋追加] をクリック

  5. テーブルの外枠を設定
    「プロパティパネル」で [背景と罫線 > 外枠を強調] をONにする

データリスト（親）の選択方法
列選択状態から親のプロパティへ移動する方法：
「プロパティパネル」上部の [← データリスト（XXXXX）] をクリックします。

（操作後の状態）

　
これでデータリストの外枠の設定ができました。
続いて各列の設定を行ないます。

データリスト（列）

  1. １列目の設定
    　1. 左端の列をクリック
    　2. 「プロパティパネル」で [位置とサイズ > 幅] に『330(pt)』と入力

  2. 残りの3列も同様に設定する

    列 幅 アイテムの文字 > 位置
    2列目 60pt 右寄せ
    3列目 80pt 右寄せ
    4列目 80pt 右寄せ

（操作後の状態）

　

社印

社印は別途登録した会社の社印を追加するためのエレメントです。

以下の部分を追加します。

  1. 「エレメントパレット」で [社印] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置とサイズを調整

    X Y 幅 高さ
    430pt 160pt 75pt 75pt

  3. 画像を透過させる
    「プロパティパネル」で [その他 > 不透明度] をドラッグで「0.5」に設定

社印が登録されていない場合、以下の手順で画像を追加します。

  1. [社印] エレメントを追加
  2. 「プロパティパネル」の [その他 > ファイル] の [編集] ボタンをクリック
  3. [アップロード] ボタンをクリック
  4. 社印画像を選択
  5. [OK] ボタンをクリック

※アップロード可能な画像
・200KB以下
・PNGまたはJPEG形式（GIF/TIFF/BMPもアップロード可能ですがPNG形式に変換されます）

（操作後の状態）

　

会社ロゴ

会社ロゴは別途登録した会社のロゴを追加するためのエレメントです。

以下の部分を追加します。

  1. 「エレメントパレット」で [会社ロゴ] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置とサイズを調整

    X Y 幅 高さ
    350pt 290pt 75pt 75pt

会社ロゴが登録されていない場合、以下の手順で画像を追加します。

  1. [会社ロゴ] エレメントを追加
  2. 「プロパティパネル」の [その他 > ファイル] の [編集] ボタンをクリック
  3. [アップロード] ボタンをクリック
  4. 会社ロゴ画像を選択
  5. [OK] ボタンをクリック

※アップロード可能な画像
・200KB以下
・PNGまたはJPEG形式（GIF/TIFF/BMPもアップロード可能ですがPNG形式に変換されます）

（操作後の状態）

　
最後にテキストエレメントとデータエレメントを利用して備考欄を追加します。

テキスト

  1. 「エレメントパレット」で [テキスト] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置とサイズ、テキストを以下のように調整

    X Y 幅 入力テキスト
    20pt 670pt 100pt 『備考欄』

  3. 装飾する
    　1. 「プロパティパネル」で [文字 > 位置]　で横位置、縦位置共に「中央寄せ」に設定
    　2. 「プロパティパネル」で [外観 > 背景色]　に『#525252』と入力
    　3. 「プロパティパネル」で [文字 > 色]　に『#FFFFFF』と入力

　
データ

  1. 「エレメントパネル」で [データ] エレメントをクリック

  2. 「メインエリア」に追加されたエレメントの位置とサイズを以下のように調整

    X Y 幅 高さ
    20pt 705pt 550pt 100pt

  3. 枠線を追加する
    「プロパティパネル」で [罫線 > 外枠] の「上」「下」「右」「左」をクリック

（操作後の状態）

　
これでエレメントの配置は完了です。
画面右上の「保存」ボタンをクリックして、設定を保存しましょう。

Step.2 データバインディング へ進みましょう。

TOP