マスタメンテナンステンプレートから作成したアプリケーションで日時情報を利用する手順

このCookBookでは、マスタメンテナンステンプレートから作成したアプリケーションで、日時情報をリッチテーブル内で活用する手順について説明します。

マスタメンテナンステンプレートとは

「マスタメンテナンス」テンプレートは、社内で利用される様々な製品や業務に関わる重要な基礎情報（マスタ情報）を一元的に管理するためのアプリケーションを作成する雛形です。

このテンプレートを活用することで、マスタ情報の登録、編集、参照といった基本的な操作を備えたアプリケーションを効率的に開発でき、情報の品質向上、整合性確保、業務効率化に繋げることができます。

テンプレートには、マスタ情報を効果的に管理するために、以下のような基本的な機能が含まれています。

• 登録機能: 新しいマスタ情報をシステムに登録する機能
• 編集機能: 既存のマスタ情報を修正・更新する機能
• 参照機能: 登録されているマスタ情報を検索・閲覧する機能
• 検索機能: 目的の情報を迅速に見つけ出すための検索機能

関連リンク

本CookBookでの日時情報の扱いについて

Accel Studio のマスタメンテナンステンプレートから作成されたアプリケーションでは、標準でデータ項目に「日付」型を利用できます。しかし、時刻情報を含む「日時」データを画面上で適切に表示したり、入力したりするには、標準の状態からいくつかの追加設定が必要となります。

本CookBookでは、このマスタメンテナンステンプレートで作成したアプリケーションにおいて、時刻情報を含む「日時」データを適切に扱い、活用するための一連の手順を具体的に解説します。この手順を踏むことで、「日時」情報の表示、入力、さらには経過時間に応じた強調表示などが可能になります。

日時情報とは

日時情報とは、年月日や時分秒などを指定するためのデータ形式です。コンピュータシステムやウェブアプリケーションにおいて、日時情報は通常、以下のような要素で構成されます。

日付の構成要素：
- 年（Year）: 西暦などの年を表す数値（例：2025年）
- 月（Month）: 1〜12の月を表す数値
- 日（Day）: 月における日を表す数値（1〜31）

時刻の構成要素：
- 時（Hour）: 0〜23（24時間表記）または1〜12（AM/PM表記）
- 分（Minute）: 0〜59の分を表す数値
- 秒（Second）: 0〜59の秒を表す数値
- ミリ秒（Millisecond）: より精密な時間表現（1秒の1/1000）

ユースケース

マスタメンテナンス機能を持つアプリケーションにおける、日時情報の活用シーンには以下のようなものが考えられます。

• 有効期限管理: 商品マスタや価格マスタなど、有効期間（開始日時・終了日時）を持つ情報の管理
• イベント管理: キャンペーンや特別セールなどの開催期間（開始日時・終了日時）の設定と管理
• 作業スケジュール管理: 定期メンテナンスや点検作業などの予定日時の管理
• ログ・履歴管理: システムの利用状況（ユーザーのログイン/ログアウト時刻など）の記録と分析
• 在庫管理: 商品の入荷日時や出荷予定日時など、時間情報を含む在庫変動の管理
• 予約システム: 施設や設備の予約可能日時（時間単位）の管理

目標

本記事では、Accel Studioのマスタメンテナンステンプレートをベースに、日時情報の表示・入力をカスタマイズし、さらに経過時間による強調表示機能を持つ「緊急作業管理アプリ」を作成する手順を解説します。

緊急作業管理アプリの概要

ここで作成する緊急作業管理アプリは、生産ラインでのトラブル対応やシステム障害対応など、緊急性が高く、発生からの経過時間管理が重要な作業を管理するためのアプリケーションです。
日時情報を活用することで、「いつ問題が発生し、どれだけ時間が経過しているか」を視覚的に把握しやすくし、優先度の高い作業への迅速な対応を支援します。

主な機能：
- 緊急作業登録：タスク名、発生日時、作業内容、優先度などを記録
- 一覧表示：登録された作業を一覧で表示（日時表示に対応）
- 経過時間アラート：発生から一定時間（ここでは24時間）が経過した未対応作業を一覧上で強調表示

サンプルアプリ（完成版）:cookbook258464_samle.zip

日時表示機能付きマスタメンテナンスがアプリをビルドする方法

ここから、具体的なアプリケーションの作成とカスタマイズの手順を説明します。

1. アプリケーションの作成を開始

はじめに、Accel Studioのアプリケーション管理画面を開きます。

任意のカテゴリを選択するか、新しいカテゴリを作成して選択した後、「アプリケーションを新規作成」ボタンをクリックします。

