IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

Copyright © 2019 NTT DATA INTRAMART CORPORATION

↑Top

1

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

目次
1. 改訂情報
2. はじめに2.1. 本書の目的
2.2. 対象読者
2.3. 本書の構成
3. 概要
3.1. IM-BloomMakerとは
3.2. IM-BloomMakerの全体像と、本チュートリアルガイドの説明範囲
4. 基礎編 - ファースト・ステップ
4.1. 事前準備
4.1.1. 環境のセットアップを行う
4.1.2. チュートリアル実行ユーザにロールを付与する
4.1.3. アプリケーション画面の作成に使用するデザイナを決める
4.2. レイアウトモードでアプリケーション画面を作成する
4.2.1. チュートリアルの概要（作成物のイメージ）
4.2.2. コンテンツを作成する
4.2.3. デザイナ画面を開く
4.2.4. レイアウトを設定する
4.2.5. 部品を配置する
4.2.6. 検索エリアを編集する
4.2.7. お知らせ一覧を編集する
4.2.8. その他の部品を調整する
4.2.9. 部品の動作仕様や課題、作業タスクをメモに残す
4.2.10. プレビュー画面の表示と画面デザインの保存
4.3. デベロップモードでアプリケーション画面を作成する
4.3.1. チュートリアルの概要（作成物のイメージ）
4.3.2. コンテンツカテゴリを作成する
4.3.3. コンテンツを作成する
4.3.4. デザイナ画面を開く
4.3.5. ページを設定する
4.3.6. エレメントを配置する
4.3.7. 変数を定義する
4.3.8. 多言語を定義する
4.3.9. アクションを設定する
4.3.10. エレメントのプロパティを設定する
4.3.11. プレビュー画面を表示する
4.3.12. 上書き保存する
4.4. ルーティングを設定する
4.4.1. ルーティングカテゴリを作成する
4.4.2. ルーティングを作成する
4.4.3. ルーティングの認可を設定する
4.4.4. 作成したアプリケーションを確認する
4.5. 作成したアプリケーションの定義情報をエクスポートする
4.5.1. 定義ファイルをエクスポートする
5. 応用編 - より高度なアプリケーションの作成
5.1. スケジュール登録アプリケーションを作成する
5.1.1. チュートリアルの概要（作成物のイメージ）
5.1.2. エレメントを配置する
5.1.3. 変数、定数、多言語を定義する
5.1.4. アクションを設定する
5.1.5. エレメントのプロパティを設定する
5.1.6. アプリケーションの動作を確認する
5.2. アプリケーション画面のテンプレートを作成する
5.2.1. テンプレートカテゴリを作成する

2

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
5.2.2. テンプレートを作成する
5.2.3. テンプレートを使用する
5.3. アプリケーション画面のエレメントセットを作成する
5.3.1. エレメントセットカテゴリを作成する
5.3.2. エレメントセットを作成する
5.3.3. エレメントセットを使用する
5.4. ログイン情報取得アプリケーションを作成する
5.4.1. チュートリアルの概要（作成物のイメージ）
5.4.2. 事前準備
5.4.3. 画面を作成する
5.4.4. 変数・定数・多言語を定義する
5.4.5. アクションを作成する
5.4.6. 配置したエレメントに変数・定数・多言語とアクションを設定する
5.4.7. 作成したアプリケーションの動作を確認する
6. 付録
6.1. チュートリアルデータのアーカイブファイル
6.1.1. 基礎編
6.1.2. 応用編
6.1.3. インポート方法

3

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

改訂情報
変更年月日

変更内容

2019-08-30

初版

2019-12-01

第2版 下記を追加・変更しました「応用編 - より高度なアプリケーションの作成」へ以下の新規チュートリアルを追加「アプリケーション画面のテンプレートを作成する」を追加「スケジュール登録アプリケーションを作成する」-「アクションを設定する」のアクションアイテム名「URLにアクセスする」を「URLにリクエストを送信する」に変更
チュートリアル中の図を最新版へ更新

2020-04-01

第3版 下記を追加・変更しました
全体的に「アクション」と「アクションアイテム」を分けて表記「基礎編 - ファースト・ステップ」-「エレメントを配置する」の図を修正「スケジュール登録アプリケーションを作成する」-「エレメントを配置する」の図を修正「スケジュール登録アプリケーションを作成する」-「変数を定義する」に変数の値の型を編集する手順を追加「応用編」-「スケジュール登録アプリケーションを作成する」のインポート資材を最新版へ更新「応用編」-「ログイン情報取得アプリケーションを作成する」を追加

2020-08-01

第4版 下記を追加・変更しました「基礎編 - ファースト・ステップ」-「ルーティングを作成する」-「ルーティングを新規作成する」の説
明を修正「応用編 - より高度なアプリケーションの作成」-「アプリケーション画面のエレメントセットを作成する」を追加
2020-12-01

第5版 下記を変更しました「応用編 - より高度なアプリケーションの作成」-「アクションを設定する」の説明を修正

2024-06-01

第6版 下記を変更しました「基礎編 - ファースト・ステップ」の構成を修正「基礎編 - ファースト・ステップ」-「デベロップモードでアプリケーション画面を作成する」-「コンテンツを作成する」の説明を修正「基礎編 - ファースト・ステップ」-「デベロップモードでアプリケーション画面を作成する」-「プレビュー画面を表示する」の説明を修正「基礎編 - ファースト・ステップ」-「レイアウトモードでアプリケーション画面を作成する」を追加

4

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

はじめに
本書の目的
本書は、IM-BloomMakerを利用して各種アプリケーションを作成するみなさまの支援を目的としたドキュメントです。

対象読者
本書では次の開発者を対象としています。
IM-BloomMakerによる開発の一連の流れを知りたい
IM-BloomMakerを利用してアプリケーションを作成したい
なお、本書では次の内容を理解していることが必須です。
intra-mart Accel Platformを理解している

本書の構成
本書は次の章で構成されています。

概要
本書、および、IM-BloomMakerの概要について説明します。

基礎編 - ファースト・ステップ
基礎編として、シンプルなアプリケーション作成を行うチュートリアルです。
本チュートリアルを通していただくことで、IM-BloomMakerを利用する上で必要な作業の流れや、機能についてご理解いただけます。

応用編 - より高度なアプリケーションの作成
応用編として、より高度なアプリケーション作成を行うチュートリアルです。

付録
基礎編、応用編では触れていない補足事項です。

5

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

概要
IM-BloomMakerとはIM-BloomMakerの全体像と、本チュートリアルガイドの説明範囲

IM-BloomMakerとはIM-BloomMakerは、intra-mart Accel Platform上でアプリケーション画面を作成できるアプリケーションです。
IM-BloomMakerの特徴は以下のとおりです。
プログラミングに関する知識が少ない一般ユーザでも、ローコードで様々なアプリケーション画面の開発ができます。
アプリケーション画面の作成にあたり、操作はブラウザ内で完結します。
アプリケーション画面への変更は即時反映されます。アプリケーションのデプロイ・再起動は不要です。

IM-BloomMakerの全体像と、本チュートリアルガイドの説明範囲
IM-BloomMakerの全体像と、各機能に対する本チュートリアルガイドの説明範囲は以下のとおりです。

図：全体像と説明範囲「Bas.(Basic)」の吹き出し - 「基礎編 - ファースト・ステップ」にて説明を行っている箇所です。
一例として以下の内容を説明しています。
コンテンツの作成「コンテンツ一覧」画面を利用し、IM-BloomMakerで作成するアプリケーション画面を管理するための「コンテンツ」を作成します。
アプリケーション画面の作成「デザイナ」画面を利用し、アプリケーション画面を作成します。
ルーティング定義の作成「ルーティング定義一覧」画面を利用し、アプリケーション画面のURLや認可など、ユーザがアプリケーション画面にアクセスするため

6

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01の定義情報である「ルーティング定義」を作成します。
定義ファイルのエクスポート「エクスポート」画面を利用し、コンテンツ、および、ルーティング定義のエクスポートを行います。
「Adv.(Advanced)」の吹き出し - 「応用編 - より高度なアプリケーションの作成」、および、「付録」にて説明を行っている箇所です。
一例として以下の内容を説明しています。
高度なアプリケーション画面の作成
レイアウト用エレメントやスタイルプロパティの設定を利用し、より高度なアプリケーション画面を作成します。
サーバロジックを利用するアプリケーションの作成
IM-LogicDesignerのルーティング定義を利用し、アプリケーションを作成します。
アプリケーション画面のテンプレートの作成「テンプレート一覧」画面を利用し、アプリケーション画面のテンプレートを作成します。

7

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

基礎編 - ファースト・ステップ
事前準備
本チュートリアルを進めるにあたり、以下の事前準備を行ってください。
環境のセットアップを行う
チュートリアル実行ユーザにロールを付与する
アプリケーション画面の作成に使用するデザイナを決める

環境のセットアップを行う
本チュートリアルを進める上で必要なintra-mart Accel Platformの環境セットアップ情報は以下のとおりです。
1. 以下のモジュールを含んだ形で、intra-mart Accel Platformのwarファイルを作成していること
IM-BloomMaker for Accel Platformモジュール
2. intra-mart Accel Platformのテナント環境セットアップが完了していること
3. サンプルデータのインポートが完了していること

チュートリアル実行ユーザにロールを付与する
本チュートリアルでは、「テナント管理者」ロールを持つユーザで実施します。
必要に応じて、ロールの付与を実施してください。

アプリケーション画面の作成に使用するデザイナを決める
まずは、アプリケーション画面の作成に使用するデザイナを決めます。
デザイナには二つのモードがあり、モードによって操作方法や画面を動的に変化させる機能の有無が異なります。
それぞれのデザイナの特徴は以下の通りです。
目的に合わせて使用するモードを選んでください。
デザイナのモードと特徴
モード

説明

レイアウトモード

画面レイアウトの編集に特化した設計者向けのモードです。直感的な操作で画面デザインを操作できます。
このモードで開くデザイナでは、機能単位でまとめられた部品を配置して画面レイアウトを決めていきます。
動きのある画面は作成できませんが、画面のモックアップを作成するのに適しています。

デベロップモード

画面の作成と各部品の動きを設定する開発者向けのモードです。レイアウトモードよりも、各部品の配置
や細かい設定が行えます。
このモードで開くデザイナでは、レイアウトに使用する部品を選択しながら、1つずつ設置していきます。
後述する「変数」や「アクション」を使用して、動きのある画面を作成するのに適しています。

コラム
デザイナのモードは、コンテンツの登録後に相互に変更可能です。
画面レイアウトの編集はレイアウトモードで行い、変数とアクションの設定はデベロップモードに切り替えて行う、といったことも可能です。

注意
レイアウトモードは、コンテンツ種別が「Bulma」「Bulma Theme Colored」の場合のみ利用可能です。
後述するコンテンツウィザードでレイアウトモードを選択した場合、「imui」「imds」のコンテンツ種別のコンテンツは作成できません。
「レイアウトモード」を利用してアプリケーション画面を作成する場合は、「レイアウトモードでアプリケーション画面を作成する」に進んでくだ
さい。

8

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01「デベロップモード」を利用してアプリケーション画面を作成する場合は、「デベロップモードでアプリケーション画面を作成する」に進んでください。

レイアウトモードでアプリケーション画面を作成する
ここでは、レイアウトモードでアプリケーション画面を作成する手順について説明します。

注意
レイアウトモードは2024 Spring(Iris)以降のバージョンで利用可能です。

チュートリアルの概要（作成物のイメージ）
本チュートリアルでは、 「お知らせ一覧画面」 の作成を通して、IM-BloomMakerの基本的な操作方法や作業の流れを説明します。

図： 基礎編 チュートリアルアプリケーション画面

コンテンツを作成する
ここから本格的なチュートリアルを開始します。
アプリケーション画面を管理するための「コンテンツ」を作成します。
コンテンツカテゴリを作成する
コンテンツを新規作成するコンテンツカテゴリを作成する
まずはコンテンツを管理するコンテンツカテゴリの作成を行います。
操作手順は「コンテンツカテゴリを作成する」を参照してください。

コンテンツを新規作成する
本チュートリアルで利用するコンテンツを作成します。
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。
2. 追加先のコンテンツカテゴリをコンテンツツリーから選択しクリックします。

9

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテンツ一覧」画面 - コンテンツツリー
3. 「コンテンツ一覧」画面左上の「コンテンツ新規作成」をクリックします。

図：「コンテンツ一覧」画面 - 「コンテンツ新規作成」
4. コンテンツウィザードが表示されます。

10

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテンツ一覧」画面 - コンテンツウィザード
5. 「1. デザイナのタイプを選択」で「レイアウトモード」を選択し、「次へ」をクリックします。

図：「コンテンツウィザード」 - 「1. デザイナのタイプを選択」
6. 「2. 使用するテンプレートを選択」で「レイアウト選択から」を選択し、「次へ」をクリックします。

11

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテンツウィザード」 - 「2. 使用するテンプレートを選択」
7. 「3. コンテンツの基本情報を入力」で各項目を以下の通りに入力します。
コンテンツID : tutorial_contents
コンテンツ名 : チュートリアルコンテンツ
コンテンツ種別 : 任意
8. 「登録」をクリックします。

図：「コンテンツウィザード」 - 「3. コンテンツの基本情報を入力」
9. コンテンツの作成が完了すると、自動的に「デザイナ」画面が開きます。
次節「デザイナ画面を開く」では、アプリケーションの作成を行う「デザイナ」画面を見ていきます。

デザイナ画面を開く
次に、アプリケーション画面を作成するための「デザイナ」画面を確認していきます。
デザイナ画面を開く
デザイナ画面の詳細

12

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
デザイナ画面を開く
コラム
前節の操作で既にデザイナ画面が開いている場合はスキップしてください。
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。
2. デザイン編集を行うコンテンツをコンテンツツリーから選択しクリックします。
3. 「レイアウト編集」をクリックします。

図：「レイアウト編集」
4. 「デザイナ」画面が表示されます。

