CookBook

IM-BloomMaker Bulma タイルの利用方法

投稿日:

この CookBook では、 2020 Summer でリリースした Bulma の「タイル」エレメントの利用方法について説明していきます。

「タイル」エレメントは自由にグリッドレイアウトを構築するためのエレメントです。
Bulma のタイルについては以下の公式ドキュメントも参考にしてください。
https://bulma.io/documentation/layout/tiles/

完成イメージ

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

IM-BloomMaker インポートデータ : cookbook_184067_bloommaker_data

サンプルは以下の環境で動作を確認できます。

  • intra-mart Accel Platform(Advanced) 2020 Summer(8.0.26)以降のバージョンであること

はじめに

まず初めに「タイル」エレメントを利用するにあたって、一番のポイントとなるのがエレメントのネストです。
「タイル」エレメントには contextual プロパティがあります。
このプロパティには ancestor (祖先)、parent (親)、child (子) があります。
プロパティの設定でエレメントのクラスに、is-ancestor、is-parent、is-child が付与されます。
利用するには必ず最低でも下記のような3階層にする必要があります。

[code lang=text]
tile is-ancestor
|
└──── tile is-parent
 |
 └──── tile is-child
[/code]

レシピ

初めから完成イメージの様に作成するのは難易度が少し高いので、
このレシピでは、基礎編と応用編に分けて紹介します。

  1. 基礎編
  2. ネスト構造のポイント
  3. 応用編
  4. タイルレイアウトを作成するポイント

1. 基礎編

ファーストステップ

一番シンプルなタイルレイアウトを作成します。

  1. 「タイル」エレメントを配置します。

  2. 入れ子になるように「タイル」エレメントを2つ配置する。
    最初に説明した通り3階層にする必要があるので入れ子にします。

  3. contextual プロパティを設定します。
    1階層目の「タイル」エレメントを ancestor にします。

    2階層目の「タイル」エレメントを parent にします。

    3階層目の「タイル」エレメントを child にします。

  4. 「段落」エレメントを3階層目の「タイル」エレメントの中に配置します。
    文字などのコンテンツの表示は「段落」エレメントを使用します。

    これで基本的な設定は完了です。
    最後にデザインを分かりやすくするために色を付けます。

  5. 3階層目の「タイル」エレメントの color プロパティを success にします。

  6. プレビューで確認します。
    レイアウトを分かりやすくするため1階層目の「タイル」エレメントに余白(margin)を 5px ずつ設定してプレビューで確認します。

以上が基本的な使い方です。

セカンドステップ

縦並びのタイルレイアウトを作成します。

新規でタブを作成し、進めていきます。

  1. 「タイル」エレメントを配置します。

  2. 縦に2分割になるように、「タイル」エレメントを2つ配置します。

  3. 左側の「タイル」エレメント配下に「タイル」エレメントを2つ配置します。

  4. 右側の「タイル」エレメント配下に「タイル」エレメントを1つ配置します。

    これで配置は完了です。次に階層を設定します。

  5. contextual プロパティを設定します。
    1階層目の「タイル」エレメントを ancestor にします。

    2階層目の「タイル」エレメントを parent にします。
    左側

    右側

    3階層目の「タイル」エレメントを childにします。
    左側

    中央

    右側

  6. 「タイル」エレメントが縦に並ぶように、vertical プロパティにチェックを付けます。
    縦並びのタイルレイアウトを作りたい場合は、親要素の vertical プロパティにチェックを付けます。
    こうすることで子要素が縦並びになります。

    これでレイアウトがイメージのようになりました。

  7. 「段落」エレメントを3階層目の「タイル」エレメントの中にそれぞれ配置します。

  8. 3階層目の「タイル」エレメントの color プロパティを 左上から半時計周りに info、success、warning にします。

    プレビュー

    完成図と「タイル」のサイズが違うのでサイズを変更します。

  9. 左側の「タイル」のサイズを変更します。
    左側の「タイル」エレメントの horizontalSize を4にします。

    「タイル」の大きさは、グリッドシステムと同様に「is-大きさ」のクラスを追加することで設定できます。
    ここでは horizontalSize を4にしたことで、is-4 のクラスが付与され、4/12 のサイズになりました。

  10. プレビューで確認します。
    レイアウトを分かりやすくするため1階層目の「タイル」エレメントに余白(margin)を 5px ずつ設定してプレビューで確認します。

