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

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

関連記事

IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方

このCookBookでは、「URL ○ にリクエストを送信する」アクションを使ってサンプル画面を作成する方法を紹介します。 2019 Summer では「URL ○ にアクセスする」でしたが、 201 …

no image

ワークスペースとToDo機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のToDo機 …

ワークフローの一覧を使い分けるには(スマートフォン版)

このCookbookでは、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …

no image

ViewCreatorでカレントの組織コードや会社コードを取得する動的パラメータの作り方

このCookBookでは、カレントの組織コードや会社コードを取得するViewCreatorの動的パラメータの作成方法についてご紹介します。 動的パラメータについての詳細は下記のドキュメントを参照してく …

BloomMakerでワークフローの一括承認画面を作成する

このCookBookでは、BloomMakerで、ワークフローの一括承認画面を作成してみました。 本稿で紹介のサンプルのように、BloomMakerを利用することで、ちょっとした要件に応じた画面が簡単 …

RSSRSSRSSRSS