4.4.5. 回答画面の作成¶

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

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

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

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

次に、アンケートの基本情報を格納するための変数を作成します。

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

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

"responseData": {
  "records": [
    {
      "question": "",
      "right_scale": "",
      "left_scale": ""
    }
  ],
  "enqueteTitle": "",
  "enqueteOverview": ""
}

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

次に、アンケート情報取得処理に対して送信する値を格納するための変数を作成します。

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

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

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

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

"entity": {
  "enqueteId": ""
}

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

次に、アンケート回答登録処理に対して送信する、アンケートの回答内容を格納するための変数を作成します。

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

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

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

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

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

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

"answersData": {
  "enqueteId": "",
  "answers": []
}

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

エラー画面に表示するメッセージを格納するための変数を作成します。

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

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

"errorMessage": ""

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

初期表示時に設定される入力を設定します。

「変数」タブのプルダウンで「変数」を「入力」に変更します。

「$input」を選択し、 をクリックして入力エディタを表示します。

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

入力値はJSON入力で以下のコードを記載しても設定できます。

"enqueteId": ""

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

変数設定の最後に、エラー発生時に表示するメッセージを「定数」で設定します。

「変数」タブのプルダウンで「入力」を「定数」に変更します。

まずは、アンケートIDが設定されなかった場合に表示するエラーメッセージを設定します。

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

定数エディタのキー名に「error_no_id」と入力し、値の型を「文字列」、代入値のラジオボタンを「固定文字列」にして入力エリアに「アンケートIDが設定されていません。」と設定し、「決定」をクリックします。

次に、存在しないアンケートIDが指定された場合に表示するエラーメッセージを設定します。

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

定数エディタのキー名に「error_enquete_missing」と入力し、値の型を「文字列」、代入値のラジオボタンを「固定文字列」にして入力エリアに「アンケートが存在しません。」と設定し、「決定」をクリックします。

{
  "error_no_id": "アンケートIDが設定されていません。",
  "error_enquete_missing": "アンケートが存在しません。"
}

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

配置した「見出しレベル1」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」のラジオボタンを「変数値」へと変更し、 をクリックします。

配置した「見出しレベル5」をクリックし、画面右側の「プロパティ」タブ - 「エレメント固有」 - 「textContent」のラジオボタンを「変数値」へと変更し、 から「$variable > responseData > enqueteOverview」を設定します。

次に、「カラムアイテム（繰り返し）」を選択します。

「カラムアイテム（繰り返し）」 - 「エレメント固有」 - 「list」 の から「$variable > responseData > records」を設定します。

配置したラジオボタンの設定を行います。

配置した「ラジオボタン」をクリックし、画面右側の「プロパティ」タブ - 「ラジオボタン」 - 「エレメント固有」 - 「textContent」の値を削除します。

「プロパティ」タブ - 「ラジオボタン」 - 「エレメント固有」 - 「value」に「1」と設定します。

「プロパティ」タブ - 「ラジオボタン」 - 「余白」 - 「外余白（左）」に「2rem」と設定します。

「プロパティ」タブ - 「ラジオボタン」 - 「エレメント固有」 - 「selected」のラジオボタンを「変数値」へと変更し、 から「$variable > answersData > answers」を設定します。

「selected」のテキストエリアから、選択した変数の文字列の最後に[$index]と追記し、「$variable.answersData.answers[$index]」となるようにします。

コラム

「繰り返し」のエレメントを利用すると、配列の変数を利用して配列の数だけエレメントが表示されます。

「繰り返し」のエレメントに配置した要素に対して変数を設定する場合、配列の添え字として「$index」を指定することにより、繰り返しに合わせた変数値へと変換されます。

詳細については、以下のCookBookを参照してください。

「IM-BloomMaker 繰り返しエレメントでの変数の使い方」

設問は5スケールでの回答を想定しているため。作成したラジオボタンをコピーします。

ラジオボタンをクリックし、画面上部の かキーボードのCtrl＋Cでコピーします。

すでにラジオボタンが配置されているカラムアイテムをクリックし、画面上部の かキーボードのCtrl＋Vでラジオボタンが5つ並ぶまで貼り付けを繰り返します。

画面右側の「プロパティ」タブ - 「水平フィールドラベル」 - 「エレメント固有」 - 「label」のラジオボタンを「変数値」へと変更し、 から「$variable > responseData > records > 0 > question」を設定します。

配置した「ラベル」をクリックし、画面右側の「プロパティ」タブ - 「ラベル」 - 「エレメント固有」 - 「textContent」のラジオボタンを「変数値」へと変更し、 から「$variable > responseData > records > 0 > left_scale」を設定します。

配置した「ラベル」をクリックし、画面右側の「プロパティ」タブ - 「ラベル」 - 「エレメント固有」 - 「textContent」のラジオボタンを「変数値」へと変更し、 から「$variable > responseData > records > 0 > right_scale」を設定します。

「textContent」の変数の入力ボックスにフォーカスし、変数文字列のrecords[0]の部分をrecords[$index]へ変更します。

次に、画面で実行されるアクションを設定します。

アクションは初期表示時に実行されるアクションと、回答の登録時に実行されるアクションの2種類作成します。

まずは、初期表示アクションから作成していきます。

画面右側の「アクション」タブを選択し、 をクリックしてアクションエディタを表示します。

配置したアクションの変数の から「変数 > $variable > entity > enqueteId」を選択し、「決定」をクリックします。

代入値の「abc▼」をクリックし、入力値の種類を固定値から変数値へと変更します。

から「入力 > $input > enqueteId」を選択します。

配置した「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の をクリックし、IM-LogicDesigner フロールーティング定義検索ダイアログから「tutorial_enquete/question」を選択します。

設定した業務ロジックにアンケートIDを渡すために、リクエストパラメータの から「変数 > $variable > entity」を設定します。

業務ロジックからデータを受け取るために、レスポンスデータの から「変数 > $variable > responseData」を設定します。

ここまでで、アンケート情報を取得し画面に表示できるようになりました。一度、動作確認を行いましょう。

アクションエディタ下部の決定ボタンをクリックし、ここまで作成したアクション処理を登録します。

「init」アクションを画面の初期表示時に呼び出す設定を行います。

画面上部の をクリックします。

次に、試験用のデータを設定するため、画面右側の「変数」タブを選択し、プルダウンから「入力」の表示に切り替えます。

「$input > enqueteId」の をクリックし、代入値のラジオボタンを「固定文字列」に切り替えて「tutorial_es_enquete」と設定します。

※概要で設定したサンプルデータです。サンプルデータが存在しない場合は、tutorial_enquete_question_appテーブルにデータを登録してください。

入力値を登録したら、画面上部の をクリックします。

アクション設定を続けます。

画面右側の「アクション」タブを選択し、「init」アクションの をクリックしてアクションエディタを表示します。

回答を入れるための配列を作成します。また、初期値として中心の3が選択されるようにします。

「アクション」タブから「標準」 - 「カスタムスクリプトを実行する」を選択し、「IM-LogicDesigner フロールーティング〇にリクエストを送信する」の次に配置します。

for(let i = 0; i < $variable.responseData.records.length; i++){
  $variable.answersData.answers.push(3);
}