業務テンプレート一覧画面が表示されたら、以下の順で選択を進めます。

1. 「マスタメンテナンス」テンプレートを選択し、「次へ」をクリックします。
2. 「新しくエンティティを作成（初めての方はこちら）」を選択し、「次へ」をクリックします。

2. アプリケーションのビルド

次に、アプリケーションの基本情報とデータ構造を定義します。

• アプリケーションID： emergency_task
• アプリケーション名： 緊急作業管理
• 主キーの自動採番設定： 「主キーの自動採番を利用する」にチェックを入れ、「連番（文字列）を利用する」を選択します。

「扱うデータの定義」を以下のように入力します。

• エンティティ名： emergency_task
• エンティティに紐づくテーブル名： emergency_task

__注意: ここでは「発生日時」のデータ型を一旦「日付」で作成します。後の手順で「日時」に変更します。__

その後、画面下部の「アプリケーション作成」ボタンをクリックし、ビルドを実行します。

完了後、「アプリケーションの作成が完了しました。」と記載されている行の右側にあるアイコンをクリックし、アプリケーション管理画面に移動しましょう

アプリケーション管理画面の中から画面URLというカテゴリの「緊急作業管理 一覧画面」のURLを取得し、アクセスしてみましょう。

以下のようなアプリケーションが作成できていることが確認できます。

実際にデータを登録してみましょう。右上の新規作成ボタンを押します。

このような登録画面ができるので任意の情報を入力して登録ボタンを押します。

そうするとさきほどとは違い、データが表示されます。

しかし、一覧画面の「発生日時」カラムを確認すると、日付のみが表示されており、時刻が表示されていません。
また、登録画面でも日付入力欄しかなく、時刻を入力する欄がありませんでした。

ここからは、時刻情報も扱えるように設定を変更していきます。

3. 日付型から日時型への変更

日時表示を行うために以下の三つを実施します。
1. 辞書項目のデータ型を「日付」から「日時」に変更する。
2. 変更した辞書項目の情報をエンティティ定義に反映させる。
3. IM-BloomMakerを使い、画面（一覧、登録・編集・参照）の表示と入力を「日時」に対応させる。

1. 辞書項目の型変更

まずは先ほど開いていたアプリケーション管理画面から下にスクロールし、下部にあるエンティティをクリックします。

その後画面上部の辞書項目一覧をクリックします。

辞書項目一覧画面を表示後に左の「マスタメンテナンス」というカテゴリから「発生日時」を選択して、少し下にスクロールします。

そうすると「型テンプレート」という項目があるので、そちらを「DATETIME」にします。

画面下部に「保存されていない変更があります」というメッセージが表示されることを確認します。

次に、「影響範囲確認」ボタンをクリックします。表示された「履歴情報入力」ウィンドウで、「コメント」に任意の内容を入力し、「適用」ボタンをクリックします。

以上で辞書項目の型変更は完了です。

2. エンティティ内の辞書項目の変更取り込み

引き続いては、辞書項目で行った変更をエンティティ定義に反映させます。

タスク一覧画面の中から「エンティティ一覧」をクリックします。

続いては左の「業務テンプレートから作成」配下にある「emergency_task」を選択し、上部のタブから「データ定義」を選択します。

表示された「定義情報」セクションの「編集」ボタンをクリックします。

すると、データ定義のウィンドウが表示されるのでウィンドウ下部の「次へ」のボタンを3度続けてクリックします。

最後に「反映」ボタンをクリックします。

ウィンドウが自動的に閉じられるので、「影響範囲確認」のボタンをクリックして、「履歴情報入力」の「コメント」に任意の値を入力して、「適用」ボタンをクリックします。

これでエンティティ内の辞書項目の変更取り込みは完了です。

この後はIM-BloomMakerを利用して画面の修正を行います。

3. IM-BloomMakerで画面内容の変更

このステップでは主に二点の画面内容の変更を行います。
まずやるのは、表示の変更です。
現時点では日付に合わせた表示の設定になっているので、それを日時に対応させます。
こちらの対象は「一覧画面」になります。

そして、登録時に時間も入力できるように入力欄を追加します。
こちらの対象は「登録・編集・参照画面」になります。

一覧画面の変更

アプリケーション一覧から「緊急作業管理」アプリを選択します。

そこから、「画面コンテンツ」の「緊急作業管理 一覧画面」を選択します。

IM-BloomMakerの編集画面が表示されるので、以下の手順を踏みます。