図：「デザイナ」画面 - 初期表示

13

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
デザイナ画面の詳細
デザイナ画面は、用途に応じて複数のペイン（区画）に分かれています。
各ペインの詳細は以下のとおりです。

図：「デザイナ」画面 - 各ペインの役割
1. ヘッダデザイナに対する基本的な操作を提供するヘッダです。
以下の操作が可能です。
上書き保存といったコンテンツに対する操作
コピー、切り取り、貼り付けといった部品の操作
ページに部品を追加
2. コンテナ
エレメントを配置しアプリケーションを構成する画面です。
3. コンテナヘッダ
アプリケーション画面のページを設定する画面です。

コラム
ヘッダから、「プレビュー」アイコンをクリックして「プレビュー」画面を表示することで、チュートリアルを実施中にいつでもアプ
リケーションの確認ができます。
次節「レイアウトを設定する」では、アプリケーションのレイアウトを設定します。

レイアウトを設定する
アプリケーションの画面レイアウトの設定を行います。
大まかなレイアウトを決める
レイアウトを細かく調整する

14

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
大まかなレイアウトを決める「メインエリアのレイアウトを選択してください。」の下に、レイアウトの一覧が表示されています。
1. 今回は、後述の「レイアウトを細かく調整する」の説明のために、左上（分割なし）を選択します。

図：レイアウトの選択
2. ページ中央に、エリア一つだけのレイアウトが作成されます。

15

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：レイアウト選択後

レイアウトを細かく調整する
今回作成する画面は、上部に検索エリア、下部に一覧が表示されるレイアウトのため、エリアが二つ必要です。
1. 上記の手順で作成されたエリアをクリックして選択し、右クリックします。
2. 表示された右クリックメニューから「部品エリア」＞「下に部品を追加」をクリックします。

図：部品エリアの追加
3. 選択したエリアの下に新しいエリアが作成されます。

16

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：右クリックメニュー操作後
次節「部品を配置する」では、各エリアに部品を配置していきます。

部品を配置する
前節で作成したエリアに部品を配置します。
1. 上のエリアの「詳細検索アコーディオン」のパネルをクリックします。

17

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「詳細検索アコーディオン」を選択
2. 上のエリアに「詳細検索アコーディオン」の部品が配置されます。

図：部品選択後
3. 下のエリアの「一覧テーブルセット」のパネルをクリックします。

18

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「一覧テーブルセット」を選択
4. 下のエリアに「一覧テーブルセット」の部品が配置されます。

図：部品選択後
次節「検索エリアを編集する」では、配置した「詳細検索アコーディオン」部品の見た目を整えます。

19

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
検索エリアを編集する
上のエリアに配置した「詳細検索アコーディオン」の部品を編集して検索エリアの見た目を整えます。
1. テーブルをクリックして選択します。

図：テーブルを選択
2. 「Name」の行選択アイコンをクリックし、ツールバーの「行を削除」をクリックします。

20

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Name」の行を削除
3. 「Department」の行選択アイコンをクリックし、ツールバーの「行を削除」をクリックします。

図：「Department」の行を削除
4. 「User Code」のラベルをクリックして「F2」キーを押し、テキストを「Title」に変更します。

21

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「User Code」のラベルを「Title」に変更
5. 同様に「Sex」のラベルを「Category」に変更します。

図：「Sex」のラベルを「Category」に変更
6. 一度テーブルをクリックしてから「Title」の行選択アイコンをクリックし、ツールバーの「行を下に移動」をクリックします。

22

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Title」の行を下に移動
7. 再度「Title」の行選択アイコンをクリックし、ツールバーの「行を下に移動」をクリックします。

図：「Title」の行をさらに下に移動
8. 「Period」の行選択アイコンをクリックし、ツールバーの「行を上に移動」をクリックします。

23

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Period」の行を上に移動
9. 検索エリアが以下のようになっていることを確認してください。異なっている場合は上記の手順を確認してください。

図：完成見本以上で検索エリアの調整は完了です。

24

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
次節「お知らせ一覧を編集する」では、「一覧テーブルセット」部品の見た目を調整します。

お知らせ一覧を編集する
下のエリアに配置した「一覧テーブルセット」の部品を編集してお知らせ一覧の見た目を整えます。
1. テーブルをクリックして選択します。

図：テーブルをクリック
2. 「Edit」の列選択アイコンをクリックし、ツールバーの「列を削除」をクリックします。

25

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Edit」の列を削除
3. 「Details」の列選択アイコンをクリックし、ツールバーの「列を削除」をクリックします。

図：「Details」の列を削除
4. 「Delete」の列選択アイコンをクリックし、ツールバーの「列を削除」をクリックします。

26

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Delete」の列を削除
5. 一覧の最後の行の行選択アイコンをクリックし、ツールバーの「行を削除」をクリックします。

図：行を削除
6. ヘッダとデータの2行のみになるように他の行も削除します。

27

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：操作結果7. 「User Code」の列の右上のプラスアイコンをクリックし、列を追加します。

図：テーブルに列を追加
8. 1列目のヘッダのラベルをクリックして「F2」キーを押し、テキストを「Date」に変更します。

28

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルを変更
9. 同様に2列目のヘッダのラベルを「Category」に変更、3列目のヘッダのラベルを「Title」に変更します。

図：ラベルを変更
10. 3列目のデータのラベルを右クリックし、右クリックメニューを表示します。

29

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：右クリックメニューを表示
11. 右クリックメニューから「部品を差し替え」＞「ハイパーリンク」をクリックします。

図：部品の差し替え
12. 1列目のデータのラベルを「2024/06/01」に変更します。

30

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルを変更
13. 2列目のデータのラベルを「Notice」に変更します。

図：ラベルを変更
14. 3列目のデータのラベルを「Important Notice」に変更します。

31

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルを変更
15. 3列目のデータのラベルを右クリックし、右クリックメニューの「大きさ」＞「手動設定」をクリックします。

図：ラベルの大きさを変更
16. 一度テーブルをクリックしてからデータの1行目の行選択アイコンをクリックし、ツールバーの「行を複製」をクリックします。

32

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：テーブルの行を複製
17. 上記の操作を繰り返して、一覧のデータの行数を10行にします。

図：操作結果18. データの1行3列目のラベルをクリックして選択します。

33

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルを選択
19. データの1行3列目のラベルを右クリックし、右クリックメニューの「部品エリア」＞「右に部品を追加」をクリックします。

図：部品を追加
20. 追加した部品の「その他」のパネルをクリックして部品選択ダイアログを表示します。

34

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：その他のパネルをクリック
21. 「その他」＞「ラベル」を選択して「決定」ボタンをクリックします。

図：部品選択ダイアログ
22. 追加したラベルを右クリックし、右クリックメニューの「大きさ」＞「手動設定」をクリックします。

35

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルの大きさを変更
23. 追加したラベルのテキストを「NEW!」に変更します。

図：ラベルを変更
24. 「NEW!」のラベルを右クリックし、ツールバーの「文字色」の右側の三角アイコンをクリックします。

36

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ツールバー
25. 表示されたカラーピッカーの赤色をクリックします。

図：カラーピッカー
26. そのままツールバーの「位置調整」をクリックします。

37

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：位置調整をクリック
27. 部品の左側のハンドルをドラッグ＆ドロップし、左のラベルと10pxから20pxぐらいの余白を作ります。

図：部品の位置調整
28. データの1行3列目の「Important Notice」のラベルをクリックして選択します。

38

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルを選択
29. Ctrl キーを押しながら「NEW!」のラベルをクリックして選択します。

図：ラベルを追加選択
30. 選択したラベルの上で右クリックし、ツールバーの「太字」をクリックします。

39

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ラベルを太字にする
31. 一度テーブルをクリックしてから「Date」の列の右上の三角アイコンをドラッグ＆ドロップして列の横幅を小さくしてください。

図：「Date」の列の横幅を調整
32. 「Category」の列の右上の三角アイコンをドラッグ＆ドロップして列の横幅を小さくしてください。

40

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Category」の列の横幅を調整
33. 「Title」の列の右上の三角アイコンをダブルクリックしてください。

図：「Title」の列の横幅を調整
34. テーブルの上で右クリックし、右クリックメニューの「テーブルコンテナ」＞「枠線」をクリックしてください。

41

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：テーブルの枠線を非表示にする
35. お知らせ一覧が以下のようになっていることを確認してください。異なっている場合は上記の手順を確認してください。

図：完成見本以上でお知らせ一覧の調整は完了です。

42

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
次節「その他の部品を調整する」では、その他の部品の見た目を調整します。

その他の部品を調整する
検索エリアとお知らせ一覧以外の部品の見た目を調整します。
1. お知らせ一覧の上の「検索テキストボックス」をクリックして選択し、「Delete」キーを押します。

図：「検索テキストボックス」を削除
2. お知らせ一覧の上の「Deleteボタン」をクリックして選択し、「Delete」キーを押します。

43

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Deleteボタン」を削除
3. ページのヘッダ部にある、「画像埋め込み」（左矢印と格子のアイコンの間にある部品）をクリックして選択し、「Delete」キーを押します。

図：ヘッダ部の「画像埋め込み」を削除
4. ページのヘッダ部の「SUB TITLE」のラベルをクリックして選択し、「Delete」キーを押します。

44

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ヘッダ部の「SUB TITLE」のラベルを削除
5. ページのヘッダ部の「検索テキストボックス」をクリックして選択し、「Delete」キーを押します。

図：ヘッダ部の「検索テキストボックス」を削除
6. ページのヘッダ部の「？」アイコンをクリックして選択し、「Delete」キーを押します。

45

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ヘッダ部の「？」アイコンを削除
7. ページのヘッダ部の「PAGE TITLE」ラベルをクリックして「F2」キーを押し、テキストを「Notice」に変更します。

図：ヘッダ部の「PAGE TITLE」ラベルを「Notice」に変更
8. ページのヘッダ部の格子のアイコンを右クリックし、ツールバーの「アイコン」の右側の三角アイコンをクリックします。

46

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：アイコンピッカーを表示する
9. アイコンピッカーの「検索キーワード」に「list」を入力し、絞り込まれたアイコンの一覧から任意のアイコンをクリックします。

図：アイコンピッカーからアイコンを選択する
以上でその他の調整は完了です。

47

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
次節「部品の動作仕様や課題、作業タスクをメモに残す」では、動作仕様や課題、作業タスクなどを残すために利用する「メモ」の使い方を説明します。

部品の動作仕様や課題、作業タスクをメモに残す
部品の動作仕様や課題、作業タスクなどを記録しておく必要がある場合、「メモ」を使って残しておくことができます。
メモは部品に紐づける形で作成します。

コラム
メモはプレビュー画面とアプリケーション画面では表示されません。

部品にメモをつける
1. メモをつけたい部品をクリックして選択します。

図：メモをつけたい部品を選択
2. ヘッダの「メモ追加・編集」アイコンをクリックします。

48

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ヘッダからメモを追加
3. 追加されたメモに文章を入力します。メモ以外の場所をクリックするか、「Shift」キーを押しながら「Enter」キーを押すとメモの編集が終了します。

図：メモを編集
4. 再度メモを編集したい場合は、メモをクリックして「F2」キーを押します。

49

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
コラム
メモの後ろに隠れてしまった部品を確認、編集したい場合は、ヘッダの「メモ設定」からメモを非表示にしてください。
「メモ設定」メニュー内のチェックボックスのチェックをつけ外しするとメモの表示・非表示を切り替えられます。

図：メモを非表示にする

以上で部品にメモをつける作業は完了です。
次節「プレビュー画面の表示と画面デザインの保存」では、作成したアプリケーション画面の実際の見た目を確認したり、画面デザインを保存する方法を説明します。

プレビュー画面の表示と画面デザインの保存
アプリケーション画面の見た目の確認や、画面デザインを保存する方法を説明します。
プレビュー画面を表示する
上書き保存する

プレビュー画面を表示する
作成した画面デザインの実際の見た目は、プレビュー画面で確認できます。
プレビュー画面の表示方法については、「プレビュー画面を表示する」を参照してください。

上書き保存する
画面デザインを作成する最後の手順として、これまで作成してきた内容を保存します。
手順については「上書き保存する」を参照してください。
次節「ルーティングを設定する」では、今回作成したアプリケーション画面のURLや認可など、ユーザが画面にアクセスするための定義情報である「ルーティング定義」を作成します。

50

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
コラム
レイアウトモードで作成したアプリケーション画面に変数とアクションを設定したい場合は、ヘッダの「デベロップモードに切替」ア
イコンをクリックしてデザイナ画面をデベロップモードに切り替えてください。

デベロップモードでアプリケーション画面を作成する
ここでは、デベロップモードでアプリケーション画面を作成する手順について説明します。

チュートリアルの概要（作成物のイメージ）
本チュートリアルでは、「テキストボックスに任意の内容を入力しダイアログを開くボタンをクリックすると、入力した内容がダイアログで表示される」というアプリケーションの作成を通して、IM-BloomMakerの基本的な操作方法や作業の流れを説明します。
作成するアプリケーションの動作イメージは以下のとおりです。
1. テキストボックスに任意の内容を入力する。
2. ダイアログを開くボタンをクリックする。
3. 入力した内容がダイアログで表示される。

図： 基礎編 チュートリアルアプリケーション画面

コンテンツカテゴリを作成する
ここから本格的なチュートリアルを開始します。
コンテンツ一覧画面を利用し、アプリケーション画面を管理するための「コンテンツ」を作成します。
コンテンツはコンテンツカテゴリに紐づけられる形で管理されているため、はじめにコンテンツカテゴリの作成を行います。
コンテンツ一覧画面を表示する
コンテンツカテゴリを新規作成するコンテンツ一覧画面を表示する
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を開きます。

51

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：サイトマップ
2. 「コンテンツ一覧」画面が表示されます。

コンテンツカテゴリを新規作成する
本チュートリアルで利用するコンテンツカテゴリを作成します。
1. 「コンテンツ一覧」画面左上の「カテゴリ新規作成」をクリックします。

