IM-BloomMaker TreeViewの作成方法

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になったコンテンツ種別「Bulma」で TreeViewのような動きをするサンプルの作成方法を紹介します。

完成イメージ

各アイテム（=ノード）の左側のボタンをクリックすることでツリーを開閉することができます。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。 IM-BloomMaker インポートデータ： cookbook_190350_bloommaker-data IM-BloomMaker のインポート画面からインポートしてください。

レシピ

エレメントの配置
変数の作成
初期表示の設定
アクションの作成
ツリー表示の設定

1. エレメントの配置

コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。
「繰り返し（Bulma）」カテゴリにある「テーブルコンテナ(繰り返し)」を配置してください。
「テーブルコンテナ(繰り返し)」の中ある「テーブル(繰り返し)」を選択して、以下のプロパティを設定してください。
- showHeader（固定値）：チェックを外す
- hoverable（固定値）：チェックを外す
- columnCount：1
「レイアウト」カテゴリにある「フレックスコンテナ」を配置してください。
「フレックスコンテナ」を選択して、以下のプロパティを設定してください。
- alignItems（固定値）：center
- elementCount：2
左側の「フレックスアイテム」を選択して、以下のプロパティを設定してください。
- flexGrow：0
「フォーム部品（Bulma）」カテゴリにある「ボタン」を左側の「フレックスアイテム」の中に配置し、「汎用」カテゴリにある「ラベル」を右側の「フレックスアイテム」の中に配置してください。

これで必要なエレメントの配置は完了しました。

2. 変数の作成

ここでは、以下の変数を作成していきます。

変数	説明
root childNode grandChildNode_1 grandChildNode_2	ノードの情報を格納する変数です。
tree childTree	ツリーの情報を格納する変数です。
selectedParentId	クリックしたノードのIDを格納する変数です。この値によってツリーの情報が更新されます。

「変数」タブをクリックし、プルダウンの「変数」が選択されていることを確認してから「JSON形式で編集」アイコンをクリックしてください。
「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

{ "root": [ { "id": "root", "parentId": "root", "name": "root", "childFlag": true } ], "childNode": [ { "id": "node_1", "parentId": "root", "name": "node1", "childFlag": true }, { "id": "node_2", "parentId": "root", "name": "node2", "childFlag": true } ], "grandChildNode_1": [ { "id": "node_1-1", "parentId": "node_1", "name": "node1-1", "childFlag": false }, { "id": "node_1-2", "parentId": "node_1", "name": "node1-2", "childFlag": false } ], "grandChildNode_2": [ { "id": "node_2-1", "parentId": "node_2", "name": "node2-1", "childFlag": false }, { "id": "node_2-2", "parentId": "node_2", "name": "node2-2", "childFlag": false } ], "tree": [ { "id": "", "parentId": "", "name": "", "childFlag": true, "depth": 0, "margin": "", "iconClass": "", "cssClass": "", "display": true, "displayChild": true, "existsChildFlag": true } ], "childTree": [ { "id": "", "parentId": "", "name": "", "childFlag": true, "depth": 0, "margin": "", "iconClass": "", "cssClass": "", "display": true, "displayChild": true, "existsChildFlag": true } ], "selectedParentId": "" }

root、childNode、grandChildNode_1、grandChildNode_2について、それぞれのパラメータの意味は以下のとおりです。

パラメータ説明
id ノードを一意に識別するID
parentId 親ノードのID
name ノードの表示名
childFlag 子ノードを持っているか

パラメータ	説明
id	ノードを一意に識別するID
parentId	親ノードのID
name	ノードの表示名
childFlag	子ノードを持っているか

3. 初期表示の設定

