IM-BloomMaker と IM-LogicDesigner を組み合わせて、請求書を Excel でダウンロードする方法

この CookBook では intra-mart Accel Platform 2021 Spring から追加された、「IM-LogicDesigner フロールーティングにリクエストを送信する」アクションを使用し、IM-BloomMaker で作成した画面の入力内容を IM-LogicDesigner 経由で Excel に出力し、ダウンロードする機能を作成する方法を紹介します。

例として、請求書を作成する画面を作成していきます。

完成イメージ

IM-BloomMaker の画面です。
この画面では、請求書の内容を入力します。

IM-LogicDesigner の Excel 出力定義です。
このユーザ定義では、IM-BloomMaker の画面から受け取ったデータを、Excel に転記します。

IM-LogicDesigner 経由でダウンロードした Excel ファイルです。
画面の入力内容が、Excel に反映された状態でダウンロードされます。

完成サンプル

この CookBook のサンプルを動作させるためには、以下のモジュールを導入します。

ベースモジュール → 標準機能 → 基盤機能 → IM-LogicDesigner → IM-LogicDesigner
ベースモジュール → 標準機能 → 基盤機能 → IM-LogicDesigner → IM-LogicDesigner Excel連携
アプリケーション → IM-BloomMaker for Accel Platform → IM-BloomMaker for Accel Platform
アプリケーション → IM-BloomMaker for Accel Platform → IM-BloomMaker for Accel Platform 設計書出力

この CookBook では、以下の3つの資材を使用します。

IM-BloomMaker インポートファイル： cookbook_181265_im_bloommaker-data.zip
IM-LogicDesigner インポートファイル： cookbook_181265_im_logicdesigner-data.zip
請求書テンプレートファイル： im_cookbook_181265_invoice.xlsx

IM-BloomMaker インポートファイルには、以下の定義が含まれています。

コンテンツ定義	im_cookbook_181265
ルーティング定義	im_cookbook_181265

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-LogicDesigner インポートファイルには、以下の定義が含まれています。

フロー定義	im_cookbook_181265_invoice_create im_cookbook_181265_invoice_download
ルーティング定義	im_cookbook/181265_invoice_create im_cookbook/181265_invoice_download
ユーザ定義	im_cookbook_181265_invoice

IM-LogicDesigner のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

請求書テンプレートファイルは、パブリックストレージの直下に配置してください。

ローカル環境で表示させる場合は、以下の URL にアクセスしてください。
http://localhost:8080/imart/im_cookbook/181265
なおベース URL である以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

サンプルの作成手順を以下に示します。

請求書テンプレートをパブリックストレージに配置する
IM-LogicDesigner で Excel ダウンロードフローを作成する
　2-1. ユーザ定義を作成する
　2-2. フロー定義を作成する
　2-3. ルーティング定義を作成する
IM-BloomMaker で入力・ダウンロード画面を作成する
　3-1. コンテンツ定義を作成する
　3-2. 変数を設定する
　3-3. アクションを設定する
　3-4. 入力フォームを作成する
　3-5. ルーティング定義を作成する

1. 請求書テンプレートをパブリックストレージに配置する

請求書のテンプレートファイルを Excel で作成します。
この CookBook では、以下のようなテンプレートを用意しています。

2. IM-LogicDesigner で Excel ダウンロードフローを作成する

2-1. ユーザ定義を作成する

IM-BloomMaker からデータを受け取り、Excel のテンプレートにファイルを出力するユーザ定義を作成します。
「サイトマップ」→「LogicDesigner」→「ユーザ定義」→「Excel出力定義新規作成」をクリックして、「Excel出力定義編集」画面を開きます。

Excel に値を設定した後、式の再計算を行うため、「Excel出力共通定義」で「関数の再計算」のチェックボックスをオンにしておきます。
次に、請求書のテンプレートに合わせて、「セル出力定義」および「範囲指定出力定義」を指定していきます。

■セル出力定義

シート名	セル	入力パラメータ名	データ型
Invoice	A3	customerName	string
Invoice	A4	customerZipCode	string
Invoice	A5	customerAddress1	string
Invoice	A6	customerAddress2	string
Invoice	A7	customerAddress3	string
Invoice	D3	invoiceDate	date
Invoice	D4	invoiceNo	string
Invoice	D24	shipping	number
Invoice	D25	tax	number
Invoice	D26	discount	number

■範囲指定出力定義

出力範囲

シート名	Invoice
対象列	A - D
開始行	16
終了条件	指定行数を書き込んだら
書き込み行数	8

入力パラメータ名とデータ型

親オブジェクト	details
A	no
B	description
C	quantity
D	price