図：「コンテンツ一覧」画面 - 「カテゴリ新規作成」
2. コンテンツカテゴリ情報が表示されます。

図：コンテンツカテゴリ情報
3. コンテンツカテゴリ情報の各項目を以下のとおりに設定します。
カテゴリID : tutorial_category
カテゴリ名 : チュートリアルカテゴリ

52

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：コンテンツカテゴリ情報の入力
4. 「登録」をクリックします。
次節「コンテンツを作成する」では、アプリケーション画面を管理するための「コンテンツ」を作成します。

コンテンツを作成する
次に、アプリケーション画面を管理するための「コンテンツ」を作成します。
コンテンツを新規作成するコンテンツを新規作成する
本チュートリアルで利用するコンテンツを作成します。
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。
2. 追加先のコンテンツカテゴリをコンテンツツリーから選択しクリックします。

図：「コンテンツ一覧」画面 - コンテンツツリー
3. 「コンテンツ一覧」画面左上の「コンテンツ新規作成」をクリックします。

53

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテンツ一覧」画面 - 「コンテンツ新規作成」
4. コンテンツウィザードが表示されます。

図：「コンテンツ一覧」画面 - 「コンテンツウィザード」
5. 「1. デザイナのタイプを選択」で「デベロップモード」を選択し、「次へ」をクリックします。

54

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテンツウィザード」 - 「1. デザイナのタイプを選択」
6. 「2. 使用するテンプレートを選択」で「テンプレートを使用しない」を選択し、「次へ」をクリックします。

図：「コンテンツウィザード」 - 「2. 使用するテンプレートを選択」
7. 「3. コンテンツの基本情報を入力」で各項目を以下の通りに入力します。
コンテンツID : tutorial_contents
コンテンツ名 : チュートリアルコンテンツ
コンテンツ種別 : 任意
8. 「登録」をクリックします。

55

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテンツウィザード」 - 「3. コンテンツの基本情報を入力」
9. コンテンツの作成が完了すると、自動的に「デザイナ」画面が開きます。
次節「デザイナ画面を開く」では、アプリケーションの作成を行う「デザイナ」画面を見ていきます。

デザイナ画面を開く
次に、アプリケーション画面を作成するための「デザイナ」画面を確認していきます。
デザイナ画面を開く
デザイナ画面の詳細

デザイナ画面を開く
コラム
前節の操作で既にデザイナ画面が開いている場合はスキップしてください。
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。
2. デザイン編集を行うコンテンツをコンテンツツリーから選択しクリックします。
3. 「デザイン編集」をクリックします。

56

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「デザイン編集」
4. 「デザイナ」画面が表示されます。

デザイナ画面の詳細
デザイナ画面は、用途に応じて複数のペイン（区画）に分かれています。
各ペインの詳細は以下のとおりです。

図：「デザイナ」画面 - 初期表示
1. ヘッダデザイナに対する基本的な操作を提供するヘッダです。
上書き保存といったコンテンツに対するアクションや、コピー・貼り付けといったアプリケーションを構成する要素の操作などが行えます。
2. エレメントパレット
アプリケーションを構成するエレメントの一覧です。この一覧から利用するエレメントを選択し、コンテナ上に配置します。

57

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
3. コンテナ
エレメントを配置しアプリケーションを構成する画面です。
4. コンテナヘッダ
アプリケーション画面のページを設定する画面です。
5. プロパティタブ
コンテナに配置したエレメントに対し、エレメント固有の動作や見た目などを設定する画面です。
6. 変数タブ
アプリケーション画面が保持する情報を変数として設定する画面です。
7. アクションタブ
エレメントに対して特定の操作が行われたときに実行される処理を設定する画面です。
8. 画面構成タブ
コンテナに配置されているエレメントの並び順や構成を閲覧するための画面です。

コラム
ヘッダから、「プレビュー」アイコンをクリックして「プレビュー」画面を表示することで、チュートリアルを実施中にいつでもアプ
リケーションの確認ができます。
次節「ページを設定する」では、作成するアプリケーションに複数の画面を持たせるための設定を行います。

ページを設定する
次に、アプリケーションに複数の画面を持たせるための設定を行います。
複数のアプリケーション画面が存在する場合、「main」と表示されているページがアプリケーション画面を開いたとき最初に表示されます。
ページを新規作成するページを切り替える

ページを新規作成する
1. 「デザイナ」画面上部、コンテナヘッダの「追加」アイコンをクリックします。

図：コンテナヘッダ- 「追加」アイコン
2. 新しくページが追加され、追加したページのコンテナが表示されます。

58

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「New Page #2」ページ
以上で、ページの作成が完了しました。

ページを切り替える
1. 「デザイナ」画面上部、コンテナヘッダの「New Page #1」のタブをクリックします。

図：コンテナヘッダ- 「New Page #1」のタブ
2. 「New Page #1」のコンテナが表示されます。

59

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「New Page #1」ページ
以上で、ページの切り替えが完了しました。
次節「エレメントを配置する」では、アプリケーション画面を構成する「エレメント」を配置していきます。

エレメントを配置する
次に、アプリケーション画面を構成する「エレメント」を配置し、アプリケーション画面を構成します。
エレメントとはエレメントを配置する

エレメントとはアプリケーション画面を構成する部品を「エレメント」といいます。

エレメントを配置する
本チュートリアルで作成するアプリケーションを構成するエレメントを配置します。
エレメントを配置するには、エレメントパレットからアプリケーション画面に表示させたいエレメントをコンテナにドラッグ&ドロップします。
1. 「デザイナ」画面左部、コンテナヘッダから「New Page #1」を選択します。
2. 「デザイナ」画面左部、エレメントパレットから「フォーム部品」を選択しクリックします。

60

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：エレメントパレット- 「フォーム部品」
3. 「フォーム部品」に分類されるエレメントの一覧が表示されます。

図：「フォーム部品」エレメントの一覧
4. 表示されたエレメントの一覧から、「テキスト入力」をドラッグ&ドロップでコンテナに配置します。

61

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「テキスト入力」エレメントの配置
5. 同様に「フォーム部品」エレメントの一覧から、「ボタン」をドラッグ&ドロップでコンテナに配置します。

図：「ボタン」エレメントの配置以上で、「New Page #1」ページのコンテナへのエレメントの配置が完了しました。
次に、「New Page #2」ページのコンテナへエレメントを配置します。
1. 「デザイナ」画面左部、コンテナヘッダから「New Page #2」を選択します。
2. 「デザイナ」画面左部、エレメントパレットから「レイアウト」を選択しクリックします。

62

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：エレメントパレット- 「レイアウト」
3. 「レイアウト」に分類されるエレメントの一覧が表示されます。

図：「レイアウト」エレメントの一覧
4. 表示されたエレメントの一覧から、「見出しレベル1」をドラッグ&ドロップでコンテナに配置します。

63

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「見出しレベル1」エレメントの配置
5. 「New Page #1」ページの手順と同様に「フォーム部品」エレメントの一覧から、「ボタン」をドラッグ&ドロップでコンテナに配置します。

図：「ボタン」エレメントの配置
以上で、全てのページのコンテナへのエレメントの配置が完了しました。
次節「変数を定義する」では、作成するアプリケーションの変数を設定します。

変数を定義する
次に、作成するアプリケーションの変数設定を行います。

64

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
変数について変数エディタを開く
変数の設定を行う

変数について
デザイナ画面の変数タブでは、アプリケーション画面が保持する情報を変数として定義します。
IM-BloomMakerの変数はエレメントの値と変数の値が双方向に結び付けられます（双方向バインディングといいます）。
エレメントに紐づけた変数の値を変更したいとき、再代入の処理を使う必要はありません。
例えば、画面の値が変化したときに変数の値も変化します。

変数エディタを開く
1. 「デザイナ」画面右部、「変数」タブをクリックします。

図：「デザイナ」画面 - 「変数」タブ
2. プルダウンが「変数」になっていることを確認します。

図：「変数」タブ - プルダウン
3. 「新規作成」アイコンをクリックします。

65

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「変数」タブ - 「新規作成」アイコン
4. 変数エディタが表示されます。

図：変数エディタ

変数の設定を行う
本チュートリアルで作成するアプリケーションの変数設定を行います。
今回定義する変数の詳細は以下のとおりです。
キー名 : input_text
値の型 : 「文字列」
配列の次元数 : 「配列にしない」
代入値 : 「データなし」
入力規則 : なし
定義内容をもとに、変数エディタで実際に設定を行います。
キー名の設定1. キー名のテキストボックスをクリックします。
2. input_text を入力します。
値の型の設定1. プルダウンが「文字列」になっていることを確認します。

66

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
配列の次元数の設定
1. プルダウンが「配列にしない」になっていることを確認します。
代入値の設定1. 「データなし」が選択されていることを確認します。
入力規則の設定
1. 「必須」にチェックが入っていないことを確認します。

図：変数エディタ - 変数の設定
変数の設定が完了したら、変数エディタ右下の「決定」ボタンをクリックします。
以上で、アプリケーションの変数設定が完了しました。
次節「多言語を定義する」では、作成するアプリケーションの多言語の設定を行います。

多言語を定義する
次に、作成するアプリケーションの多言語設定を行います。
多言語について多言語の設定を行う
多言語の詳細設定を行う

多言語について多言語とは、利用ユーザのロケールによって値を使い分けられる変数のことです。
また、一つのコンテンツで複数言語での利用が想定される場合は、多言語を利用してください。

多言語の設定を行う
1. 「デザイナ」画面右部、「変数」タブをクリックします。

67

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「デザイナ」画面 - 「変数」タブ
2. プルダウンが「多言語」になっていることを確認します。

図：「変数」タブ - プルダウン
3. 「新規作成」アイコンをクリックします。

68

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「変数」タブ - 「新規作成」アイコン
4. 多言語詳細設定が表示されます。

図：「変数」タブ - 「多言語」詳細設定

多言語の詳細設定を行う
本チュートリアルで作成するアプリケーションの多言語詳細設定を行います。
今回定義する多言語の詳細は以下のとおりです。
キー名 : open_dialog
標準 : Open dialog
日本語 : ダイアログを開く
英語 : Open dialog
中国語（中華人民共和国） : 打开框

キー名 : close_dialog
標準 : Close dialog
日本語 : ダイアログを閉じる
英語 : Close dialog
中国語（中華人民共和国） : 关框

定義内容をもとに、多言語の詳細設定を行います。

69

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
1. 標準をクリックします。

図：「変数」タブ - 「多言語」詳細設定
2. ロケール毎の入力欄が表示されているか確認します。

図：「変数」タブ - 「多言語」詳細設定
3. 1つ目の多言語を入力します。
キー名の設定open_dialog を入力します。
標準の設定
Open dialog を入力します。
日本語の設定ダイアログを開く を入力します。
英語の設定
Open dialog を入力します。
中国語（中華人民共和国）の設定
打开框 を入力します。

70

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「変数」タブ - 「多言語」詳細設定
4. 1つ目の多言語を作成したときと同じ手順で下記多言語を作成します。
キー名 : close_dialog
標準 : Close dialog
日本語 : ダイアログを閉じる
英語 : Close dialog
中国語（中華人民共和国） : 关框

コラム
ロケール毎に値を設定しない場合は、標準のみ設定します。
チュートリアルガイドではロケール毎に値を設定しています。
以上で、アプリケーションの多言語設定が完了しました。
次節「アクションを設定する」では、作成するアプリケーションのアクションの設定を行います。

アクションを設定する
次に、作成するアプリケーションのアクションの設定を行います。
アクションについて
アクションエディタを開く
アクションエディタの設定を行う

アクションについて
アクションは、エレメントに対して特定の操作が行われたときに実行される処理です。
「チュートリアルの概要（作成物のイメージ）」で提示した「入力した内容がダイアログで表示される」動作を作成したい場合、「ダイアログで表示される」部分をアクションで設定します。
アクションを設定するための画面を「アクションエディタ」といいます。

アクションエディタを開く
1. 「デザイナ」画面右部、「アクション」タブをクリックします。

71

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「デザイナ」画面 - 「アクション」タブ
2. 「新規作成」アイコンをクリックします。

図：「デザイナ」画面 - 「新規作成」アイコン
3. アクションエディタが表示されます。

72

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：アクションエディタ

アクションエディタの設定を行う
本チュートリアルで作成するアプリケーションのアクションの設定を行います。
今回設定するアクションの詳細は以下のとおりです。
「ページをダイアログで開く」アクションアイテム
アクション名 : Open Dialog
ページ : 「New Page #2」「表示中のダイアログを閉じる」アクションアイテム
アクション名 : Close Dialog
設定内容をもとに、アクションエディタで実際にアクションの設定を行います。
「ページをダイアログで開く」アクションアイテムの設定
1. アクションエディタ上部、アクション名に「Open Dialog」を入力します。
2. アクションエディタ左ペインから、「アクション」 - 「標準」 - 「ページをダイアログで開く」をドラッグ&ドロップで右ペインに配置します。
3. アクションアイテム内のプルダウンから、「New Page #2」を選択します。
4. 「決定」ボタンをクリックします。

73

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：アクションエディタ- 「ダイアログを開く」アクション「表示中のダイアログを閉じる」アクションアイテムの設定
1. アクションエディタ上部、アクション名に「Close Dialog」を入力します。
2. アクションエディタ左ペインから、「アクション」 - 「標準」 - 「表示中のダイアログを閉じる」をドラッグ&ドロップで右ペインに配置します。
3. 「決定」ボタンをクリックします。

図：アクションエディタ- 「ダイアログを閉じる」アクション
以上で、アクションの設定が完了しました。
次節「エレメントのプロパティを設定する」では、配置した各エレメントのプロパティを設定します。

エレメントのプロパティを設定する
次に、配置した各エレメントにプロパティを設定します。

74

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
プロパティを設定する

