帳票作成｜Step.2 データバインディング

Step.2では、Step.1でレイアウト上に配置したエレメントにデータを紐付けします。
エレメントとデータを紐付けることをデータバインディングと呼びます。

用語説明

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

• データ
  プログラムから受け取る数値や文字、日付などの情報のこと。
  例えば、「取引先に関する情報」や「請求書に表示する注文内容の明細」など、同じレイアウトでも帳票ごとに異なるような情報はデータとして管理することで、レイアウトを再利用して帳票を作成することができる。
  　

• データスキーマ
  データスキーマとはデータの構造を定義したもの。
  データの構造とは、例えば「取引先」に関する情報として取引先ごとに「ID（数字）」「名称（文字列）」「住所（文字列）」「電話番号（数字）」というデータが含まれる場合、これがデータの構造＝スキーマとなる。（このスキーマに準ずるデータとして「ID: 001」「名称: 株式会社A」「住所: 東京都XXXXXX」「電話番号: 0312345678」などが存在する。）

  スキーマごとに中身のデータ（＝データの構造と利用可能なデータ）が異なるため、利用するデータを指定するためにはまずはスキーマを選択する必要がある。
  　

• データソース
  プログラムが利用できるデータとその管理スペース及び管理方法のこと。
  例えば、上記の「取引先情報」として10社分のデータがCSVファイルで管理されていた場合そのCSVがデータソースとなり、もしデータベースに保管されている場合はそのデータベース上のデータがデータソースである。
  　
• データバインディング
  レイアウト上のエレメントに表示するデータを紐付けること。
  データバインディングされているエレメントは、実際の帳票出力時に帳票ごとのデータが表示される。
  　
• データ項目
  データ項目とはスキーマを構成する要素のこと。
  例えば「取引先」スキーマ（「ID（数字）」「名称（文字列）」「住所（文字列）」「電話番号（数字）」）の場合、「ID」「名称」「住所」「電話番号」がデータ項目である。
  データ項目をエレメントに対してバインディングすることで、そのエレメントにデータを紐付ける。

　

データバインディングを行う

対象のエレメント

現在のレイアウトでは、以下のエレメントで「- 未設定 -」と表示されている部分がデータバインディングの対象となります。

• データ
• テーブル
• データリスト

　
エレメントごとにデータバインディングを行なっていきましょう。

データ

データ項目の設定

以下の部分を設定します。

「株式会社RaaS Partners」は取引先の名前です。取引先は帳票ごとに異なるはずです。
まずはこの取引先の名前を表示できるようにしましょう。

1. 対象のエレメントをクリックして選択

2. データを設定
   　1. 「プロパティパネル」で [データ > データ項目] の値をクリック
   　2. プルダウンリストの中から [取引先名] を選択

（操作後の状態）

{取引先名} の部分には帳票の出力時に該当する取引先の名前が表示されます。
これで帳票ごとに取引先の名前が出力されるようになりました。

　

接尾語の設定

通常、取引先の名称には「御中」のように敬称をつけるはずです。
この「御中」は取引先が変わっても変わらないため、固定の文字列を表示したいので「接尾語」を利用します。

1. 「プロパティパネル」で [データ > 接尾語の種類] を「テキスト」にする
2. 「プロパティパネル」に [データ > テキスト] が表示される
3. [データ > テキスト] に『御中』と入力

（操作後の状態）

これで「株式会社RaaS Partners御中」のように「取引先名」＋「御中」と出力されるようになりました。

値の種類によって、レイアウト上での表示形式が異なります。

・テキスト： 文字列
・データ： {データ項目名}
・機密データ： {{データ項目名}}
・接頭語と接尾語： [接頭語] / [接尾語]

　

接頭語の設定

続いて、以下の部分を設定します。

ここは、「〒」 + 「郵便番号」となるようにします。
「郵便番号」は帳票ごとに異なるデータ項目、「〒」は全ての帳票で共通で表示させたいので「接頭語」で設定します。

1. 対象のエレメントをクリックして選択

2. データを設定
   　1. 「プロパティパネル」で [データ > データ項目] の値をクリック
   　2. プルダウンリストの中から [（取引先）郵便番号] を選択

3. 接頭語を設定
   　1. 「プロパティパネル」で [データ > 接頭語の種類] を「テキスト」にする
   　2. 「プロパティパネル」に [データ > テキスト] が表示される
   　3. [データ > テキスト] に『〒』と入力

（操作後の状態）

　

複数項目の指定

続いて、以下の部分を設定します。

「都道府県」と「市区町村・番地」は別のデータ項目となるので、一つのデータエレメントに対して複数のデータ項目を設定します。

1. 対象のエレメントをクリックして選択

2. 「プロパティパネル」で [データ] の [＋項目のカスタマイズ] をクリック

