2019-12-23このCookBookでは、IM-BloomMakerの繰り返しエレメントと変数の使い方について紹介しています。サンプルでは、1・2・3次元配列の変数を使用して繰り返しエレメントを表示します。完成イメージ完成サンプル以下の完成サンプルをダウンロードしてご活用ください。im_cookbook_163289.zipIM-BloomMakerのインポート機能からインポートしてください。定義ファイルをインポートするレシピこのレシピでは、「繰り返し」エレメントにおける変数の使い方を紹介します。エレメントを配置する変数を作成するエレメントのプロパティに変数を設定する1.エレメントを配置する1次元配列エレメントパレットの「レイアウト」からコンテナに「見出しレベル1」を配置してください。「見出しレベル1」のエレメント固有「textContent」に「ボックス(繰り返し)1次元配列」を入力してください。エレメントパレットの「繰り返し」からコンテナに「ボックス(繰り返し)」を配置してください。エレメントパレットの「フォーム」から「ボックス(繰り返し)」に「テキスト入力を配置」してください。このエレメントは変数の値を表示するために使用します。2次元配列エレメントパレットの「レイアウト」からコンテナに「見出しレベル1」を配置してください。「見出しレベル1」のエレメント固有「textContent」に「テーブル(繰り返し)2次元配列」を入力してください。エレメントパレットの「繰り返し」からコンテナに「テーブル(繰り返し)」を配置してください。テーブル(繰り返し)」のエレメント固有を設定します。今回は3列のヘッダ無しの「テーブル(繰り返し)」を表示するのでエレメント固有の「showHeader」チェックボックスのチェックを外し、「columnCount」に「3」を入力してください。エレメントパレットの「フォーム」から「テーブル(繰り返し)」の3セル全ての中に「テキスト入力」を配置してください。このエレメントは変数の値を表示するために使用します。3次元配列エレメントパレットの「レイアウト」からコンテナに「見出しレベル1」を配置してください。「見出しレベル1」のエレメント固有「textContent」に「ボックス(繰り返し)3次元配列」を入力してください。エレメントパレットの「繰り返し」からコンテナに「ボックス(繰り返し)」を配置してください。先に配置した「ボックス(繰り返し)」の中に「ボックス(繰り返し)」を入れ子になるように2つ配置してください。エレメントパレットの「フォーム」から入れ子の「ボックス(繰り返し)」の中に「テキスト入力」を配置してください。このエレメントは変数の値を表示するために使用します。変数を作成する変数エディタで1・2・3次元配列の変数を作成してください。変数エディタの詳細は以下のドキュメントをご参照ください。変数の設定方法JSONエディタに下記のコードを入力することで変数を作成することができます。[[["000","001"],["010","011"]],[["100","101"],["110","111"]],[["200","201"],["210","211"]]]}JSONエディタから変数を設定する方法は以下のドキュメントをご参照ください。エレメントのプロパティに変数を設定する手順2で作成した変数をエレメントのプロパティに設定します。繰り返しエレメントにはエレメント固有の「list」に「$variable.変数名」を設定します。変数表示用の「テキスト入力」にはエレメント固有の「value」に「$variable.変数名[添え字]」を設定します。「ボックス(繰り返し)」に1次元配列を設定します「ボックス(繰り返し)」を選択します。エレメント固有の「list」に「$variable.1dim」を入力します。「ボックス(繰り返し)」に配置した「テキスト入力」を選択します。エレメント固有の「value」を変数値にして「$variable.1dim[$index]」を入力します。「テーブル(繰り返し)」に2次元配列を設定します「テーブル(繰り返し)」を選択します。エレメント固有の「list」に「$variable.2dim」を入力します。「テーブル(繰り返し)」に配置した1列目の「テキスト入力」を選択します。エレメント固有の「value」を変数値にして「$variable.2dim[$index][0]を入力します。同様に他の「テキスト入力」の「value」を入力します。入力値は「$variable.2dim[$index][列番号]」です。3列目の入力値は「$variable.2dim[$index][2]」です。「ボックス(繰り返し)」に3次元配列を設定します一番外側の「ボックス(繰り返し)」を選択します。エレメント固有の「list」に「$variable.3dim」を入力します。入れ子の「ボックス(繰り返し)」を選択します。エレメント固有の「list」に$variable.3dim[$index]を入力します。同様にもう一つの入れ子も選択し、エレメント固有の「list」に$variable.3dim[$index]を入力します。「ボックス(繰り返し)」に配置した「テキスト入力」を選択します。エレメント固有の「value」を変数値にして$variable.3dim[$index.2][$index.1][$index]を入力します。プロパティの詳細と設定は以下のドキュメントをご参照ください。プロパティの詳細と設定$index,$index.1,$index.2は配列の添え字を表す変数です。サンプルの表示値は配列の添え字と等しいものになっていますので$indexがどのように展開されるのかを確認することができます。2次元配列の例では「テーブル(繰り返し)」を使用しました。「テーブル(繰り返し)」では$indexは行の添え字です。列の添え字は数値で指定します。3次元配列の例では「ボックス(繰り返し)」エレメントを入れ子にしました。入れ子にした繰り返しエレメントに設定した配列の添え字は、入れ子にしたループのように処理されます。