IM-BloomMaker 「ファイルアップロード」エレメントの利用方法

このCookBookでは、 2020 Spring でリリースした「ファイルアップロード」エレメントの利用方法について説明していきます。
登録画面でアップロードしたファイルを別画面でダウンロードすることができるサンプルです。

完成イメージ

登録画面

一覧画面

1. 登録画面を開きます。
2. ファイルを添付し、備考に任意の文字を入力してください。
3. Register ボタンをクリックしてください。
4. 一覧画面を開きます。
5. 開いた画面から、添付ファイルをダウンロードできます。

完成サンプル

DDL を予め実行する必要があります。データベース操作画面から実行してください。
※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

また、以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートデータ : cookbook_181190_bloommaker_data.zip
以下の定義が含まれています。

種別	ID	名称
コンテンツ	im_cookbook_181190_register	ファイルアップロード 登録
コンテンツ	im_cookbook_181190_list	ファイルアップロード 一覧
ルーティング	im_cookbook_181190_register	ファイルアップロード 登録
ルーティング	im_cookbook_181190_list	ファイルアップロード 一覧

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

IM-LogicDesigner インポートデータ : cookbook_181190_logicdesigner_data.zip
以下の定義が含まれています。

種別	ID / ルーティング
ロジックフロー	im_cookbook_181190_flow_register
ロジックフロー	im_cookbook_181190_flow_get_list
ルーティング	im_cookbook/181190_register
ルーティング	im_cookbook/181190_get_list
ユーザ定義	im_cookbook_181190_user_insert
ユーザ定義	im_cookbook_181190_user_select

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

インポート後、ローカル環境で表示させる場合は、以下のURLにアクセスしてください。

• 登録画面 : http://localhost:8080/imart/im_cookbook/bloommaker/181190/register
• 一覧画面 : http://localhost:8080/imart/im_cookbook/bloommaker/181190/list

なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

登録画面と、一覧画面の 2 画面からなるアプリケーションを作成します。
この中で、「ファイルアップロード」エレメントを利用します。

1. アプリケーションのデータを保存するため DDL を実行
2. 登録画面の作成
3. 登録画面のサーバロジックを作成
4. 一覧画面のサーバロジックを作成
5. 一覧画面の作成
6. アプリ画面を公開

1. アプリケーションのデータを保存するため DDL を実行

作成するアプリの永続化先として、データベースに新規テーブルを作成します。

テナント管理者でログインしてください。

グローバルナビから「サイトマップ」に遷移し、「テナント管理」→「データベース操作」をクリックします。
ここに、以下の SQL を入力し、実行してください。

※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

テーブルの作成に成功すると、以下のような画面が表示されます。

2. 登録画面の作成

先程作成したテーブルには 4 カラム作成しましたが、 id と create_date はサーバサイドで格納します。
画面からの入力項目は file_key と note の部分ですので、添付ファイルと備考を入力できる登録画面を作成していきます。

それでは、さっそくコンテンツを作成していきましょう。
デザイナを開くまでの手順についてわからない場合は、以下のドキュメントをご覧ください。

• IM-BloomMaker ユーザ操作ガイド - コンテンツ

なお、完成サンプルではコンテンツの ID を im_cookbook_181190_register としています。

まずは、変数を作成してください。
変数タブを開き、「変数」が選択されていることを確認した後に、「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。

以下の画像のように、変数が作成できているはずです。

同様に、「定数」を選択し、「JSON形式で編集」アイコンをクリックして、以下を入力してください。

以下のように定数が作成できます。

まずは、「レイアウト (imui)」から「フォームコンテナ」エレメントを配置してください。
「フォームコンテナ」エレメントの containerType プロパティを 90% (wide) にしましょう。

「フォームコンテナ」配下の「入力フォーム用テーブル」のプロパティを変更しましょう。
rowCount を 2 に変更してください。

1 行目の「テーブルヘッダ」エレメントの textContent を Attachment にしてください。
同様に、 2 行目の「テーブルヘッダ」エレメントの textContent を Note にしてください。