以上が縦並びのタイルレイアウトを作成する方法です。

2. ネスト構造のポイント

  • 大元の「タイル」を ancestor にする
  • 最下層の「タイル」を child にする
  • child の下には「タイル」を作成しない
  • child の親要素を parent にする
    このルールを守ればいくらでもネストできます。

3. 応用編

では、基本編とネスト構造のポイントを踏まえたうえで完成イメージのレイアウトを作成します。
新規でタブを作成し、進めていきます。

  1. 「タイル」エレメントを配置し、contextual を ancestor にします。

  2. レイアウト決めます。
    まず以下のように大きく2分割できるので、「タイル」エレメントを2つ配置します。


    左側は以下のように2分割できるので、「タイル」エレメントを2つ配置し、縦並びになるようにします。

    「タイル」エレメントを2つ配置します。

    「タイル」エレメントが縦に並ぶように、vertical プロパティにチェックを付けます。

    さらに以下のように2分割できるので、「タイル」エレメントを2つ配置します。


    今配置した左側の「タイル」エレメントは以下のように2分割できるので、「タイル」エレメントを2つ配置し、縦並びになるようにします。

    「タイル」エレメントを2つ配置します。

    「タイル」エレメントが縦に並ぶように、vertical プロパティにチェックを付けます。

    これでレイアウトは完成イメージにだいぶ近づきました。

  3. contextual プロパティを設定します。
    ネスト構造のポイントを踏まえながら設定します。
    まず最下層の全ての「タイル」エレメントを child にします。

    選択しているものが最下層の「タイル」エレメントです。

    次に child の親要素を parent にします。

    ここで問題になるのが、parent にすると parent の親に parent ができてしまう要素があります。

    上記の図で選択している親要素であるここを parent にすると、

    下記の図で選択している要素に対して parent > parent の関係になってしまいます。

    parent の親を parent にはできないので、「タイル」エレメントを1つ配置し parent にします。


    また、下記の child の親要素を parent にすると、parent の配下に child 以外の要素ができてしまいます。
    これを回避するため「タイル」エレメントを1つ配置し parent にします。

    「タイル」エレメントを1つ配置し parent にします。


    最後の child 要素は parent がないので、「タイル」エレメントを1つ配置し parent にします。

  4. 「タイル」のサイズを変更します。

  5. 「段落」エレメントを child の「タイル」エレメントの中にそれぞれ配置します。

  6. child の「タイル」エレメントの color プロパティを設定します。

  7. プレビューで確認します。
    レイアウトを分かりやすくするため1階層目の「タイル」エレメントに余白(margin)を 5px ずつ設定してプレビューで確認します。

以上で完了です。

4. タイルレイアウトを作成するポイント

  • 大元の「タイル」を用意し、ancestor にする
  • 大元の「タイル」(ancestor) の中に必要な数だけ「タイル」を配置する
  • 縦並びにする要素は vertical にする
  • それぞれの「タイル」の大きさを指定する
  • 大元の「タイル」(ancestor) から見て、最下層の「タイル」を child にする
  • child の親要素を parent にする
  • parent の子要素は child のみ配置可能
    • child は複数配置可能

さいごに

ネストや contextual プロパティの親子関係が難しそうなイメージですが、
ポイントを踏まえればそこまで難しくはありません。
是非、使用してみてください。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローを一括申請する方法

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローを一括申請する方法を説明します。 完成イメージ ① グリッドテーブルの各行を、それぞれ案件として …

no image

ウォッチ機能のご紹介

このCookBookでは「intra-mart Accel Collaboration」に備わっているウォッチ機能のご紹介です。 各会社様でグループで仕事をする機会が多いと思います。 仕事を行う上で、 …

IM-Workflowで案件の参照権限を付与する方法

IM-Workflowで申請者や承認者以外で、案件を参照する方法をご紹介いたします。 申請者や承認者以外で、案件を参照する方法は、下記の2つの方法があります。設定方法や参照するための仕様が異なるため、 …

申請一覧画面のブックマークを事前に登録する方法

このCookBookでは、申請一覧 のブックマークを事前に登録する方法をご紹介します。 ブックマークは、以下のテーブルにデータを登録することで設定できます。 imw_t_bookmark_flow ブ …

no image

No.9 音声認識からスケジュール登録

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerと音声認識(Web Speech API)の仕組みを利用して、音 …