プロパティを設定する
プロパティは、コンテナ上の設定を行いたいエレメントをクリックすることで、エレメントごとに設定できる内容のプロパティが表示されます。
ここでは、配置した各エレメントに対してプロパティを設定していきます。
はじめに、「New Page #1」ページの各エレメントのプロパティを設定します。
1. 「デザイナ」画面左部、コンテナヘッダから「New Page #1」を選択します。
2. 「テキスト入力」エレメントをクリックします。

図：「テキスト入力」エレメント
3. 「デザイナ」画面右側に「テキスト入力」エレメントに関するプロパティが表示されます。

75

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「テキスト入力」エレメントのプロパティ
4. 「エレメント固有」プロパティを以下のとおりに設定します。
value :
変数値を選択$variable.input_text

図：「テキスト入力」エレメント - 「エレメント固有」プロパティの設定
変数はテキストボックスにある「検索」アイコンから「変数セレクタ」を開くことで、選択ができます。

図：変数セレクタ
5. 「ボタン」エレメントをクリックします。
6. 「デザイナ」画面右側に「ボタン」エレメントに関するプロパティが表示されます。

76

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
7. 「エレメント固有」プロパティを以下のとおりに設定します。
value :
変数値を選択$i18n.open_dialog

図：「ボタン」エレメント - 「エレメント固有」プロパティの設定
8. 「イベント」プロパティを以下のとおりに設定します。
クリック時 : 「Open Dialog」

図：「ボタン」エレメント - 「イベント」プロパティの設定以上で、「New Page #1」ページの各エレメントのプロパティ設定が完了しました。
プロパティに設定した内容は自動で保持されます（プロパティごとに保存アクションを行う必要はありません）。
次に、「New Page #2」ページの各エレメントのプロパティを設定します。
1. 「デザイナ」画面左部、コンテナヘッダから「New Page #2」を選択します。
2. 「見出しレベル1」エレメントをクリックします。
3. 「デザイナ」画面右側に「見出しレベル1」エレメントに関するプロパティが表示されます。
4. 「エレメント固有」プロパティを以下のとおりに設定します。
textContent :変数値を選択$variable.input_text

図：「見出しレベル1」エレメント - 「エレメント固有」プロパティの設定
5. 「ボタン」エレメントをクリックします。
6. 「デザイナ」画面右側に「ボタン」エレメントに関するプロパティが表示されます。
7. 「エレメント固有」プロパティを以下のとおりに設定します。
value :
変数値を選択$i18n.close_dialog

図：「ボタン」エレメント - 「エレメント固有」プロパティの設定
8. 「イベント」プロパティを以下のとおりに設定します。
クリック時 : 「Close Dialog」

77

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ボタン」エレメント - 「イベント」プロパティの設定以上で、プロパティ設定が全て完了しました。
次節「プレビュー画面を表示する」では、作成したアプリケーション画面の見た目や動作を確認するための、「プレビュー」画面の表示方法を説明します。

プレビュー画面を表示する
次に、アプリケーション画面の見た目や動作を確認するための、「プレビュー」画面を表示する方法を説明します。
プレビュー画面を表示する

プレビュー画面を表示する
1. 「デザイナ」画面上部、ヘッダ内の「プレビュー」アイコンをクリックします。

図：ヘッダ - 「プレビュー」アイコン
2. 「プレビュー」画面が別タブ、または、別ウインドウで表示されます。

78

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「プレビュー」画面
3. 「プレビュー」画面を終了する場合は、「プレビュー」画面のブラウザタブの「x」ボタンをクリックします。
次節「上書き保存する」では、これまで作成した内容を保存する方法を説明します。

上書き保存する
次に、これまで作成してきた内容を保存する方法を説明します。
上書き保存する

上書き保存するアプリケーション画面を作成する最後の手順として、これまで作成してきた内容を保存します。
1. 「デザイナ」画面上部、ヘッダ内の「上書き保存」アイコンをクリックします。

79

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ヘッダ - 「上書き保存」アイコン
2. コンテナ下部に保存メッセージが表示されます。

図：保存メッセージ
以上で、デザイナで編集した内容の保存が完了しました。
次節「ルーティングを設定する」では、今回作成したアプリケーション画面のURLや認可など、ユーザが画面にアクセスするための定義情報である「ルーティング定義」を作成します。

ルーティングを設定する
ここでは、作成したアプリケーション画面のURLや認可など、ユーザが画面にアクセスするための定義情報である「ルーティング定義」を作成しま80

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
す。

ルーティングカテゴリを作成する
ここからは、アプリケーション画面のURLや認可など、ユーザが画面にアクセスするための定義情報である「ルーティング定義」を作成します。
ルーティングはルーティングカテゴリに紐づけられる形で管理されているため、はじめにルーティングカテゴリの作成を行います。
ルーティング定義一覧画面を表示する
ルーティングカテゴリを新規作成する

ルーティング定義一覧画面を表示する
1. 「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」から、「ルーティング定義一覧」画面を開きます。

図：サイトマップ
2. 「ルーティング定義一覧」画面が表示されます。

ルーティングカテゴリを新規作成する
本チュートリアルで利用するルーティングカテゴリを作成します。
1. 「ルーティング定義一覧」画面左上の「カテゴリ新規作成」をクリックします。

図：「ルーティング定義一覧」画面 - 「カテゴリ新規作成」
2. ルーティングカテゴリ情報が表示されます。

81

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ルーティングカテゴリ情報
3. ルーティングカテゴリ情報の各項目に以下の値を入力します。
カテゴリID : tutorial_category
カテゴリ名 : チュートリアルカテゴリ

図：ルーティングカテゴリ情報の入力
4. 「登録」をクリックします。
次節「ルーティングを作成する」では、ユーザがアプリケーション画面にアクセスするための定義情報である「ルーティング」を作成します。

ルーティングを作成する
次に、ユーザがアプリケーション画面にアクセスするための定義情報である「ルーティング」を作成します。
ルーティングを新規作成する

ルーティングを新規作成する

82

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
本チュートリアルで利用するルーティングを作成します。
1. 「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」から、「ルーティング定義一覧」画面を表示します。
2. 追加先のルーティングカテゴリをルーティングツリーから選択しクリックします。

図：「ルーティング定義一覧」画面 - ルーティングツリー
3. 「ルーティング定義一覧」画面左上の「ルーティング新規作成」をクリックします。

図：「ルーティング定義一覧」画面 - 「ルーティング新規作成」
4. ルーティング情報が表示されます。

83

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ルーティング情報
5. ルーティング情報の各項目を以下のとおりに設定します。
ルーティングID : tutorial_routing
コンテンツ :
コンテンツID : 「tutorial_contents」
コンテンツ名 : 「チュートリアルコンテンツ」
メソッド : 「GET」
URL : tutorial_routing
ルーティング名 : チュートリアルルーティング

84

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ルーティング情報の入力
コンテンツは「検索」アイコンから「コンテンツ検索」画面を開くことで、選択ができます。
コンテンツを選択し、検索画面の「決定」ボタンをクリックします。
「決定」ボタンをクリックすると、検索画面が閉じます。

図：「コンテンツ検索」画面
6. 「登録」をクリックします。

85

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ルーティング定義一覧」画面 - 「登録」ボタン
次節「ルーティングの認可を設定する」では、作成したルーティングに対する認可を設定します。

ルーティングの認可を設定する
次に、作成したルーティングに対する認可を設定します。
ルーティングの認可設定画面を表示する
ルーティングの認可設定を行う

ルーティングの認可設定画面を表示する
1. 「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」から、「ルーティング定義一覧」画面を表示します。
2. 認可設定をするルーティングをルーティングツリーから選択してクリックします。
3. 「認可URI」の「認可設定」アイコンをクリックします。

86

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「認可URI」 - 「認可設定」アイコン
4. 「認可設定」画面が表示されます。

図：「認可設定」画面

ルーティングの認可設定を行う
作成したルーティングに対する認可設定を行います。
初期状態では、ルーティングの認可設定は全ての対象者条件に対して「禁止」が設定されます。
本チュートリアルでは対象者条件の「認証済みユーザ」に対して、「認可」を設定します。

87

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：認証済みユーザへ認可設定

注意
認可設定を行う権限を持たないユーザが「認可」アイコンをクリックした場合、警告メッセージが表示されます。
メッセージが表示された場合、操作を行ったユーザに対して適切な権限が付与されているか確認してください。
次節「作成したアプリケーションを確認する」では、作成したアプリケーションを実際に実行して確認します。

作成したアプリケーションを確認する
次に、作成したアプリケーションを実際に実行して確認します。
アプリケーション画面を開く
アプリケーションの見た目を確認する（レイアウトモード）
アプリケーションの動作を確認する（デベロップモード）

アプリケーション画面を開く
1. 「http://localhost:8080/imart/tutorial_routing」にアクセスし、アプリケーション画面が表示されることを確認します。

コラム
ベースURLである以下の部分は環境に合わせて適宜変更してください。
http://localhost:8080/imart
2. 「レイアウトモードでアプリケーション画面を作成する」を参照してアプリケーション画面を作成した場合は「アプリケーションの見た目を確認する（レイアウトモード）」に進んでください。
3. 「デベロップモードでアプリケーション画面を作成する」を参照してアプリケーション画面を作成した場合は「アプリケーションの動作を確認する（デベロップモード）」に進んでください。

アプリケーションの見た目を確認する（レイアウトモード）「チュートリアルの概要（作成物のイメージ）」で提示した画面イメージをもとに、作成したアプリケーションの見た目を確認します。
1. 表示された画面が、「チュートリアルの概要（作成物のイメージ）」で提示した画面イメージと一致しているか確認します。
以上で、アプリケーションの見た目の確認は完了です。
次節「作成したアプリケーションの定義情報をエクスポートする」では、最後にこれまで作成してきたアプリケーションの定義ファイルのエクス
ポートを行います。

アプリケーションの動作を確認する（デベロップモード）「チュートリアルの概要（作成物のイメージ）」で提示した動作イメージをもとに、作成したアプリケーションの動作を確認します。
1. テキストボックスに任意の内容を入力します。

88

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：テキストボックス
2. 「ダイアログを開く」ボタンをクリックします。

図：「ダイアログを開く」ボタン
3. ダイアログが開きます。

図：ダイアログ
テキストボックスに入力した内容が、ダイアログに表示されていることを確認します。
「ダイアログを閉じる」ボタンをクリックすると、ダイアログが閉じます。
以上で、アプリケーションの動作確認が完了しました。
次節「作成したアプリケーションの定義情報をエクスポートする」では、最後にこれまで作成してきたアプリケーションの定義ファイルのエクス
ポートを行います。

作成したアプリケーションの定義情報をエクスポートする
ここでは、作成したアプリケーションの定義情報をエクスポートする手順について説明します。

定義ファイルをエクスポートする
コンテンツ、および、ルーティング定義のエクスポート方法を説明します。
エクスポート画面を表示する
エクスポートを実行する（全て）エクスポートを実行する（対象を選択する）

エクスポート画面を表示する

89

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
1. 「サイトマップ」→「BloomMaker」→「エクスポート」から、「エクスポート」画面を開きます。

図：サイトマップ
2. 「エクスポート」画面が表示されます。

図：「エクスポート」画面

エクスポートを実行する（全て）IM-BloomMakerでは、二種類のエクスポート方法を提供しています。
はじめに、intra-mart Accel Platform上にある全てのIM-BloomMakerに関する情報をエクスポートする方法を説明します。
1. 「サイトマップ」→「BloomMaker」→「エクスポート」から、「エクスポート」画面を表示します。
2. 「エクスポート設定」 - 「エクスポートタイプ」から、「全て」を選択します。

図：「エクスポート設定」 - 「エクスポートタイプ」 - 「全て」
3. 「エクスポート実行」をクリックします。

90

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「エクスポート実行」
4. ZIP形式に圧縮されたエクスポートデータが出力されます。

エクスポートを実行する（対象を選択する）
次に、エクスポート対象を選択してエクスポートする方法を説明します。
ここでは、本チュートリアルで作成したコンテンツ、および、ルーティング定義を対象としてエクスポートを行います。
1. 「サイトマップ」→「BloomMaker」→「エクスポート」から、「エクスポート」画面を表示します。
2. 「エクスポート設定」 - 「エクスポートタイプ」から、「選択」を選択します。

図：「エクスポート設定」 - 「エクスポートタイプ」 - 「選択」
3. コンテンツ、ルーティング定義、および、 テンプレートの選択領域が表示されます。

図：エクスポート対象選択領域

91

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
4. エクスポート対象の選択において、コンテンツIDが「tutorial_contents」の行の「選択」チェックボックスにチェックをいれます。

図：選択（コンテンツ）
5. エクスポート対象の選択において、ルーティングIDが「tutorial_routing」の行の「選択」チェックボックスにチェックをいれます。

図：選択（ルーティング）
6. 「エクスポート実行」をクリックします。

図：「エクスポート実行」
7. 「エクスポート確認」ダイアログが表示されます。

92

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「エクスポート確認」ダイアログ
8. 「決定」をクリックします。

図：「エクスポート確認」ダイアログ - 「決定」
9. ZIP形式に圧縮されたエクスポートデータが出力されます。
以上で、コンテンツ、および、ルーティング定義のエクスポートが完了しました。
お疲れ様でした。そして、おめでとうございます。
以上で「基礎編 - ファースト・ステップ」のチュートリアルは全て完了です。
これまでのチュートリアルを通して、以下のことを学びました。
コンテンツの作成方法
アプリケーション画面の作成方法
ルーティング定義の作成方法
定義ファイルのエクスポート方法
次章「応用編 - より高度なアプリケーションの作成」では、これまでのチュートリアルをベースとして、より高度なアプリケーションを作成するた93

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
めの手助けとなるチュートリアルを用意しています。
基礎編のチュートリアルとは違い、それぞれが独立したチュートリアルのため、作成したいアプリケーションの要件に合わせたチュートリアルを選んでください。

94

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

