この記事では、intra-martのローコード開発ツールであるIM-BloomMakerについて紹介します。
IM-BloomMakerは、Webブラウザ上で画面部品をドラッグ&ドロップで配置し、画面のデザインや動作を設定できるツールです。まずは、IM-BloomMakerでできることや、アプリケーション画面を作成する基本的な流れについて理解を深めていきましょう。
IM-BloomMakerの主な特徴
IM-BloomMakerは、画面部品の配置やデザイン、画面操作に応じた処理などを設定して、アプリケーション画面を作成するためのツールです。一つの画面上で、画面コンテンツに必要な要素をまとめて設定・編集できます。
IM-BloomMakerの主な特徴を紹介します。
直感的な操作で画面デザインが作成できる
IM-BloomMakerでは、エレメントと呼ばれる画面部品をドラッグ＆ドロップで配置して、アプリケーション画面を作成できます。テキストボックスやラジオボタンなどの基本的な部品に加えて、グラフや画像など、用途に応じたエレメントも用意されています。また、各エレメントの余白・幅・文字サイズなどを設定したり、CSSを利用してデザインを調整したりできます。
画面全体のエレメント
まずは、画面全体のデザインに大きく影響する3つの主要なエレメントについて確認しましょう。画面をシンプルに構成したい場合や、intra-mart標準のデザインを適用したい場合、さらにデザイン性の高い画面を作成したい場合など、目的に応じて最適なエレメントを選択できます。
ローコードポータル - IM-BloomMakerのエレメントとは？
ユーザの画面操作に連動したアクションが設定できる
IM-BloomMakerでは、ユーザの操作に応じて実行する処理を「アクション」として設定できます。たとえば、ボタンをクリックしたときにダイアログを表示したり、入力した値を変数に設定したりするなど、画面上の操作に応じた動作を設定できます。また、画面からIM-LogicDesignerで作成したロジックを呼び出すなど、他の機能と連携することもできます。
アクション設定の基本操作
配置したエレメントにアクションを設定する基本的な手順を確認できます。設定可能なアクションの種類や、それらがどのような場面で使用されるかを理解しておきましょう。
ローコードポータル - 作成した画面にアクション設定を追加したい
さまざまなツールや機能と連携できる
IM-BloomMakerでは、intra-martのさまざまなツールや機能と連携できます。たとえば、IM-LogicDesignerで作成したビジネスロジックを呼び出して、データの登録や取得などの処理を実行できます。さらに、作成した画面にルーティング（URL）を設定し、認可設定で利用できるユーザを制限することで、他のアプリケーション画面からアクセスすることも可能です。このように、画面の作成だけでなく、他の機能と組み合わせることで、業務に必要なアプリケーション画面を作成できます。
画面とビジネスロジックの連携
IM-BloomMakerで作成した画面にリクエスト送信のアクションを設定することで、REST APIを利用してビジネスロジックを呼び出すことができます。少し発展的な内容ですが、画面からロジックを連携させる方法として覚えておくと便利です。
ローコードポータル - アクション設定でビジネスロジックと連携したい
画面作成から公開までの流れ
IM-BloomMakerを利用した画面の作成方法は、さまざまな方法があります。ここでは、まず基本的な画面作成の流れを紹介します。
Step. 1 アプリケーション画面の管理情報を作成する
まず、画面名やIDなど、アプリケーション画面を管理するための基本情報を設定します。
Step. 2 アプリケーション画面をデザインする
デザイナで画面部品を配置し、プロパティから余白や幅などといった画面のデザインを調整します。
Step. 3 画面で利用する値を設定する
画面で利用する変数・定数・多言語変数などを設定します。
Step. 4 アクションを設定する
画面上の操作に応じた動作をアクションとして設定します。
Step. 5 アプリケーション画面へのアクセス方法を設定する
作成したアプリケーション画面にアクセスできるように、ルーティング（URL）などを設定します。設定したURLを利用することで、Webブラウザから作成した画面にアクセスできます。
画面作成の流れ
業務で利用するアプリケーション画面を作成する場合は、設定する内容がさらに細分化されます。詳しい手順は、ローコード操作マニュアルを参照してください。
アプリケーション画面の作成例
画面作成の基本的な流れを確認したら、実際にアプリケーションを作成してみましょう。チュートリアルでは、簡単な入力画面の作成から、IM-LogicDesignerやIM-Repositoryと連携した画面の作成まで、実際に画面を作成しながら基本的な操作を確認できます。
【難易度：低】入力画面を作成する
ボタンをクリックすると、入力した内容がダイアログで表示されるという、シンプルな処理を行うアプリケーションを作成してみましょう。テキストボックスに入力した値をダイアログに表示する簡単な画面の作成を通して、デザイナ画面の使い方や変数・アクションの設定方法など、基本的な操作方法を確認できます。
IM-BloomMaker チュートリアルガイド - 4.3. デベロップモードでアプリケーション画面を作成する
【難易度：中】スケジュールを登録する
IM-LogicDesignerのルーティング定義を利用し、スケジュールを登録するアプリケーションを作成してみましょう。ここでは、intra-mart Accel Platformのテーマを利用して、登録画面を作成していきます。上記の(1)と比較すると、実行条件を利用したアクションやエレメントのプロパティの設定項目が増えますが、一つずつ確認しながら設定していきましょう。
IM-BloomMaker チュートリアルガイド - 5.1. スケジュール登録アプリケーションを作成する
【難易度：中】ログイン情報を取得する
IM-LogicDesignerのルーティング定義とIM-Repositoryの定義を利用し、ログイン情報を取得するアプリケーションを作成してみましょう。intra-mart Accel Platformのテーマを利用して、ログイン画面を作成していきます。上記の(2)では、JSON形式を用いて変数を定義しましたが、(3)ではIM-Repositoryで作成した辞書項目の定義を変数として追加します。
IM-BloomMaker チュートリアルガイド - 5.4. ログイン情報取得アプリケーションを作成する
画面デザインの再利用（テンプレート化）
IM-BloomMakerでは、作成したアプリケーション画面や画面の一部を再利用できます。画面全体をテンプレートとして登録したり、画面の一部をエレメントセットとして登録したりするすることで、別のアプリケーション画面でも同じデザインや構成を利用できます。画面を再利用することで、同じような画面を作成する際の作業を効率化できます。
アプリケーション画面のテンプレートを作成する
作成したアプリケーション画面をコピーして、テンプレートとして登録します。登録したテンプレートの使用方法についても確認してみてください。
IM-BloomMaker チュートリアルガイド - 5.2. アプリケーション画面のテンプレートを作成する
アプリケーション画面のエレメントセットを作成する
エレメントセットカテゴリを用意した後、登録したいエレメントを画面上に配置し、画面デザインとして保存します。保存したエレメントセットの使用方法についても確認してみてください。
IM-BloomMaker チュートリアルガイド - 5.3. アプリケーション画面のエレメントセットを作成する
まとめ
IM-BloomMakerでは、画面部品の配置やデザイン、ユーザの操作に応じたアクションなどを設定して、アプリケーション画面を作成できます。また、IM-LogicDesignerなどの他の機能と組み合わせることで、データの登録や取得など、業務に必要な処理を行う画面も作成できます。まずは、簡単な画面を作成しながら、IM-BloomMakerの基本的な操作を確認してみましょう。
intra-martでは、IM-BloomMakerや各ローコード開発ツールを使ったアプリケーションの開発に役立つコンテンツなどを豊富にご用意しています。intra-martの機能を最大限に発揮させるためにも、ぜひご活用ください。