intra-mart Accel Platform IM-Copilot 利用ガイド 第10版 2026-08-31

10.6.3.2. JavaEE開発モデル「アシスタント実行 UI」実装

このドキュメントでは、JavaEE開発モデルで「アシスタント実行 UI」を埋め込む方法について解説します。

10.6.3.2.1. 基本的な使い方

10.6.3.2.1.1. ステップ1: JSPページの準備

まず、JSPページに以下の要素を追加します:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imst" uri="http://www.intra-mart.co.jp/taglib/imst" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
<imui:head>
    <meta http-equiv="X-Intramart-Secure-Token" content='<imst:imSecureToken mode="value" />' />
    <script src="im_copilot/js/extension.bundle.js"></script>
</imui:head>
<div id="assistant-area"></div>
<script>
    // アシスタントUIを登錠
    window.imCopilot.register({
        targetElementId: 'assistant-area',
        assistantId: 'your-assistant-id',
        threadId: 'unique-thread-id',
        inputPlaceholder: 'メッセージを入力してください'
    });
</script>

要素追加時のポイントは、以下の通りです:

  • タグライブラリ(imst、imui)を追加
  • <imui:head> タグにセキュアトークン情報(imSecureToken)を追加
  • スクリプト im_copilot/js/extension.bundle.js を追加
  • アシスタントUIを表示するDIV要素(ID)を追加
  • JavaScript 関数(imCopilot.register)を用いて、DIV要素の中に「アシスタント実行 UI」を埋め込む処理を追加

10.6.3.2.1.2. ステップ2: パラメータの設定

window.imCopilot.register() メソッドには以下のパラメータを指定できます:

パラメータ一覧
パラメータ名 必須 説明
targetElementId アシスタントUIを表示するDIV要素のID
assistantId 使用するアシスタントのID
threadId × 会話履歴を識別するための一意のID
inputPlaceholder × 入力欄に表示するプレースホルダーテキスト(デフォルト: “プロンプトを入力”)

10.6.3.2.2. 実装例

10.6.3.2.2.1. シンプルな実装例

最もシンプルな実装例を示します。

JSPページ(sample_basic.jsp):

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imst" uri="http://www.intra-mart.co.jp/taglib/imst" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
<imui:head>
    <title>アシスタント実行サンプル - 基本実装</title>
    <meta http-equiv="X-Intramart-Secure-Token" content='<imst:imSecureToken mode="value" />' />
    <script src="im_copilot/js/extension.bundle.js"></script>
</imui:head>
<div id="assistant-area"></div>
<script>
    // アシスタントUIを登録
    window.imCopilot.register({
        targetElementId: "assistant-area",
        assistantId: "sample-rag-assistant",
        threadId: 'thread_' + new Date().getTime(),
        inputPlaceholder: "Input prompt"
    });
</script>

10.6.3.2.2.2. 動的にスレッドIDを生成する例

ユーザごとに異なるスレッドIDを生成する実装例です。

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="imst" uri="http://www.intra-mart.co.jp/taglib/imst" %>
<%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui" %>
<%@ page import="jp.co.intra_mart.foundation.context.Contexts" %>
<%@ page import="jp.co.intra_mart.foundation.context.model.AccountContext" %>
<%
//アシスタントID
String assistantId = "sample-rag-assistant";
// アカウントコンテキスト取得
AccountContext accountContext = Contexts.get(AccountContext.class);
// ユーザコードを取得
String userCd = accountContext.getUserCd();
// タイムスタンプを生成
long timestamp = System.currentTimeMillis();
// スレッドIDを生成
String threadId = "thread_" + userCd + "_" + assistantId + "_" + timestamp;
%>
<imui:head>
    <title>アシスタント実行サンプル - 動的制御</title>
    <meta http-equiv="X-Intramart-Secure-Token" content='<imst:imSecureToken mode="value" />' />
    <script src="im_copilot/js/extension.bundle.js"></script>
</imui:head>
<div id="assistant-area"></div>
<script>
    // アシスタントUIを登録
    window.imCopilot.register({
        targetElementId: "assistant-area",
        assistantId: "sample-rag-assistant",
        threadId: '<%=threadId%>',
        inputPlaceholder: "Input prompt"
    });
</script>

10.6.3.2.3. 注意事項

  1. extension.bundle.jsの読み込み位置
    • extension.bundle.jsは必ず<imui:head>タグ内で読み込んでください
    • body内で読み込むと、正常に動作しない可能性があります
  2. スレッドIDの管理
    • threadIdは会話履歴を識別するために使用されます
    • 同じthreadIdを使用すると、以前の会話履歴が引き継がれます
    • 新しい会話を開始したい場合は、新しいthreadIdを生成してください
  3. セキュリティトークンの設定
    • meta要素でX-Intramart-Secure-Tokenを必ず設定してください
    • <imst:imSecureToken mode="value" /> を使用してトークン値を取得します

10.6.3.2.4. トラブルシューティング

10.6.3.2.4.1. アシスタントが表示されない場合

以下の点を確認してください:

  1. extension.bundle.jsの読み込み位置
    • <imui:head>タグ内で読み込まれているか確認
    • bodyタグ内での読み込みではないか
  2. タグライブラリの宣言
    • タグライブラリの宣言(imst、imui)が記述されているか
    • タグライブラリが正しくインポートされているか
  3. セキュリティトークンの設定
    • <meta http-equiv="X-Intramart-Secure-Token"> が設定されているか
    • <imart type="imSecureToken" mode="value" /> の記述が正しいか
  4. HTML要素の存在確認
    • targetElementIdで指定したID属性を持つ要素が存在するか
    • DOMContentLoadedイベント発生後に実行されているか
  5. アシスタントID
    • assistantIdが正しいか
    • アシスタントへのアクセス権限があるか

10.6.3.2.4.2. エラーメッセージの対処

よくあるエラーと対処法
エラーメッセージ 対処法
“Error: Failed to find extension parent element” 指定したtargetElementIdの要素が存在することを確認
“Error: Assistant configuration error. Check definition and authorization settings.” アシスタントIDが正しいか、アシスタントが存在するか、アシスタントへのアクセス権限があるか確認
“TypeError: Cannot read properties of undefined” extension.bundle.jsが<imui:head>タグ内で読み込まれているか確認
“TypeError: Cannot read properties of null” セキュリティトークンが正しく設定されているか確認

10.6.3.2.5. まとめ

JavaEE開発での「アシスタント実行 UI」の埋め込みは、わずか数行のコードで実現できます。
この機能を活用することで、独自のWebアプリケーションにAIアシスタント機能を簡単に統合できます。