intra-mart Accel Platform ローコード開発チュートリアルガイド 第8版 2022-12-01

4.4.6. 集計画面の作成

アンケートの集計画面を作成します。
回答画面と同様に、設問情報を取得しそれを元にそれぞれの設問のどの選択肢に何人回答しているかを表示します。
回答画面と共通な処理が多いため、回答画面をテンプレートとして登録し、それを元に編集を行います。
アプリケーションの全体図だと、以下の色が塗られた箇所が対象です。
../../../_images/enquete_overall_screen_totalize.png

このページの手順については、以下で動画による解説も行っています。併せてご利用ください。

4.4.6.1. 回答画面のテンプレート登録

最初に、回答画面のテンプレート登録を行います。
テンプレートの登録は IM-BloomMakerの機能を用いて行います。
IM-BloomMakerの「テンプレート一覧」を表示します。
../../../_images/bloommaker_template.png

「カテゴリ新規作成」をクリックします。
カテゴリIDに「tutorial_template」、カテゴリ名に「【チュートリアル】チュートリアルガイドカテゴリ」と入力し登録します。
../../../_images/bloommaker_template_category.png

作成したカテゴリをクリックし、「テンプレート新規作成」ボタンをクリックします。
テンプレートIDに「tutorial_enquete_template」、テンプレート名に「【チュートリアル】アンケートテンプレート」と入力します。
「コピー元コンテンツ」 - 「検索」をクリックし、「コンテンツ検索」ダイアログを表示します。
「コンテンツ検索」ダイアログの中から「【チュートリアル】アンケート回答画面」を選択し、「決定」ボタンをクリックします。
../../../_images/bloommaker_template_set.png

「登録」ボタンをクリックし、テンプレートを登録します。

4.4.6.2. 画面情報の設定

IM-BloomMakerのテンプレートを元に、アプリケーションに紐づいたアンケートの集計画面を作成します。

4.4.6.2.1. テンプレートから集計画面の作成

アプリケーション管理の「画面タブ」 - 「画面リソースを追加」 - 「画面を新規作成」 - 「画面コンテンツ」を選択し、画面コンテンツ作成画面を表示します。
「画面コンテンツ」の「カテゴリ」 - 「検索」ボタンをクリックし「業務テンプレートから作成」を設定します。
「コンテンツID」に「tutorial_enquete_totalize」と設定します。
「コンテンツ名」に「【チュートリアル】アンケート集計画面」と入力します。
../../../_images/screen_total_info.png

「テンプレート」の「検索」ボタンをクリックし、「テンプレート選択」ダイアログを表示します。
../../../_images/screen_total_select_template.png

「テンプレート選択」ダイアログで登録した「【チュートリアル】アンケートテンプレート」を選択し登録します。
../../../_images/screen_total_info_comp.png

4.4.6.3. 画面コンテンツの作成

アプリケーション管理の「画面タブ」から「【チュートリアル】アンケート集計画面」を選択し、コンテンツ画面を開きます。
コンテンツ画面の「デザイン編集画面」をクリックし、デザイナ画面を開きます。
「【チュートリアル】アンケート回答画面」と同様の画面がデザイナ上に表示されます。
../../../_images/screen_total_init.png

4.4.6.3.1. 変数の設定

テンプレートで作成した変数を集計画面に必要な形式に変更します。
まずは、集計画面に不要な回答内容を格納する変数を削除します。
画面右側の「変数」タブを選択し、「$variable > answersData」を選択します。
bm_variable_delete をクリックし、変数を削除します。
../../../_images/screen_total_variable_delete.png

次に、アンケート回答取得処理からの返却データを格納する変数を作成します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「responseTotalData」と入力し、値の型を「マップ」に、代入値を「マップ」変更して「決定」ボタンをクリックします。
../../../_images/screen_total_variable_res.png

