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

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

完成イメージ

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

完成サンプル

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

CREATE TABLE im_cookbook_182991
(
    file_key character varying(200),
    create_date timestamp without time zone
)

また、以下の完成サンプルをダウンロードしてご活用ください。 IM-BloomMaker インポートデータ : cookbook_182991_bloommaker_data 以下の定義が含まれています。

IM-BloomMakerのインポート機能を利用してインポートしてください。 インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。 IM-LogicDesigner インポートデータ : cookbook_182991_im_logicdesigner-data 以下の定義が含まれています。

IM-LogicDesignerのインポート機能を利用してインポートしてください。 インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。 インポート後、ローカル環境で表示させる場合は、以下のURLにアクセスしてください。

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

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

レシピ

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

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

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

作成するアプリの永続化先として、データベースに新規テーブルを作成します。 テナント管理者でログインしてください。 グローバルナビから「サイトマップ」に遷移し、「テナント管理」→「データベース操作」をクリックします。 ここに、以下の SQL を入力し、実行してください。 ※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

CREATE TABLE im_cookbook_182991
(
    file_key character varying(200),
    create_date timestamp without time zone
)

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

2. 登録画面の作成

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

{
  "requestData": {
    "fileKeys": [""]
  }
}

次に、「レイアウト (imui)」から「フォームコンテナ」エレメントを配置し、配下のエレメントを削除してください。 「フォームコンテナ」エレメントの containerType プロパティを 90% (wide) にしましょう。 続いて、「フォームコンテナ」エレメント配下に「フォーム」カテゴリの「マルチファイルアップロード」エレメントを配置してください。 また、「マルチファイルアップロード」エレメントの values を $variable.requestData.fileKeys に設定してください。 次に、「レイアウト」カテゴリの「ボックス」エレメントを配置し、配下に「フォーム (imui)」カテゴリの「ボタン」を配置してください。 「ボタン」エレメントの value は 登録 としてください。 これで、見た目が完成しました。 次に、登録アクションを作成していきます。 アクションタブを開き、 Register アクションを作成してください。 「IM-LogicDesigner」カテゴリから「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

最後に、「ボタン」エレメントの「クリック時」プロパティに、作成した Register アクションを指定してください。 これで、登録画面の作成は終了です。 この他に、完成サンプルでは、ヘッダの付与や見た目の調整などを行っていまが、当該 CookBook の本旨とはずれるため、割愛します。 なお、 URL に指定した フロールーティングは、次の「3. 登録画面のサーバロジックを作成」で実装していきます。

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

先ほど利用した、エンドポイント logic/api/im_cookbook/182991_register の REST API を実装していきます。 REST API の作成には、 IM-LogicDesigner を利用しましょう。 サーバロジックで実装する機能は以下です。

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

では、実装していきます。 フロー定義編集画面を開きましょう。 なお、完成サンプルでは フローID をim_cookbook_182991_flow_register としています。 ロジックフローの新規作成方法が不明であれば、以下のドキュメントをご覧ください。

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

フローの入力値は、以下のように設定してください。 JSON入力で以下のように入力すると楽です。

{
  "fileKeys": [""]
}

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

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

完成サンプルのユーザ定義IDは、 im_cookbook_182991_user_insert で作成しています。 入力値は以下のように設定してください。 また、SQLは INSERT で以下のように入力してください。 ※ 以下は PostgreSQL での SQL です。他データベースをご利用の場合は、別途テーブルを作成する SQL を実行してください。

INSERT INTO im_cookbook_182991
  (file_key, create_date)
VALUES
  (/*file_key*/'hoge', /*create_date*/'2021-04-01')

作成したユーザ定義を、ロジックフローに配置してください。 また、fileKeys は配列で渡ってくるので「繰り返し」のタスクも配置してください。 「繰り返し開始」を選択し、繰り返し対象を $input/fileKeys にしてください。 次に、「IM-BloomMaker」カテゴリの「ファイル情報の登録」タスクを配置してください。 配置したら、順にタスクを繋いでいきましょう。 続いて、マッピング設定を行います。

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

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

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

これで、サーバロジックの実装は完了です。 フローを保存してください。 続いて、作成したフロー定義利用してルーティング定義を作成することで、 REST API として公開しましょう。 ルーティング定義の作成方法が不明である場合は、以下のドキュメントをご覧ください。

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

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

