IM-BloomMaker TreeViewの作成方法 | intra-mart Developer Site

この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": [

{

"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	子ノードを持っているか

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

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

$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

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

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

});

5. ツリー表示の設定

「ボタン要素」を選択し、イベントの「クリック時」に先程作成したアクション「Open/Close tree」を設定してください。
続けて、CSSクラスの「クラス名」に変数値$variable.tree[$index].cssClassを設定してください。
「テーブルセル」を選択し、共通の「表示/非表示」に変数値$variable.tree[$index].displayを設定してください。
左側のフレックスアイテムを選択し、余白の「外余白（左）」に変数値$variable.tree[$index].marginを設定してください。
「CSS編集」アイコンをクリックしてください。
CSSエディタに以下を貼り付けてください。
プレビューで確認します。
ツリーの開閉ができるようになりました。

さいごに

このCookBookでは、TreeViewのような動きをするサンプルの作成方法を紹介しました。
各ノードは自由に増やしたり減らしたりできるので、是非試してみてください。