応用編 - より高度なアプリケーションの作成
この章では、「基礎編 - ファースト・ステップ」をベースに、より高度なアプリケーション画面の作成方法や、サーバロジックを利用するアプリ
ケーションの作成方法について説明します。

コラム
応用編では、各章のチュートリアルに「基礎編 - ファースト・ステップ」で作成したコンテンツカテゴリ、および、 ルーティングカ
テゴリを利用します。
基礎編のチュートリアル資材が無い場合は、「付録」-「チュートリアルデータのアーカイブファイル」-「基礎編」を参照し資材の準備を行ってください。

スケジュール登録アプリケーションを作成する
チュートリアルの概要（作成物のイメージ）
本チュートリアルでは、「IM-LogicDesigner」のルーティング定義を利用し、スケジュール登録を行うアプリケーションを作成します。
アプリケーションの作成を通して、以下のような技術、および、要素の利用方法を説明します。
登録画面の作成
intra-mart Accel Platformのテーマを利用したアプリケーション画面の作成
エレメントの表示 / 非表示の切り替え
実行条件を利用したアクションの設定
ロジックフローで作成した REST API の実行作成するアプリケーションの動作イメージは以下のとおりです。
1. スケジュール登録を行うフォームに、任意の値を入力する。
2. 登録ボタンをクリックする。
3. 必須項目が未入力の場合、エラーメッセージが表示される。
4. 必須項目を全て入力した場合、入力した内容でスケジュールを登録する。

図：スケジュール登録アプリケーション画面

コラム
IM-LogicDesignerとは、intra-mart Accel Platform上でビジネスロジックを作成できるアプリケーションです。
IM-LogicDesignerの詳細については、「IM-LogicDesigner仕様書」を参照してください。

事前準備
本チュートリアルを進めるにあたり、以下の事前準備が行われていることが前提です。

環境セットアップ
本チュートリアルを進める上で必要なintra-mart Accel Platformの環境セットアップ情報は以下のとおりです。
1. 以下のモジュールを含んだ形で、intra-mart Accel Platformのwarファイルを作成していること

95

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
intra-mart Accel Collaborationモジュール
2. intra-mart Accel Platformのテナント環境セットアップが完了していること
3. サンプルデータのインポートが完了していること

チュートリアル実行ユーザ
本チュートリアルでは、「テナント管理者」ロールを持つユーザで実施します。
必要に応じて、ロールの付与を実施してください。

定義ファイルのインポート
本チュートリアルを開始する前に以下のリンクから、IM-LogicDesignerの定義ファイルをダウンロードし、インポートを行ってください。
im_logicdesigner-data-bloom_maker-tutorial-schedule_registration.zip

コラム
IM-LogicDesignerの定義ファイルのインポートについての詳細は、「IM-LogicDesigner ユーザ操作ガイド」-「インポート/エクス
ポート」を参照してください。
また、定義ファイルのインポートを行った後に、フロールーティングの認可設定を行ってください。

コラム
フロールーティングの認可設定ついての詳細は、「IM-LogicDesigner ユーザ操作ガイド」-「フロールーティングの認可設定」を参照してください。

エレメントを配置する
ここから、スケジュール登録を行うアプリケーション画面の作成を開始します。
「デザイナ」画面を利用し、アプリケーションを構成するエレメントを配置します。
エレメントを配置する

エレメントを配置する
はじめに、レイアウトに分類されるエレメントを配置します。
1. 「レイアウト（imui）」に分類されるエレメントの一覧から、「フォームコンテナ」をドラッグ&ドロップでコンテナに配置します。

96

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「フォームコンテナ」エレメントの配置
2. 配置した「フォームコンテナ」エレメント内の「入力フォーム用テーブル」エレメントを選択します。
「エレメント固有」プロパティを以下のとおりに設定します。
rowCount : 4

図：「入力フォーム用テーブル」エレメント - 「エレメント固有」プロパティの設定
3. 「レイアウト」に分類されるエレメントの一覧から、「ボックス」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント内に2つ配置

97

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ボックス」エレメントの配置
4. 「レイアウト」に分類されるエレメントの一覧から、「フレックスコンテナ」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下側の「ボックス」エレメント内に1つ配置

図：「フレックスコンテナ」エレメントの配置
5. 「フレックスコンテナ」エレメントを選択します。
「エレメント固有」プロパティを以下のとおりに設定します。
elementCount : 298

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「フレックスコンテナ」エレメント - 「エレメント固有」プロパティの設定以上で、レイアウトに分類されるエレメントの配置が完了しました。
次に、フォーム部品に分類されるエレメントを配置します。
1. 「フォーム部品」に分類されるエレメントの一覧から、「ラジオボタン」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント内に2つ配置

図：「ラジオボタン」エレメントの配置
2. 「フォーム部品」に分類されるエレメントの一覧から、「テキスト入力」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント内に1つ配置

99

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「テキスト入力」エレメントの配置
3. 「フォーム部品（imui）」に分類されるエレメントの一覧から、「日付入力」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント内に2つ配置

図：「日付入力」エレメントの配置
4. 「フォーム部品」に分類されるエレメントの一覧から、「プルダウン」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 各「日付入力」エレメントの右に1つずつ配置

100

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「プルダウン」エレメントの配置
5. 「フォーム部品」に分類されるエレメントの一覧から、「テキストエリア」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上側の「ボックス」エレメント内に1つ配置

図：「テキストエリア」エレメントの配置
6. 「フォーム部品（imui）」に分類されるエレメントの一覧から、「ボタン」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 左側の「フレックスコンテナ」エレメント内に1つ配置

101

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ボタン」エレメントの配置
7. 「フォーム部品（imui）」に分類されるエレメントの一覧から、「オペレーションパーツ」を以下のとおりに配置します。
「フォームコンテナ」エレメント内 - 「入力フォーム用テーブル」エレメントの下に1つ配置

図：「オペレーションパーツ」エレメントの配置
8. 「オペレーションパーツ」エレメント内の左側の「ボタン」エレメントを選択します。
ツールバーから、「削除」アイコンをクリックします。

102

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ボタン」エレメントの削除
以上で、フォーム部品に分類されるエレメントの配置が完了しました。
最後に、汎用、および、パーツに分類されるエレメントを配置します。
1. 「汎用」に分類されるエレメントの一覧から、「ラベル」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 1つ目の「プルダウン」エレメントの右側に1つ配置

図：「ラベル」エレメントの配置
2. 「パーツ（imui）」に分類されるエレメントの一覧から、「アイコン」を以下のとおりに配置します。
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 「フレックスコンテナ」エレメント - 右側のエレメント
内に1つ配置103

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「アイコン」エレメントの配置
以上で、エレメントの配置が完了しました。
次節「変数、定数、多言語を定義する」では、作成するアプリケーション画面の変数、および、定数を定義します。

変数、定数、多言語を定義する
次に、スケジュール登録を行うアプリケーション画面の変数、および、定数を定義します。
JSON形式を用いた代入値の設定
変数を定義する
定数を定義する
多言語を定義する

JSON形式を用いた代入値の設定
変数、定数、および、入力の設定や編集を行うときに、JSON形式を利用できます。
今回はJSON形式を利用して変数、および、定数の設定を行います。

変数を定義する
1. 「変数」タブをクリックします。
2. プルダウンが「変数」になっていることを確認します。
3. 「JSON形式で編集」アイコンをクリックします。

図：「JSON形式で編集」アイコン
4. 「JSONエディタ」に以下のJSONを貼り付けます。

104

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01{"timePicker": [""],"showTimePicker": true,"participantsList": "","participantName": [""],"requestData": {"scheduleType": "schedule","title": "","startDate": null,"endDate": null,"startTime": "15:00","endTime": "16:00","participants": [
""
]
}
}

図：JSONエディタ
5. 「決定」ボタンをクリックします。

105

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：定義した変数
6. 「startDate」を選択します。
「編集」アイコンをクリックします。

図：「startDate」-「編集」アイコン
7. 「値の型」を「日付・時刻」に設定します。

図：変数エディタ
8. 「決定」ボタンをクリックします。
9. 同様に、「endDate」の「値の型」を「日付・時刻」に設定します。

106

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「値の型」を編集後の変数
変数名

型

配列/リスト説明

timePicker

文字列

配列

スケジュールの開始時間、終了時間を表示するプルダウンに値を設定するための変数です。

showTimePicker

真偽値

スケジュールの開始時間、終了時間を設定するプルダウンの表示 /なし

非表示を設定するための変数です。
participantsList

文字列

なし

スケジュールの参加者の一覧を表示するための変数です。

participantName

文字列

配列

スケジュールの参加者の一覧にユーザ名を設定するための変数です。

requestData

マップ

IM-LogicDesignerのロジックフローに入力値として設定するため

マップの変数です。
scheduleType

文字列

なし

スケジュールまたはイベントのどちらかを選択する、種別を設定するための変数です。

title

文字列

なし

スケジュールのタイトルを設定するための変数です。

startDate

日付・時刻

なし

スケジュールの開始日を設定するための変数です。

endDate

日付・時刻なし

スケジュールの終了日を設定するための変数です。

startTime

文字列なし

スケジュールの開始時間を設定するための変数です。

endTime

文字列なし

スケジュールの終了時間を設定するための変数です。

participants

文字列

配列

スケジュールの参加者のユーザコードを設定するための変数です。

定数を定義する
1. 「変数」タブをクリックします。
2. プルダウンを「定数」に変更します。
3. 「JSON形式で編集」アイコンをクリックします。
4. 「JSONエディタ」に以下のJSONを貼り付けます。

107

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01{"TRUE": true,"FALSE": false,"NO_PARTICIPANTS": null,"REGISTER_URL": "logic/api/bloom_maker/tutorial/register_schedule"}

図：JSONエディタ
5. 「決定」ボタンをクリックします。

図：定義した定数
定数名型

配列/リスト

説明

TRUE

真偽値

なし

スケジュールの開始時間、終了時間を設定するプルダウンを表示
状態に設定ための定数です。

FALSE

真偽値

なし

スケジュールの開始時間、終了時間を設定するプルダウンを非表示状態に設定するための定数です。

NO_PARTICIPANTS

マップ

マップ

スケジュールの参加者を初期化するための定数です。

REGISTER_URL

文字列

なし

IM-LogicDesignerのREST APIにアクセスするURLを設定するための定数です。

多言語を定義する
1. 「変数」タブをクリックします。
2. プルダウンを「多言語」に変更します。
3. 「新規作成アイコン」をクリックします。
4. 1つ目の多言語を下記のとおりに設定します。
キー名
schedule_registration
標準
Schedule registration

108

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
日本語
スケジュール登録
英語
Schedule registration
中国語（中華人民共和国）
登 日程

コラム
ロケール毎に値を設定しない場合は、標準のみ設定します。
チュートリアルガイドではロケール毎に値を設定しています。
5. 1つ目の多言語を作成したときと同じ手順で下記多言語を作成します。
中国語（中華人民共和
キー名

標準

日本語

英語

type

Type

種別

Type

title

Title

タイトル

Title

periodPeriod期間

Period期

participantParticipant

参加者

Participant

参加者

schedule

Schedule

スケジュール

Schedule

日程

event

Event

イベント

Event

活

select_user

Select user

ユーザ選択

Select user

用

register

Register

登録

Register登

validation_error

There is a required

未入力の必須項目があり

There is a required

有未填写的必item which is not

ます。

item which is notentered.
registered_schedule国）

entered.

Registered a schedule. スケジュールを登録しまRegistered a schedule. 已登 日程。

した。
registered_event

Registered an event.

イベントを登録しました。

6. 作成した多言語を表形式で確認します。
7. 表形式で表示するアイコンをクリックします。

8. 多言語が表形式で表示されます。

109

Registered an event.

已登 活 。

。

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：定義した多言語
キー名

説明

schedule_registration「見出しレベル2」エレメントで使用するラベルです。

type「入力フォーム用テーブル」エレメント - 1段目の「テーブルヘッダ」エレメントで使用するラ
ベルです。

title

「入力フォーム用テーブル」エレメント - 2段目の「テーブルヘッダ」エレメントで使用するラベルです。

period「入力フォーム用テーブル」エレメント - 3段目の「テーブルヘッダ」エレメントで使用するラベルです。

participant「入力フォーム用テーブル」エレメント - 4段目の「テーブルヘッダ」エレメントで使用するラベルです。

schedule「入力フォーム用テーブル」エレメント - 1段目の「テーブルデータ」エレメント - 左の「ラジオボタン」エレメントで使用するラベルです。

event「入力フォーム用テーブル」エレメント - 1段目の「テーブルデータ」エレメント - 右の「ラジオボタン」エレメントで使用するラベルです。

select_user「入力フォーム用テーブル」エレメント - 4段目の「テーブルデータ」エレメント - 下の「ボックス」エレメント内 - 左の「フレックスコンテナ」エレメント内 - 「ボタン」エレメントで使用するラベルです。

register「オペレーションパーツ」エレメント - 「ボタン」エレメントで使用するラベルです。

VALIDATION_ERROR

必須項目が未入力の場合に表示するエラーメッセージです。

registered_schedule

スケジュールを登録した際に表示するメッセージです。

registered_event

イベントを登録した際に表示するメッセージです。

次節「アクションを設定する」では、アプリケーション画面のアクションを設定します。

アクションを設定する
次に、アプリケーション画面のアクションを設定します。
アクションを設定する

アクションを設定する
1. 「Switch Display of Term Item」アクションを設定します。

110

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
スケジュールの種別に「スケジュール」を選択したときに時刻の設定を表示し、「イベント」を選択したときに時刻の設定を非表示にするアクションです。
以下のとおりに設定し、新規作成します。
アクション名 : Switch Display of Term Item
アクションアイテム :「標準」 - 変数「」に「」を代入する
変数「$variable.showTimePicker」に「$constant.TRUE」を代入する
実行条件 :「全ての条件に一致」
変数「$variable.requestData.scheduleType」が schedule のとき「標準」 - 変数「」に「」を代入する
変数「$variable.showTimePicker」に「$constant.FALSE」を代入する
実行条件 :「全ての条件に一致」
変数「$variable.requestData.scheduleType」が event のとき
実行条件は、「実行条件」の一覧からドラッグ&ドロップで右ペインに配置します。