作成した「$variable > responseTotalData」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「records」と入力し、値の型を「マップ」に、配列の次元数を「1次元配列」、「配列の要素数」を「1」に変更して「決定」ボタンをクリックします。
../../../_images/screen_total_variable_record.png

作成した「$variable > responseTotalData > records > 0」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「enquete_id」と入力し、値の型を「文字列」に変更して「決定」ボタンをクリックします。
../../../_images/screen_total_variable_res_id.png

同様に「respondent」と「answer_date」を追加します。「respondent」は値の型を「文字列」に、「answer_date」は値の型を「日付・時刻」としてください。
../../../_images/screen_total_variable_res_other.png

最後に、回答内容を格納する値も追加します。「$variable > responseTotalData > records > 0」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「answers」と入力し、値の型を「文字列」に、配列の次元数を「1次元配列」、「配列の要素数」を「1」に変更して「決定」ボタンをクリックします。
これで、回答取得処理から取得したデータを格納する変数の作成は完了です。
../../../_images/screen_total_variable_res_answers.png

変数はJSON入力で以下を記載しても設定できます。
"responseTotalData": {
  "records": [
    {
      "enquete_id": "",
      "respondent": "",
      "answer_date": null,
      "answers": [
        ""
      ]
    }
  ]
}
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

次に、どの回答に何人が回答したのかを格納する変数を作成します。
「$variable」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「totalData」と入力し、値の型を「マップ」に、配列の次元数を「1次元配列」に、配列の要素数を「1」に変更して「決定」ボタンをクリックします。
../../../_images/screen_total_variable_total.png

作成した「$variable > totalData > 0」を選択し、 bm_variable_create_new をクリックして変数エディタを表示します。
変数エディタのキー名に「a1」と入力し、値の型を「整数」に、代入値に固定数値「0」に変更して「決定」ボタンをクリックします。
../../../_images/screen_total_variable_total_a1.png

同様の設定で、「a2」、「a3」、「a4」、「a5」を作成します。
../../../_images/screen_total_variable_total_all.png

変数はJSON入力で以下を記載しても設定できます。
"totalData": [
  {
    "a1": 0,
    "a2": 0,
    "a3": 0,
    "a4": 0,
    "a5": 0
  }
]
JSON入力する場合は、変数の bm_variable_json をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

これで、集計画面用の変数の設定が完了です。

4.4.6.3.2. 画面の修正

テンプレートで生成した画面項目を集計画面に変更していきます。
まずは、集計画面として不要な画面項目を削除します。
集計画面では、アンケートの回答は不要なため、回答成功画面を削除します。
エディタの「success」タブ右側に表示されている「×」をクリックし、回答成功画面を削除します。
../../../_images/screen_total_delete_success.png

次に、回答項目のラジオボタンを削除します。
回答項目のラジオボタンを選択し、DELETEキーを押すか画面上部の bm_delete をクリックしてください。
../../../_images/screen_total_delete_radio.png

同様の手順で、ラジオボタンを全て削除します。
../../../_images/screen_total_delete_all_radio.png

同じく、回答ボタンが不要なため、削除します。
回答ボタンを配置しているボックスを選択し、削除します。
../../../_images/screen_total_delete_button.png

4.4.6.3.3. 画面項目の追加

集計画面独自の画面項目を追加します。
集計画面では、どの選択肢に何人のユーザが回答したかを数値で表示します。
「レイアウト(Bulma)」 - 「カラム」を選択し、 画面中央に配置されている「カラムアイテム(繰り返し)」の中に配置された「カラム」アイテムの中央のカラムに配置します。
../../../_images/screen_total_set_column.png

画面右側「プロパティ」タブの「カラム」 - 「エレメント固有」 - 「elementCount」に「5」を指定します。
../../../_images/screen_total_column_param.png

次に、配置した「カラム」アイテムに選択した人が何人いるかを表示するラベルを追加します。
「汎用」 - 「ラベル」を選択し、先ほど配置したカラムの左端に配置します。
../../../_images/screen_total_set_label.png