3. 一つ目の項目を設定
   　1. [項目1] で [データ項目] の値をクリック
   　2. プルダウンリストの中から [（取引先）都道府県] を選択

4. [項目1] の右端にある [＋] をクリック
   [項目2]　が追加される

5. 二つ目の項目を設定
   　1. [項目2] で [データ項目] の値をクリック
   　2. プルダウンリストの中から [（取引先）市区町村・番地] を選択

6. [閉じる] ボタンをクリック

（操作後の状態）

　

表示形式の設定

続いて、以下の部分を設定します。

日付の表示形式が「2023年01月05日」となるように設定します。

1. 対象のエレメントをクリックして選択

2. データを設定
   　1. 「プロパティパネル」で [データ > データ項目] の値をクリック
   　2. プルダウンリストの中から [請求日] を選択

3. データの表示形式を設定
   　1. 「プロパティパネル」で [データ > 表示形式] の値をクリック
   　2. プルダウンリストの中から [YYYY年MM月DD日] を選択

レイアウト上の見た目は変わりませんが、実際の帳票では「2023年01月05日」の形式で出力されます。

（操作後の状態）

　
同様に残りのデータエレメントにもデータバインディングします。

（操作後の状態）

　

テーブル

続いて、以下の部分を設定します。

まずは [小計] のデータを設定します。

1. 項目を設定
   　1. 左下のセルをクリックして選択
   　2. 「プロパティパネル」で [データ > データ項目] の値をクリック
   　3. プルダウンリストの中から [小計] を選択

2. ３桁区切りを指定
   「プロパティパネル」で [データ > ３桁区切り] をONにする

3. 接尾語を設定
   　1. 「プロパティパネル」で [データ > 接尾語の種類] を「テキスト」にする
   　2. 「プロパティパネル」に [データ > テキスト] が表示される
   　3. [データ > テキスト] に『円』と入力

[消費税] と [合計金額] のデータも同様に設定します。

（操作後の状態）

　
続いて、以下の部分を同様に設定します。

（操作後の状態）

　

データリスト

続いて、以下の部分を設定します。

データリストには明細型のデータのみバインディングが可能です。

リストデータの指定

まずこのリストで利用する明細データの種類を選択し、その後各列にデータ項目をバインディングしていきます。
データリストで利用する明細データを [データ > リストデータ] で選択します。

1. データリスト（親）を選択
   　1. 該当のエレメントをクリック（列が選択状態になる）
   　2. 「プロパティパネル」上部の [← データリスト（XXXXX）] をクリック（親が選択状態になる）

2. リストデータを指定
   　1. 「プロパティパネル」で [データ > リストデータ] の値をクリック
   　2. プルダウンリストの中から [請求内容] を選択

　
これで、各列に表示するデータとして、リストデータに含まれるデータ項目が選択可能になりました。
　

データ項目の指定

それぞれの列に対してデータ項目をバインディングしていきます。

1. １列目の設定
   　1. 左端の列をクリック
   　2. 「プロパティパネル」で [データ > データ項目] の値をクリック
   　3. プルダウンリストの中から [概要]を選択
   　4. 「プロパティパネル」で [データ > ヘッダの表示名] に『詳細』と入力

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

   列	データ項目	ヘッダの表示名
   2列目	数量	『数量』
   3列目	単価	『単価』
   4列目	金額	『金額』

（操作後の状態）

　
これでデータバインディングは完了です。
画面右上の「保存」ボタンをクリックして、設定を保存しましょう。

　

【応用】データバインディングの一括指定

エレメントごとにデータバインディングを行いましたが、すべてのエレメントに対して一括でバインディングできる方法もあります。
なお、興味がない場合はこの下は読まずに Step.3 固定エリアの設定 へ進んでも問題ありません。

一括でデータバインディングする手順を説明します。

1. 設定を開く
   「プロパティパネル」で [データソース] タブをクリック

2. 対象のエレメントを表示する
   　1. [データバインディング] 上部の [バインディング中] と表示されているコンボボックスをクリック
   　2. プルダウンリストの中から [すべて] を選択
   　3. データバインディング可能なすべてのエレメントが表示される

3. データバインディングを行う
   エレメントそれぞれの [データ項目] で指定したいデータ項目名を選択

4. 接頭語 / 接尾語の設定
   　1. [データバインディング] 上部の [一括設定] ボタンをクリック
   　2. 「データ一括設定」 ダイアログが表示される
   　3. 接頭語 / 接尾語を追加したいエレメントで [接頭語の種類] / [接尾語の種類] を変更
   　4. 接頭語 / 接尾語の値を入力する

複数項目指定や数値の3桁区切り設定など細かな設定には対応していません。
データごとに詳細な設定を行いたい場合は、個別のデータバインディングを行なってください。

　

---

Step.3 固定エリアの設定 へ進みましょう。