「テーブル(繰り返し)」を選択し、以下のプロパティを設定してください。
- list：$variable.tree
「ボタン」の中にある「ボタン要素」を選択し、以下のプロパティを設定してください。
- textContent（固定値）：（データなし）
- color（固定値）：white
- leftIconClass（変数値）：$variable.tree[$index].iconClass
「ラベル」を選択して、以下のプロパティを設定してください。
- textContent（変数値）：$variable.tree[$index].name
「アクション」タブをクリックし、「新規作成」アイコンをクリックしてください。アクション名は「Initialize」としてください。
「標準」カテゴリの「変数◯に◯を代入する」を配置してください。
代入先に$variable.tree、代入元に変数値$variable.rootを設定してください。
「標準」カテゴリの「カスタムスクリプトを実行する」を配置し、以下のコードを貼り付けてください。

$variable.tree.forEach((value) => { value.depth = 0 value.margin = String(value.depth) + "rem" value.iconClass = "fas fa-angle-right" value.display = true; value.displayChild = false; value.existsChildFlag = false; });
「コンテナを選択」アイコンをクリックし、イベントのページ読み込み時に先程作成したアクション「Initialize」を設定してください。
プレビューで確認します。まずは初期値の「root」を表示することができました。

4. アクションの作成

ここでは、以下のアクションを作成していきます。

アクション	説明
Set tree data	子ノードの情報をツリーにセットするアクションです。「Open/Close tree」内で利用します。
Open/Close tree	ボタンをクリックしたときに呼ばれるアクションです。ツリーの開閉の設定を行います。

「アクション」タブをクリックし、「新規作成」アイコンをクリックしてください。
アクション名は「Set tree data」とし、「標準」カテゴリの「変数◯に◯を代入する」を配置してください。
代入先に$variable.childTree、代入元に変数値$variable.childNodeを設定してください。
「実行条件タブ」の「標準」カテゴリから、「変数◯が◯のとき」を配置してください。
比較元に$variable.selectedParentId、比較先に固定値rootを設定してください。
「変数◯に◯を代入する」をさらに2つ配置してください。
以下のように設定してください。
- 変数$variable.childTreeに変数値$variable.grandChildNode_1を代入する
  - 実行条件：変数$variable.selectedParentIdが固定値node_1のとき
- 変数$variable.childTreeに変数値$variable.grandChildNode_2を代入する
  - 実行条件：変数$variable.selectedParentIdが固定値node_2のとき
「新規作成」アイコンをクリックしてください。
アクション名は「Open/Close tree」とし、「標準」カテゴリの「変数◯に◯を代入する」を配置してください。
代入先に$variable.selectedParentId、代入元に変数値$variable.tree[$index].idを設定してください。
「標準」カテゴリの「アクション◯を実行する」を配置し、アクションに先程作成した「Set tree data」を設定してください。
「標準」カテゴリの「カスタムスクリプトを実行する」を配置し、以下のコードを貼り付けてください。

$variable.childTree.forEach((value) => { value.displayChild = false; value.existsChildFlag = false; }); const index = $im.resolve('$index'); const tree = $im.resolve('$variable.tree'); Array.prototype.splice.apply(tree,[index+1,0].concat($im.resolve('$variable.childTree'))); $variable.tree = tree;
「実行条件」タブをクリックし、「標準」カテゴリの「上記カスタムスクリプトの返却値が true のとき」を配置し、以下のコードを貼り付けてください。

return !$im.resolve('$variable.tree[$index].existsChildFlag');
「アクション」タブに戻り、「標準」カテゴリの「カスタムスクリプトを実行する」をもう1つ配置し、以下のコードを貼り付けてください。

const index = $im.resolve('$index'); $variable.tree[index].displayChild = !$variable.tree[index].displayChild; if (!$variable.tree[index].existsChildFlag) $variable.tree[index].existsChildFlag = true; $variable.tree.forEach((value) => { const parentIndex = $variable.tree.findIndex(tree => value.parentId === tree.id); if (value.id !== value.parentId) { value.depth = $variable.tree[parentIndex].depth + 1; value.margin = String(value.depth) + "rem"; value.display = $variable.tree[parentIndex].displayChild; } if (!value.childFlag) value.cssClass = "bottomLayer"; if (!value.display) value.displayChild = false; value.displayChild ? value.iconClass = "fas fa-angle-down" : value.iconClass = "fas fa-angle-right"; });