CookBook

IM-BloomMaker Modifier の使い方

投稿日:

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。
modifier は、同じく 2020 Summer から利用可能になったコンテンツ種別「Bulma」を使用している場合のみ参照できる情報です。
modifier には CSS フレームワーク「Bulma」が提供している CSS Class の一部が定義されており、この情報を用いることで独自に CSS を定義しなくとも文字や背景の色を変えたり、レスポンシブな画面を作成できます。

$env.modifier の内容

modifier には以下の情報が含まれています。

名前 説明
color 文字色に関する Class が定義されています。
backgroundColor 背景色に関する Class が定義されています。
hide エレメント非表示用の Class が定義されています。

使い方

modifier のそれぞれの情報の使い方について説明します。

  1. color と backgroundColor の使い方
  2. hide の使い方

1. color と backgroundColor の使い方

color は文字の色を指定し、backgroundColor は背景色を指定できます。
今回は、以下のようなボックスとラベルエレメントに背景色と文字色を設定してみます。

  1. コンテンツ種別「Bulma」のコンテンツを作成し、デザイナ画面を開いてください。
  2. パレットの「レイアウト(Bulma)」カテゴリの「ボックス」エレメントをページに配置してください。

  3. パレットの「汎用」カテゴリの「ラベル」エレメントを「ボックス」エレメントの配下に配置してください。

  4. 右ペインの変数タブを開き、「新規作成」ボタンをクリックしてください。

  5. 変数エディタダイアログで以下の通り入力し、「決定」ボタンをクリックしてください。

    項目 設定値
    キー名 classes
    値の型 文字列
    配列の次元数 1次元配列
    配列の要素数 2
  6. 変数「classes」の配下の「0」の編集ボタンをクリックしてください。

  7. 変数エディタダイアログの「定数・入力・多言語・環境から」のテキストボックスの検索アイコンをクリックしてください。

  8. 変数セレクタダイアログの「環境」タブを選択してください。

  9. 変数ツリーから、「$env.modifier.color.info」を選択し、「決定」ボタンをクリックしてください。

  10. 変数エディタダイアログの「決定」ボタンをクリックしてください。

  11. 上記と同様の手順で、変数「classes」配下の「1」に「$env.modifier.backgroundColor.dark」を設定してください。

  12. 配置した「ボックス」エレメントをクリックしてください。

  13. 右ペインのプロパティタブを開き、「CSSクラス」カテゴリの「クラス名」プロパティを変数値に切り替えてください。

  14. 「クラス名」プロパティのテキストボックスに、前項で作成した変数「$variable.classes」を設定してください。

  15. 「プレビュー」ボタンをクリックしてください。

  16. ボックスの背景が黒色、文字が青色になっていることを確認してください。
    うまくいかない場合は手順に誤りがないか確認してください。

2. hide の使い方

hide は、設定した値に応じて特定の画面サイズでエレメントを非表示にできます。
例として、左側にメニューがあるような画面で、モバイル端末で画面を表示した場合は左側のメニューを非表示にしたい場合などに有効です。

PC 版

モバイル版

以下のサンプルを使用して説明します。

  1. 以下のインポートデータをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
    cookbook_185244_im_bloommaker.zip

  2. 上記のサンプルをインポート後、コンテンツ一覧画面の「im_cookbook」 > 「im_cookbook_185244_modifier_hide」のコンテンツのデザイナ画面を開いてください。

  3. コンテナページに配置されている「フレックスコンテナ」エレメント配下の左側の「フレックスアイテム」エレメントをクリックしてください。

  4. 右ペインのプロパティタブを開き、「CSSクラス」カテゴリの「クラス名」プロパティを表示してください。

変数値で「$env.modifier.hide.mobile」が設定されています。この変数に格納されている Class は、ウインドウの横幅が 768px 以下の場合にエレメントを非表示にします。
プレビュー画面を開き、画面のサイズを自由に変更してみてください。モバイル用のサイズに変更すると左側のメニューが非表示になるはずです。

他に、どのサイズでエレメントが非表示になるかについては以下のドキュメントを参照してください。
Bulma Responsive helpers

-CookBook
-

執筆者:


comment

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

関連記事

ワークフローの案件削除時にBIS/Formaの関連データも削除する方法

このCookBookでは、ワークフローの案件削除時にBIS/Formaの関連データも併せて削除する方法について紹介しています。 BIS/Formaで作成したワークフローには、機能ごとに個別で管理するト …

no image

Lombok のご紹介

この CookBook では、Lombok について紹介しています。 intra-mart 開発本部では Lombok を利用しています。 Lombok を簡単に説明すると、「アノテーションを書くだけ …

no image

No.5 外部サイトの定期監視

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerからIM-FormaDesigner / IM-BIS / IM …

no image

NEologd の辞書を使って全文検索を新語に対応させる方法

この CookBook では、Solr で利用している形態素解析エンジンである kuromoji に NEologd を取り入れビルドを行い、 既存の kuromoji の実装と差し替えることで、NE …

no image

IM-Notice Broker の設定方法

この CookBook では、分散環境での IM-Notice (デスクトップ版)の設定方法について紹介しています。 分散環境の構成として、以下のような 2 台構を考えます。 マシン IPアドレス A …