IM-BloomMakerのエレメントとは？

この記事では、IM-BloomMakerのエレメントについて紹介します。

IM-BloomMakerでは、画面を構成するレイアウトやフォーム部品などのパーツを「エレメント」と呼びます。エレメントを組み合わせることで、複雑なコードを記述することなくアプリケーション画面を作成できます。また、IM-BloomMakerでは、コンテンツ種別によって利用できるエレメントの種類が異なります。作成したい画面のデザインに応じて適切なコンテンツ種別を選択し、利用できるエレメントを組み合わせて画面をデザインします。

エレメントの種類や特徴、配置したエレメントの調整方法について確認してみましょう。

エレメントの種類と特徴

IM-BloomMakerでは、画面を構成するためのさまざまなエレメントが用意されています。エレメントには、画面上の要素を配置するためのレイアウトや、文字を表示するためのテキスト、ユーザが値を入力するための入力部品などがあります。これらのエレメントを組み合わせることで、用途に応じた画面を作成できます。

また、IM-BloomMakerでは、コンテンツ種別によって利用できるエレメントの種類が変わります。コンテンツ種別には、imui・Bulma・imdsの部品を利用するものと、標準部品を利用するものがあります。コンテンツ種別の部品は、それぞれの種別に応じた専用のエレメントが用意されています。一方、標準部品には、intra-mart Accel Platformで汎用的に利用できるエレメントが揃っています。そのため、コンテンツ種別によって、作成できる画面のデザインや利用できるエレメントが異なります。

ここでは、コンテンツ種別に応じたエレメントの違いについて紹介します。

intra-martの画面デザインを使いたい：imui部品

imuiは、intra-mart Accel Platformで利用されているUIコンポーネントです。imuiのコンテンツ種別では、imuiのデザインに対応した専用のエレメントを利用できます。intra-mart Accel Platformの画面デザインに合わせて、アプリケーションの画面を作成したい場合などに利用できます。

リッチな画面をデザインしたい：Bulma部品

Bulmaは、オープンソースで提供されているCSSフレームワークです。Bulmaのコンテンツ種別では、Bulmaのデザインに対応した専用のエレメントを利用できます。レイアウトやフォーム部品などを組み合わせることで、デザイン性のある画面を作成できます。また、intra-mart Accel Platformのテーマに合わせたデザインでBulmaのエレメントを利用することもできます。

intra-martのデザインシステムを使いたい：imds部品

imdsは、intra-martのデザインシステムです。imdsのコンテンツ種別では、intra-mart Design Systemに対応した専用のエレメントを利用できます。intra-martのデザインガイドラインに沿った画面を作成したい場合などに利用できます。

配置したエレメントを調整する

配置したエレメントは、プロパティの各項目を設定することで、見た目や大きさなどを調整できます。たとえば、以下のような設定ができます。

• 幅・高さ、余白の調整
• 文字色や背景色の設定
• フォントや文字装飾などのスタイル指定
• CSSを利用した独自のクラス付与

エレメントによっては、プロパティのエレメント固有の設定項目で調整する場合もあります。各エレメントで表示される項目を確認しながら設定しましょう。

まとめ

IM-BloomMakerでは、さまざまなエレメントを組み合わせてアプリケーションの画面を作成できます。また、コンテンツ種別によって利用できるエレメントの種類やデザインの方向性が異なります。標準部品では汎用的なエレメントを利用でき、imui・Bulma・imdsでは、それぞれのデザインに対応した専用のエレメントを利用できます。まずは、利用するコンテンツ種別とエレメントの種類を確認し、作成したい画面に適したエレメントを選択してみましょう。

intra-martでは、IM-BloomMakerをもっと知っていただくために、マニュアルやコンテンツなどを豊富にご用意しています。IM-BloomMakerの機能を最大限に発揮させるためにも、ぜひご活用ください。