最後に、「入力値にパラメータ名を反映する」リンクを忘れずにクリックして、入力値ツリーを構成します。
「新規作成」ボタンをクリックして、ユーザ定義を作成します。

2-2. フロー定義を作成する

◇◆ A. Excel を作成するロジックフロー ◆◇

前項で作成したユーザ定義を使用して Excel を作成するロジックフロー定義を作成します。
「サイトマップ」→「LogicDesigner」→「フロー定義一覧」をクリックして、「ロジックフロー定義一覧」画面を開きます。
任意のカテゴリを作成後、「ロジックフロー新規作成」をクリックして、「ロジックフロー定義編集」画面を開きます。

次のようなフローを作成します。

開始 → 前項で作成したユーザ定義 → 終了

入力値を以下のように設定します。
ユーザ定義とまったく同じ構造にしても実現できますが、ここでは以下のように型でカテゴリを分けて定義します。
IM-BloomMaker には変数のマッピングの機能がないため、カスタムスクリプトを使用しなければなりません。
しかし、IM-LogicDesigner は GUI 上で細かいマッピング設定が可能なため、IM-LogicDesigner の入力値の構造は、予めデータ構造を整理しておくと、後から仕様変更や機能追加が簡単になります。

destination ＜object＞
┗ name ＜string＞
┗ zipCode ＜string＞
┗ address1 ＜string＞
┗ address2 ＜string＞
┗ address3 ＜string＞
invoice ＜object＞
┗ date ＜date＞
┗ no ＜string＞
details ＜object[]＞
┗ no ＜string＞
┗ description ＜string＞
┗ quantity ＜bigdecimal＞
┗ price ＜bigdecimal＞
total ＜object＞
┗ shipping ＜bigdecimal＞
┗ tax ＜bigdecimal＞
┗ discount ＜bigdecimal＞

destination ＜object＞

┗ name ＜string＞

┗ zipCode ＜string＞

┗ address1 ＜string＞

┗ address2 ＜string＞

┗ address3 ＜string＞

invoice ＜object＞

┗ date ＜date＞

┗ no ＜string＞

details ＜object[]＞

┗ no ＜string＞

┗ description ＜string＞

┗ quantity ＜bigdecimal＞

┗ price ＜bigdecimal＞

total ＜object＞

┗ shipping ＜bigdecimal＞

┗ tax ＜bigdecimal＞

┗ discount ＜bigdecimal＞

出力値を以下のように設定します。
作成された Excel ファイルのパスを返却します。

path ＜string＞

1	path ＜string＞

定数値を以下のように設定します。

定数ID	定数値
OUTPUT_PATH	sample_invoice.xlsx
TEMPLATE_PATH	im_cookbook_181265_invoice.xlsx

マッピングを以下のように設定します。

■im_cookbook_181265_invoice1

入力.description.name	→	im_cookbook_181265_invoice1.customerName
入力.description.zipCode	→	im_cookbook_181265_invoice1.customerZipCode
入力.description.address1	→	im_cookbook_181265_invoice1.customerAddress1
入力.description.address2	→	im_cookbook_181265_invoice1.customerAddress2
入力.description.address3	→	im_cookbook_181265_invoice1.customerAddress3
入力.invoice.date	→	im_cookbook_181265_invoice1.invoiceDate
入力.invoice.no	→	im_cookbook_181265_invoice1.invoiceNo
入力.details.no	→	im_cookbook_181265_invoice1.details
入力.total.shipping	→	im_cookbook_181265_invoice1.shipping
入力.total.tax	→	im_cookbook_181265_invoice1.tax
入力.total.discount	→	im_cookbook_181265_invoice1.discount
定数.OUTPUT_PATH	→	im_cookbook_181265_invoice1.outputFile
定数.TEMPLATE_PATH	→	im_cookbook_181265_invoice1.inputFile

■終了

定数.OUTPUT_PATH

→

出力.path

ロジックフロー定義を保存します。

ロジックフローID

im_cookbook_181265_invoice_create

◇◆ B. Excel をダウンロードするロジックフロー ◆◇

さらに、次のようなフローを作成します。

開始 → 終了

入力値を以下のように設定します。

path ＜string＞

1	path ＜string＞

出力値を以下のように設定します。

body ＜storage＞

1	body ＜storage＞

マッピングを以下のように設定します。

■終了

入力.path

→

出力.body

ロジックフロー定義を保存します。

ロジックフローID

im_cookbook_181265_invoice_download

2-3. ルーティング定義を作成する