テーブル 1 行目に、「フォーム」カテゴリの「ファイルアップロード」エレメントを配置してください。
また、「ファイルアップロード」エレメントの value を変数値で $variable.requestData.fileKey に設定してください。
なお value プロパティには変数値のみ指定可能です。

2 行目には「フォーム」カテゴリの「テキストエリア」エレメントを配置してください。
「テキストエリア」エレメントの value を変数値で $variable.requestData.note に設定してください。

次に、「フォーム (imui)」カテゴリの「ボタン」を、「フォームコンテナ」下部に配置してください。
「ボタン」エレメントの value は 登録 としてください。

これで、見た目が完成しました。

次に、登録アクションを作成していきます。
アクションタブを開き、 Register アクションを作成してください。

「標準」カテゴリから「URL○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

URL	$constant.ENDPOINT_URL
メソッド	POST
リクエストデータ*	$variable.requestData
セキュアトークン	チェックを入れる

これでダイアログの「決定」ボタンをクリックしてください。

最後に、「ボタン」エレメントの「クリック時」プロパティに、作成した Register アクションを指定してください。

これで、登録画面の作成は終了です。
この他に、完成サンプルでは、ヘッダの付与や見た目の調整などを行っていまが、当該 CookBook の本旨とはずれるため、割愛します。

なお、 URL に指定した REST API のエンドポイントは、次の「3. 登録画面のサーバロジックを作成」で実装していきます。

3. 登録画面のサーバロジックを作成

先ほど利用した、エンドポイントが logic/api/im_cookbook/181190_register の REST API を実装していきます。
REST API の作成には、 IM-LogicDesigner を利用しましょう。

サーバロジックで実装する機能は以下です。

• 画面から渡ってきた fileKey と note を受け取る。
• id を自動採番する。
• create_date に現在時刻を入れる
• id, fileKey, note, create_date をデータベースに保存する
• セッションスコープストレージに存在する添付ファイルを永続化する

では、実装していきます。

フロー定義編集画面を開きましょう。
なお、完成サンプルでは フローID をim_cookbook_181190_flow_register としています。

ロジックフローの新規作成方法が不明であれば、以下のドキュメントをご覧ください。

• IM-LogicDesigner ユーザ操作ガイド - ロジックフローを新規作成する

フローの入力値は、以下のように設定してください。

JSON入力で以下のように入力すると楽です。

フローの出力は、簡単化のため不要です。

次に、データベースに INSERT するユーザ定義（SQL定義）を作成していきます。
ユーザ定義の作成方法が不明であれば、以下のドキュメントをご覧ください。

• IM-LogicDesigner ユーザ操作ガイド - ユーザ定義を新規登録する

完成サンプルのユーザ定義IDは、 im_cookbook_181190_user_insert で作成しています。

入力値は以下のように設定してください。

また、SQLは INSERT で以下のように入力してください。
※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

作成したユーザ定義を、ロジックフローに配置してください。

次に、「IM-BloomMaker」カテゴリの「ファイル情報の登録」タスクを配置してください。

配置したら、順にタスクを繋いでいきましょう。

続いて、マッピング設定を行います。

• 先程作成したユーザ定義のタスク「im_cookbook_181190_user_insert1」

左側		im_cookbook_181190_user_insert1
入力 / fileKey	→	file_key
入力 / note	→	note
マッピング関数 identifier	→	id
セッション情報 / systemDate	→	create_date

マッピング関数は「関数を追加」ボタンで追加できます。
セッション情報は「入力の追加」ボタンで追加できます。

• 「ファイル情報の登録」タスクである「im_bmRegisterFileInfo1」

左側		im_bmRegisterFileInfo1
入力 / fileKey	→	key