➀： 右部のサイドバーから「変数」をクリック
➁： 「columnSettings」配下の「emergency_task_datetime」をクリック
➂： 「変数」タブの真下あたりにある「新規作成」ボタンをクリック

その後、以下の内容を入力し、「決定」ボタンをクリックします。

キー名： format
代入値： 固定文字列
内容： yyyy/MM/dd HH:mm:ss

完了したら、画面左上の保存ボタンを押して、「一覧画面」の変更は完了になります。

登録・編集・参照画面の変更

続いては、「登録・編集・参照画面」を変更します。

同じくアプリケーション管理画面から、「画面コンテンツ」の「緊急作業管理 登録・編集・参照画面」を選択します。

先ほどは変数の変更でしたが、こちらでは要素の追加を行います。

まずは、中央上部付近のタブの中から「Input Area」を選択します。

その後、左のサイドバーから「フォーム部品（Bulma）」配下の「時刻入力」を日付入力欄の隣に配置します。

配置が完了したら、「時刻入力要素」をクリックし、右サイドバーのプロパティの「value」内の虫眼鏡マークをクリックしてください。

ウィンドウが表示されるので、そのウィンドウ内で「emergency_task_datetime」を選択して「決定」ボタンをクリックしてください。

続いては、元々あった「日付入力要素」をクリックして、右サイドバーのプロパティからpreserveTime内のチェックボックスにチェックを入れてください。

ここまでの内容でIM-BloomMakerで画面内容の変更は終了です。

4. 動作確認

一度アプリケーションを確認してみましょう。

アプリケーション管理画面の中から画面URLというカテゴリの「緊急作業管理 一覧画面」のURLを取得し、アクセスしてみます。

開いた時点で、すでに日時が表示されていることがわかります。

ただし、今のデータは時刻がない状態での登録だったので、「00:00:00」となってしまっているので、追加でデータを確認してみましょう。

右上の新規作成ボタンを押し、以下のような任意の内容を入力して、「登録」ボタンをクリックしましょう。

すると以下のような画面が表示されて、正常に時間も登録されていることがわかります。

ただ、この状態だとデータがどんどん増えていくと経過時間が長期化しているものの判断が難しいですよね？

なので、ここから追加で一定時間経過しているデータを強調表示したいと思います。

5. データの強調表示

データの強調表示をするためには、先ほどのようにIM-BloomMakerで画面を少し変更するのと、IM-LogicDesignerで一覧情報のロジックフローを変更する必要があります。

ここでは、まずIM-LogicDesignerでの処理の変更を行います。

IM-LogicDesignerで「一覧取得処理」の変更

アプリ管理画面を開き少し、下にスクロールをすると「緊急作業管理 一覧取得処理」というのがあるので、そちらをクリックしてIM-LogicDesignerを呼び出します。

すると以下のようなIM-LogicDesignerの「ロジックフロー定義編集」画面が表示されます。

まずやることして、取得してきたデータに対して加工を加えたものを保持するための変数と、加工を加えるために一時的にデータを保持するための変数なので、上部の「変数設定」をクリックします。

そうしたら「変数設定」のウィンドウが表示されるので、上部の「IM-Repository」をクリックして、「emergency_task」を選択して「決定」ボタンをクリックしてください。

その後、もう一度同じ操作を繰り返して「emergency_task」が2つ登録されている状態にしてください。

そうしましたら、一方は配列型にする必要があるので、どちらかを選択した状態で、「配列型にする」というチェックボックスにチェックを入れてください。
次に、処理のために一時的に必要な時間差を保持するための変数が必要になるので、「timeDiff」という「integer」型の変数を追加して、「決定」ボタンを押してください。

ただ、このままだと「emergency_task_〇〇」というのが二つあって、パッと見分かりづらいので、それぞれの名前を変更しましょう。

最初の配列側の「emergency_task_〇〇」をクリックし、少し上にある「キー名を変更」をクリックすると、キー名の部分が入力できるようになりますのでこちらを「出力用」と記入します。

次の「emergency_task_〇〇」をクリックして、こちらは「一時作業用」と記入します。

これで変数の設定は完了です。

最後には以下のようになると思います。

続いて、フロー側の変更を実施します。
左のサイドバーの「基本」配下の「繰り返し開始」をフローに追加してください。

追加した「繰り返し開始」に「im_repositorySearchEntityData1」タスクをつなげて、「繰り返し対象」の「選択」をクリックします。

「繰り返し対象の選択」ウィンドウで「im_repositorySearchEntityData1」を選択した状態で「決定」ボタンをクリックします。

こうすることで、取得したデータの配列分処理を繰り返す流れができます。

