この 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＞
出力値を以下のように設定します。 作成された Excel ファイルのパスを返却します。
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＞
出力値を以下のように設定します。
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 ＜高精度小数＞
計算途中の結果や、IM-LogicDesigner からの出力値を格納するための追加変数を追加します。
$variable ＜マップ＞ ┗ total ＜マップ＞ ┗ subTotal ＜高精度小数＞ ┗ output ＜マップ＞ ┗ path ＜文字列＞
プルダウンから「定数」を選択して、以下の定数を追加します。 
$constant ＜マップ＞ ┗ PRICE_UNIT ＜文字列＞ = $ ┗ DOWNLOAD_URL ＜文字列＞ = /imart/logic/api/im_cookbook/181265_invoice_download
3-3. アクションを設定する
「アクション」タブをクリックして、以下のアクションを追加します。 ■アクション名： reset 画面初期表示のためのアクションです。 １．カスタムスクリプトを実行する
$variable.invoice.date = new Date();
■アクション名： calc 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」ボタンをクリックして、請求書がダウンロードされることを確認してください。