図 : 実行条件の配置

111

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Switch Display of Term Item」アクション
2. 「Set Time Picker」アクションを設定します。
時刻を設定するプルダウンに、値を設定するアクションです。
以下のとおりに設定し、新規作成します。
アクション名 : Set Time Picker
アクションアイテム : 「標準」 - カスタムスクリプトを実行する
以下の内容を貼り付けます。
$variable.timePicker = ["00:00", "00:15", "00:30", "00:45","01:00", "01:15", "01:30", "01:45","02:00", "02:15", "02:30", "02:45","03:00", "03:15", "03:30", "03:45","04:00", "04:15", "04:30", "04:45","05:00", "05:15", "05:30", "05:45","06:00", "06:15", "06:30", "06:45","07:00", "07:15", "07:30", "07:45","08:00", "08:15", "08:30", "08:45","09:00", "09:15", "09:30", "09:45","10:00", "10:15", "10:30", "10:45","11:00", "11:15", "11:30", "11:45","12:00", "12:15", "12:30", "12:45","13:00", "13:15", "13:30", "13:45","14:00", "14:15", "14:30", "14:45","15:00", "15:15", "15:30", "15:45","16:00", "16:15", "16:30", "16:45","17:00", "17:15", "17:30", "17:45","18:00", "18:15", "18:30", "18:45","19:00", "19:15", "19:30", "19:45","20:00", "20:15", "20:30", "20:45","21:00", "21:15", "21:30", "21:45","22:00", "22:15", "22:30", "22:45","23:00", "23:15", "23:30", "23:45"];

112

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Set Time Picker」アクション
3. 「Select User」アクションを設定します。
共通マスタのユーザ検索によってスケジュールの参加者を選択するアクションです。
以下のとおりに設定し、新規作成します。
アクション名 : Select User
アクションアイテム :「共通マスタ」 - 複数選択ユーザ検索ダイアログを表示する
検索基準日 : なし
ユーザコード : 「$variable.requestData.participants」
ユーザ名 : 「$variable.participantName」「標準」 - カスタムスクリプトを実行する
以下の内容を貼り付けます。
$variable.participantsList = $variable.participantName.join(', ');113

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「Select User」アクション
4. 「Clear participants」アクションを設定します。
スケジュールの参加者をクリアするアクションです。
以下のとおりに設定し、新規作成します。
アクション名 : Clear participants
アクションアイテム :「標準」 - 変数「」に「」を代入する
変数「$variable.participantsList」に「$constant.NO_PARTICIPANTS」を代入する「標準」 - 変数「」に「」を代入する
変数「$variable.requestData.participants」に「$constant.NO_PARTICIPANTS」を代入する

114

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：「Clear participants」アクション
5. 「Display Registration Complete Message」アクションを設定します。
スケジュールを登録したときに、登録完了メッセージを表示するアクションです。
以下のとおりに設定し、新規作成します。
アクション名 : Display Registration Complete Message
アクションアイテム :「imui」 - メッセージ「」を表示する
メッセージ「$i18n.registered_schedule」を表示する
詳細メッセージ : なし
クリックして閉じるフラグ : チェックを入れる
閉じる時間(ミリ秒) : なし
実行条件 :「全ての条件に一致」
変数「$variable.requestData.scheduleType」が schedule のとき「imui」 - メッセージ「」を表示する
メッセージ「$i18n.registered_event」を表示する
詳細メッセージ : なし
クリックして閉じるフラグ : チェックを入れる
閉じる時間(ミリ秒) : なし
実行条件 :「全ての条件に一致」
変数「$variable.requestData.scheduleType」が event のとき

図：「Display Registration Complete Message」アクション
6. 「Register Schedule」アクションを設定します。
スケジュールを登録するIM-LogicDesignerのフローを実行するアクションです。
スケジュールを登録した後に、「Display Registration Complete Message」アクションを実行します。
以下のとおりに設定し、新規作成します。
アクション名 : Register Schedule
アクションアイテム :115

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01「標準」 - URL「」にリクエストを送信する
URL「$constant.REGISTER_URL」にリクエストを送信する
メソッド : 「POST」
リクエストパラメータ : なし
リクエストヘッダ : なし
リクエストデータ : 「$variable.requestData」
ステータスコード : なし
レスポンスデータ : なし
セキュアトークン : チェックを外す「標準」 - アクション「」を実行する
アクション「Display Registration Complete Message」を実行する

図：「Register Schedule」アクション
7. 「Confirm Input Contents」アクション「スケジュール登録」ボタンをクリックしたときに入力内容を確認し、必須項目が未入力の場合はエラーメッセージを表示します。
入力内容を確認し、必須項目がすべて設定されていた場合は「Register Schedule」アクションを実行します。
以下のとおりに設定し、新規作成します。
アクション名 : Confirm Input Contents
アクションアイテム :「imui」 - エラーメッセージ「」を表示する
エラーメッセージ「$i18n.validation_error」を表示する
詳細メッセージ : なし
クリックして閉じるフラグ : チェックを入れる
閉じる時間(ミリ秒) : なし
実行条件 :「いずれかの条件に一致」
変数「$variable.requestData.title」が「」のとき
変数「$variable.requestData.startDate」が「」のとき
変数「$variable.requestData.endDate」が「」のとき
変数「$variable.participantsList」が「」のとき

116

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01「標準」 - アクション「」を実行する
アクション「スケジュールを登録する」を実行する
実行条件 :「全ての条件に一致」
変数「$variable.requestData.title」が「」でないとき
変数「$variable.requestData.startDate」が「」でないとき
変数「$variable.requestData.endDate」が「」でないとき
変数「$variable.participantsList」が「」でないとき

図：「Confirm Input Contents」アクション
以上で、アプリケーション画面のアクションの設定が完了しました。
次節「エレメントのプロパティを設定する」では、アプリケーション画面に配置した各エレメントにプロパティを設定をします。

エレメントのプロパティを設定する
次に、アプリケーション画面に配置した各エレメントにプロパティを設定をします。
エレメント固有プロパティを設定する
共通プロパティを設定する
スタイルプロパティを設定する
イベントプロパティを設定する

エレメント固有プロパティを設定する
エレメント固有プロパティの設定を行います。
はじめに、フォームのコンテナ部分のエレメントのプロパティを設定します。
1. 「フォームコンテナ」エレメントの「エレメント固有」プロパティを以下のとおりに設定します。
containerType :「固定値」「90% (wide)」117

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「フォームコンテナ」エレメント - 「エレメント固有」プロパティの設定
次に、見出し部分のエレメントのプロパティを設定します。
1. 「フォームコンテナ」エレメント 内 - 「見出しレベル2」エレメントを以下のとおりに設定します。
textContent :「変数値」$i18n.schedule_registration

図：「見出しレベル2」エレメント - 「エレメント固有」プロパティの設定
次に、フォーム部分のエレメントのプロパティを設定します。
1. 「入力フォーム用テーブル」エレメント - 1段目の「見出しセル」エレメントを以下のとおりに設定します。
textContent :「変数値」$i18n.type118

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「見出しセル」エレメント - 「エレメント固有」プロパティの設定
2. 同様に、他の「見出しセル」エレメントを以下のとおりに設定します。
2段目の「見出しセル」エレメント :required :「固定値」
チェックを入れる
textContent :「変数値」$i18n.title
3段目の「見出しセル」エレメント :required :「固定値」
チェックを入れる
textContent :「変数値」$i18n.period
4段目の「見出しセル」エレメント :required :「固定値」
チェックを入れる
textContent :「変数値」$i18n.participant119

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「エレメント固有」プロパティの設定後の「見出しセル」エレメント
3. 「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント - 左の「ラジオボタン」エレメントを以下のとおりに設定します。
textContent :「変数値」$i18n.schedulename :「固定値」
scheduleTypevalue :
「固定値」
schedule
selected :「変数値」$variable.requestData.scheduleType120

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：「ラジオボタン」エレメント - 「エレメント固有」プロパティの設定
4. 同様に、右の「ラジオボタン」エレメントを以下のとおりに設定します。
textContent :「変数値」$i18n.event
name :「固定値」
scheduleTypevalue :
「固定値」
event
selected :「変数値」$variable.requestData.scheduleType

図：「ラジオボタン」エレメント - 「エレメント固有」プロパティの設定
5. 「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント - 「テキスト入力」エレメントを以下のとおりに設定します。
value :
「変数値」
$variable.requestData.title

121

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「テキスト入力」エレメント - 「エレメント固有」プロパティの設定
6. 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 左の「日付入力」エレメントを以下のとおりに設定します。
value :
$variable.requestData.startDate

図：「日付入力」エレメント - 「エレメント固有」プロパティの設定
7. 同様に、右の「日付入力」エレメントを以下のとおりに設定します。
value :
$variable.requestData.endDate

122

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「日付入力」エレメント - 「エレメント固有」プロパティの設定
8. 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 左の「プルダウン」エレメントを以下のとおりに設定します。
labels :「変数値」$variable.timePicker
values :「変数値」$variable.timePicker
value :
「変数値」
$variable.requestData.startTime

図：「プルダウン」エレメント - 「エレメント固有」プロパティの設定
9. 同様に、右の「プルダウン」エレメントを以下のとおりに設定します。

123

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
labels :「変数値」$variable.timePicker
values :「変数値」$variable.timePicker
value :
「変数値」
$variable.requestData.endTime

図：「プルダウン」エレメント - 「エレメント固有」プロパティの設定
10. 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 「ラベル」エレメントを以下のとおりに設定します。
textContent :
「固定値」
-

124

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：「ラベル」エレメント - 「エレメント固有」プロパティの設定
11. 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上の「ボックス」エレメント内 - 「テキストエリア」エレメ
ントを以下のとおりに設定します。
readonly :「固定値」
チェックを入れる
value :
「変数値」
$variable.participantsList

図：「テキストエリア」エレメント - 「エレメント固有」プロパティの設定
12. 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメント内 - 左の「フレックスコンテ
ナ」エレメント内 - 「ボタン」エレメントを以下のとおりに設定します。
style :
「固定値」
「button」
value :
「変数値」
$i18n.select_user

125

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ボタン」エレメント - 「エレメント固有」プロパティの設定
13. 同様に、右の「フレックスコンテナ」エレメント内 - 「アイコン」エレメントを以下のとおりに設定します。
iconClass :「im-ui-icon-common-16-clear」

図：「アイコン」エレメント - 「エレメント固有」プロパティの設定
最後に、登録ボタン部分のエレメントのプロパティを設定します。
1. 「フォームコンテナ」エレメント内 - 「オペレーションパーツ」エレメント - 「ボタン」エレメントを以下のとおりに設定します。
value :
「変数値」
$i18n.register126

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ボタン」エレメント - 「エレメント固有」プロパティの設定以上で、エレメント固有プロパティの設定が完了しました。

共通プロパティを設定する
共通プロパティの設定を行います。
1. 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 左の「プルダウン」エレメントを以下のとおりに設定します。
表示 / 非表示 :「変数値」$variable.showTimePicker

図：「プルダウン」エレメント - 「共通」プロパティの設定
2. 同様に、右の「プルダウン」エレメントを以下のとおりに設定します。
表示 / 非表示 :127

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01「変数値」$variable.showTimePicker

図：「プルダウン」エレメント - 「共通」プロパティの設定

コラム「表示 / 非表示」プロパティでは、画面にエレメントを表示するか指定します。
真偽値の変数「$variable.showTimePicker」を設定することで、表示 / 非表示を制御できます。
以上で、共通プロパティの設定が完了しました。

スタイルプロパティを設定する
スタイルプロパティの設定を行います。
1. 「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント - 左の「ラジオボタン」エレメントを以下のとおりに設定します。
「余白」プロパティ :外余白（右） :
「固定値」
0.4em

128

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ラジオボタン」エレメント - 「余白」プロパティの設定
2. 「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント - 左の「テキスト入力」エレメントを以下のとおりに設定します。
「幅・高さ」プロパティ :
横幅 :
「固定値」
90%

図：「テキスト入力」エレメント - 「幅・高さ」プロパティの設定
3. 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 各エレメントを以下のとおりに設定します。
左右の「日付入力」エレメント「余白」プロパティ :外余白（右） :
「固定値」
0.4em

129

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
左の「プルダウン」エレメント「余白」プロパティ :外余白（右） :
「固定値」
0.4em
「ラベル」エレメント「余白」プロパティ :外余白（右） :
「固定値」
0.4em

図：「余白」プロパティ設定後の「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント
4. 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上の「ボックス」エレメント内 - 「テキストエリア」エレメ
ントを以下のとおりに設定します。
「幅・高さ」プロパティ :
横幅 :
「固定値」
100%

130

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「テキストエリア」エレメント - 「幅・高さ」プロパティの設定
5. 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメントを以下のとおりに設定します。
「余白」プロパティ :外余白（上） :
「固定値」
10px

図：「ボックス」エレメント - 「余白」プロパティの設定
6. 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメント内 - 右の「フレックスコンテ
ナ」エレメントを以下のとおりに設定します。
「テキストスタイル」プロパティ :
横揃え :
「固定値」
「end」

131

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「フレックスコンテナ」エレメント - 「テキストスタイル」プロパティの設定以上で、スタイルプロパティの設定が完了しました。

イベントプロパティを設定する
イベントプロパティの設定を行います。
はじめに、ページ読み込み時のイベントを設定します。
ページ読み込み時のイベントは、「コンテナ」に対して設定できます。
1. 「デザイナ」画面上部、ヘッダ内の「コンテナを選択」アイコンをクリックします。

図：ヘッダ - 「コンテナを選択」アイコン
2. 「イベント」プロパティを以下のとおりに設定します。
ページ読み込み時 : 「Set Time Picker」

