4.4.6. 集計画面の作成¶

テンプレートで作成した変数を集計画面に必要な形式に変更します。

まずは、集計画面に不要な回答内容を格納する変数を削除します。

画面右側の「変数」タブを選択し、「$variable > answersData」を選択します。

をクリックし、変数を削除します。

次に、アンケート回答取得処理からの返却データを格納する変数を作成します。

「$variable」を選択し、 をクリックして変数エディタを表示します。

変数エディタのキー名に「responseTotalData」と入力し、値の型を「マップ」、代入値を「マップ」に変更して「決定」をクリックします。

作成した「$variable > responseTotalData」を選択し、 をクリックして変数エディタを表示します。

変数エディタのキー名に「records」と入力し、値の型を「マップ」、配列の次元数を「1次元配列」、配列の要素数を「1」に変更して「決定」をクリックします。

作成した「$variable > responseTotalData > records > 0」を選択し、 をクリックして変数エディタを表示します。

変数エディタのキー名に「enquete_id」と入力し、値の型を「文字列」に変更して「決定」をクリックします。

最後に、回答内容を格納する変数を追加します。「$variable > responseTotalData > records > 0」を選択し、 をクリックして変数エディタを表示します。

変数エディタのキー名に「answers」と入力し、値の型を「文字列」、配列の次元数を「1次元配列」、配列の要素数を「1」に変更して「決定」をクリックします。

これで、回答取得処理で取得したデータを格納する変数の作成は完了です。

"responseTotalData": {
  "records": [
    {
      "enquete_id": "",
      "respondent": "",
      "answer_date": null,
      "answers": [
        ""
      ]
    }
  ]
}

JSON入力する場合は、変数の をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

次に、どの回答に何人が回答したのかのデータを格納する変数を作成します。

「$variable」を選択し、 をクリックして変数エディタを表示します。

変数エディタのキー名に「totalData」と入力し、値の型を「マップ」、配列の次元数を「1次元配列」、配列の要素数を「1」に変更して「決定」をクリックします。

作成した「$variable > totalData > 0」を選択し、 をクリックして変数エディタを表示します。

変数エディタのキー名に「a1」と入力し、値の型を「整数」、代入値のラジオボタンを「固定数値」にしてから「0」を設定し、「決定」をクリックします。

"totalData": [
  {
    "a1": 0,
    "a2": 0,
    "a3": 0,
    "a4": 0,
    "a5": 0
  }
]

JSON入力する場合は、変数の をクリックして「JSONエディタ」を表示してください。また、JSON形式での入力の際には型が上記の表と誤りが無いか注意してください。

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

次は、アクションの追加や修正を行います。

まずは、集計画面には不要なアクションを削除します。

画面右側の「アクション」タブをクリックします。

アクション一覧の中から、「answer」を選択し、 をクリックしてアクションを削除します。

次に、画面表示時に集計結果を取得するアクションを作成します。

をクリックしてアクションエディタを表示し、名称を「新しいアクション #1」から「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);
}

これで、取得した設問項目数に合わせて回答の集計結果を格納する変数の配列が作れるようになりました。

次に、回答結果を取得する業務ロジックを呼び出します。

「IM-LogicDesigner」 - 「IM-LogicDesigner フロールーティング〇にリクエストを送信する」を選択し、先ほど作成したカスタムスクリプトの次に配置します。

から「tutorial_enquete/answer/list」を選択します。

リクエストパラメータとして「$variable > entity」をレスポンスデータとして「$variable > responseTotalData」を設定します。

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;
    }
  }
}

以上の設定ができたら「決定」をクリックして、アクション設定を終了します。

これで、集計結果を取得するアクションが作成できました。

作成した「total」アクションを初期表示で呼び出すよう修正します。

「アクション」タブの「init」アクションの をクリックし、アクションエディタを表示します。

「標準」 - 「アクション〇を実行する」を選択し、initアクションの「ラベル（END）」の上に配置します。

回答の初期表示設定を行うカスタムスクリプトは不要なので削除します。

「IM-LogicDesigner フロールーティング（tutorial_enquete/question）にリクエストを送信する」 の下に配置された「カスタムスクリプトを実行する」の をクリックして削除します。

以上の設定ができたら、「決定」をクリックしてアクションエディタを閉じます。

最後に画面上部の で編集内容を保存してください。

これで、集計画面の完成です。

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