次に追加するタスクは「変数操作」です。
画面上に追加し、「繰り返し開始」タスクからつなげて、「マッピング設定」へ進みます。

マッピング設定では、「im_startLoop1」の「item」を先ほど作った変数の配列ではないほうに一時的に配置します。

初期状態では「im_startLoop1」と「セッション情報」が表示されていないので、上部の「入力を追加」の左隣のプルダウンから選択して、「入力を追加」をクリックして、それぞれを追加してください。

続いて、ウィンドウ上部のプルダウンから「interval」関数を選択し、「関数を追加」をクリックします。

その関数のAに「im_startLoop1」の「item」の「emergency_task_datetime」を、Bに「セッション情報」の「systemDate」をつなげて、out側を変数の「timeDiff」につなげ、「item_startLoop1」の「item」は「一時作業用」に直接つなぎます。

最後に、このタスク自体のラベルを「時間差の計測」に変更しましょう。

これで各データに登録されている日時とシステムの日時が比較され、差が格納されるようになりました。
今度はこの差の大小に応じて処理を分けるようにします。

追加で分岐タスクをフローに加え、それが変数操作につながるようにします。
この分岐タスクの条件式には以下の内容を登録します。

条件式（EL式）： ${$variable.timeDiff>=86400000}

86,400,000というのはミリ秒で24時間に当たりますので、これは「emergency_task_datetime」の時刻がシステム時間から24時間前かどうかという判断を行っています。

分岐後のタスクとして2つの「変数操作」タスクを加えて以下のようにフローを繋げます。

分岐タスクの「then」につながっている「変数操作タスク」のラベル名を「時間超過していた場合」に変更し、もう一方を「出力用へ格納」に変更します。

また、変数を加えたように定数を1つ追加します。
内容は以下の通りです。
定数ID： overtime
定数値： 超過しています

追加した「変数操作（時間超過していた場合と出力用へ格納）」タスクをそれぞれ設定します。

「時間超過していた場合」タスクは、「分岐」タスクから「true」となった、つまり時間が24時間以上経過していると判断されるものです。
これは以下のように定数が「一時作業用」の「emergency_task_priority」に挿入されるようにします。

続いての「出力用へ格納」タスクでは、「一時作業用」変数の内容を配列型の「出力用」変数にいれてます。

「繰り返し終了」タスクを「終了」タスクにつなげて、「終了」タスクのマッピングを開き、「records」に元々つながっていた線を削除し、「出力用」変数を「records」につなげ、「im_repositorySearchEntityCount1」の「count」を「total」につなげます。

最後に左上の「保存」をクリックし、保存ウィンドウ内下部の「決定」をクリックします。

ここまでの作業でIM-LogicDesignerの作業は終わりです。

IM-BloomMakerで「一覧画面」の変更

先ほど操作していたIM-BloomMakerの「緊急作業管理 一覧画面」の再度開きます。
IM-BloomMaker画面の上部にあるCSSエディタのアイコンをクリックします。

そこで開かれたCSSエディタの最下部にスクロールして以下の内容を追加して、「決定」ボタンをクリックします。

tr:has(td[title="超過しています"]) {
  .im-hichee-im-richtable-td {
    background-color: lightcoral !important;
  }
}

これで作業としては完了なので左上の「保存」ボタンをクリックして終了しましょう。

その後、再度「緊急作業管理 一覧画面」を開いて、見ると以下のようになっていると思います。

最初に登録していた「タスク1」というのは今のシステム時点では24時間経過していないため、これまで通りの見た目ですが、「タスク2」については前日の9時半で、現時点から24時間以上前だったため、「優先度」が「超過しています」に変わっていて、行も色が変わっていることが分かるかと思います。

また、「優先度」が変わっているのはあくまで、表示上ですので、編集画面を開くと元の優先度が表示されます。

まとめ

本記事では、マスタメンテナンステンプレートを活用して日時情報を取り扱う緊急作業管理アプリケーションの作成手順を解説しました。日時表示の基本から始まり、日付型から日時型への変更、そして一定時間経過したデータの視覚的な強調表示まで、実践的なステップを通して説明しました。

このように、Accel Studioのテンプレートと日時表示カスタマイズ機能を組み合わせることで、業務上重要な時間経過を視覚的に管理できるアプリケーションを効率的に構築することができます。これらの知識を応用することで、他のさまざまな業務シーンでも日時情報を効果的に活用したアプリケーション開発が可能になるでしょう。

ぜひ本記事で紹介した手法を参考に、皆様の業務に最適な日時情報活用アプリケーションの開発にチャレンジしてみてください。