「ファイル情報の登録」タスクの引数である applicationId, buisinessKey は、必須ではありません。
後から「アプリケーションに紐付いた添付ファイル」や「アプリケーションで登録した特定の添付ファイル」の情報を活用したい場合は、この 2 つの引数に値を指定してくだださい。
例えば、特定のアプリケーションに紐付いたファイル情報をまとめて参照したり、削除したりするようなケースで、有用になってきます。

これで、サーバロジックの実装は完了です。
フローを保存してください。
前述しましたが、完成サンプルではフローIDを im_cookbook_181190_flow_register としています。

なお、「ファイル情報の登録」タスクについては以下のドキュメントが参考になります。

• IM-LogicDesigner 仕様書 - 添付ファイル情報の登録

続いて、作成したフロー定義利用してルーティング定義を作成することで、 REST API として公開しましょう。

ルーティング定義の作成方法が不明である場合は、以下のドキュメントをご覧ください。

• IM-LogicDesigner ユーザ操作ガイド - ルーティング

完成サンプルでは、以下のようなルーティング定義を作成しています。

対象フロー	im_cookbook_181190_flow_register
バージョン番号	最新バージョンを利用する
ルーティング	im_cookbook/181190_register
メソッド	POST
認証方法	IMAuthentication
認可URI	im_cookbook/181190_register
セキュアトークンを利用する	チェックを入れる
レスポンス種別	JSONにして変換

作成後は、ルーティング定義一覧で、 im_cookbook/181190_register に認可を付与してください。
動作確認が目的であれば、認証済みユーザに認可を付与すれば問題ありません。

認可の設定方法が不明である場合は、以下のドキュメントをご覧ください。

• IM-LogicDesigner ユーザ操作ガイド - フロールーティングの認可設定

4. 一覧画面のサーバロジックを作成

続いて、一覧画面で利用する REST API も作成しましょう。
im_cookbook_181190 テーブルから全件取得する単純なロジックを作成していきます。

完成サンプルでは フローID を im_cookbook_181190_flow_get_list としています。

簡単な全件取得であるため、フローの入力の設定は不要です。
出力は以下のように設定してください。
records を配列にするのを忘れないようにしてください。

次に、 SELECT 文を実行するため、ユーザ定義（SQL定義）を作成しましょう。
完成サンプルのユーザ定義IDは、 im_cookbook_181190_user_select で作成しています。

入力値は不要です。

また、SQLは SELECT で以下のように入力してください。
※ 以下は PostgreSQL での SQL です。

SQL 文を入力した後は、 「データ定義を取得する」 を必ずクリックしてください。

こうすることで、出力値のデータ型が以下のように自動で設定されます。

作成したら、フローに配置し、線で繋げましょう。

次に、マッピング設定を行っていきます。

• 「終了」エレメントのマッピング

左側		終了
im_cookbook_181190_user_select1/records/id	→	出力/records/id
im_cookbook_181190_user_select1/recoreds/file_key	→	出力/records/fileKey
im_cookbook_181190_user_select1/recoreds/note	→	出力/records/note
im_cookbook_181190_user_select1/recoreds/create_date	→	出力/records/createDate

im_cookbook_181190_user_select1 は、「入力を追加」ボタンで追加してください。
マッピングした結果は以下です。

これで、フロー定義の作成は完了ですので、フローを保存してください。
前述しましたが、完成サンプルではフローIDを im_cookbook_181190_flow_get_list としています。

続いて、先ほどと同様に、ルーティング定義を作成してください。
完成サンプルでは、以下のようなルーティング定義を作成しています。

対象フロー	im_cookbook_181190_flow_get_list
バージョン番号	最新バージョンを利用する
ルーティング	im_cookbook/181190_get_list
メソッド	GET
認証方法	IMAuthentication
認可URI	im_cookbook/181190_get_list
セキュアトークンを利用する	チェックを入れない
レスポンス種別	JSONにして変換

作成後は、ルーティング定義一覧で、 im_cookbook/109004_get_list に認可を付与してください。
動作確認が目的であれば、認証済みユーザに認可を付与すれば問題ありません。

5. 一覧画面の作成