作成後は、ルーティング定義一覧で、 im_cookbook/182991_register に認可を付与してください。

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

続いて、一覧画面で利用する REST API も作成しましょう。 im_cookbook_182991 テーブルから全件取得する単純なロジックを作成していきます。 完成サンプルでは フローID を im_cookbook_182991_flow_get_list としています。 出力は以下のように設定してください。 records を配列にするのを忘れないようにしてください。 次に、 SELECT 文を実行するため、ユーザ定義（SQL定義）を作成しましょう。 完成サンプルのユーザ定義IDは、 im_cookbook_182991_user_select で作成しています。 入力値は不要です。 また、SQLは SELECT で以下のように入力してください。 ※ 以下は PostgreSQL での SQL です。

SELECT
  file_key, create_date
FROM
  im_cookbook_182991
ORDER BY create_date DESC

SQL 文を入力した後は、 「データ定義を取得する」 を必ずクリックしてください。 こうすることで、出力値のデータ型が以下のように自動で設定されます。 作成したら、フローに配置し、線で繋げましょう。 次に、マッピング設定を行っていきます。

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

im_cookbook_182991_user_select1 は、「入力を追加」ボタンで追加してください。 マッピングした結果は以下です。 これで、フロー定義の作成は完了ですので、フローを保存してください。 前述しましたが、完成サンプルではフローIDを im_cookbook_182991_flow_get_list としています。 続いて、先ほどと同様に、ルーティング定義を作成してください。 完成サンプルでは、以下のようなルーティング定義を作成しています。

作成後は、ルーティング定義一覧で、 im_cookbook/109004_get_list に認可を付与してください。

5. 一覧画面の作成

登録画面でアップロードしたファイルを一覧で見ることができる画面を作成していきます。 完成サンプルではコンテンツの ID を im_cookbook_182991_list としています。 まずは、変数を作成していきます。 「JSON形式で編集」から以下の JSON を入力してください。

{
  "responseData": {
    "records": [
      {
        "fileKey": ""
      }
    ]
  },
  "fileKeys": []
}

以下のような変数が作成されます。 この responseData は、サーバサイドから取得したファイルの一覧を格納するための変数です。 続いて、アクション Initialize を作成しましょう。 このアクションは、アプリ画面を開いた際、 logic/api/im_cookbook/182991_get_list の REST API を実行して、変数 $variable.responseData に値を格納し、変数 $variable.fileKeys に $variable.responseData.fileKey を詰めていくアクションです。 「IM-LogicDesigner」カテゴリから「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

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

const fileKeys = $variable.responseData.records.map((e) => e.fileKey) $variable.fileKeys = fileKeys

次に、作成したアクションが、アプリ画面起動時に実行されるようにしましょう。 コンテナの設定を行うため、デザイナのヘッダの「コンテナを選択」アイコンをクリックし、ページ読み込み時のプルダウンから、作成した Initialze を選択してください。 これで、アプリ画面がロードされたらすぐ、 REST API が実行され、一覧データをサーバサイドから取得されます。 続いては、取得してきたデータを利用して、画面に表示するのみです。 登録画面と同様に、「レイアウト (imui)」から「フォームコンテナ」エレメントを配置し、配下にあるエレメントを削除してください。 次に、「フォームコンテナ」エレメント配下に「標準」カテゴリの「マルチファイルアップロード」エレメントを配置してください。 続いて、「マルチファイルアップロード」エレメントの values に $variable.fileKeys を設定し、readonly にチェックを付けてください。 readonly にすることで一覧画面ではファイルを削除できなくなります。 以上で、完了です。 この他に、完成サンプルでは、ヘッダの付与や見た目の調整などを行っていますが、当該 CookBook の本旨とはずれるため、割愛します。

さいごに

この CookBook では、「ファイルアップロード」エレメント利用して登録画面でアップロードしたファイルを別画面で表示しダウンロードすることができる仕組みを作成しました。 IM-BloomMaker の「マルチファイルアップロード」エレメントは、1ファイルのアップロード可能なサイズに上限があり、初期値は 10 MB ですのでご注意ください。 設定ファイルでこの上限を変更することが可能です。 設定ファイルは、アプリケーションサーバ上の WEB-INF/conf/bloommaker-fileupload-config/im_bloommaker.xml に配置されています。 設定変更の方法について、詳しくは以下の issue をご覧ください。 https://issue.intra-mart.jp/issues/30884