前項で作成したロジックフロー定義を IM-BloomMaker から呼び出せるようにするため、ルーティング定義を作成します。
「サイトマップ」→「LogicDesigner」→「ルーティング定義一覧」をクリックして、「ロジックフロールーティング定義一覧」画面を開きます。
「新規作成」をクリックして、以下の2つのルーティング定義を作成します。

■Excel を作成するロジックフロー

フロー定義ID	im_cookbook_181265_invoice_create
ルーティング	/imart/logic/api/im_cookbook/181265_invoice_create
メソッド	POST
認証方法	IMAuthentication
認可URI	im-logic-rest://im_cookbook/181265_invoice_create
セキュアトークンを利用する	オフ
レスポンス種別	JSONに変換して返却

■Excel をダウンロードするロジックフロー

フロー定義ID	im_cookbook_181265_invoice_download
ルーティング	/imart/logic/api/im_cookbook/181265_invoice_download
メソッド	GET
認証方法	IMAuthentication
認可URI	im-logic-rest://im_cookbook/181265_invoice_download
セキュアトークンを利用する	オフ
レスポンス種別	ファイルダウンロード

それぞれ、認可を設定します。
今回は動作テストのため、「テナント管理者」に認可を設定します。

3. IM-BloomMaker で入力・ダウンロード画面を作成する

3-1. コンテンツ定義を作成する

請求書に出力する部分に応じた入力フォームを、IM-BloomMaker で作成します。
「サイトマップ」→「BloomMaker」→「コンテンツ一覧」をクリックして、「IM-BloomMaker コンテンツ一覧」画面を開きます。
「コンテンツ新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID	（任意のカテゴリ）
コンテンツID	im_cookbook_181265
コンテンツ種別	imui
コンテンツ名	im_cookbook_181265

コンテンツ定義を登録後、「デザイン編集」ボタンをクリックしてデザイナ画面を開きます。

3-2. 変数を設定する

「変数」タブをクリックして、以下の変数を追加します。
全章で作成した IM-LogicDesigner のロジックフロー定義（ID：im_cookbook_181265_invoice_create）の入力値と同じ構造とします。

$variable ＜マップ＞
┗ destination ＜マップ＞
　┗ name ＜文字列＞
　┗ zipCode ＜文字列＞
　┗ address1 ＜文字列＞
　┗ address2 ＜文字列＞
　┗ address3 ＜文字列＞
┗ invoice ＜マップ＞
　┗ date ＜日付・時刻＞
　┗ no ＜文字列＞
┗ details ＜マップ＞ （1次元配列 x8）
　┗ 0 ＜マップ＞
　　┗ no ＜文字列＞
　　┗ description ＜文字列＞
　　┗ quantity ＜高精度小数＞
　　┗ price ＜高精度小数＞
　┗ 1 ＜マップ＞
　　　：
┗ total ＜マップ＞
　┗ shipping ＜高精度小数＞
　┗ tax ＜高精度小数＞
　┗ discount ＜高精度小数＞

$variable ＜マップ＞

┗ destination ＜マップ＞

　┗ name ＜文字列＞

　┗ zipCode ＜文字列＞

　┗ address1 ＜文字列＞

　┗ address2 ＜文字列＞

　┗ address3 ＜文字列＞

┗ invoice ＜マップ＞

　┗ date ＜日付・時刻＞

　┗ no ＜文字列＞

┗ details ＜マップ＞（1次元配列 x8）

　┗ 0 ＜マップ＞

　　┗ no ＜文字列＞

　　┗ description ＜文字列＞

　　┗ quantity ＜高精度小数＞

　　┗ price ＜高精度小数＞

　┗ 1 ＜マップ＞

　　　：

┗ total ＜マップ＞

　┗ shipping ＜高精度小数＞

　┗ tax ＜高精度小数＞

　┗ discount ＜高精度小数＞

計算途中の結果や、IM-LogicDesigner からの出力値を格納するための追加変数を追加します。

$variable ＜マップ＞
┗ total ＜マップ＞
　┗ subTotal ＜高精度小数＞
┗ output ＜マップ＞
　┗ path ＜文字列＞

$variable ＜マップ＞

┗ total ＜マップ＞

　┗ subTotal ＜高精度小数＞

┗ output ＜マップ＞

　┗ path ＜文字列＞

プルダウンから「定数」を選択して、以下の定数を追加します。

$constant ＜マップ＞
┗ PRICE_UNIT ＜文字列＞    = $
┗ DOWNLOAD_URL ＜文字列＞  = /imart/logic/api/im_cookbook/181265_invoice_download

$constant ＜マップ＞

┗ PRICE_UNIT ＜文字列＞ = $