登録画面でアップロードしたファイルを一覧で見ることができる画面を作成していきます。
完成サンプルではコンテンツの ID を im_cookbook_181190_list としています。

まずは、変数を作成していきます。
「JSON形式で編集」から以下の JSON を入力してください。

以下のような変数が作成されます。

この `responseData" は、サーバサイドから取得したファイルの一覧を格納するための変数です。

続いて、定数も作成しましょう。
プルダウンから「定数」を選び、「JSON形式で編集」から以下の JSON を入力してください。

以下のように定数が作成されます。

ここで指定している URL は、「4. 一覧画面のサーバロジックを作成」で作成した REST API のエンドポイントです。

続いて、アクション Initialize を作成しましょう。
このアクションは、アプリ画面を開いた際、 logic/api/im_cookbook/181190_get_list の REST API を実行して、変数 $variable.responseData に値を格納するアクションです。

「標準」カテゴリから「URL○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

URL	$constant.ENDPOINT_URL
メソッド	GET
レスポンスデータ	$variable.responseData

次に、作成したアクションが、アプリ画面起動時に実行されるようにしましょう。
コンテナの設定を行うため、デザイナのヘッダの「コンテナを選択」アイコンをクリックしてください。

すると、コンテナが選択状態になります。
ページ読み込み時 のプルダウンから、作成した Initialze を選択してください。

これで、アプリ画面がロードされたらすぐ、 REST API が実行され、一覧データをサーバサイドから取得されます。

続いては、取得してきたデータを利用して、画面に表示するのみです。

「繰り返し (imui)」カテゴリの「縦方向のテーブル（繰り返し）」エレメントを配置してください。
「縦方向のテーブル（繰り返し）」エレメントのプロパティ columnCount を固定値で 2 にしてください。同様に、 list を変数値で $variable.responseData.records に指定してください。

「縦方向のテーブル（繰り返し）」配下の「テーブルヘッダ」エレメントの表示内容を変更しましょう。
1 列目の「テーブルヘッダ」エレメントのプロパティ textContent を固定値で Attachment に指定し、 2 列目の textContent を固定値で Note としましょう。

次に、 1 列目のセルに、「フォーム」カテゴリの「ファイルアップロード」エレメントを配置してください。
「ファイルアップロード」エレメントのプロパティ value は $variable.responseData.records[$index].fileKey を指定してください。

2 列目のセルには、「汎用」カテゴリの「ラベル」エレメントを配置してください。
「ラベル」エレメントのプロパティ textContent には変数値で $variable.responseData.records[$index].note を指定してください。

以上で、完了です。
この他に、完成サンプルでは、ヘッダの付与や見た目の調整などを行っていまが、当該 CookBook の本旨とはずれるため、割愛します。

6. アプリ画面を公開

当該 CookBook で作成した 2 つのコンテンツを IM-BloomMaker のルーティングとして登録することで、アプリとして公開することができます。
ルーティングの設定方法が不明である場合、以下のドキュメントをご覧ください。

• IM-BloomMaker ユーザ操作ガイド - ルーティング

ルーティング作成後は、ルーティングに認可を付与してください。
動作確認が目的であれば、認証済みユーザに認可を付与すれば問題ありません。

なお、完成サンプルでは ルーティングID を im_cookbook_181190_register と im_cookbook_181190_list で登録しています。

さいごに

この CookBook では、「ファイルアップロード」エレメント利用して登録画面でアップロードしたファイルを別画面でダウンロードすることができる仕組みを作成しました。

IM-BloomMaker の「ファイルアップロード」エレメントは、アップロード可能なサイズに上限があり、初期値は 10 MB ですのでご注意ください。
設定ファイルでこの上限を変更することが可能です。

設定ファイルは、アプリケーションサーバ上の WEB-INF/conf/bloommaker-fileupload-config/im_bloommaker.xml に配置されています。

設定変更の方法について、詳しくは以下の issue をご覧ください。
https://issue.intra-mart.jp/issues/30884