5.3.2. テンプレートから機能を追加する¶
チュートリアルで作成したToDoアプリケーションにオプションテンプレートからファイルアップロードテンプレートを追加します。オプションテンプレートは作成したアプリケーションに機能を追加できるテンプレートです。このテンプレートを利用すればファイルアップロードに関する処理が作成されます。ToDoアプリケーションの処理や画面を修正して、ファイルを一つアップロードできるようにしましょう。
5.3.2.1. テンプレートの追加¶
AccelStudioでは、作成したアプリケーションに対して、別で作成した画面や処理の追加が行えます。本チュートリアルでは、オプションテンプレートの「ファイルアップロード」テンプレートを利用します。
5.3.2.1.1. オプションテンプレートの選択¶
アプリケーション管理から「【チュートリアル】ToDoアプリケーション」を選択します。「アプリケーション管理画面」右上の「リソースを追加」プルダウンから「テンプレートからリソース追加」を選択し、「業務テンプレート一覧画面」を表示します。
「業務テンプレート一覧」が表示されるので、「ファイルアップロード」テンプレートを選択します。
「既存アプリケーションの更新」画面が表示されます。「既存アプリケーションの更新」画面では、既存アプリケーションの基本情報が自動入力されます。なお、アプリケーションIDとアプリケーション名は変更できません。
5.3.2.1.2. IDの決定に利用する文字列の設定¶
「IDの決定に利用する文字列」を設定します。自動的にアプリケーションIDと同じものが入力されていますが、任意のIDを設定してください。「IDの決定に利用する文字列」は、各処理やIDなどに利用されます。
5.3.2.1.3. 利用するデータベース種別とテーブルの名称の設定¶
次に、利用するデータベース種別とテーブルの名称を設定します。「ファイルアップロード」テンプレートでは、新規にテーブルを作成する必要があります。任意のテーブル名を入力してください。アプリケーションの基本情報とテーブル情報を設定した後、「既存アプリケーションの更新」ボタンをクリックします。入力項目に不備が無ければ、自動で既存アプリケーションの更新が行われます。
アプリケーションの更新が完了すると、ステータスが「COMPLETE」と表示されます。
5.3.2.2. 登録処理の修正¶
「ファイルアップロード」テンプレートでは、変数のbusinessKeyという値に紐づく添付ファイルの登録、更新、削除が行えます。本チュートリアルでは、ToDoのIDをbusinessKeyに設定して、ToDoに紐づく添付ファイルの登録、更新、削除を行うようにします。「アプリケーション管理画面」から「【チュートリアル】ToDoアプリケーション 登録処理」を選択してください。「ロジックフロー定義編集」画面が表示されます。「【チュートリアル】ToDoアプリケーション 登録処理」では、エンティティデータの登録タスク（im_repositoryEntityDataInsert1）内でidentifier関数を利用して一意のIDを作成しています。変数機能を活用して、登録時に設定されたIDを画面でも利用できるようにしましょう。
5.3.2.2.1. 入出力・変数の追加¶
まずは、ロジックフローの返却値として利用できるように、入出力設定を行いましょう。画面上部の「入出力設定」を選択してください。「入出力設定」の「出力」側の「＋string」を選択してください。追加された出力値のキー名を「id」としてください。「決定」ボタンで入出力設定を閉じてください。
続けて「変数設定」を選択してください。「＋string」を選択し、追加された変数のキー名を「id」としてください。「決定」ボタンで変数設定を閉じてください。
これで、入出力、変数の設定は完了です。ロジックフローの修正も行いましょう。
5.3.2.2.2. ロジックフローの修正¶
作成した変数「id」に一意の値を設定して、出力するようにフローを修正しましょう。まずは、パレットから「基本」 、 「変数操作」を選択し、開始と登録タスク（im_repositoryEntityDataInsert1）の間に配置しましょう。
配置した変数操作をダブルクリックし、マッピング設定を表示してください。関数から「identifier」を追加し、変数欄の「id」に線を繋げて「決定」でマッピング設定を閉じてください。
続けて、登録タスクの修正を行いましょう。登録タスクをダブルクリックしてマッピング設定を表示してください。「フロー定義」 - 「変数」を選択して、「＋入力を追加」を行い、変数を入力値として利用できるようにします。登録タスクのidentifierに紐づいているidを削除し、「変数」の「id」と「登録タスク」の「id」を線で繋げて「決定」でマッピング設定を閉じてください。
最後に、ロジックフローの出力値としてもidを設定しましょう。「終了」をダブルクリックして、マッピング設定を表示してください。「変数」の「id」と「出力」の「id」を線で繋げて「決定」でマッピング設定を閉じてください。
これでロジックフローの修正は完了です。「保存」でロジックフローを保存してください。
5.3.2.3. 登録・編集・参照画面への追加¶
ファイルアップロード機能を、ToDoアプリケーションの画面に追加します。「アプリケーション管理画面」から「【チュートリアル】登録・編集・参照画面」を選択してください。「デザイン編集」画面が表示されます。
5.3.2.3.1. 変数の作成¶
まずは、ファイルアップロードに必要な変数を追加しましょう。「変数」タブからをクリックして、$variable > endPoint 配下に、以下の変数を追加してください。
"list": { "requestParameter": { "limit": 10, "offset": 1, "businessKey": "" }, "responseData": { "records": [ { "fileKey": "", "createUserCd": "", "createUserName": "", "createDate": null, "createDateStr": "", "recordUserCd": "", "recordUserName": "", "recordDate": null, "recordDateStr": "", "note": "" } ], "totalCount": 0 } }, "deleteAll": { "requestParameter": { "businessKey": "" }, "responseData": { "error": "", "errorMessage": "" } }, "crud": { "requestParameter": { "records": [ { "fileKey": "", "note": "" } ], "businessKey": "" }, "responseData": { "error": "", "errorMessage": "" } }追加後に、「createDate」と「recordDate」のをクリックして、「値の型」を「マップ」から「日付・時刻」に変更してください。
次に、もう一度"uploadFileInfoList": [ { "fileKey": "", "note": "" } ]
最後に、修正した登録タスクからIDを受け取れるように変数を修正しましょう。$variable > endPoint > register > responseData 配下に文字列の「id」を追加してください。
5.3.2.4. 新規アクションの追加¶
変数を追加したら、次はアクションを追加します。「アクション」タブを選択し、をクリックしてアクションエディタを開きます。
5.3.2.4.1. Save Upload File アクションの追加¶
最初に、Save Upload Fileアクションを作成します。このアクションは、アップロードしたファイルをデータベースに保存するアクションです。アクション名には「Save Upload File」と入力してください。「標準」から「変数○に○を代入する」アクションアイテムを配置して、以下のように設定します。
項目 指定する値 備考 変数値1 $variable.endPoint.crud.requestParameter.records 変数値2 $variable.state.uploadFileInfoList プルダウンから「変数値」を選択してください。 「標準」から「変数○に○を代入する」アクションアイテムを、先ほど配置したアクションの下に配置して、以下のように設定します。
項目 指定する値 備考 変数値1 $variable.endPoint.crud.requestParameter.businessKey 変数値2 $variable.state.entity.tutorial_todo_app.id プルダウンから「変数値」を選択してください。 「IM-LogicDesigner」から「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。
項目 指定する値 備考 ルーティング accel-studio-app/tutorial_todo_app/upload-files 「ファイル情報登録・更新・削除処理」で検索してください。 リクエストパラメータ $variable.endPoint.crud.requestParameter セキュアトークンを送信 チェックを入れる
5.3.2.4.2. Load Upload File Table アクションの追加¶
次に、Load Upload File Table アクションを作成します。このアクションは、アップロードしたファイルの一覧テーブルを読み込み、画面に反映させるアクションです。
をクリックしてアクションエディタを開いてください。アクション名を「Load Upload File Table」とします。
「標準」 - 「変数○に○を代入する」アクションアイテムを配置して、以下のように設定します。
項目 指定する値 備考 変数値1 $variable.endPoint.list.requestParameter.businessKey 変数値2 $variable.state.entity.tutorial_todo_app.id プルダウンから「変数値」を選択してください。 「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを先ほどのアクションの次に配置して、以下のように設定してください。
項目 指定する値 備考 ルーティング accel-studio-app/tutorial_todo_app/upload-files/list 「ファイル情報一覧取得処理」で検索してください。 リクエストパラメータ $variable.endPoint.list.requestParameter レスポンスデータ $variable.endPoint.list.responseData セキュアトークンを送信 チェックを入れない
項目 指定する値 備考 変数値1 $variable.state.uploadFileInfoList 変数値2 $variable.endPoint.list.responseData.records プルダウンから「変数値」を選択してください。 アクションアイテムの設定後、「決定」をクリックしてアクションを保存してください。
5.3.2.4.3. Delete All Upload Fileアクションの追加¶
最後に、Delete All Upload File アクションを作成します。このアクションは、アップロードした紐づけられているファイルをすべて削除する際に使用します。
をクリックしてアクションエディタを開いてください。アクション名を「Delete All Upload File」とします。
「標準」 - 「変数○に○を代入する」アクションアイテムを配置して、以下のように設定します。
項目 指定する値 備考 変数値1 $variable.endPoint.deleteAll.requestParameter.businessKey 変数値2 $variable.state.entity.tutorial_todo_app.id プルダウンから「変数値」を選択してください。 「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。
項目 指定する値 備考 ルーティング accel-studio-app/tutorial_todo_app/upload-files/all 「ファイル情報一括削除処理」で検索してください。 リクエストパラメータ $variable.endPoint.deleteAll.requestParameter レスポンスデータ $variable.endPoint.deleteAll.responseData セキュアトークンを送信 チェックを入れる
5.3.2.5. 既存アクションの編集¶
5.3.2.5.1. 「初期表示時」アクション¶
ここからは、ToDoアプリケーションの既存アクションの編集を行います。「初期表示時」アクションの「標準」から「アクション○を実行する」アクションアイテムを選択し、一番下に配置してください。プルダウンから「Load Upload File Table」を選択し、「決定」をクリックしてアクションを保存してください。
5.3.2.5.2. 「登録ボタンが押されたとき」アクション¶
「登録ボタンが押されたとき」アクションの「IM-LogicDesigner フロールーティングにリクエストを送信する」の次に、「標準」 - 「変数○に○を代入する」アクションアイテムを配置して、以下のように設定します。
項目 指定する値 備考 変数値1 $variable.state.entity.tutorial_todo_app.id 変数値2 $variable.endPoint.register.responseData.id プルダウンから「変数値」を選択してください。 これで、 ToDoの登録時に登録したIDが$variable.state.entity.tutorial_todo_app.idに設定されました。「標準」から「アクション○を実行する」アクションアイテムを選択し、「アクション 一覧画面へ遷移 を実行する」の前に配置します。プルダウンから「Save Upload File」を選択し、「決定」をクリックしてアクションを保存してください。
5.3.2.5.3. 「更新ボタンが押されたとき」アクション¶
「更新ボタンが押されたとき」アクションの「標準」から「アクション○を実行する」アクションアイテムを選択し、「URL $constant.screenUrl.list に遷移する」の前に配置します。プルダウンから「Save Upload File」を選択し、「決定」をクリックしてアクションを保存してください。
5.3.2.5.4. 「削除ボタンが押されたとき」アクション¶
「削除ボタンが押されたとき」アクションの「標準」から「アクション○を実行する」アクションアイテムを選択し、「アクション 一覧画面へ遷移 を実行する」の前に配置します。プルダウンから「Delete All Upload File」を選択し、「決定」をクリックしてアクションを保存してください。
5.3.2.6. ファイルアップロードエレメントの追加¶
ファイルアップロードエレメントを配置するコンテナページを作成し、ToDoアプリケーションの登録画面にファイルを添付できるエリアを追加します。
5.3.2.6.1. コンテナページの追加¶
をクリックして新規コンテナページを追加し、コンテナページ」のエレメント固有の「name」に「File Upload Area」と入力してください。
「繰り返し（Bulma）」から「テーブルコンテナ（繰り返し）」エレメントを配置します。「テーブル（繰り返し）」を選択し、エレメント固有 - プロパティの「columnCount」を「2」に、「list」の変数値を「$variable.state.uploadFileInfoList」と設定してください。「汎用」 - 「ラベル」エレメントを選択し、画像のように「テーブルヘッダセル」内に配置します。「ラベル」のエレメント固有の「textContent」には「固定値」でそれぞれ「ファイル名」と「備考」を入力してください。次に、「フォーム部品」から「ファイルアップロード」エレメントを選択し、画像のように「テーブルセル」内に配置してください。「ファイルアップロード」のエレメント固有のプロパティは以下のように設定してください。
項目 指定する値 備考 value $variable.state.uploadFileInfoList[$index].fileKey readonly = $input.__mode__ == $constant.mode.refer 変数値を選択してください。 「ファイルアップロード」 - 「幅・高さ」 - 「横幅」に設定されている「35rem」を削除します。
「フィールド」エレメントを配置した後、「フォーム部品（Bulma）」から「テキスト入力」エレメントを選択し、「フィールド」内に配置してください。「テキスト入力要素」のエレメント固有のプロパティは以下のように設定してください。
項目 指定する値 備考 disabled = $variable.state.uploadFileInfoList[$index].fileKey == null 変数値を選択してください。 readonly = $input.__mode__ == $constant.mode.refer 変数値を選択してください。 value $variable.state.uploadFileInfoList[$index].note 変数値を選択してください。 
5.3.2.6.2. 追加したコンテナページの配置¶
「パーツ」から「コンテナページ埋め込み」エレメントをコンテナ「Input Area」の「期限日」の下に配置します。
「コンテナページ埋め込み」エレメントの「page」プロパティには、作成した「File Upload Area」を指定してください。
5.3.2.7. 動作確認¶
ここまで作成したら、プレビュー画面から動作確認をしてみましょう。登録画面でファイルアップロードが行え、更新画面ではアップロードしたファイルの確認や削除が行えます。
コラム
本チュートリアルでは、一つのファイルのアップロードに関する手順を説明しました。複数のファイルをアップロードについては、以下のドキュメントも参考にしてください。