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

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

関連記事

no image

申請画面で設定した特定の期日までは承認が行えないフローの作成方法

このCookbookでは、申請画面で設定した特定の期日までは承認が行えないフローの作成方法を紹介します。 アクション設定の表示モード変換を使用し、承認可能日の前後で承認ボタンの表示有無が切り替わる画面 …

no image

IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスク利用例

このCookBookでは、IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスクの利用例を紹介します。 IM-BISで作成したワークフローの案件終了処理で、画面項目 …

no image

スクリプト開発で利用できる close 関数のご紹介

この CookBook では、スクリプト開発で利用できる close 関数について紹介します。 スクリプト開発では作成した js ファイルの中に init と言う名前の関数を定義すると思いますが、この …

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

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

no image

request.log を Kibana で可視化する方法

この CookBook では、request.log を Kibana で可視化する方法について紹介しています。 方法は色々ありますが、この CookBook では Logstash と logsta …

RSSRSSRSSRSS