132

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「コンテナ」 - 「イベント」プロパティの設定以上で、ページ読み込み時のイベントの設定が完了しました。
次に、各エレメントに対してイベントプロパティを設定します。
1. 「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント - 左の「ラジオボタン」エレメントを以下のとおりに設定します。
入力値変更時 : 「Switch Display of Term Item」

図：「ラジオボタン」エレメント - 「イベント」プロパティの設定
2. 同様に、右の「ラジオボタン」エレメントを以下のとおりに設定します。
入力値変更時 : 「Switch Display of Term Item」

133

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ラジオボタン」エレメント - 「イベント」プロパティの設定
3. 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメント内 - 左の「フレックスコンテ
ナ」エレメント内 - 「ボタン」エレメントを以下のとおりに設定します。
クリック時 : 「Select User」

図：「ボタン」エレメント - 「イベント」プロパティの設定
4. 同様に、右の「フレックスコンテナ」エレメント内 - 「アイコン」エレメントを以下のとおりに設定します。
クリック時 : 「Clear Participants」

134

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「アイコン」エレメント - 「イベント」プロパティの設定
5. 「フォームコンテナ」エレメント内 - 「ボックス」エレメント - 「ボタン」エレメントを以下のとおりに設定します。
クリック時 : 「Confirm Input Contents」

図：「ボタン」エレメント - 「イベント」プロパティの設定以上で、アプリケーション画面に配置した各エレメントのプロパティの設定が完了しました。
次節「アプリケーションの動作を確認する」では、作成したアプリケーションを実行し、実行結果の確認を行います。

アプリケーションの動作を確認する
次に、本チュートリアルで作成したアプリケーションを実行し、実行結果の確認を行います。
アプリケーションを実行する

135

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
アプリケーションを実行する
1. 「デザイナ」画面上部、ヘッダ内の「プレビュー」アイコンをクリックし、「プレビュー」画面を表示します。

図：「プレビュー」画面
2. 「期間」項目の「プルダウン」エレメントを選択します。
時刻を選択できることを確認します。

図：「期間」項目 - 「プルダウン」エレメント
3. 「種別」項目の「イベント」を選択します。
「期間」項目の「プルダウン」エレメントが非表示になることを確認します。

136

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「種別」項目の「イベント」を選択
4. 必須項目が未入力の状態で、「登録」ボタンをクリックします。
エラーメッセージが表示されることを確認します。

図：エラーメッセージ
5. 「ユーザ選択」ボタンをクリックします。
「ユーザ検索」ダイアログが表示されることを確認します。

137

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「ユーザ検索」ダイアログ
6. ユーザを選択し、「決定」ボタンをクリックします。
「テキストエリア」エレメントに、選択したユーザが表示されることを確認します。

図：「テキストエリア」エレメント
7. 「アイコン」エレメントをクリックします。
「テキストエリア」エレメントから、ユーザが消えることを確認します。

138

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「アイコン」エレメントクリック後の「テキストエリア」エレメント
8. 入力フォームを以下のとおりに設定します。
種別 : 「スケジュール」
タイトル : BloomMaker チュートリアルスケジュール登録
期間 : 任意の日付・時刻を設定
参加者 : 現在ログインしているユーザを選択

図：スケジュール登録
9. 「登録」ボタンをクリックします。
メッセージ「スケジュールを登録しました。」が表示されることを確認します。

139

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：メッセージ「スケジュールを登録しました。」
10. 入力フォームを以下のとおりに設定します。
種別 : 「イベント」
タイトル : BloomMaker チュートリアルイベント登録
期間 : 任意の日付を設定
参加者 : 現在ログインしているユーザを選択

図：イベント登録
11. 「登録」ボタンをクリックします。
メッセージ「イベントを登録しました。」が表示されることを確認します。

140

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：メッセージ「イベントを登録しました。」
12. 「サイトマップ」→「コラボレーション」→「スケジュール カレンダー」から、「スケジュール」画面を表示します。
前の手順で設定した日付・時刻にスケジュール、および、イベントが登録されていることを確認します。

図：「スケジュール」画面
以上で、スケジュール登録アプリケーションの動作確認が完了しました。

アプリケーション画面のテンプレートを作成する
本チュートリアルでは、アプリケーション画面のテンプレートを作成する方法を説明します。

テンプレートカテゴリを作成する
テンプレート一覧画面を利用し、アプリケーション画面の「テンプレート」を作成します。
テンプレートはテンプレートカテゴリに紐づけられる形で管理されているため、はじめにテンプレートカテゴリの作成を行います。

141

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
テンプレート一覧画面を表示する
テンプレートカテゴリを新規作成する

テンプレート一覧画面を表示する
1. 「サイトマップ」→「BloomMaker」→「テンプレート一覧」から、「テンプレート一覧」画面を開きます。

図：サイトマップ
2. 「テンプレート一覧」画面が表示されます。

テンプレートカテゴリを新規作成する
本チュートリアルで利用するテンプレートカテゴリを作成します。
1. 「テンプレート一覧」画面左上の「カテゴリ新規作成」をクリックします。

図：「テンプレート一覧」画面 - 「カテゴリ新規作成」
2. テンプレートカテゴリ情報が表示されます。

142

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：テンプレートカテゴリ情報
3. テンプレートカテゴリ情報の各項目を以下のとおりに設定します。
カテゴリID : tutorial_category
カテゴリ名 : チュートリアルカテゴリ

図：テンプレートカテゴリ情報の入力
4. 「登録」をクリックします。
次節「テンプレートを作成する」では、「テンプレート」を管理するための定義情報を作成します。

テンプレートを作成する
次に、テンプレートを管理するための定義情報を作成します。
テンプレートを新規作成する

テンプレートを新規作成する

143

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
1. 「サイトマップ」→「BloomMaker」→「テンプレート一覧」から、「テンプレート一覧」画面を開きます。
2. 追加先のテンプレートカテゴリをテンプレートツリーから選択しクリックします。

図：「テンプレートカテゴリ」画面 - テンプレートツリー
3. 「テンプレート一覧」画面左上の「テンプレート新規作成」をクリックします。

図：「テンプレート一覧」画面 - 「テンプレート新規作成」
4. テンプレート情報が表示されます。

144

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：テンプレート情報
5. テンプレート情報の各項目を以下のとおりに設定します。
テンプレートID : tutorial_template
テンプレート名 : チュートリアルテンプレート
コンテンツ種別 : 「imui」
コピー元コンテンツ :コンテンツID : tutorial_contents
コンテンツ名 : チュートリアルコンテンツ

図：テンプレート情報の入力
テンプレート新規作成では既存のコンテンツをコピーして利用できます。
コピー元コンテンツを設定しない場合は、テンプレートとなる画面デザインを新たに一から作成します。

145

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
コンテンツは「検索」アイコンから「コンテンツ検索」画面を開くことで、選択ができます。

図：「コンテンツ検索」画面
6. 「登録」をクリックします。
次節「テンプレートを使用する」では、テンプレートの使用方法を説明します。

テンプレートを使用する
次に、テンプレートの使用方法を説明します。
テンプレートを使用してコンテンツを新規作成する

テンプレートを使用してコンテンツを新規作成するコンテンツ新規作成時にテンプレートを使用します。
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。
2. コンテンツ追加先のコンテンツカテゴリをコンテンツツリーから選択しクリックします。
3. 「コンテンツ一覧」画面左上の「コンテンツ新規作成」をクリックします。
4. コンテンツ情報が表示されます。
5. コンテンツ情報の各項目を以下のとおりに設定します。
コンテンツID : 任意のID
コンテンツ名 : 任意の名前
コンテンツ種別 : 「imui」
テンプレート :テンプレートID : tutorial_template
テンプレート名 : チュートリアルテンプレート

146

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：コンテンツ情報の入力
コンテンツ新規作成では既存のテンプレートを利用できます。
テンプレートを設定しない場合は、画面デザインを新たに一から作成します。
テンプレートは「検索」アイコンから「テンプレート選択」ダイアログを開くことで、選択ができます。

図：テンプレート選択
以上で、テンプレートを使用したコンテンツの作成が完了しました。

アプリケーション画面のエレメントセットを作成する
147

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
本チュートリアルでは、複数のエレメントをまとめたテンプレートとなるエレメントセットを作成する方法を説明します。

エレメントセットカテゴリを作成する
エレメントセット一覧画面を利用し、複数のエレメントをまとめる「エレメントセット」を作成します。
エレメントセットはエレメントセットカテゴリに紐づけられる形で管理されているため、はじめにエレメントセットカテゴリの作成を行います。
エレメントセット一覧画面を表示する
エレメントセットカテゴリを新規作成するエレメントセット一覧画面を表示する
1. 「サイトマップ」→「BloomMaker」→「エレメントセット一覧」から、「エレメントセット一覧」画面を開きます。

図：サイトマップ
2. 「エレメントセット一覧」画面が表示されます。

エレメントセットカテゴリを新規作成する
本チュートリアルで利用するエレメントセットカテゴリを作成します。
1. 「エレメントセット一覧」画面左上の「カテゴリ新規作成」をクリックします。

148

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「エレメントセット一覧」画面 - 「カテゴリ新規作成」
2. エレメントセットカテゴリ情報が表示されます。

図：エレメントセットカテゴリ情報
3. エレメントセットカテゴリ情報の各項目を以下のとおりに設定します。
カテゴリID : tutorial_category149

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
カテゴリ名 : チュートリアルカテゴリ

図：エレメントセットカテゴリ情報の入力
4. 「登録」をクリックします。
次節「エレメントセットを作成する」では、「エレメントセット」を管理するための定義情報を作成します。

エレメントセットを作成する
次に、エレメントセットを管理するための定義情報を作成します。
エレメントセットを新規作成するエレメントセットを新規作成する
1. 「サイトマップ」→「BloomMaker」→「エレメントセット一覧」から、「エレメントセット一覧」画面を開きます。
2. 追加先のエレメントセットカテゴリをエレメントセットツリーから選択しクリックします。

150

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「エレメントセットカテゴリ」画面 - エレメントセットツリー
3. 「エレメントセット一覧」画面左上の「エレメントセット新規作成」をクリックします。

図：「エレメントセット一覧」画面 - 「エレメントセット新規作成」
4. エレメントセット情報が表示されます。

151

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：エレメントセット情報
5. エレメントセット情報の各項目を以下のとおりに設定します。
エレメントセットID : tutorial_element_set
エレメントセット名 : チュートリアルエレメントセット
コンテンツ種別 : 「imui」

152

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
図：エレメントセット情報の入力
6. 「登録」をクリックします。

図：エレメントセットの登録
7. 「デザイン編集」をクリックして、デザイナを開きます。

図：エレメントセットのデザイン画面表示

153

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
8. エレメントパレットから、登録したいエレメントをコンテナにドラッグ&ドロップします。

図：エレメントセットの配置
9. 「デザイナ」画面上部、ヘッダ内の「上書き保存」アイコンをクリックします。

図：ヘッダ - 「上書き保存」アイコン
10. コンテナ下部に保存メッセージが表示されます。

154

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：保存メッセージ
次節「エレメントセットを使用する」では、エレメントセットの使用方法を説明します。

エレメントセットを使用する
次に、エレメントセットの使用方法を説明します。
エレメントセットをコンテンツで使用する
エレメントセットをテンプレートで使用する

エレメントセットをコンテンツで使用する
すでに作成されているコンテンツで、エレメントセットを使用します。
1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」から、「コンテンツ一覧」画面を表示します。
2. コンテンツツリーから、登録済みのコンテンツを選択します。
3. 「デザイン編集」をクリックして、デザイナを開きます。
4. エレメントパレットからアプリケーション画面に表示させたいエレメントセットをコンテナにドラッグ&ドロップします。

155

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：エレメントセットの配置
5. エレメントセットを配置すると影響範囲ダイアログが表示されます。
「エレメントセットの利用方法」の「コピー」を選択し、「決定」ボタンをクリックします。

図：影響範囲ダイアログ

156

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
コラム「エレメントセットの利用方法」を「参照」にした場合、エレメントセットの変更が自動的にコンテンツに反映されます。
詳細は「IM-BloomMaker for Accel Platform ユーザ操作ガイド」-「エレメントセットを使用する」を参照してください。
以上で、エレメントセットを使用したコンテンツの作成が完了しました。

エレメントセットをテンプレートで使用する
すでに作成されているテンプレートで、エレメントセットを使用します。
1. 「サイトマップ」→「BloomMaker」→「テンプレート一覧」から、「テンプレート一覧」画面を表示します。
2. テンプレートツリーから、登録済みのテンプレートを選択します。
3. 「デザイン編集」をクリックして、デザイナを開きます。
4. エレメントパレットからアプリケーション画面に表示させたいエレメントセットをコンテナにドラッグ&ドロップします。

図：エレメントセットの配置
5. エレメントセットを配置すると影響範囲ダイアログが表示されます。
「エレメントセットの利用方法」の「コピー」を選択し、「決定」ボタンをクリックします。

157

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：影響範囲ダイアログ
以上で、エレメントセットを使用したテンプレートの作成が完了しました。

ログイン情報取得アプリケーションを作成する
チュートリアルの概要（作成物のイメージ）
本チュートリアルでは、IM-LogicDesigner のルーティング定義と IM-Repository の定義を利用し、ログイン情報を取得するアプリケーションを作成します。
アプリケーションの作成を通して、以下のような技法、および、要素の利用方法を説明します。
intra-mart Accel Platform のテーマを利用したアプリケーション画面 の作成
アクションの設定
ロジックフローで作成した REST API の実行作成するアプリケーションの動作イメージは以下のとおりです。
1. ログインユーザ情報を取得する画面の「ログインユーザ情報を取得」ボタンをクリックする。
2. 現在ログインしているユーザの下記情報が表示される。
ユーザコード
ユーザ名
所属組織

158

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：ログイン情報取得アプリケーション画面

事前準備
チュートリアルを進めるにあたり、以下の事前準備が行われていることが前提です。

