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

この記事では、IM-BloomMakerのエレメントの概要について紹介します。
IM-BloomMakerでは、画面を構成するレイアウト・フォーム部品といったパーツを「エレメント」と呼びます。エレメントを組み合わせることで、簡単にアプリケーション画面が作成できます。アプリケーションの開発を効率的に進めるためにも、IM-BloomMakerのエレメントについて理解を深めていきましょう。

エレメントの種類と特徴

IM-BloomMakerでは、さまざまな用途に応じたエレメントを豊富に用意しています。エレメントを活用することで、さまざまな業務に適したアプリケーション画面が簡単に作成できます。

たとえば、レイアウトエレメントを使用して画面内のコンポーネントの配置を調整したり、フォーム部品エレメントを使用して入力フォームを作成したりするなど、エレメントの種類と特徴を知れば知るほど、実現できる画面デザインの幅が広がっていきます。

ここでは、画面デザインの3つのエレメントについて紹介します。

シンプルな画面をデザインしたい：標準部品

標準部品には、画面デザインの基本的なエレメントが含まれています。入力フォーム画面や明細画面といったシンプルなデザインを作成する場合に適しています。

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

imuiとは、intra-martのUIコンポーネントのことを指します。imui部品には、intra-mart Accel Platformが提供する画面デザインの要素が含まれています。intra-martで使用しているデザインに合わせて画面を作成したい場合は、imui部品を使用します。

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

Bulmaとは、オープンソースで開発されているCSSフレームワークのことを指します。Bulma部品には、華やかで見やすい配色と配置が可能な画面デザインの要素が含まれていますので、カスタマイズをしなくてもデザイン性の高い画面が作成できます。また、intra-mart Accel Platformのテーマに合わせた配色で、Bulma部品を使用することも可能です。

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

エレメントの見た目や大きさといった情報をまとめて「エレメント」と呼びます。配置したエレメントは、プロパティの設定を変更することにより、以下のようなデザインの調整ができます。

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

なお、エレメントごとに設定できるプロパティは異なるため、各エレメントの仕様も確認しましょう。

まとめ

IM-BloomMakerのエレメントを活用すると、画面デザインの作成時間を大幅に短縮できるというメリットがあります。アプリケーションの画面作成では、複数のエレメントを組み合わせることが基本の操作となります。まずは、各エレメントの種類や特徴について把握し、使いこなせるようになることをおすすめします。

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