┗ DOWNLOAD_URL ＜文字列＞ = /imart/logic/api/im_cookbook/181265_invoice_download

3-3. アクションを設定する

「アクション」タブをクリックして、以下のアクションを追加します。

■アクション名： reset
画面初期表示のためのアクションです。

１．カスタムスクリプトを実行する

$variable.invoice.date = new Date();

1	$variable.invoice.date = new Date();

■アクション名： calc subTotal
小計を計算するためのアクションです。

１．カスタムスクリプトを実行する

let subTotal = 0;
$variable.details.forEach((detail) => {
  subTotal += +detail.quantity * +detail.price;
});
$variable.total.subTotal = subTotal;

let subTotal = 0;

$variable.details.forEach((detail) => {

subTotal += +detail.quantity * +detail.price;

});

$variable.total.subTotal = subTotal;

■アクション名： issue invoice
請求書をダウンロードするためのアクションです。

１．IM-LogicDesigner フロールーティング［ im_cookbook/181265_invoice_create ］にリクエストを送信する

リクエストパラメータ	（空）
リクエストヘッダ	（空）
リクエストデータ	$variable
ステータスコード	（空）
レスポンスデータ	$variable.output
セキュアトークンを送信する	オフ
エポックミリ秒を送信しない	オフ

２．URL［ $constant.DOWNLOAD_URL ］に遷移する

リクエストパラメータ：

$variable.output

3-4. 入力フォームを作成する

以下の部品を使用して、入力フォームを作成します。
変数と入力要素の関係について記載します。ヘッダの文字列等は、任意で設定してください。

■タイトル
・見出しレベル1（imui）

■送付先住所入力
・フォームコンテナ
・テキスト入力（imui）
　Name の value プロパティ： $variable.destination.name
　Zip code の value プロパティ： $variable.destination.zipCode
　Address の value プロパティ： $variable.destination.address1, $variable.destination.address2, $variable.destination.address3

■請求書番号入力
・フォームコンテナ
・日付入力（imui）
　Date の value プロパティ： $variable.invoice.date
・テキスト入力（imui）
　Bill note no. の value プロパティ： $variable.invoice.no

■詳細・合計入力
・フォームコンテナ
・縦方向のテーブル（繰り返し）（imui）
　list プロパティ： $variable.details
・テキスト入力（imui）
　No. の value プロパティ： $variable.details[$index].no
　Description の value プロパティ： $variable.details[$index].description
・数値入力（imui）
　Quantity の value プロパティ： $variable.details[$index].quantity
　Price の value プロパティ： $variable.details[$index].price
　Amount の value プロパティ： =$variable.details[$index].quantity*$variable.details[$index].price
　Shipping の value プロパティ： $variable.total.shipping
　Tax の value プロパティ： $variable.total.tax
　Discount の value プロパティ： $variable.total.discount
　Total の value プロパティ： =($variable.total.subTotal+$variable.total.shipping)*($variable.total.tax+100)/100-$variable.total.discount
・ラベル
　textContent プロパティ： $constant.PRICE_UNIT

■送信ボタン
・オペレーションパーツ

コンテナページに配置したエレメントとアクションを紐づけるため、それぞれのイベントを設定します。

設定対象	イベント	アクション
コンテナ	ページ読み込み時	reset
詳細・合計入力 → Quantity の数値入力	入力値変更時	calc subTotal
詳細・合計入力 → Quantity の数値入力	入力値変更中	calc subTotal
詳細・合計入力 → Price の数値入力	入力値変更時	calc subTotal
詳細・合計入力 → Price の数値入力	入力値変更中	calc subTotal
送信ボタン → ボタン	クリック時	issue invoice

デザイナの「上書き保存」アイコンをクリックして、保存します。

3-5. ルーティング定義を作成する

前項で作成した IM-BloomMaker の画面を呼び出せるようにするため、ルーティング定義を作成します。
「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」をクリックして、「IM-BloomMaker ルーティング定義一覧」画面を開きます。
「ルーティング新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID	（任意のカテゴリ）
ルーティングID	im_cookbook_181265
コンテンツ	im_cookbook_181265
コンテンツバージョン	最新バージョンを利用する
メソッド	GET
URL	/imart/im_cookbook/181265
ルーティング名	im_cookbook_181265

登録後、認可を設定します。
今回は動作テストのため、「テナント管理者」に認可を設定します。

プレビュー

以下のURLにアクセスして、請求書入力画面を表示してください。
http://localhost:8080/imart/im_cookbook/181265

入力フォームに内容を入力して、小計・合計が正しく計算されることを確認してください。

「Issue」ボタンをクリックして、請求書がダウンロードされることを確認してください。