6. カスタムイベント¶
カスタムイベント情報の登録方法および独自の表示用テンプレートの作成方法について説明します。
6.1. カスタムイベントとは¶
カスタムイベントとは、任意のアプリケーションに対して独自に作成できる1つの履歴データです。任意のアプリケーションに対して紐づけを行うことで、データの変更などを検知し、履歴・コメントモジュールに自動で反映します。
6.2. カスタムイベントの実装¶
実装は、履歴・コメントモジュールへのイベント登録と、カスタムイベント情報の設定に分けて行います。カスタムイベントの処理はJavaで実装します。
6.2.1. 履歴・コメントモジュールへのイベント登録¶
プロジェクトのsrc/main/java/ 配下に、任意のフォルダを作成します。その配下にJavaファイルを作成し、以下のように実装を行います。サンプルコードでは、jp/co/intra_mart/journal/sample/endpoint ディレクトリ配下に MyService.java というファイルを作成します。package jp.co.intra_mart.journal.sample.endpoint; import java.util.HashMap; import java.util.HashSet; import java.util.Map; import java.util.Set; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import jp.co.intra_mart.foundation.journal.JournalServiceFactory; import jp.co.intra_mart.foundation.journal.action.JournalActionRegisterModel; import jp.co.intra_mart.foundation.journal.action.JournalActionType; import jp.co.intra_mart.foundation.journal.event.JournalEventGroupKey; import jp.co.intra_mart.foundation.journal.event.JournalEventRegisterModel; import jp.co.intra_mart.foundation.journal.event.JournalEventService; import jp.co.intra_mart.foundation.journal.exception.JournalException; public class MyService { // カスタムイベント情報の設定 private JournalEventRegisterModel registerJournal() throws JsonProcessingException { // 独自のイベントを作成する final JournalEventRegisterModel event = new JournalEventRegisterModel(); // eventGroupKeyを設定する final JournalEventGroupKey eventGroupKey = new JournalEventGroupKey(); eventGroupKey.put("journalSampleId", "1"); event.setEventGroupKey(eventGroupKey); event.setApplication("im-journal-sample"); // eventTypeId (設定ファイルのevent-type-idに設定した値) event.setEventTypeId("im_journal_sample_log"); // アクションを設定する final Set<JournalActionRegisterModel> actions = new HashSet<JournalActionRegisterModel>(); final JournalActionRegisterModel action = new JournalActionRegisterModel(); action.setKey("my-action-key"); action.setType(JournalActionType.REGISTER); final Map<String, String> actionData = new HashMap<String, String>(); final ObjectMapper jsonMapper = new ObjectMapper(); actionData.put("myData", "123456"); final String jsonString = jsonMapper.writeValueAsString(actionData); action.setData(jsonString); actions.add(action); event.setActions(actions); return event; } // イベント登録 public void registerMyEvent() throws JsonProcessingException, JournalException { // サービスクラスを呼び出す final JournalEventService service = JournalServiceFactory.getJournalEventService(); // 関数の呼び出し final JournalEventRegisterModel event = registerJournal(); // カスタムイベントを登録する service.registerEvent(event); } }
コラム
イベント操作日時とイベント操作ユーザの初期値には、それぞれシステム時刻とログインしているユーザのユーザコードが設定されています。そのため、時刻およびユーザコードを変えたい場合は、operationDateおよびoperationUserCdを設定してください。
6.2.2. 表示用テンプレート¶
6.2.2.1. 表示用テンプレートとは¶
表示用テンプレートとは、追加されたカスタムイベントを履歴・コメントモジュール内で表示するための部品です。
6.2.2.2. テンプレートの実装方法¶
表示用テンプレートは スクリプト開発モデル に準じた実装ができます。HTML と サーバサイドJavaScript を用いてテンプレートを作成し、設定ファイルでカスタムイベントと関連付けることで、履歴・コメントモジュールに表示できます。
6.2.2.3. 表示用テンプレートの作成¶
表示用テンプレートは HTML で実装します。プロジェクトの src/main/jssp/ 配下に任意のフォルダを作成し、その配下に HTML ファイルを作成し、以下のように実装します。サンプルコードでは src/sample/journal ディレクトリ配下に journal_template_sample.html というファイルを作成します。<div class="journal-template-sample"> <!-- アイコンが表示される左のエリア --> <div class="journal-template-sample-user-header"> <span class="journal-template-sample-user"> <img class="journal-template-sample-user-img" src="<imart type="string" value=operationUserProfileImg escapeJs="false" escapeXml="true"/>" /> </span> </div> <!-- 本体 --> <div class="journal-template-sample-container" data-event-id="<imart type="string" value=eventId />"> <!-- 本体ヘッダ部分 --> <div class="journal-template-sample-header"> <div class="journal-template-sample-header-left"> <span class="journal-template-sample-header-name" title="<imart type="string" value=operationUserCd escapeJs="false" escapeXml="true"/>"> <imart type="string" value=operationUserName escapeJs="false" escapeXml="true"/> </span> </div> </div> <!-- 本体ボディ部分 --> <div class="journal-template-sample-body"> <div class="im-journal-message-content"> <p id="comment-display-area-<imart type="string" value=eventId />" class="journal-template-sample-body-text"> <imart type="string" value=comment escapeJs="false" escapeXml="true"/> </p> </div> </div> <!-- 本体フッタ部分 --> <div class="journal-template-sample-footer"> <span class="journal-template-sample-header-date"> <imart type="string" value=operationDateLabel /> </span> </div> </div> </div> <style type="text/css"> .journal-template-sample { display: flex; } .journal-template-sample-user { display: block; border: 1px solid #ccc; background: #fff; border-radius: 50%; margin-right: 5px; } .journal-template-sample-user-img { width: calc(1.6em + 10px); height: calc(1.6em + 10px); border-radius: 50%; vertical-align: middle; } .journal-template-sample-container { border: 1px solid #ddd; border-radius: 4px; width: calc(100% - 1.6em - 20px); } .journal-template-sample-header { border-radius: 4px 4px 0 0; height: 2.2em; padding: 0 10px; display: flex; background: #f7f7f7; border-bottom: 1px solid #ddd; } .journal-template-sample-body { padding: 8px 20px; } .journal-template-sample-body-text { white-space: pre-wrap; line-height: 1.6; word-wrap: break-word; max-width: 100%; } .journal-template-sample-header > * { display: flex; align-items: center; } .journal-template-sample-footer { border-top: 1px solid #ddd; padding: 2px 10px; text-align: right; font-size: 0.95em; } </style>カスタムイベントの情報をテンプレートで使用するためには、サーバサイドJavaScript で取得する必要があります。init関数 の引数を利用して登録した情報が取得できるので、それを HTML で使用できるようにします。表示用テンプレートの HTML ファイルと同階層に サーバサイドJavaScript ファイルを作成し、以下のように実装します。let eventId; let operationUserCd; let operationUserName; let operationDateLabel; let operationUserProfileImg; let eventGroupId; let eventGroupKey; let application; let comment; function init(event) { eventId = event.eventId; operationUserCd = event.operationUserCd; operationUserProfileImg = 'api/immaster/user/image/' + encodeURIComponent(operationUserCd) + '/original?cacheControl=private&noImage=true'; operationUserName = event.operationUserName || event.operationUserCd; operationDateLabel = event.operationDateLabel; eventGroupId = event.eventGroupId; eventGroupKey = event.eventGroupKey; application = event.application; const commentAction = event.actions.filter(function (a) { return a.key === 'my-action-key' })[0]; comment = JSON.parse(commentAction.data).myData; }実装イメージは以下の通りです。図: カスタムイベント
6.2.2.4. 設定ファイルの作成¶
作成したテンプレートをシステムに読み込ませるための設定ファイルを追加します。プロジェクト配下より src/main/conf/im-journal-template-config ディレクトリを作成し、xmlファイルを作成し、以下のように実装します。<?xml version="1.0" encoding="UTF-8"?> <im-journal-template-config xmlns="http://intra-mart.co.jp/system/journal/im-journal-template-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://intra-mart.co.jp/system/journal/im-journal-template-config ../schema/im-journal-config.xsd "> <!-- カスタムイベントの eventTypeId とテンプレートのファイルパスを指定して紐づけます。 --> <template event-type-id="im_journal_sample_log" path="sample/journal/journal_template_sample" /> </im-journal-template-config>