チュートリアル実行ユーザ
本チュートリアルでは、下記ロールが付与されているユーザで実施します。
必要に応じて 「サイトマップ」→「マスタメンテナンス」→「ユーザ」よりロールの付与を行ってください。
IM-BloomMaker 管理者
LogicDesigner 管理者
IM-Repository 管理者

定義ファイルのインポート
本チュートリアルを開始する前に以下のリンクから、IM-Repository の定義ファイルと IM-LogicDesigner の定義ファイルをダウンロードし、インポートを行ってください。
im-repository-data-bloommaker-tutorial-get-login-data.xlsx
im_logicdesigner-data-bloommaker-tutorial-get-login-data.zip

コラム
IM-LogicDesignerの定義ファイルのインポートについての詳細は、「IM-LogicDesigner ユーザ操作ガイド」-「インポート/エクス
ポート」を参照してください。

コラム
IM-Repository の定義ファイルのインポートについての詳細は「IM-Repository ユーザ操作ガイド」-「インポートを行う」を参照してください。
また、定義ファイルのインポートを行った後に、フロールーティングの認可設定を行ってください。

コラム
フロールーティングの認可設定ついての詳細は、「IM-LogicDesigner ユーザ操作ガイド」-「フロールーティングの認可設定」を参照してください。

エンティティの作成
アプリケーション画面の作成に入る前に、本チュートリアルではインポートした辞書項目が含まれているエンティティを作成します。

159

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
ログインユーザ情報のような複数の情報を一つにまとめて扱うときに、エンティティを作成すると便利です。
1. 「サイトマップ」→「Repository」→「エンティティ一覧」をクリックし、「エンティティ一覧」画面を表示します。

2. 「カテゴリ新規追加」アイコンをクリックします。

3. 「カテゴリ名」を下記のとおりに設定します。
bloommaker_tutorial_entity
4. 「影響範囲確認」ボタンをクリックします。

160

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

5. 任意のコメントを入力し、「適用」ボタンをクリックします。

6. 「適用確認」ダイアログの「決定」ボタンをクリックします。

161

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

7. カテゴリが作成されます。

8. 「サイトマップ」→「Repository」→「エンティティ一覧」をクリックし、「エンティティ一覧」画面を表示します。

162

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

9. 前項で作成したカテゴリをクリックし、「エンティティ新規作成」アイコンをクリックします。

10. エンティティ名を下記のとおりに設定します。
標準
Login User Information

163

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

11. 「エンティティ項目」の「エンティティ項目編集」ボタンをクリックします。
12. 「辞書項目/エイリアス検索」画面が表示されます。
13. tutorial_category カテゴリをクリックします。

14. 選択したカテゴリ内にある辞書項目がすべて選択済み項目に表示されていることを確認し、「決定」ボタンをクリックします。

164

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

15. 「確定確認ダイアログ」で「決定」ボタンをクリックします。

16. 「エンティティ一覧」画面でエンティティ項目に先ほど選択した辞書項目が表示されていることを確認します。
17. 「影響範囲確認」ボタンをクリックします。

165

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

18. 任意のコメントを入力し、「適用」ボタンをクリックします。

19. 「適用確認」ダイアログの「決定」ボタンをクリックします。

166

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

20. エンティティにインポートした辞書項目が紐づけられました。

コラム
IM-Repository での エンティティの新規作成方法については 「IM-Repository ユーザ操作ガイド」 を参照してください。
以上で、エンティティの作成が完了しました。
次節「画面を作成する」ではアプリケーションで利用する画面を作成します。

画面を作成する
ログイン情報を取得する画面の作成を開始します。
「デザイナ」画面を利用し、アプリケーション画面を構成するエレメントを配置します。

167

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
エレメントを配置する

エレメントを配置する
まず、画面のレイアウトに分類されるエレメントを配置します。
1. 「レイアウト(imui)」カテゴリに分類される一覧から「フォームコンテナ」をドラッグ＆ドロップでコンテナページ上に配置します。

2. 「フォームコンテナ」エレメントのプロパティタブ内にある「エレメント固有」カテゴリをクリックします。
3. 「containerType」プロパティのプルダウンから「75%（normal）」を選択します。

4. 「レイアウト」カテゴリに分類される一覧から「ボックス」をドラッグ＆ドロップで「フォームコンテナ」エレメントの下に配置します。

168

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

5. 「ボックス」エレメントのプロパティタブ内にある「余白」カテゴリをクリックします。
6. 「外余白（上）」プロパティの入力欄に「50px」を設定します。

7. 「ボックス」エレメントのプロパティタブ内にある「テキストスタイル」カテゴリをクリックします。
8. 「横揃え」プロパティのプルダウンから「center」を選択します。

169

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

以上で、レイアウトに分類されるエレメントの配置が完了しました。
最後に、フォーム部品に分類されるエレメントを配置します。
1. 「フォーム部品」カテゴリに分類される一覧から「テキスト入力」を以下のとおりに配置します。
配置した「フォームコンテナ」エレメント - 「テーブルデータ」エレメントに「テキスト入力」エレメントを配置

2. 上から3段目に配置した「テキスト入力」エレメントをクリックします。

170

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

3. プロパティタブにある「幅・高さ」カテゴリをクリックします。
4. 「横幅」プロパティの入力欄に「80%」を設定します。

5. 「フォーム部品（imui）」に分類される一覧から「ボタン」をドラッグ＆ドロップで「ボックス」エレメント内に配置します。

171

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

以上でフォーム部品に分類されるエレメントの配置が完了しました。
次節「変数・定数・多言語を定義する」ではアプリケーション画面で利用する変数や定数などを定義します。

変数・定数・多言語を定義する
次に、ログイン情報取得アプリケーション画面で利用する変数・定数・多言語を定義します。
IM-Repository で作成した辞書項目の定義を変数として追加する
定数を新規作成する
多言語を新規作成する

IM-Repository で作成した辞書項目の定義を変数として追加する
まず、IM-Repository で作成した定義を変数として追加します。
1. 変数タブ上のプルダウンが「変数」になっていることを確認します。
2. 「IM-Repositoryから作成」アイコンをクリックします。

172

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

3. 「エンティティをインポート」をクリックします。

4. 「エンティティ検索」ダイアログが表示されます。
5. 「bloommaker_tutorial_entity」カテゴリをクリックします。

173

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

6. 「選択済み項目」に「Login User Information」が表示されていることを確認します。
7. 「決定」ボタンをクリックします。

8. 「確定確認」ダイアログで「決定」ボタンをクリックします。

174

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

9. $variable 配下に変数が作成されます。

10. 変数 key1 の「編集」アイコンをクリックします。

175

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

11. キー名を「loginUser」に変更します。
12. 「決定」ボタンをクリックします。

13. 変数名が変更されます。

176

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

以上で変数の作成が完了しました。

定数を新規作成する
次に、「デザイン編集」画面で IM-LogicDesigner の API にアクセスする URL を設定する定数を作成します。
1. 「変数」タブをクリックします。
2. プルダウンが「定数」になっていることを確認します。
3. 「JSON形式で編集」アイコンをクリックします

4. 「JSONエディタ」に下記 json を貼り付けます。
{"GET_LOGIN_DATA_URL": "logic/api/bloommaker/tutorial/logindata"}

5. 「決定」ボタンをクリックします。

177

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

6. $constant 配下に定数が作成されます。

以上で定数の定義が完了しました。

多言語を新規作成する
最後に、「デザイン編集」画面で利用するエレメントのラベルに利用する多言語を作成します。
1. プルダウンが「多言語」になっていることを確認します。
2. 「新規作成」アイコンをクリックします。

178

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

3. 1 つ目の多言語を下記のとおりに設定します。
キー名currentLoginUser
標準
Current Login User
日本語
現在のログインユーザ
4. 1 つ目の多言語を作成したときと同じ手順で下記多言語を作成します。
2 つ目の多言語
キー名
userCd
標準
User Code日本語
ユーザコード3 つ目の多言語
キー名
userName
標準
User Name
日本語
ユーザ名
4 つ目の多言語
キー名
memberDepartment
標準
Member Department
日本語
所属組織
5 つ目の多言語
キー名
getLoginUser
標準
Get Login User Information
日本語

179

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
ログインユーザ情報を取得

図：多言語を作成後の変数タブ
以上で多言語の定義が完了しました。
次節「アクションを作成する」ではアプリケーション画面に設定するアクションを作成します。

アクションを作成する
次に、アプリケーション画面に設定するアクションを作成します。
アクションを作成する

アクションを作成する
1. 「アクション」タブをクリックします。
2. 「新規作成」アイコンをクリックします。

3. 「Get Login User」アクションを作成します。
これは IM-LogicDesigner で作成した REST API からログインしているユーザの情報を取得し、指定された変数に取得結果を格納するアクションです。
以下のとおりに設定し、新規作成します。
アクション名 ：Get Login User
アクションアイテム ：「標準」 - URL にリクエストを送信する

180

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
URL「$constant.GET_LOGIN_DATA_URL」にリクエストを送信する
メソッド ： GET
レスポンスデータ ： $variable.loginUser

図：「ログインユーザ情報を取得する」アクション
以上で アプリケーション画面のアクションの作成が完了しました。
次節「配置したエレメントに変数・定数・多言語とアクションを設定する」では作成した変数とアクションを配置したエレメントに設定します。

配置したエレメントに変数・定数・多言語とアクションを設定する
次に、作成した変数や定数、多言語、アクションを設定します。
変数・定数・多言語を設定する
アクションを設定する

変数・定数・多言語を設定する
各エレメントに作成した変数・定数・多言語の設定を行います。
はじめに、「フォームコンテナ」エレメントを設定します。
1. 「フォームコンテナ」エレメント配下にある「見出しレベル2」エレメントの「エレメント固有」プロパティを下記のとおりに設定します。
textContent ：ラジオボタン
変数値
入力値$i18n.currentLoginUser
2. 「フォームコンテナ」エレメント配下にある「テーブルヘッダ」エレメントの「エレメント固有」プロパティを下記のとおりに設定します。
上から 1 段目のエレメントの textContent ：ラジオボタン
変数値
入力値$i18n.userCd
上から 2 段目のエレメントの textContent ：ラジオボタン
変数値

181

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
入力値$i18n.userName
上から 3 段目のエレメントの textContent ：ラジオボタン
変数値
入力値$i18n.memberDepartment
3. 「フォームコンテナ」エレメント配下にある「テーブルデータ」エレメント内に配置した「テキスト入力」エレメントの「エレメント固有」
プロパティを下記のとおりに設定します。
上から 1 段目のテキスト入力エレメントの value ：ラジオボタン
変数値
入力値$variable.loginUser.userCd
上から 2 段目のテキスト入力エレメントの value ：ラジオボタン
変数値
入力値$variable.loginUser.userName
上から 3 段目のテキスト入力エレメントの value ：ラジオボタン
変数値
入力値$variable.loginUser.memberDepartment
次に、 「ボックス」エレメント配下にある「ボタン」エレメントの「エレメント固有」プロパティを下記のとおりに設定します。
value:
ラジオボタン
変数値
入力値$i18n.getLoginUser

図： プロパティ値設定後の「デザイナ」画面以上で設定が完了しました。
最後に、作成したアクションをエレメントに設定します。

182

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
アクションを設定する「ボックス」エレメント配下にある「ボタン」エレメントに作成したアクションを設定します。
1. 「ボックス」エレメント配下にある「ボタン」エレメントをクリックします。
2. プロパティタブ上にある「イベント」カテゴリをクリックします。
3. 「クリック時」イベントのプルダウンから「Get Login user」を選択します。

以上でアクションの設定が完了しました。
次節「作成したアプリケーションの動作を確認する」では作成したアプリケーション画面の動作を確認します。

作成したアプリケーションの動作を確認する
ここでは作成したアプリケーションを実行し、実行結果の確認を行います。
アプリケーションを実行する

アプリケーションを実行する
1. 「デザイナ」画面上部、ヘッダ内の「プレビュー」アイコンをクリックし、「プレビュー」画面を表示します。

183

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

図：「プレビュー」画面
2. 「ログインユーザ情報を取得」ボタンをクリックします。
各項目に現在ログインしているユーザの情報が表示されていることを確認します。

以上で、ログイン情報を取得するアプリケーションの動作確認が完了しました。

184

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

付録
チュートリアルデータのアーカイブファイル
この章では、これまでのチュートリアルで作成してきたアプリケーションのアーカイブデータを提供します。
作成したアプリケーションが動作しない場合などの参考用、「応用編 - より高度なアプリケーションの作成」を進める上での作業データ用などにご利用ください。
基礎編
応用編
インポート方法

基礎編
基礎編（レイアウトモード） - チュートリアルアプリケーションアーカイブ
基礎編（レイアウトモード）アーカイブ（ZIP形式）
基礎編（デベロップモード） - チュートリアルアプリケーションアーカイブ
基礎編（デベロップモード）アーカイブ（ZIP形式）

応用編
応用編「スケジュール登録アプリケーションを作成する」
LogicDesigner スケジュール登録フロー定義ファイル（ZIP形式）
スケジュール登録アプリケーション コンテンツ定義ファイル（ZIP形式）

インポート方法
コンテンツ、および、ルーティング定義のインポート方法を説明します。
1. 「サイトマップ」→「BloomMaker」→「インポート」から、「インポート」画面を開きます。

図：サイトマップ
2. 「インポート」画面が表示されます。

図：「インポート」画面

185

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01
3. 「インポート種別」を選択します。
新規：インポート対象の情報が存在しない場合のみインポートを行います。
更新：全ての情報のインポートを行います。インポート対象の情報が存在する場合、上書きされます。

図：「インポート」画面 - 「インポート種別」
4. 「インポートファイル」 - 「ファイルを選択」をクリックし、インポート用のアーカイブファイルを選択します。

図：「インポート設定」 - 「インポートファイル」 - 「ファイルを選択」
5. 「インポート実行」をクリックします。

図：「インポート実行」
以上でインポートが完了しました。

186

IM-BloomMaker for Accel Platform — IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

187