画面右側「プロパティ」タブの「ラベル」 - 「エレメント固有」 - 「textContent」を「変数値」と設定します。
画面右側「プロパティ」タブの「ラベル」 - 「エレメント固有」 - 「textContent」の bm_search から「$variable > totalData[0] > a1」を選択します。
../../../_images/screen_total_label_set_value.png

同様に5つのカラム全てにラベルを配置していきます。
変数値は左から「$variable.totalData[$index].a1」、「$variable.totalData[$index].a2」、「$variable.totalData[$index].a3」、「$variable.totalData[$index].a4」、「$variable.totalData[$index].a5」となるように設定します。
これで、画面の表示の修正は完了です。

4.4.6.3.4. アクションの追加、修正

次は、アクションの追加や修正を行います。
まずは、集計画面には不要なアクションを削除します。
画面右側の「アクション」タブをクリックします。
アクション一覧の中から、「answer」を選択し、 bm_action_delete をクリックしてアクションを削除します。
../../../_images/screen_total_delete_action.png

次に、画面表示時に集計結果を取得するアクションを作成します。
bm_action_create_new をクリックし、アクションエディタを表示、名称を「新しいアクション」から「total」に変更します。
まずは、設問項目に合わせて、集計項目の配列を作成するためのカスタムスクリプトを作成します。
「標準」 - 「カスタムスクリプトを実行する」を選択し、アクションの最初に配置します。
カスタムスクリプトの入力欄に以下を設定します。
let template = {"a1":0,"a2":0,"a3":0,"a4":0,"a5":0};
for(let i = 1; i < $variable.responseData.records.length; i++){
  $variable.totalData.push(template);
}
../../../_images/screen_total_action.png

これで、取得した設問項目数に合わせて回答の集計結果を格納する変数の配列が作れるようになりました。
次に、回答結果を取得する業務ロジックを呼び出します。
「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング〇にリクエストを送信する」を選択し、先ほど作成したカスタムスクリプトの次に配置します。
bm_search から「tutorial_enquete/answer/list」を選択します。
リクエストパラメータとして「$variable > entity」をレスポンスデータとして「$variable > responseTotalData」を設定します。
../../../_images/screen_total_action_flow.png

取得した回答結果からどの選択肢を何人選択したかを集計するカスタムスクリプトを作成します。
「標準」 - 「カスタムスクリプトを実行する」を選択し、アクションの最後に配置します。
カスタムスクリプトの入力欄に以下を設定します。
for(let i = 0; i < $variable.responseTotalData.records.length; i++){
  let record = $variable.responseTotalData.records[i]

  for(let j = 0; j < record.answers.length; j++){
    switch (record.answers[j]){
      case "1":
        $variable.totalData[j].a1++;
        break;
      case "2":
        $variable.totalData[j].a2++;
        break;
      case "3":
        $variable.totalData[j].a3++;
        break;
      case "4":
        $variable.totalData[j].a4++;
        break;
      case "5":
        $variable.totalData[j].a5++;
        break;
    }
  }
}
../../../_images/screen_total_action_script.png

これで、集計結果を取得するアクションが作成できました。
作成した「total」アクションを初期表示で呼び出すように修正します。
「アクション」タブの「init」アクションの bm_action_edit をクリックし、アクションエディタを表示します。
「標準」 - 「アクション〇を実行する」を選択し、initアクションの「ラベル(END)」の上に配置します。
../../../_images/screen_total_action_init.png

アクションに「total」を設定します。
../../../_images/screen_total_action_select_total.png

回答の初期表示設定を行うカスタムスクリプトは不要なので削除します。
「IM-LogicDesigner フロールーティング(tutorial_enquete/question)にリクエストを送信する」 の下に配置されたカスタムスクリプトの bm_action_delete をクリックして削除します。
../../../_images/screen_total_action_delete_custom.png

これで、集計画面の完成です。次のページからは作成した画面にアクセスするためのURL設定を行います。