intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

Copyright © 2013 NTT DATA INTRAMART CORPORATION

↑Top

1

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

目次
改訂情報
はじめに
本書の目的
対象読者
本書の構成
テーマ概要
テーマとは
画面レイアウトやスタイルを切り替える仕組み
テーマモジュール
用語
テーマの詳細ThemeFilter
ThemeManager
PageBuilder
テーマモジュール
テーマモジュールの作成
標準テーマカスタマイズの概要
スクラッチ開発
サンプル
付録
テーマモジュールのフォルダ・ファイル構成
テーマモジュールのサンプル
ユーティリティプラグイン
intra-mart が提供するテーマの一覧
Slim Side Menuテーマ

2

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

改訂情報
変更年月日

変更内容

2013-10-01

初版

2014-04-01

第2版 下記を追加・変更しました「テーマモジュール 」の「 JSSP 」からGoogleChromeFrameの記述を削除「テーマモジュールのサンプル 」の「 JSSP 」からGoogleChromeFrameの記述を削除

2014-12-01

第3版 下記を変更しました「テーマモジュール」 に 「ヘルプドロップダウン」 を追加しました。
「テーマモジュール」 の 「header」 の画像を変更しました。

2015-08-01

第4版 下記を変更しました「PageBuilder」 の 「設定ファイルで指定する」 に FullThemeBuilder の設定ファイルを追記しました。

2015-12-01

第5版 下記を変更しました「PageBuilder」 に 「ライブラリ群の切り替え」 を追加しました。
「テーマモジュール」 に 「ライブラリ群の切り替え」 を追加しました。
「テーマモジュールのサンプル」 の 「head 」 を修正しました。

2016-08-01

第6版 下記を変更しました「PageBuilder」 の 「PageBuilder の役割」 に設定ファイルリファレンスへのリンクをコラムとして追加しました。
「ThemeFilter」 の 「キャッシュ制御」 の説明を更新しました。

2020-04-01

第7版 下記を追加しました「テーマ概要」にSlim DropdownテーマとSlim Side Menuテーマを追記しました。
「Slim Side Menuテーマ」 を追加しました。
「intra-mart が提供するテーマの一覧」 にSlim DropdownテーマとSlim Side Menuテーマを追記しました。

2021-04-01

第8版 下記を追加しました「PageBuilder」にFullThemeBuilderのリクエストパラメータを追加しました。

2021-08-01

第9版 下記を変更しました「Slim Side Menuテーマ」 の 「サイドメニュー」 にサイトマップボタン、メニュー検索の項
目を追加しました。
「Slim Side Menuテーマ」 の 「機能」 にメニュー検索機能、メニュー階層のパンくずリスト
機能、遷移時のメニュー階層の保持機能の項目を追加しました。

3

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

はじめに
本書の目的
本書ではテーマの詳細について説明します。
説明範囲は以下のとおりです。
テーマの持つ機能の全体像
テーマを実現する構造と動作
テーマモジュールの作成方法

対象読者
本書では次の利用者を対象としています。
intra-mart Accel Platform に画面を持つアプリケーションを作成したい開発者の方
テーマモジュールを作成・カスタマイズしたいデザイナの方

本書の構成
テーマ概要
テーマの持つ機能の全体像について説明します。

テーマの詳細概要で説明したテーマの全体像を実現するための構成要素を説明します。
ThemeFilter
テーマの入り口となるサーブレットフィルタについて説明します。
ThemeManager
テーマモジュールを管理する部分について説明します。
PageBuilder
テーマモジュールとコンテンツを組み合わせたHTMLを生成する部分について説明します。 また、テーマモジュールとコンテンツとの組み合わせを決定する方法についても説明します。

テーマモジュール
テーマモジュールを説明します。

テーマモジュールの作成
テーマモジュールの作成方法について説明します。

4

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

テーマ概要
テーマとは
テーマとは
画面レイアウトやスタイルを切り替える仕組み
その構成ファイル群を指します。
読者の立場によって、見え方が異なります。
アプリケーションの開発者の立場からは、画面レイアウトやスタイルを切り替える仕組みとしての側面が主なものとなるでしょう。
デザイナの立場からは、構成ファイル群、特に HTML と CSS とで画面のデザインを行う対象となるでしょう。
ユーザの立場からは、画面の見た目や操作感の違い、として見えるでしょう。

画面レイアウトやスタイルを切り替える仕組み
画面レイアウトやスタイルを切り替える仕組みは、主に以下の機能で実現します。
ThemeFilter
ThemeManager
PageBuilder
主にアプリケーションの開発者が関係する部分です。 これらの章を読むことで、設定ファイルの書き方や、プログラムからの指定によってテーマモジュールの組み合わせ方を制御できます。

テーマモジュール
テーマを構成するファイル群を テーマモジュール と呼びます。
テーマモジュールは、JSSP、CSS、CSJS、画像、設定ファイル で構成されます。
テーマモジュールにはSlim Side Menu （ 2020 Spring(Yorkshire) で追加 ）Slim Dropdown （ 2017 Summer(Quadra) で追加 ）標準
標準（シンプル）
v5 互換
v6 互換
の6種類があります。標準（シンプル）以外のテーマモジュールには、いくつかのカラーバリエーションがあります。

用語
JSSP
JSSP とは JavaScriptServerPage の略称で、スクリプト開発モデルで実装された HTML と JavaScript の組み合わせを指します。

CSJS
CSJS とは ClientSideJavaScript の略称で、クライアントつまり Web ブラウザ上で動作する JavaScript のことを指します。

5

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
SSJS
SSJS とは ServerSideJavaScript の略称で、サーバ上で動作する JavaScript のことを指します。

6

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

テーマの詳細
テーマ概要 で述べたとおり、テーマは大きく分けて 2 つの部分でできています。
画面レイアウトやスタイルを切り替える仕組み
ThemeFilter
ThemeManager
PageBuilder
テーマモジュール
以降の説明ではこれらの機能の詳細を解説していきます。

ThemeFilter
ThemeFilter は javax.servlet.Filter を実装した Java のクラスです。*.jsp と JSSP に対してマッピングされています。
ここでは ThemeFilter の役割と制御方法を説明します。

項目
ThemeFilter の役割
テーマモジュールを適用する条件
HTML の生成
キャッシュ制御
制御パラメータ
キャッシュ制御
テーマの適用制御
PageBuilderの制御

ThemeFilter の役割
ThemeFilter は以下の機能を持っています。
リクエストされたページの URL やパラメータなどをチェックし、テーマモジュールを適用するかどうかを決定します。
テーマモジュールを適用する場合、コンテンツに対してテーマモジュールを適切に適用し、HTMLを生成します。
レスポンスに、キャッシュ制御の HTTP ヘッダを付与します。

テーマモジュールを適用する条件
ThemeFilter は、コンテンツに対してテーマモジュールを適用するかどうかを決定します。 以下の条件のいずれかを満たす場合、テーマモジュールを適用します。
Content-Type が指定されていない
Content-Type が text/html である
なお、後述の テーマの適用制御 で、フラグに false を指定した場合、上記の条件に合致してもテーマモジュールは適用されません。

HTML の生成
ThemeFilter はテーマモジュールを適用する条件に合致した場合、コンテンツをバイト配列としてメモリ内に保存し、後述のPageBuilder に渡します。 ThemeFilter は PageBuilder が生成した HTML をレスポンスとして Web ブラウザに送信します。
テーマモジュールを適用する条件に合致しない場合、レスポンスの操作は行いません。 対象のサーブレット、サーブレットフィルタが生成したレスポンスがそのまま Web ブラウザに返ります。

キャッシュ制御HTTP ヘッダに、以下のものをセットします。

7

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
Cache-Control: no-store
Pragma: no-cache
なお、後述の キャッシュ制御 で、フラグに true をセットした場合、これらの HTTP ヘッダはセットされません。

制御パラメータ
ThemeFilter には、動作を変更するためのパラメータが存在します。

キャッシュ制御
Cache-Controlに no-store, Pragma に no-cache を指定するかどうかを制御します。

このパラメータを指定しない場合、または false を指定した場合、キャッシュ制御の HTTP ヘッダがレスポンスに付与されます。 trueを指定した場合、キャッシュ制御の HTTP ヘッダはレスポンスに付与されません。
このパラメータは、リクエストの属性として指定してください。
JavaScript の例
function init(request) {//キャッシュ制御の HTTP ヘッダを出力しない
request.setAttribute('x-jp-co-intra-mart-disable-no-cache',true);//キャッシュ制御を自ら行う
let response = Web.getHTTPResponse();response.setHeader("Cache-Control", "private,max-age=3600");
response.setHeader("Last-Modified", new Date(2013,9,1,13,0,0));}Java の例
request.setAttribute(ThemeFilter.DISABLE_NO_CACHE, true);
response.setHeader("Cache-Control", "private,max-age=7200");

テーマの適用制御
テーマモジュールを適用するかどうかを制御します。
このフラグに false を指定した場合、テーマ適用の条件に合致していてもテーマモジュールは適用されません。 true を指定した場合、テーマモジュールを適用するかどうかはテーマ適用の条件に従います。
このパラメータは、リクエストのパラメータとして指定してください。
クエリパラメータとして指定することで、一時的にテーマモジュールを適用させないで画面表示を確認する場合に使うことを想定しています。
http://xxx.xxx.xxx/imart/test?x-jp-co-intra-mart-apply-theme=false

PageBuilderの制御
セッションをスコープとした PageBuilder のビルダーモジュールを指定します。
通常は、リクエストをスコープとしてビルダーモジュールが決まりますが、このパラメータを指定するとセッションをスコープとしてビ
ルダーモジュールを指定できます。これは、外部メニューに指定された intra-mart Accel Platform の画面を現在のテーマで表示する
ためのパラメータです。
このパラメータは、リクエストのパラメータとして指定してください。

8intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<form action="somewhere">...
<input type="hidden" name="imui-session-scope-builder-module" value="headwithcontainer"/>...
</form>ThemeManager
ここでは ThemeManager の役割を説明します。

ThemeManager の役割
テーマモジュールの情報を管理します。 システムに登録されているすべてのテーマモジュールの情報、ログインしているユーザのテー
マの情報などを取得する機能を提供します。
詳細は、API リスト を参照してください。

PageBuilder
ここでは PageBuilder の役割と、制御方法を説明します。

項目
PageBuilder の役割
組み合わせ方の制御設定ファイルで指定する
リクエストへのパラメータで指定する
適用順位
指定例
設定ファイルで指定する例
リクエストへの属性として指定する例
リクエストへのパラメータとして指定する例
ライブラリ群の切り替え
適用順位
指定例
設定ファイルで指定する例
リクエストへのパラメータとして指定する例
リクエストへの属性として指定する例

PageBuilder の役割
PageBuilder は、テーマモジュールの JSSP と、コンテンツを組み合わせた HTML を生成します。
テーマモジュールは、以下の 4 つの JSSP で構成されています。
headHTML の head タグの部分
header
ヘッダ部
body
ボディ部
footer
フッタ部
組み合わせ方は、

9intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
head, header, body, footer
head, body, footer
head, body
body
テーマ適用無しの 5 パターンであるものと定義しています。
実装は以下の６つがあります。
1. HeadWithFooterThemeBuilder
head, body, footer を含んだ HTML を生成します。
header （メニューや、ユーティリティ）を表示したくないが、footer は表示したい場合に使用します。
body は、<div id=”imui-container”> で囲まれて出力されます。
2. HeadWithContainerThemeBuilder
head, body を含んだ HTML を生成します。
header （メニューや、ユーティリティ）、footer を表示したくないが、CSS やクライアントサイド JavaScript は使用したい場合に使用します。
主に intra-mart Accel Platform 向けに作成した画面を表示するために使用することを想定しています。
body は、<div id=”imui-container”> で囲まれて出力されます。
3. HeadOnlyThemeBuilder
head, body を含んだ HTML を生成します。
header （メニューや、ユーティリティ）、footer を表示したくないが、CSS やクライアントサイド JavaScript は使用したい場合に使用します。
主に iWP7.2 以前のシステム向けに作成した画面を表示するために使用することを想定しています。
body は、指定された URL の HTML そのものが出力されます。
4. BodyOnlyThemeBuilder
DOCTYPE、htmlタグ、body を含んだ HTML を生成します。
header （メニューや、ユーティリティ）、footer を表示せず、CSS やクライアントサイド JavaScript も使用しない場合に使用します。
body は、指定された URL の HTML そのものが出力されます。
5. NoThemeBuilder指定された URL の HTML をそのまま返します。
テーマを一切使用せず、自分で作成した HTML をそのまま出力したい場合に使用します。
body は、指定された URL の HTML そのものが出力されます。
6. FullThemeBuilder
head, header, body, footer のすべてを含んだ HTML を生成します。
body は、<div id=”imui-container”> で囲まれて出力されます。
基本はこれを使用します。
上記の順に処理すべき PageBuilder を検索し、その PageBuilder がリクエストを処理します。 リクエストを処理すべきかどうかは、それぞれのモジュールが持つ設定ファイルに記載されたパスがリクエストパスに合致するかどうかや、後述のパラメータなどに合致するかどうかで判断します。
リクエストパスが設定ファイルに合致しない場合や、パラメータで指定されていない場合、FullThemeBuilder がリクエストを処理します。

コラム
設定ファイルについては、「 設定ファイルリファレンス 」 - 「 UI 」より各テーマビルダーのドキュメントを参照してく
ださい。

10

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
コラム
CSSモジュール一覧内のスタイルの一部は、<div id=”imui-container”> の内部の要素だけに適用されます。 この div
で内容が囲まれない PageBuilder (HeadOnlyThemeBuilder, BodyOnlyThemeBuilder, NoThemeBuilder) を利用し、かつ CSSモジュール一覧のスタイルを適用したい場合は、<div id=”imui-container”> で内容を囲むように実装してください。

組み合わせ方の制御
head, header, body, footer の組み合わせは上述の PageBuilder の６つの実装の設定で決まります。 それぞれの設定ファイルを記述したり、リクエストへパラメータを指定することで、どの組み合わせ方にするかを指定できます。

設定ファイルで指定する
どの組み合わせ方にするかが静的に決定する場合、設定ファイルに記述します。
設定ファイルは、WEB-INF/conf 配下の PageBuilder の実装毎のフォルダに配置します。 ファイル名は任意です。
HeadWithFooterThemeBuilder
WEB-INF/conf/theme-head-with-footer-path-config
HeadWithContainerThemeBuilder
WEB-INF/conf/theme-head-with-container-path-config
HeadOnlyThemeBuilder
WEB-INF/conf/theme-head-only-path-config
BodyOnlyThemeBuilder
WEB-INF/conf/theme-body-only-path-config
NoThemeBuilder
WEB-INF/conf/theme-no-theme-path-config
FullThemeBuilder
WEB-INF/conf/theme-full-theme-path-config

注意それぞれの設定ファイルは異なる XML Schema で定義されています。 いずれかの設定ファイルを別のフォルダにコピーしても動作しないので注意してください。

リクエストへのパラメータで指定する
どの組み合わせ方にするかが動的に決定する場合や、forward する場合、リクエストへパラメータを指定します。
forward を行った際、PageBuilder が処理対象とする URL は forward 前の URL です。 forward 後のページに対して forward 前のPageBuilder とは別の PageBuilder を指定したい場合、 リクエストにパラメータを指定することで PageBuilder を切り替えることができます。
指定するキー imui-theme-builder-module
適用したい PageBuilder

指定する値

FullThemeBuilder

fulltheme

HeadWithFooterThemeBuilder

headwithfooter

HeadWithContainerThemeBuilder headwithcontainer
HeadOnlyThemeBuilder

headonly

BodyOnlyThemeBuilder

bodyonly

NoThemeBuilder

notheme

上記の値をリクエストのパラメータ、または属性として指定することで PageBuilder が切り替わります。

11intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
適用順位
設定ファイル、パラメータ、属性の適用は、以下の順に検索し、最初に合致した PageBuilder を使用します。 設定ファイルに記述したものより、属性に指定したものの方が優先されます。
1. 属性
2. パラメータ
3. 設定ファイル

指定例
設定ファイルで指定する例
例として、http://hostname/iap/sample/page へのリクエストを head, body, footer を含んだ HTML としたい場合を取り上げます。 この場合、使用する PageBuilder は、HeadWithFooterThemeBuilder です。
HeadWithFooterThemeBuilder の設定ファイルは以下の通りです。
<?xml version="1.0" encoding="UTF-8"?><theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-path-config"><path>/sample/page</path></theme-head-with-footer-path-config>

path の中に、コンテキストパス以下のパスを、”/” から記述します。
別の例として、http://hostname/iap/example/{parameter1}、http://hostname/iap/example/{parameter1}/{parameter2} へのリクエストを異なるビルダーモジュールで表示する場合を取り上げます。この場合、正規表現を利用して path を表現します。path
要素に regex 属性を true として追加することで正規表現として扱われます。
<?xml version="1.0" encoding="UTF-8"?><theme-head-with-container-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-container-pathconfig"><path regex="true">/example/[^/]+?</path></theme-head-only-path-config><?xml version="1.0" encoding="UTF-8"?><theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-path-config"><path regex="true">/example/[^/]+?/[^/]+?</path></theme-head-with-footer-path-config>

リクエストへの属性として指定する例
function init(request) {request.setAttribute("imui-theme-builder-module", "headwithfooter");
forward("somewhere");}リクエストへのパラメータとして指定する例<form name="form" action="sample/page"><input type="hidden" name="imui-theme-builder-module" value="headwithfooter"><input type="submit" value="submit"/></form>ライブラリ群の切り替え
intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ群の切り替え機能を追加しました。
この機能は jQuery のバージョンを切り替えることを主な目的としています。 指定されなかったり、存在しない組み合わせ名を指定さ

12

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
れたりした場合、「設定ファイルリファレンス」 - 「ライブラリ群の指定」に指定された version を辞書の昇順でソートし、最初のものが利用されます。標準では iap-8.0.0 が指定されます。
ライブラリの切り替えは上記の設定ファイル、パラメータ、属性でライブラリ群の組み合わせ名を指定します。どのような組み合わせ名が用意されているかは「設定ファイルリファレンス」 - 「ライブラリ群設定 」を参照してください。

適用順位
設定ファイル、パラメータ、属性の適用は、以下の順に検索し、最初に合致したライブラリ群の組み合わせを使用します。 設定ファイルに記述したものより、属性に指定したものの方が優先されます。
1. 属性
2. パラメータ
3. 設定ファイル

指定例
設定ファイルで指定する例
設定ファイルの path 要素に、libraries-version 属性を追加します。ここでは /sample/page に対して iap-8.0.11 を指定します。この指定によって /sample/page は jQuery 2.1.4 や jQueryUI 1.11.4 が使用されます。
<?xml version="1.0" encoding="UTF-8"?><theme-head-with-footer-path-config xmlns="http://www.intra-mart.jp/theme/theme-head-with-footer-path-config"><path libraries-version="iap-8.0.11">/sample/page</path></theme-head-with-footer-path-config>

リクエストへのパラメータとして指定する例
リクエストのパラメータとして指定する場合、キーに IMUI_THEME_LIBRARIES_VERSION を、値にライブラリ群の組み合わせ名を指定します。
<form name="form" action="sample/page"><input type="hidden" name="IMUI_THEME_LIBRARIES_VERSION" value="iap-8.0.11"><input type="submit" value="submit"/></form>リクエストへの属性として指定する例
リクエストの属性として指定する場合、キーに IMUI_THEME_LIBRARIES_VERSION を、値にライブラリ群の組み合わせ名を指定します。
function init(request) {request.setAttribute("IMUI_THEME_LIBRARIES_VERSION", "iap-8.0.11");
forward("somewhere");}テーマモジュール
ここではテーマモジュールの役割と構成を説明します。

13

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
項目
テーマモジュールの役割
テーマモジュールの構成
設定ファイルtheme-config
message
JSSP
head
headerbodyfooter
画像
CSS
CSS のフォルダ・ファイル構成
CSJS

テーマモジュールの役割
テーマモジュールは、画面レイアウトとスタイルを定義した JSSP 、CSS、CSJS 、画像 をまとめたものです。一般ユーザから見た場
合、テーマモジュールはテーマそのものに見えます。 また、「テーマを切り替える」と、現在利用しているテーマモジュールとは別のテーマモジュールを使って画面が表示されます。

テーマモジュールの構成
テーマモジュールは以下のような要素で構成されます。

設定ファイル
JSSP

画像
CSS
CSJS
詳細なフォルダ・ファイル構成は、テーマモジュールのフォルダ・ファイル構成 を参照してください。

コラム
テーマを切り替えるには、下図の「テーマ」画面で利用したいテーマの「このテーマを利用する」ボタンをクリックします。
詳細は 「テーマを設定する」を参照してください。

「テーマ」画面14

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
設定ファイルtheme-config%CONTEXT_PATH%/WEB-INF/conf/theme-config 配下に、テーマモジュール毎に設定ファイルが存在します。 ファイル名は任意ですが、システム上一意になるようにテーマID と同じ名前をつけることをお勧めします。 このファイルには、テーマID や、JSSP のパスなどが記述されています。
theme 要素の属性は以下の通りです。
id
テーマIDを定義します。システム上一意になるような値を指定してください。
imagepath「テーマ」画面で使用するサムネイル画像のパスを指定します。
theme-folder
このテーマのJSSPのパス。テーマIDと同じ名前をつけることをお勧めします。
sortkey「テーマ」画面に表示する際のソートキー。昇順でソートされます。ソートキーが同じ場合、テーマID でソートされます。 この値には 0 以上の整数を指定してください。
author
作成者（未使用）
versionバージョン（未使用）
theme 要素の子要素として client-type-info 要素を定義します。 client-type-info 要素の属性は以下の通りです。
id
クライアントタイプIDを指定します。現在は pc のみ指定できます。
default
このテーマをデフォルトテーマとするかどうかのフラグです。通常は false を指定します。 この値が true の設定ファイルの中で、最初に見つかったテーマモジュールがデフォルトテーマとして動作します。
例として標準テーマ 青色 の設定ファイルを下に示します。
<?xml version="1.0" encoding="UTF-8"?><theme-config xmlns="http://www.intra-mart.jp/theme/theme"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.intra-mart.jp/theme/theme theme.xsd "><themeid="im_theme_dropdown_blue"
author="intra-mart"version="8.0"
imagepath="ui/theme/im_theme_dropdown_blue/images/thumbnail.png"
theme-folder="theme/im_theme_dropdown_blue"
sortkey="10"><client-type-info id="pc" default="true"/></theme></theme-config>

message「テーマ」画面で使用するメッセージプロパティを定義します。 定義するメッセージキーは以下の二つです。
CAP.Z.IWP.THEME.テーマID.NAME「テーマ」画面で表示されるテーマの名前
CAP.Z.IWP.THEME.テーマID.DESCRIPTION「テーマ」画面で表示されるテーマの説明%CONTEXT_PATH%/WEB-INF/conf/message/platform/theme/テーマID 配下に以下のファイルを作成します。
caption.properties
caption_en.properties

15

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
caption_ja.properties
caption_zh_CN.properties
詳細は、「多言語対応」を参照してください。

JSSP
head
HTML の head タグを実装します。 UIコンポーネントが必要とする CSJS、CSS などシステムを動作させるために必要な情報が記述されています。
標準テーマ 青色 を例にすると、head タグは主に以下の要素で構成されています。これらの要素は全テーマモジュールで必須な要素です。
文字コード
文字コードを UTF-8 に指定します。
<meta charset="utf-8" />InternetExplorer 向けの設定
対象ブラウザの最新のレンダリングエンジンを使用するように指定します。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Google Chrome 向けの設定
Google Chrome が翻訳を行うかどうかを問い合わせるダイアログの表示を抑制します。
<meta name="google" content="notranslate">base タグbase タグを指定します。
<base href='<imart type="string" value=base></imart>' target="_self">

テーマのCSS
テーマの CSS を読み込みます。
<imart type="imuiLink" href="ui/theme/im_theme_dropdown_blue/css/theme.css"></imart>

UIコンポーネントのCSS
UIコンポーネントの CSS を読み込みます。
<imart type="imuiLink" href="ui/css/imui.css"></imart>

twitter bootstrap のCSS
twitter bootstrap の CSS を読み込みます。
<link rel="stylesheet" type="text/css" href="ui/css/bootstrap.css">

IE8 向けの設定
IE8 向けに、HTML5 の要素を扱えるようにするライブラリを読み込みます。

16

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<!--[if lt IE 9]><script type="text/javascript" src="ui/libs/html5.js"></script><![endif]-->

3rd party ライブラリの読み込み
テーマ、および UIコンポーネントが利用する サードパーティライブラリを読み込みます。
<imart type="imuiScript" src="ui/libs/jquery-1.7.2.js"></imart><imart type="imuiScript" src="ui/libs/jquery-ui-1.8.21.custom.js"></imart><script type="text/javascript" src="ui/libs/jstree_pre1.0_fix/jquery.jstree.js"></script><script type="text/javascript" src="csjs/libs/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script><imart type="imuiScript" src="ui/libs/jquery.jqGrid-4.3.3/js/jquery.jqGrid.src.js" suffix="min" regexp="src" defer="defer"></imart><link rel="stylesheet" type="text/css" href="ui/libs/jQuery-File-Upload/css/jquery.fileupload-ui.css"><script type="text/javascript" src="ui/libs/jQuery-File-Upload/js/tmpl.min.js" defer="defer"></script><script type="text/javascript" src="ui/libs/jQuery-File-Upload/js/jquery.iframe-transport.js" defer="defer"></script><script type="text/javascript" src="ui/libs/jQuery-File-Upload/js/jquery.fileupload.js" defer="defer"></script><script type="text/javascript" src="ui/libs/jQuery-File-Upload/js/jquery.fileupload-ip.js" defer="defer"></script><script type="text/javascript" src="ui/libs/jQuery-File-Upload/js/jquery.fileupload-ui.js" defer="defer"></script><script type="text/javascript" src="ui/libs/jQuery-File-Upload/js/jquery.fileupload-jui.js" defer="defer"></script><script type="text/javascript" src="ui/js/jquery.imui.fileupload.js" defer="defer"></script><script type="text/javascript" src="csjs/libs/lightbox2/js/lightbox.js"></script><imart type="imuiScript" src="ui/libs/chardinjs/js/chardinjs.js" suffix="min" regexp="src" defer="defer"></imart><link rel="stylesheet" type="text/css" href="ui/libs/chardinjs/css/chardinjs.css">

セッション自動維持機能の読み込み
セッション自動維持機能を実現するタグを記述します。
<imart type="imuiSessionKeeper"/>

UIコンポーネントのCSJSUIコンポーネント の ClientSideJavaScript を読み込みます。
<imart type="condition" validity=loadSystemLocale><imart type="imuiScript" src=systemLocaleScript /></imart><imart type="condition" validity=loadTenantLocale><imart type="imuiScript" src=tenantLocaleScript /></imart><imart type="imuiScript" src=userLocaleScript></imart><imart type="imuiScript" src="ui/js/imui.js"></imart><script src="ui/js/imui-form-util.js"></script>

テーマのCSJS
テーマの ClientSideJavaScript を読み込みます。 読み込む ClientSideJavaScript、ClientSideJavaScript の実装は、各テーマによって異なります。
<imart type="imuiScript" src="ui/theme/im_theme_dropdown_blue/js/theme.js"></imart><script type="text/javascript" src="csjs/im_json.js" ></script><script type="text/javascript" src="csjs/im_window.js" ></script>

ライブラリ群の切り替え
intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ群の切り替え機能を追加しました。
標準では上記の テーマのCSS 、 UIコンポーネントのCSS 、 twitter bootstrap のCSS 、 IE8 向けの設定 、 3rd party ライブラリの読み込み 、 セッション自動維持機能の読み込み 、 UIコンポーネントのCSJS 、 テーマのCSJS の組み合わせを定義しています。
この組み合わせはテーマ共通モジュールとして提供しています。
どのような組み合わせ名が用意されているかの詳細は「設定ファイルリファレンス」 - 「ライブラリ群設定 」を参照してください。
組み合わせの指定方法は ライブラリ群の切り替え で説明します。
imart type=”head” のプレースホルダー

17intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<imart type=”head”> 内に指定された文字列と置き換えられるプレースホルダーです。
<imart type="replaceHeadTop"></imart>

imuiAjaxSubmit のメッセージ表示用関数
imuiAjaxSubmit の結果を表示するための関数です。
<script>(function($) {$(document).ready(function() {var message = '<imart type="string" value=message />';
var options = <imart type="string" value=options />;var messageType = '<imart type="string" value=messageType />';
var detail = <imart type="string" value=detail />;if(messageType == 'warning') {$.imuiFormUtil.showWarningMessage(message, detail, options);} else {$.imuiFormUtil.showSuccessMessage(message, options);}});})(jQuery);</script>

header
ヘッダ部分を実装します。 標準テーマでは、グローバルナビゲーション、ユーティリティ、マイメニューなどが実装されています。

ロゴ
標準テーマでは、intra-mart のロゴ画像を配置します。この画像をクリックすると、テナント管理で設定するホームURLへ遷移します。
グローバルナビ
標準テーマでは、ドロップダウンメニューを配置します。このドロップダウンメニューには、テナント管理のメニュー設定でグローバル
ナビ（PC用）をメニューグループとして定義したメニューが含まれます。グローバルナビ（PC用）の設定は、「テナント管理者操作ガ
イド」 - 「メニューを設定する」を参照してください。
マイメニュー
標準テーマでは、マイメニューを表示するためのアイコンを配置します。
検索ボックス
標準テーマでは、サイト内をキーワード検索するための検索ボックスを表示するためのアイコンを配置します。IM-ContentsSearch を
インストールすると、このアイコンが表示され検索ボックスから全文検索を行うことができます。
ユーティリティユーティリティは、個人設定やログイン/ログアウトなど業務外の操作をまとめたメニュー群です。 ユーティリティは UserUtilityTagと、そのタグが呼び出すプラグインで構成されています。
標準で提供しているプラグインは、ChangeToSPItemProvider
スマートフォン版へ
CompanyItemProvider
会社切り替えLoginLogoutItemProvider
ログインログアウト
PersonalSettingsItemProvider
個人設定

18

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01です。
プラグインは、UtilityItemProvider インタフェースを実装したクラスとして作ります。このプラグインの作成方法は、ユーティリティ

プラグイン を参照してください。
ヘルプドロップダウン
ヘルプドロップダウンは、画面に簡易ヘルプを表示する機能とドキュメントライブラリへのリンクをまとめたメニュー群です。 メ
ニューはサイトヘルプカテゴリに登録されたメニューアイテムが表示されています。

コラム
ヘルプドロップダウンは 2014 Winter(Iceberg) からの機能です。

body
ボディ部分を実装します。
標準テーマは、以下のように実装されています。
<div id="imui-container"><imart type="replaceContents"/></div>

なお v5,v6 の互換テーマでは、グローバルナビゲーションもこの JSSP に実装されています。
footerフッタ部分を実装します。 標準テーマでは、Copyright表記、Powered by intra-mart 画像などが実装されています。

注意
使用許諾により、Copyright表記、Powered by intra-mart 画像を表示しないことは禁じられています。

画像
ロゴやアイコンなど、テーマモジュール固有の画像ファイルを格納します。

CSS
テーマが使用する CSS を実装します。
CSS の @import を使った際のパフォーマンス劣化を避けつつ、テーマモジュール間で共通な部分を共有するために LESS を用いて実装しています。
テーマモジュールのビルド時に、LESS で書いた .less ファイルをコンパイルし、CSS に変換します。また、CSS の最小化も行います。 変換した CSS と 最小化した CSS の両方を Web サーバ、またはアプリケーションサーバにデプロイします。
CSS 上の共通な部分として以下のものがあります。これらはテーマモジュールを作成する際に必須なファイルです。
intra-mart Accel Platform が提供する CSS Module List
intra-mart Accel Platform が提供するコンポーネント
スクリプト開発モデル
JavaEE開発モデル
jQueryUI が定義するコンポーネント
また、これらのファイルが要求するパラメータも必要です。

CSS のフォルダ・ファイル構成

19

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
CSS をビルドするのに必要なフォルダ・LESS ファイルの構成は以下の通りです。
テーマモジュール固有のファイルは、body.less, footer.less, header.less, parameter.less の 4 つです。
theme.less は、そのほかの LESS ファイルをインポートするように実装されていて、このファイルをコンパイルすることで全ての定義を取り込んだ theme.css を生成できます。
imart/ui/theme/テーマID/css/├── theme.less ------------------ 以下の .less ファイルをまとめる less ファイル├── theme ----------------------- テーマモジュール固有の less ファイルを配置します│ ├── body.less -------------- #imui-container の定義│ ├── footer.less ------------ footer│ ├── header.less ------------ テーマのヘッダ│ └── parameters.less -------- LESS のパラメータ└── common ---------------------- テーマモジュール共通の less ファイルを配置します├── components.less -------- intra-mart Accel Platform が提供するコンポーネント├── default.less ----------- HTML 要素を定義します。
├── icons.less ------------- CSS Sprites├── jqueryUI.less ---------- jQueryUI が提供する CSS├── mixins.less ------------ 共通の関数├── modules.less ----------- intra-mart Accel Platform が提供する CSS モジュール├── parameters.less -------- LESS の共通パラメータ└── portal.less ------------ ポータル

theme/parameters.less の必須パラメータは以下のものです。
/* テーマの基準色のカラーコード */@theme-color:rgb(242,199,98);/* テーマの暗い基準色のカラーコード */@theme-dark-color:#444444;/* テーマの基準文字色のカラーコード */@base-text:#333333;/* テーマの基準色を背景色としたときの文字色のカラーコード */@accent-text:#ffffff;/* ボタンのハイライトのカラーコード */@button-high-base:#050505;/* ボタンのボーダーのカラーコード */@button-border-color:#aaaaaa;/* グローバルナビの左端からの位置 */@nav-global-height:42px;/* ツールバーの高さ */@toolbar-height:27px;

CSJS
テーマが使用する CSJS を実装します。
標準テーマでは、グローバルナビ、検索ボックス、マイメニュー、iframeの大きさを制御する関数を実装しています。
iframe の大きさを制御する関数は、テーマモジュール共通のものです。この関数は以下のように実装されています。
id が IM_MAIN の iframe が存在する場合、その高さ、幅をウィンドウの高さ、幅からグローバルナビゲーションなどを除いた大
きさまで広げる
id が IM_MAIN の iframe の中の iframe に imui-no-resize-iframe が class 属性にセットされている場合、その iframe は大きさの変更対象外とする

20

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01(function($) {$(document).ready(function() {fitIframe();$(window).resize(fitIframe);});function fitIframe() {// ヘッダ部分の高さを取得する
var header = $('#imui-header').height();// iframe の高さは window の高さからヘッダの高さを引いた値
var height = $(window).height() - header;// #IM_MAIN の中の iframe の大きさをセット$('#IM_MAIN').find('iframe:not(".imui-no-resize-iframe")').height(height).width($(window).width());// #IM_MAIN の大きさをセット$('#IM_MAIN').height(height).width($(window).width());//iframe のコンテンツ読み込みが終了したら、iframe 内の min-width を window の幅にする$($('#IM_MAIN')).load(function () {try {if ($('#IM_MAIN').get(0).contentDocument && $("#IM_MAIN").contents().find('body').css('min-width') >$(window).width()) {$("#IM_MAIN").contents().find('body').css('min-width', $(window).width());$("#IM_MAIN").contents().find('#imui-container').css('min-width', $(window).width());}} catch(ignore) {}});}})(jQuery);21

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

テーマモジュールの作成
ここではテーマモジュールの作成方法について説明します。
標準テーマカスタマイズを使って、標準テーマをカスタマイズする方法と、HTML や CSS などはじめから作り込んでいくスクラッチ開発の方法があります。

項目
標準テーマカスタマイズの概要
スクラッチ開発
設定ファイル
JSSP
CSS
画像
CSJS
サンプル
準備
設定ファイル
JSSP
CSS
画像
CSJS

標準テーマカスタマイズの概要
ここでは標準テーマカスタマイズの概要を説明します。
標準テーマカスタマイズは、標準テーマ、標準テーマ（シンプル）をカスタマイズしたテーマモジュールを生成するツールです。 この
ツールは、テーマの標準的な色とロゴファイルを変更したテーマモジュールを簡単に生成することを目的としています。
カスタマイズ可能な項目は、
テーマの標準的な色
ロゴ画像
グローバルナビの開始位置です。HTML を修正するようなカスタマイズ、特定の要素だけを変更するような細やかなカスタマイズには対応できません。
カスタマイズできる標準テーマには、v5、v6 の互換テーマは含まれません。
詳細は、「標準テーマカスタマイズ 操作ガイド」を参照してください。

注意
実行時にログインユーザが選択しているテーマのIDをデータベース上で書き換えます。「標準テーマカスタマイズを終了する」リンクをクリックせずに別の画面へ遷移すると、そのとき表示していたテーマを選択したことになるので注意してください。
画面上の見た目を完全に再現するものではありません。LESS コンパイラの実装の都合上、いくつかのアイコンが参照できません。ダウンロードするテーマモジュールには影響しません。

スクラッチ開発
必要なファイルをすべて作り込んでいく方法です。 intra-mart e Builder for Accel Platform でユーザモジュールプロジェクトを作り、テーマモジュールに必要なファイルを作成していきます。

22

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
注意
スクラッチ開発を行うと、標準テーマやそのカスタマイズでは実現できない見た目や操作性を実装可能です。 その反面、CSS モジュールや UI コンポーネントを適切にカスタマイズしないと思わぬ画面のレイアウト崩れ、CSJS の 競合などが発生する恐れがあります。
スクラッチ開発を行う場合は、対象となる全画面で全操作を行ってもレイアウトの崩れがないこと、操作した際に CSJS のエラーが発生しないことなどを十分に確認してください。

設定ファイルtheme-config
src/main/conf/theme-config 配下にテーマID と同じファイル名を持つ xml ファイルを作成します。 内容は 設定ファイル を参考にしてください。

message
src/main/conf/message/platform/theme 配下にテーマID と同じフォルダ名のフォルダを作り、その中にプロパティファイルを作成します。 message を参照し、各言語分プロパティファイルを作成します。

JSSP
src/main/jssp/src/theme 配下にテーマID と同じ名前のフォルダを作成し、その中に PageBuilder が要求する head, header, body,footer の 4 つの JSSP を作成します。

head
head の内容を含む JSSP を実装します。これら以外に jQuery のプラグインなど必要なものがあれば追記してください。
既存のテーマからコピーするのが簡単です。この場合、テーマID を修正する必要があります。
<imart type="imuiLink" href="ui/theme/テーマID/css/theme.css"></imart>...
<imart type="imuiScript" src="ui/theme/テーマID/js/theme.js"></imart>header
必要な要素を実装してください。
汎用的なテーマモジュールを作成する場合、ロゴ 、 グローバルナビ 、 マイメニュー 、 検索ボックス 、 ユーティリティ 、 ヘルプド

ロップダウン は必須です。
汎用的ではないテーマモジュールを作成する場合、必須な要素はありません。必要な要素だけを実装してください。
id に imui-header を持つ div や header 要素を含むようにしてください。
<header id="imui-header"><!-- ロゴ -->...
</header>ロゴ
ロゴは img タグとして実装します。この画像をクリックしたとき、ホームURL へ指定された URL に遷移することが望ましい動きです。ホームURL を取得するには、ThemeManager.getEncodedHomeUrl を呼び出してください。
<a href='<imart type="string" value=home></imart>'><img src="ui/theme/テーマID/images/logo.png"></a>23

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
let themeManager = new ThemeManager();home = themeManager.getEncodedHomeUrl();

グローバルナビ
MenuGroupManager を呼び出すことで、ユーザにひも付いたグローバルナビのメニュー情報を取得できます。 imuiDropdown タグを利用して表示する例を下に挙げます。
/* imuiDropdown の data 属性にセットするメニュー情報 */var menu = [];function init(request) {/** グローバルナビ* imuiDropdown の形式にメニュー情報を変換します。
*/
var menuGroupManager = new MenuGroupManager();var resultObject = menuGroupManager.getAvailableMenuTree('im_global_nav_pc');
if (!resultObject.error) {var context = Contexts.getAccountContext();
var menuTree = resultObject.data;walk(menuTree, menu, context.locale);}}function walk(menuTree, menu, locale) {if (menuTree) {var menuItem = menuTree.menuItem;var item = {};menu.push(item);item.label = 'Menu';
if (menuItem.displayNames[locale]) {item.label = menuItem.displayNames[locale].displayName;}
if (menuItem.type !== 'FOLDER') {item.href = menuItem.url;}
var children = menuTree.children;if (children && children.length > 0) {item.children = [];for (var i = 0; i < children.length; i++) {var child = children[i];walk(child, item.children, locale);}}}<imart type="imuiDropdown" data=menu />マイメニュー
マイメニューは CSJS で実装されています。 header.js の該当部分（480 - 563行目）を参照してください。

検索ボックス
検索ボックスは、SearchBoxTag を実装してください。
<imart type="SearchBoxTag" id="imui-nav-global-search-wrapper"/>

このタグは下記のような HTML を生成します。
SearchBoxTag に指定する id 、その中の imui-nav-global-search 、.imui-form-global-search 、 .imui-form-global-searchinput 、 .imui-form-global-search-submit に対してスタイルを当ててください。 また、表示/非表示を切り替えるように CSJS で関数を作成してください。

24

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<ul id="imui-nav-global-search-wrapper"><li class="imui-nav-global-search active"><a><span class="im-ui-icon-common-16-search-white"></span></a><form style="display: block;" method="GET" action="search" target="__search_window__"><fieldset class="imui-form-global-search"><input type="search" name="q" class="imui-form-global-search-input"><input type="submit" value="検索" class="imui-form-global-search-submit"></fieldset></form>
</li>
</ul>

ユーティリティユーティリティは、UserUtilityTag を実装してください。
<imart type="UserUtilityTag" id="imui-user-utility" />このタグは下記のような HTML を生成します。
UserUtilityTag に指定する id 、その中の li.imui-nav-global-pulldown、さらにその中の ul.imui-nav-global-pulldown-inner に対してスタイルを当ててください。 また、表示/非表示を切り替えたり、ドロップダウンするように CSJS で関数を作成してください。
<ul id="imui-user-utility"><li class="imui-nav-global-pulldown"><a href="javascript:void(0);">青柳辰巳</a><ul class="imui-nav-global-pulldown-inner" style="display:none"><li><a href="javascript:void(0)">個人設定</a>
<ul>
<li>
<a href="...">パスワード</a>
</li>
<li>
<a href="...">カレンダー</a>
</li>
...
</ul>
</li>
<li>
<a href="mobile_fw/to_sp">スマートフォン版へ</a>
</li>
<li>
<a href="logout">ログアウト</a>
</li>
</ul>
</li>
</ul>

ヘルプドロップダウン
MenuGroupManager を呼び出すことで、ユーザにひも付いたサイトヘルプのメニュー情報を取得できます。 imuiDropdown タグを利用して表示する例を下に挙げます。

25

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01/* imuiDropdown の data 属性にセットするメニュー情報 */var helpMenu = [];function init(request) {/** ヘルプドロップダウン* imuiDropdown の形式にメニュー情報を変換します。
*/
var menuGroupManager = new MenuGroupManager();var locale = Contexts.getAccountContext().locale;var resultObject = menuGroupManager.getAvailableMenuTree('im_site_help_pc');
var childrenData = [];if (!resultObject.error) {for(var index=0; index<resultObject.data.children.length; index++) {childrenData.push({
href: resultObject.data.children[index].menuItem.url,
label: resultObject.data.children[index].menuItem.displayNames[locale].displayName,
identity: resultObject.data.children[index].menuItem.id})}
helpMenu = [{iconClass:"im-ui-icon-common-16-help-white",children:childrenData}]}}<imart type="imuiDropdown" data=helpMenu />id 属性「start_help_pc」 に対して、簡易ヘルプを呼び出すスクリプトを実装してください。 また、href 属性の URL に遷移しないよ
うに URL を無効化してください。

body
id が imui-container となる div と、その中に <imart type=”xxx”/> を必ず実装してください。
<div id="imui-container"><imart type="replaceContents"/></div>

footerpoweredbyim.png を表示してください。
<footer id="imui-footer"><div class="imui-footer-inner"><ul class="imui-footer-utility"><li><img src="ui/theme/テーマID/images/poweredbyim.png"/></li></ul></div></footer>CSS
src/main/public/ui/theme 配下にテーマID と同じ名前のフォルダを作成し、その中に css フォルダを作成します。 このフォルダの中にテーマモジュールで使用するCSSを配置します。 CSS ファイルの名前は theme.css, theme.min.css と命名することをお勧めします。head.html に imuiLink タグの href 属性に theme.css と記述されているので、この名前にすることで、修正を最小限に抑えることができます。

テーマが使用するCSS の通り、CSS は LESS を利用して生成しています。テーマモジュール間で共通な部分を共有するため、スクラッチでテーマモジュールを作成する場合も LESS を使用して CSS を生成してください。

26

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
基となる LESS ファイル群は、%CONTEXT_PATH%/ui/theme/元とするテーマID/css に配置されています。このフォルダに含まれるファイルをコピーしてください。
LESS ファイル群をコンパイルし、テーマ の CSS を生成します。また、パフォーマンス向上を目的として最小化したテーマの CSS も生成することをお勧めします。
LESS ファイルをコンパイルするには lessc や、koala などを利用してください。
LESS ファイルの修正は、テーマ固有の LESS ファイル、theme/parameter.less にとどめることをお勧めします。 共通の LESS ファ
イルに対してカスタマイズを行うことはお勧めしません。

画像
src/main/public/ui/theme 配下にテーマID と同じ名前のフォルダを作成し、その中に images フォルダを作成します。 このフォルダの中にテーマモジュールで使用する画像を配置します。
テーマ毎に必要な画像は、以下の4つです。
マイメニューのアイコン
btn_im_01.png
ロゴ画像
logo.png
Powred by intra-mart 画像
poweredbyim.png「テーマ」画面に表示するサムネイル画像
thumbnail.png

CSJS
src/main/public/ui/theme 配下にテーマID と同じ名前のフォルダを作成し、その中に js フォルダを作成します。 このフォルダの中にテーマモジュールで使用する CSJS を配置します。 CSJS ファイルの名前は theme.js, theme.min.js と命名することをお勧めします。
head.html に imuiScript タグの src 属性に theme.js と記述されているので、この名前にすることで、修正を最小限に抑えることができます。
テーマモジュールに必須の iframeの大きさを制御する関数と、作成するテーマモジュールで必要になる CSJS を作成します。
iframe の大きさを制御する関数は、%CONTEXT_PATH%/ui/theme/テーマID/js/im_fit_iframe.js として配置されています。

サンプル
ここでは、以下のようなテーマを作成していきます。

27

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

テーマカラーは、#005678 とします。
ヘッダは、ロゴ、グローバルナビ、検索ボックス、ユーティリティ、マイメニューの全要素を配置します。
標準テーマとの違いは、上下の2段とし、丈夫にロゴ、検索ボックス、ユーティリティ、マイメニューを、下段にグローバ
ルナビを配置します。
フッタは、Powred by intra-mart 画像だけを配置します。
head, body は標準テーマと同じにします。
テーマID は、sample_theme とします。

準備
intra-mart e Builder for Accel Platform でモジュールプロジェクトを作成しておきます。モジュールプロジェクトの作り方は「intra-mart e Builder for Accel Platform アプリケーション開発ガイド」 - 「モジュール・プロジェクト作成」を参照してください。

設定ファイルtheme-config
まず、設定ファイルを作成します。
src/main/conf/theme-config/sample_theme.xml を作成します。 内容は以下の通りです。

28intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<?xml version="1.0" encoding="UTF-8"?><theme-config
xmlns="http://www.intra-mart.jp/theme/theme"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.intra-mart.jp/theme/theme ../../schema/theme.xsd "><themeid="sample_theme"
author="intra-mart"version="8.0"
imagepath="ui/theme/sample_theme/images/thumbnail.png"
theme-folder="theme/sample_theme"
sortkey="0"><client-type-info
id="pc"default="false"/></theme></theme-config>

message
src/main/conf/message/platform/theme/sample_theme に以下の4つのファイルを作成します。
caption.properties
caption_en.properties
caption_ja.properties
caption_zh_CN.properties
内容は以下の通りです。
CAP.Z.IWP.THEME.SAMPLE_THEME.NAME=Sample ThemeCAP.Z.IWP.THEME.SAMPLE_THEME.DESCRIPTION=This is sample theme.

CAP.Z.IWP.THEME.テーマID.NAME をキーに持つ値がテーマ名、CAP.Z.IWP.THEME.テーマID.DESCRIPTION をキーに持つ値がテーマの説明です。また、Java のプロパティファイルであるため、ASCII 以外の文字列は native2ascii 等でエンコードしてください。

JSSP
次に、JSSP を作成します。

head
既存のテーマの head をコピーし、それを修正します。
ここでは標準テーマ 青色 をコピー対象とします。 以下のファイルを src/main/jssp/src/theme/sample_theme にコピーします。
%CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.html%CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.js
head.html は、標準テーマ 青色のテーマID である im_theme_dropdown_blue を sample_theme に書き換えるように修正します。

29

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01--- %CONTEXT_PATH%/imart/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.html+++ src/main/jssp/src/theme/sample_theme/head.html@@ -10,7 +10,7 @@<link rel="icon" href="<imart type="string" value=base></imart>favicon.ico" type="image/x-icon" /><link rel="Shortcut Icon" type="img/x-icon" href="<imart type="string" value=base></imart>favicon.ico" />+<imart type="imuiLink" href="ui/theme/im_theme_dropdown_blue/css/theme.css"></imart><imart type="imuiLink" href="ui/theme/sample_theme/css/theme.css"></imart><imart type="imuiLink" href="ui/css/imui.css"></imart><link rel="stylesheet" type="text/css" href="ui/css/bootstrap.css">@@ -39,7 +39,7 @@<imart type="imuiScript" src=userLocaleScript></imart><imart type="imuiScript" src="ui/js/imui.js"></imart><script src="ui/js/imui-form-util.js"></script><imart type="imuiScript" src="ui/theme/im_theme_dropdown_blue/js/theme.js"></imart>+<imart type="imuiScript" src="ui/theme/sample_theme/js/theme.js"></imart><script type="text/javascript" src="csjs/im_json.js" ></script><script type="text/javascript" src="csjs/im_window.js" ></script>

head.js は修正不要です。

headerheader は、以下のように実装します。
src/main/jssp/src/theme/sample_theme/header.html<header id="imui-header" class="container-fluid sample-header"><div class="row-fluid"><!-- ロゴ --><div class="span6"><a id="logo" href='<imart type="string" value=home></imart>'><img
src="ui/theme/sample_theme/images/logo.png"></a></div><div class="span6"><!-- マイメニュー --><div style="float:right;"><ul id="imui-nav-global-launcher-wrapper" style="display:inline-block;"><li class="imui-nav-global-launcher"><a class="action"><img
src="ui/theme/sample_theme/images/btn_im_01.png" alt="IM launcher"></a></li></ul></div><!-- ユーティリティ --><div style="float:right;"><imart type="UserUtilityTag" id="imui-user-utility"></imart></div><!-- 検索ボックス --><div style="float:right;"><imart type="SearchBoxTag" id="imui-nav-global-search-wrapper"></imart></div></div></div><div class="row-fluid"><!-- グローバルナビ --><div class="span12"><imart type="imuiDropdown" data=menu /></div></div></header>src/main/jssp/src/theme/sample_theme/header.js

30

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
var home;
var menu = [];function init(request) {
/*
* ロゴ
*/
var themeManager = new ThemeManager();home = themeManager.getEncodedHomeUrl();/** グローバルナビ* imuiDropdown の形式にメニュー情報を変換します。
*/
var menuGroupManager = new MenuGroupManager();var resultObject = menuGroupManager.getAvailableMenuTree('im_global_nav_pc');
if (!resultObject.error) {var context = Contexts.getAccountContext();
var menuTree = resultObject.data;
var tmpMenu = [];walk(menuTree, tmpMenu, context.locale);for (var i = 0; i < tmpMenu[0].children.length; i++) {// 再帰的にメニューの情報を取得します。
menu.push(tmpMenu[0].children[i]);}}}function walk(menuTree, menu, locale) {if (menuTree) {var menuItem = menuTree.menuItem;var item = {};menu.push(item);item.label = 'Menu';
if (menuItem.displayNames[locale]) {item.label = menuItem.displayNames[locale].displayName;}
if (menuItem.type !== 'FOLDER') {item.href = menuItem.url;}
var children = menuTree.children;if (children && children.length > 0) {item.children = [];for (var i = 0; i < children.length; i++) {var child = children[i];walk(child, item.children, locale);
}
}
}
}

body
既存のテーマの body をコピーします。
以下のファイルを src/main/jssp/src/theme/sample_theme にコピーします。
%CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/body.html%CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/body.js

footerfooter は、以下のように実装します。
src/main/jssp/src/theme/sample_theme/footer.html

31

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<footer><img src="ui/theme/sample_theme/images/poweredbyim.png"/></footer>src/main/jssp/src/theme/sample_theme/footer.jsfunction init() {}CSS
既存のテーマの LESS ファイルをコピーし、それを修正します。
以下のフォルダを src/main/public/ui/theme/sample_theme にコピーします。
%CONTEXT_PATH%/ui/theme/im_theme_dropdown_blue/css
修正対象は src/main/public/ui/theme/sample_theme/css/theme 配下にある、以下の3ファイルです。
parameter.lessfooter.lessheader.lessparameter.less
テーマカラーを #005678 にします。その他の値は修正しません。
@theme-color: #005678;

footer.lessfooter の背景を黒に、Powred by intra-mart の画像を中央に配置します。
footer {background-color: #000;
height: 100px;
margin-top: 20px;
text-align: center;img {margin-top: 24px;}}

header.less
ヘッダのスタイルを指定します。

32

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01#imui-nav-global-launcher-wrapper {...
}#imui-header{color: @accent-text;
background-color: @theme-color;/* nav-global */#imui-nav-global{
height:@nav-global-height;...
/* nav-global(wrap) */.imui-nav-global-wrap{
position:relative;
min-width:960px;
margin:0 10px;
height:@nav-global-height;
}
}
}

画像
既存のテーマの画像ファイルをコピーし、それを修正します。
以下のフォルダを src/main/public/ui/theme/sample_theme にコピーします。
%CONTEXT_PATH%/ui/theme/im_theme_dropdown_blue/images
コピーしたファイルの内、thumbnail.png のみこのテーマモジュールと実体が伴いません。 あとでスクリーンショットを取得し、その画像と入れ替えてください。

CSJS
このテーマモジュールで使用する関数を実装します。
今回は、iFrame の大きさ制御、マイメニュー、検索ボックスの制御関数を実装します。
詳細は、Appendix を参照してください。

33

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

付録
テーマモジュールのフォルダ・ファイル構成
テーマモジュール
├── build.xml├── build_js_css.xml├── message.properties├── message_en.properties├── message_ja.properties├── message_zh_CN.properties├── module.xml├── pom.xml└── src└── main├── conf│ ├── message│ │ └── platform│ │└── theme│ │├── caption.properties│ │├── caption_en.properties│ │├── caption_ja.properties│ │├── caption_zh_CN.properties│ │└── テーマID│ │├── caption.properties│ │├── caption_en.properties│ │├── caption_ja.properties│ │└── caption_zh_CN.properties│ └── theme-config│└── テーマID.xml├── jssp│ └── platform│└── src│└── theme│└── テーマID│├── body.html│├── body.js│├── footer.html│├── footer.js│├── head.html│├── head.js│├── header.html│└── header.js└── public└── ui└── theme└── テーマID├── css│ └── CSS を参照してください。
├── images│ ├── logo.png│ ├── poweredbyim.png│ ├── thumbnail.png│ └── ...
└── js└── CSJS を参照してください。

テーマモジュールのサンプル

34intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
項目
設定ファイルmessagesample_theme.xml
JSSP
head
headerbodyfooterCSS
parameter.lessheader.lessfooter.less
CSJS
フォルダ・ファイル構成

設定ファイルmessage
src/main/conf/message/platform/theme/sample_theme/caption.properties
1
2

CAP.Z.IWP.THEME.SAMPLE_THEME.NAME=Sample ThemeCAP.Z.IWP.THEME.SAMPLE_THEME.DESCRIPTION=This is sample theme.

caption_en.properties, caption_ja.properties, caption_zh_CN.properties も同じ内容です。

sample_theme.xml
src/main/conf/theme-config/sample_theme.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?xml version="1.0" encoding="UTF-8"?><theme-config
xmlns="http://www.intra-mart.jp/theme/theme"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.intra-mart.jp/theme/theme ../../schema/theme.xsd "><themeid="sample_theme"
author="intra-mart"version="8.0"
imagepath="ui/theme/sample_theme/images/thumbnail.png"
theme-folder="theme/sample_theme"
sortkey="0"><client-type-info
id="pc"default="false"/></theme></theme-config>

JSSP
head
src/main/jssp/src/theme/sample_theme/head.html

35

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<head><meta charset="utf-8" /><meta name="author" content="NTT DATA INTRAMART CORPORATION" /><meta name="description" content="" /><meta name="keywords" content="" /><meta http-equiv="X-UA-Compatible" content="IE=Edge"><meta name="google" content="notranslate"><base href='<imart type="string" value=base></imart>' target="_self"><link rel="icon" href='<imart type="string" value=base></imart>favicon.ico' type="image/x-icon" /><link rel="Shortcut Icon" type="img/x-icon" href='<imart type="string" value=base></imart>favicon.ico' /><imart type="string" value=libraries/><imart type="replaceHeadTop"></imart><script>(function($) {$(document).ready(function() {var message = '<imart type="string" value=message />';
var options = <imart type="string" value=options />;var messageType = '<imart type="string" value=messageType />';
var detail = <imart type="string" value=detail />;if(messageType == 'warning') {$.imuiFormUtil.showWarningMessage(message, detail, options);} else {$.imuiFormUtil.showSuccessMessage(message, options);}});})(jQuery);</script></head>src/main/jssp/src/theme/sample_theme/head.js

36

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

37

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

let base;
let message;
let detail;let locale;let options = {};let messageType = 'success';
let libraries;function init(request) {//imuiAjaxSubmit で送られたメッセージキーをチェックし、存在すればメッセージを表示
if (request['imui-message-key'] == Client.get('x-jp-co-intra-mart-ajaxsubmit-message-key')) {message = Client.get('x-jp-co-intra-mart-ajaxsubmit-message');messageType = Client.get('x-jp-co-intra-mart-ajaxsubmit-message-type');if (messageType == 'warning') {detail = Client.get('x-jp-co-intra-mart-ajaxsubmit-detail-message');}if (request.getParameter("imui-message-closable") != null) {options.closable = request.getParameter("imui-message-closable").getValue() === 'true' ? true : false;}
if (request.getParameter("imui-message-duration") != null) {options.duration = request.getParameter("imui-message-duration").getValue() - 0;}
if (request.getParameter("imui-message-escape") != null) {options.escape = request.getParameter("imui-message-escape").getValue() === 'true' ? true : false;}}
if(detail != null){detail = (ImJson.parseJSON(detail)[0]).toSource();} else {var a = new Array();detail = a.toSource();}
options = (options).toSource();base = Web.base() + '/';
var themeManager = new ThemeManager();var contents = new Content(themeManager.getLibrariesPath());
libraries = contents.execute();}38

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

headersrc/main/jssp/src/theme/sample_theme/header.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<header id="imui-header" class="container-fluid sample-header"><div class="row-fluid"><!-- ロゴ --><div class="span6"><a id="logo" href='<imart type="string" value=home></imart>'><img
src="ui/theme/sample_theme/images/logo.png"></a></div><div class="span6"><!-- マイメニュー --><div style="float:right;"><ul id="imui-nav-global-laucher-wrapper" style="display:inline-block;"><li class="imui-nav-global-launcher"><a class="action"><img
src="ui/theme/sample_theme/images/btn_im_01.png" alt="IM launcher"></a></li></ul></div><!-- ユーティリティ --><div style="float:right;"><imart type="UserUtilityTag" id="imui-user-utility"></imart></div><!-- ヘルプドロップダウン --><div style="float:right;"><imart type="imuiDropdown" data=helpMenu id="imui-nav-help-dropdown"style="top:10px;position:relative;"/></div><!-- 検索ボックス --><div style="float:right;"><imart type="SearchBoxTag" id="imui-nav-global-search-wrapper"></imart></div></div></div><div class="row-fluid"><!-- グローバルナビ --><div class="span12"><imart type="imuiDropdown" data=menu /></div></div></header>src/main/jssp/src/theme/sample_theme/header.js

39

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

40

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

var home;
var menu = [];var helpMenu = [];function init(request) {
/*
* ロゴ
*/
var themeManager = new ThemeManager();home = themeManager.getEncodedHomeUrl();/** グローバルナビ* imuiDropdown の形式にメニュー情報を変換します。
*/
var menuGroupManager = new MenuGroupManager();var resultObject = menuGroupManager.getAvailableMenuTree('im_global_nav_pc');
if (!resultObject.error) {var context = Contexts.getAccountContext();
var menuTree = resultObject.data;
var tmpMenu = [];walk(menuTree, tmpMenu, context.locale);for (var i = 0; i < tmpMenu[0].children.length; i++) {// 再帰的にメニューの情報を取得します。
menu.push(tmpMenu[0].children[i]);}}getHelpDropdown();}function walk(menuTree, menu, locale) {if (menuTree) {var menuItem = menuTree.menuItem;var item = {};menu.push(item);item.label = 'Menu';
if (menuItem.displayNames[locale]) {item.label = menuItem.displayNames[locale].displayName;}
if (menuItem.type !== 'FOLDER') {item.href = menuItem.url;}
var children = menuTree.children;if (children && children.length > 0) {item.children = [];for (var i = 0; i < children.length; i++) {var child = children[i];walk(child, item.children, locale);}}}}function getHelpDropdown(){
var menuGroupManager = new MenuGroupManager();var locale = Contexts.getAccountContext().locale;var resultObject = menuGroupManager.getAvailableMenuTree('im_site_help_pc');
var childrenData = [];if (!resultObject.error) {for(var index=0; index<resultObject.data.children.length; index++) {childrenData.push({
href: resultObject.data.children[index].menuItem.url,
label: resultObject.data.children[index].menuItem.displayNames[locale].displayName,
identity: resultObject.data.children[index].menuItem.id})}
helpMenu = [{iconClass:"im-ui-icon-common-16-help-white",children:childrenData}]

41

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
70
71

}
}

body
src/main/jssp/src/theme/sample_theme/body.html
1
2
3
4
5

<div id="imui-container"><imart type="replaceContents"></imart></div>

src/main/jssp/src/theme/sample_theme/body.js1function init(){}footersrc/main/jssp/src/theme/sample_theme/footer.html
1
2
3<footer><img src="ui/theme/sample_theme/images/poweredbyim.png"/></footer>src/main/jssp/src/theme/sample_theme/footer.js1function init(){}CSS
parameter.less
src/main/public/ui/theme/sample_theme/css/theme/parameter.less42intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/* テーマの標準的な色のカラーコード */@theme-color:#005678;/* テーマの標準的な暗い色のカラーコード */@theme-dark-color:#444444;/* テーマの標準的な文字色のカラーコード */@base-text:#333333;/* テーマの標準的な色を背景色としたときの文字色のカラーコード */@accent-text:#ffffff;/* グローバルナビの左端からの位置 */@global-navigation-position-left: 158px;/* ボタンのハイライトのカラーコード */@button-high-base:#050505;/* ボタンのボーダーのカラーコード */@button-border-color:#aaaaaa;/* ツールバーの高さ */@toolbar-height:27px;/* グローバルナビの高さ */@nav-global-height:42px;@theme-header-color-start:@theme-header-color;@theme-header-color-end:darken(@theme-header-color-start, 10%);@theme-header-colorstop:100%;@theme-header-color-type:linear;header.less
src/main/public/ui/theme/sample_theme/css/theme/header.less43intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

44

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

#logo {
position: relative;
top: 5px;}#imui-user-utility {position: relative;
top: 10px;> li.imui-nav-global-pulldown {>a{&.ui-state-active {> span.ui-button-text {color: #333333;}}> span.ui-button-text {color: #ffffff;}}}}#imui-nav-global-search-wrapper {position: relative;
top: 13px;
form {
float: left;}> li.imui-nav-global-search {>a{> span {float: right;
margin: 3px;}}}}/* IM-Launcher area */#imui-nav-global-laucher-wrapper {margin-top: 4px;
.imui-nav-global-launcher {margin-left:8px;.action{z-index: 1000;
position:relative;}}.imui-nav-global-launcher.active{
position:relative;/* IM-Launcher area box */.imui-box-launcher {position:absolute;
top:5px;
right:20px;
width:830px;
z-index:999;
padding:30px 0 0 30px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.8);.theme-border-radius(10px, 10px, 10px, 10px);.theme-box-shadow(0px, 3px, 10px, #333333);a{display:block;overflow:hidden;}.imui-list-launcher{margin-left:5px;
margin-bottom:20px;
li{
45intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

li{
float:left;text-align:center;padding:0 10px 0 0;
height:80px;
width:80px;a{span.imui-list-launcher-label{display:block;font-size:75%;
text-decoration:none;
padding:2px 10px;
background:#000000;
width:60px;
overflow:hidden;
white-space: normal;
word-wrap: break-word;
word-break: break-all;color:@theme-header-accent-text-color;.theme-border-radius(10px, 10px, 10px, 10px);}
span.imui-list-launcher-info{
margin-left:140px;
width:500px;}}}}.imui-btn-launcher-back{position:absolute;
left:10px;
top:28px;
border:1px solid #888888;.theme-border-radius(3px, 3px, 3px, 3px);a{line-height:50px;}}.imui-btn-launcher-add{
position:absolute;
right:68px;
bottom:4px;.theme-border-radius(3px, 3px, 3px, 3px);}.imui-btn-launcher-settings{
position:absolute;
right:38px;
bottom:4px;.theme-border-radius(3px, 3px, 3px, 3px);}.imui-btn-launcher-close{
position:absolute;
right:7px;
bottom:7px;
padding:0px 1px;
border:1px solid #888888;.theme-border-radius(3px, 3px, 3px, 3px);}}}}#imui-header{color: @accent-text;
background-color: @theme-color;/* nav-global */#imui-nav-global {height:@nav-global-height;
border-bottom:3px solid desaturate(darken(@theme-header-color, 22%),10%);.theme-gradient(@theme-header-color-type; @theme-header-color-start; @theme-header-color-end;

46

139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

intra-mart Accel
Platform — テーマ仕様書
第9版 2021-08-01.theme-gradient(@theme-header-color-type;@theme-header-color-start;@theme-header-color-end;@theme-header-colorstop);.theme-gradient-filter(@theme-header-color-type; @theme-header-color-start; @theme-header-color-end;@theme-header-colorstop);/* nav-global(wrap) */.imui-nav-global-wrap{
position:relative;
min-width:960px;
margin:0 10px;
height:@nav-global-height;}}}.imui-triangle-right {width: 0;height: 0;
border-top: 5px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #EEE;
position: absolute;
top: 6px;
right: 3px;}
.imui-triangle-down {width: 0;height: 0;
border-top: 6px solid #EEE;
border-left: 5px solid transparent;
border-right: 5px solid transparent;}

footer.less
src/main/public/ui/theme/sample_theme/css/theme/footer.less
1
2
3
4
5
6
7
8
9

footer {background-color: #000;
height: 100px;
margin-top: 20px;
text-align: center;img {margin-top: 24px;
}
}

CSJS
src/main/public/ui/theme/sample_theme/js/theme.js

47

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

48

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

/*
* 検索ボックス*/(function($) {$.widget("imui.imuiSearchBox", {active: false,_create: function() {var self = this;var form = $(this.element).find('form');
var trigger = $(this.element).find('li.imui-nav-global-search');self.formArea = form;
self._close();trigger.children('a').bind('click', function() {if (self.active) {self._close();this.focus();} else {self._open();self.formArea.find('.imui-form-global-search-input').focus();}
return false;});
form.bind('submit', function() {if (self.active) {self._close();}});},_open: function() {this.active = true;$(this.element.children('li')).addClass('active');
this.formArea.show();},_close: function() {this.active = false;$(this.element.children('li')).removeClass('active');
this.formArea.hide();}});$.widget("imui.imuiMenuItem", {defaultElement: "<ul>",delay: 150,
options: {iconClass: null,position: {my: "left top",
at: "right top",
collision: 'flip none'}},_create: function() {var self = this;this.activeMenu = this.element;
this.element.addClass( "imui-menu ui-widget ui-widget-content" ).attr({
id: this.menuId,
role: "menu"}).bind( "mouseover.imuiMenuItem", function( event ) {if ( self.options.disabled ) {return;}clearTimeout($.data(self.options.root.element, 'imui_dropdown_menu.closeAllTimer'));var target = $( event.target ).closest( ".imui-menu-item" );if ( target.length ) {self.focus( event, target );49intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

}
})
.bind("mouseout.imuiMenuItem", function( event ) {if ( self.options.disabled ) {return;}clearTimeout($.data(self.options.root.element, 'imui_dropdown_menu.closeAllTimer'));var timer = setTimeout(function() {self.closeAll();self.options.root._close();}, 500);$.data(self.options.root.element, 'imui_dropdown_menu.closeAllTimer', timer);var target = $( event.target ).closest( ".imui-menu-item" );if ( target.length ) {self.blur( event );}}).find('a').each(function() {var anchor = $(this);var iconClassName = anchor.data('iconClass') || self.options.iconClass;if (anchor.data('icon')) {anchor.prepend($('<span class="imui-menu-item-icon"/>').css('background-image', 'url(' + anchor.data('icon') + ')'));
} else if (iconClassName) {anchor.prepend($('<span class="imui-menu-item-icon"/>').addClass(iconClassName));}
if ($(anchor).next('ul').length == 0) {anchor.bind('click', function() {self.closeAll();self.options.root._close();});}}).end().imuiScrollMenu({
position: this.options.position}).find('ul').imuiScrollMenu({position: this.options.position});this.refresh();},refresh: function() {var self = this;// initialize nested menus
var submenus = this.element.find("ul:not(.imui-menu)").addClass( "imui-menu ui-widget ui-widget-content" ).attr("role", "menu").hide();// don't refresh list items that are already adapted
var items = submenus.add(this.element).children( "li:not(.imui-menu-item):has(a)" ).addClass( "imui-menu-item" ).attr( "role", "presentation" );items.children( "a" ).addClass( " ui-state-default" ).attr( "tabIndex", -1 ).attr( "role", "menuitem" );items.children('a').each(function() {var html = $(this).html();$(this).empty().append($('<span class="imui-menu-item-label"/>').wrapInner(html));
});

50

139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

});

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

submenus.each(function() {var menu = $(this);var item = menu.prev("a");item.attr("aria-haspopup", "true").prepend('<div class="imui-triangle-right"></div>');});},focus: function( event, item ) {var self = this;this.blur();if ( this._hasScroll() ) {var borderTop = parseFloat( $.curCSS( this.element[0], "borderTopWidth", true) ) || 0,
paddingTop = parseFloat( $.curCSS( this.element[0], "paddingTop", true) ) || 0,
offset = item.offset().top - this.element.offset().top - borderTop - paddingTop,
scroll = this.element.scrollTop(),elementHeight = this.element.height(),
itemHeight = item.height();
if ( offset < 0 ) {this.element.scrollTop( scroll + offset );} else if ( offset + itemHeight > elementHeight ) {this.element.scrollTop( scroll + offset - elementHeight + itemHeight );}}this.active = item.first().children( "a" ).addClass( "ui-state-focus" ).end();// highlight active parent menu item, if any
this.active.parent().closest(".imui-menu-item").children("a:first").addClass("ui-state-active");self.timer = setTimeout(function() {self._close();}, self.delay)var nested = $(">ul", item);if (nested.length && /^mouse/.test(event.type)) {self._startOpening(nested);}
this.activeMenu = item.parent();
this._trigger( "focus", event, { item: item } );},blur: function(event) {if (!this.active) {return;}clearTimeout(this.timer);this.active.children( "a" ).removeClass( "ui-state-focus" );this.active = null;},_startOpening: function(submenu) {clearTimeout(this.timer);var self = this;self.timer = setTimeout(function() {self._close();self._open(submenu);}, self.delay);},_open: function(submenu) {clearTimeout(this.timer);this.element.find(".imui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true");/*var position = $.extend({}, {

51

209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

var position = $.extend({}, {of: this.active}, $.type(this.options.position) == "function"? this.options.position(this.active): this.options.position);
submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").position(position);*/submenu.width(submenu.width());
submenu.show().removeAttr("aria-hidden").attr("aria-expanded", "true").css('opacity', 0).imuiScrollMenu('adjust',$.extend(this.options.position, {of: submenu.parent().parent()})).css('opacity', 1);},closeAll: function() {this.element.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end().find("a.ui-state-active").removeClass("ui-state-active");
this.blur();this.activeMenu = this.element;},_close: function() {this.active.parent().find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end().find("a.ui-state-active").removeClass("ui-state-active");},_hasScroll: function() {// TODO: just use .prop() when we drop support for jQuery older than 1.6
return this.element.height() < this.element[ $.fn.prop ? "prop" : "attr" ]( "scrollHeight" );},select: function( event ) {// save active reference before closeAll triggers blurvar ui = {
item: this.active};
this.closeAll();this._trigger( "select", event, ui );},destroy: function() {this.element.removeAttr('aria-activedescendant').find('.imui-menu').andSelf().removeClass('imui-menu ui-widget ui-widget-content ').removeAttr('role').removeAttr('tabIndex').removeAttr('aria-labelledby').removeAttr('aria-expanded').removeAttr('aria-hidden').show();
this.element.find('.imui-menu-item').unbind('.imuiMenuItem').removeClass('imui-menu-item').removeAttr('role').children('a').removeClass('ui-state-hover').removeAttr('tabIndex').removeAttr('role').removeAttr('aria-haspopup').removeAttr('id').children('.ui-icon').remove();$.Widget.prototype.destroy.call(this);52intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348

}
});
$.widget("imui.imui_dropdown_menu",{
options: {iconClass: null,
menuBarClass: '',//'imui-nav-global-list imui-menubar ui-widget-header ui-helper-clearfix',menuBarItemClass: '',//'imui-menubar-item',
activeForIE8: null},_create: function() {// this will be ul
var that = this;// items will be toplevel li
var items = this.items = this.element.children('li').addClass(that.options.menuBarItemClass).children('a');// let only the first item receive focus
items.slice(1).attr( "tabIndex", -1 );//this.element.addClass("imui-menubar ui-widget-header ui-helper-clearfix");
this.element.addClass(this.options.menuBarClass);
items.each(function() {var anchor = $(this);anchor.bind('mouseenter.imui_dropdown_menu', function(event) {anchor.addClass('ui-state-hover');}).bind('mouseleave.imui_dropdown_menu', function(event) {anchor.removeClass('ui-state-hover');}).bind('click.imui_dropdown_menu', function(event) {if (anchor.next('ul').size() == 0) {that._trigger('select', event, {item: anchor.closest('li')});
}
});
});
items.next('ul').imuiMenuItem({select: function( event, ui ) {ui.item.parents( "ul.imui-menu:last" ).hide();that._trigger( "select", event, ui );that._close();// TODO what is this targetting? there's probably a better way to access it$(event.target).prev().focus();},
iconClass: this.options.iconClass,root: this}).hide();
items.each(function() {var input = $(this),menu = input.next('ul');
input.bind("click.imui_dropdown_menu focus.imui_dropdown_menu mouseenter.imui_dropdown_menu
mouseleave.imui_dropdown_menu", function(event) {// ignore triggered focus event
if ( event.type == "focus" && !event.originalEvent ) {return;}//サブメニューがないメニューは、eventをそのまま続行
if ($(this).next('ul').length != 0) {event.preventDefault();}
if ( event.type == "click" && menu.is( ":visible" ) && that.activeMenu && that.activeMenu[0] ==menu[0] ) {that._close();return;

53

348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418

return;intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01}
if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" ) {that._open( event, menu );}if (event.type == 'mouseenter') {clearTimeout($.data(that, 'imui_dropdown_menu.closeAllTimer'));that._open(event, menu);
return;}if (event.type == 'mouseleave' && menu.is(':visible')) {clearTimeout($.data(that.element, 'imui_dropdown_menu.closeAllTimer'));var timer = setTimeout(function() {that._close();}, 500);$.data(that.element, 'imui_dropdown_menu.closeAllTimer', timer);
return;}}).addClass('ui-button ui-widget ui-button-text-only imui-menubar-link').wrapInner( "<span class='ui-button-text'></span>" ).removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" );//for IE8
if (input.width() > input.children().outerWidth(true)) {input.width(input.children().outerWidth(true));}//サブメニューがある場合は、下向き三角アイコンを追加
if (input.next('ul').length != 0) {input.prepend('<div class="imui-triangle-down" style="position: absolute;top: 10px;right: .5em;"></div>');}});$(that.element).each(function(event){$(this).bind('focusin.imui_dropdown_menu', function(event) {clearTimeout(that.closeTimer);});$(this).bind('focusout.imui_dropdown_menu', function(event) {that.closeTimer = setTimeout(function() {that._close(event);}, 100);});});},_close: function(event, menu) {if (!this.activeMenu || !this.activeMenu.length ) {//for IE8
if ($.data(this.element, 'imui_dropdown_menu.active') != null) {this.activeMenu = $.data(this.element, 'imui_dropdown_menu.active');} else {return;}}this.element.children('li').removeClass('active');
this.activeMenu.imuiMenuItem("closeAll").hide();
this.activeMenu.prev().removeClass("ui-state-active").removeAttr("tabIndex");this.activeMenu = null;this.open = false;//for IE8
this.options.activeForIE8 = null;$.removeData(this.element, 'imui_dropdown_menu.active');},_open: function(event, menu) {

54

418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01_open: function(event, menu) {var that = this;if (menu.length == 0) {return;}if ( this.activeMenu && this.activeMenu[0] == menu[0] ) {//for IE8
if (this.options.activeForIE8 != null) {this.activeMenu = this.options.activeForIE8;} else {return;}}this.element.children('li').addClass('active');if (this.activeMenu) {this.activeMenu.imuiMenuItem("closeAll").hide();
this.activeMenu.prev().removeClass("ui-state-active");}var button = menu.prev().addClass("ui-state-active");menu.width(menu.width());
if (menu.width() < menu.parent().width()) {menu.width(menu.parent().width());}
this.activeMenu = menu
.show().css('opacity', 0).imuiScrollMenu('adjust', {collision: 'flip none',my: 'right top',
at: 'right bottom',of: button}, true).css('opacity', 1);//for IE8
this.options.activeForIE8 = this.activeMenu;$.data(this.element, 'imui_dropdown_menu.active', this.activeMenu);
this.open = true;
this._trigger('select', event, {item: this.activeMenu.closest('li')});},
destroy: function() {this.element.find(':imui-imuimenu').imuiMenuItem('destroy');
this.element.removeClass('imui-menubar ui-widget-header ui-helper-clearfix').removeAttr('role').unbind('.imui_dropdown_menu');
this.element.children('li').removeClass('imui-menubar-item').removeAttr('role');$('> li > a', this.element).removeClass('ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default').removeAttr('role').unbind('.imui_dropdown_menu');$.Widget.prototype.destroy.call(this);}});/** マイメニュー*/$(document).ready(function() {

55

487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557

intra-mart
Accel Platform — テーマ仕様書$(document).ready(function(){$('#imui-user-utility').imui_dropdown_menu();

第9版 2021-08-01$('#start_help_pc').children().removeAttr('href');
var startHelp = function(){$('body').imuiSiteTour('start');};$('body').imuiSiteTour();$('#start_help_pc').on('click.siteHelp',startHelp);
var parent = $(this).parent()[0];var removeLauncher = function() {$('.imui-box-launcher').remove();$('div[aria-labelledby=ui-dialog-title-imui-launcher-add-dialog]').remove();$('#imui-launcher-add-dialog').remove();$(parent).removeClass('active');};$('a', '.imui-nav-global-launcher').bind('click', function(event) {event.preventDefault();
if ($('.imui-box-launcher').size() == 0) {var launcher = new Array();launcher.push('<div class="imui-box-launcher">')launcher.push('<div id="imui-list-launcher" class="imui-list-launcher"><ul><li></li></ul></div>');launcher.push('<p class="imui-btn-launcher-back"><a href="javascript: void(0);"><span></span></a></p>');
launcher.push('<p class="imui-btn-launcher-add"><a href="javascript: void(0);"><span></span></a></p>');
launcher.push('<p class="imui-btn-launcher-settings"><a href="user/mymenu/settings"><spanclass="im-ui-icon-common-24-settings"></span></a></p>');launcher.push('<p class="imui-btn-launcher-close"><a href="javascript: void(0);"><span></span></a></p>');
launcher.push('<div id="imui-launcher-add-dialog"></div>');launcher.push('</div>');$(this).after(launcher.join(''));$('.imui-box-launcher').hide().fadeIn(200);$('.imui-box-launcher .imui-btn-launcher-back').hide();$('.imui-box-launcher .imui-btn-launcher-add').hide();$('.imui-box-launcher .imui-btn-launcher-settings').hide();var parent = $(this).parent()[0];$(parent).addClass('active');$.ajax({headers:{'x-jp-co-intra-mart-ajax-request-from-imui-form-util':'true'},
dataType:'text', type:'GET', url:'user/mymenu/js_launcher',data:{},
success:function(data) {eval(data.replace(/<\/?script[^>]*>/g, ''));},
error:function(request, textStatus, errorThrown) {removeLauncher();
if (jQuery.imuiFormUtil && jQuery.imuiFormUtil.transitionToErrorPage) {jQuery.imuiFormUtil.transitionToErrorPage(request, textStatus, errorThrown);} else {imuiShowErrorMessage(request.statusText + '(' + request.status + ')', '');}}});$('.imui-box-launcher .imui-btn-launcher-back a').mouseover(function() {$('.imui-btn-launcher-back').addClass('ui-state-hover');$(this).find('span:first').removeClass('im-ui-icon-launcher-16-move-up-gray').addClass('im-ui-iconlauncher-16-move-up-black');}).mouseout(function() {$('.imui-btn-launcher-back').removeClass('ui-state-hover');$(this).find('span:first').removeClass('im-ui-icon-launcher-16-move-up-black').addClass('im-ui-iconlauncher-16-move-up-gray');}).mouseout();$('.imui-box-launcher .imui-btn-launcher-add a').mouseover(function() {

56

557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01$('.imui-box-launcher .imui-btn-launcher-add a').mouseover(function() {$('.imui-btn-launcher-add').addClass('ui-state-hover');}).mouseout(function() {$('.imui-btn-launcher-add').removeClass('ui-state-hover');}).mouseout();$('.imui-box-launcher .imui-btn-launcher-settings a').mouseover(function() {$('.imui-btn-launcher-settings').addClass('ui-state-hover');}).mouseout(function() {$('.imui-btn-launcher-settings').removeClass('ui-state-hover');}).mouseout();$('.imui-box-launcher .imui-btn-launcher-close a').click(function() {$('.imui-box-launcher').fadeOut(200, function() {removeLauncher();});}).mouseover(function() {$('.imui-btn-launcher-close').addClass('ui-state-hover');$(this).find('span:first').removeClass('im-ui-icon-launcher-16-close-gray').addClass('im-ui-iconlauncher-16-close-black');}).mouseout(function() {$('.imui-btn-launcher-close').removeClass('ui-state-hover');$(this).find('span:first').removeClass('im-ui-icon-launcher-16-close-black').addClass('im-ui-iconlauncher-16-close-gray');}).mouseout();} else {$('.imui-box-launcher').fadeOut(200, function() {removeLauncher();
});
}
});
});
})(jQuery);/** iFrame の大きさ制御関数*/(function($) {$(document).ready(function() {fitIframe();$(window).resize(fitIframe);});function fitIframe() {var header = $('#imui-header').height();
var height = $(window).height() - header;$('#IM_MAIN').find('iframe:not(".imui-no-resize-iframe")').height(height).width($(window).width());$('#IM_MAIN').height(height).width($(window).width());//iframe のコンテンツ読み込みが終了したら、iframe 内の min-width を window の幅にする$($('#IM_MAIN')).load(function () {try {if ($('#IM_MAIN').get(0).contentDocument && $("#IM_MAIN").contents().find('body').css('min-width') >$(window).width()) {$("#IM_MAIN").contents().find('body').css('min-width', $(window).width());$("#IM_MAIN").contents().find('#imui-container').css('min-width', $(window).width());}} catch(ignore) {}});}})(jQuery);

フォルダ・ファイル構成src├── main│ ├── conf
│ │ ├── message

57

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01│ │ │ └── platform│ │ │└── theme│ │ │└── sample_theme│ │ │├── caption.properties│ │ │├── caption_en.properties│ │ │├── caption_ja.properties│ │ │└── caption_zh_CN.properties│ │ ├── routing-jssp-config│ │ ├── routing-service-config│ │ └── theme-config│ │└── sample_theme.xml│ ├── generated│ ├── java│ ├── jssp
│ │ └── src│ │└── theme│ │└── sample_theme│ │├── body.html│ │├── body.js│ │├── footer.html│ │├── footer.js│ │├── head.html│ │├── head.js│ │├── header.html│ │└── header.js│ ├── plugin│ ├── public│ │ └── ui│ │└── theme│ │└── sample_theme│ │├── css│ ││ ├── common│ ││ │ ├── components.less│ ││ │ ├── default.less│ ││ │ ├── icons.less│ ││ │ ├── jqueryUI.less│ ││ │ ├── mixins.less│ ││ │ ├── modules.less│ ││ │ ├── parameters.less│ ││ │ └── portal.less│ ││ ├── theme│ ││ │ ├── body.less│ ││ │ ├── footer.less│ ││ │ ├── header.less│ ││ │ └── parameters.less│ ││ ├── theme.css│ ││ ├── theme.less│ ││ └── theme.min.css│ │├── images│ ││ ├── btn_im_01.png│ ││ ├── logo.png│ ││ ├── poweredbyim.png│ ││ └── thumbnail.png│ │└── js│ │├── theme.js│ │└── theme.min.js│ ├── resources│ ├── schema│ ├── storage│ │ ├── public│ │ └── system│ └── webapp└── test├── conf│ ├── message│ ├── routing-jssp-config│ └── routing-service-config├── generated├── java├── jssp58├── jssp│ └── src
├── plugin├── public├── resources├── schema├── storage│ ├── public│ └── system└── webapp

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

ユーティリティプラグイン
ここではユーティリティプラグインの作成の概要と、サンプルプログラムについて説明します。

コラム
スマートフォン版のユーティリティメニューの設定に関しては「 設定ファイルリファレンス 」-「 SP版ユーティリティメ
ニュー設定 」を参照してください。

項目
ユーティリティプラグイン作成の概要
プラグイン本体
plugin.xml
サンプルプログラム
プラグイン本体
plugin.xml
処理を実行するサーバ側のプログラムを呼び出すための CSJS
処理を実行するサーバ側のプログラム
実行例
サンプルプログラムの実装例
プラグイン本体
plugin.xml
CSJS
フォルダ構成ユーティリティプラグイン作成の概要
ここではユーティリティプラグインの作成の概要を説明します。
ユーティリティプラグインは、PluginManager が管理するプラグインとして実装します。 このプラグインは以下の要素で構成されます。
plugin.xml
プラグイン本体
この他に必要であれば、以下のような要素を追加します。
処理を実行するサーバ側のプログラムを呼び出すための CSJS
処理を実行するサーバ側のプログラム
Java
JSSP
設定ファイルルータの設定ファイル
多言語ファイル

プラグイン本体

59

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
プラグイン本体は、UtilityItemProvider インタフェースを実装したクラスとして作ります。
サブメニューを持つプラグインを作成する場合、UtilityItemProvider#getChildrenを実装し、UtilityItemProvider を実装したクラスのインスタンスを返します。
プラグインが呼び出されると、ul > li > a のような DOM が構築されます。 対象のリンクをクリックした際の動作は a タグの href で表現したり、a タグに id を割り振り、その id で何らかの処理を行うように実装します。
isVisible
getLabel
getUrlscriptSource
getChildren
toListString

plugin.xml
PluginManager が管理する plugin.xml を作成します。
extension 要素の point 属性には jp.co.intra_mart.foundation.ui.theme.utility.item を指定してください。
その他の要素、属性については PluginManager の API リファレンス を参照してください。
処理を実行するサーバ側のプログラムを呼び出すための CSJS
ユーティリティメニューをクリックした際、クライアント側で動作するロジックを実装します。 オプショナルです。

処理を実行するサーバ側のプログラム
ユーティリティメニューをクリックした際、サーバ側で動作するロジックを実装します。 オプショナルです。

設定ファイル
必要であれば、以下のようなファイルを作成します。
ルータの設定ファイル
多言語ファイル

サンプルプログラム
ここでは、ユーティリティプラグインのサンプルとして、ログインユーザのロケールを切り替えるプラグインを作成します。
このプラグインは、UtilityItemProvider を実装したクラスとして実装します。 メニューは、現在のロケールを表示する親メニューと、
選択可能なロケールの一覧を表示するサブメニューとで構成します。
ロケール切り替えのサーバ側のプログラムは、既存のロケール切り替えの仕組みを流用します。
プラグイン本体
plugin.xml
処理を実行するサーバ側のプログラムを呼び出すための CSJS
処理を実行するサーバ側のプログラム
既存のロケール切り替えの仕組みを流用します。

プラグイン本体
jp.co.intra_mart.sample.LocaleItemProvider として実装します。 以下の必要なメソッドを実装します。
isVisible
getLabel
getUrlscriptSource

60intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
getChildren
toListString
isVisible
ここでは認証済ユーザであればこのプラグインを表示できるようにします。
public boolean isVisible() {AccountContext context = Contexts.get(AccountContext.class);
return context.isAuthenticated();}getLabel
ここでは認証済ユーザのロケールを表示します。
アカウントコンテキストに格納されているロケールを表示します。 表示する際にエスケープを行います。
public String getLabel() throws JspException {AccountContext context = Contexts.get(AccountContext.class);
Locale locale = context.getLocale();String name = locale.getDisplayName(locale);return Util.escape(name, Escaping.STRICT_HTML);}

getUrl
ここでは表示だけを行い、処理はしないため null を返します。
public String getUrl() throws JspException {return null;}

scriptSource
ここでは、CSJS のパスを返します。
UserUtilityTag、プラグインには CSJS の実装を直接 HTML に出力する方法がないため、外部ファイルに実装した関数を呼び出すという方法を採ります。 このメソッドが返すパスに、CSJS の実装を記述します。
public String scriptSource() {return "sample/js/changeLocale.js";}

getChildren
ここでは、システムに登録されているロケールの一覧を返します。 また、返すクラスは UtilityItemProvider を実装したクラスとして実装します。
public List<UtilityItemProvider> getChildren() throws JspException {final List<UtilityItemProvider> children = new ArrayList<UtilityItemProvider>();// システムロケールの一覧を作成します。
LocaleInfo[] localeInfos = SystemLocale.getLocaleInfos();for (LocaleInfo localeInfo: localeInfos) {children.add(new LocaleListItemProvider(localeInfo));}return children;}

toListString61

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
このプラグインが返す HTML を生成します。
ul > li > a となるように実装します。また、サブメニューを ul > li の 中の ul として返すように実装します。
public String toListString() throws JspException {final StringBuilder buf = new StringBuilder();
final String url = getUrl() == null ? StringUtil.EMPTY_STRING : "href=\"" + getUrl() + "\"";
buf.append("<li><a ").append(url).append(">").append(getLabel()).append("</a>");if (getChildren() != null) {buf.append("<ul>");for (final UtilityItemProvider item : getChildren()) {buf.append(item.toListString());}
buf.append("</ul>");}buf.append("</li>");return buf.toString();}

サブメニューの項目の一つ一つはこのクラスで実装します。
private static class LocaleListItemProvider implements UtilityItemProvider {private LocaleInfo localeInfo;public LocaleListItemProvider(final LocaleInfo localeInfo) {this.localeInfo = localeInfo;}}

ラベルとして、システムロケールの一つを表示します。インスタンス化した際のロケールの値を表示します。
public String getLabel() throws JspException {return Util.escape(this.localeInfo.getDisplayName(), Escaping.STRICT_HTML);}

クリックした際の URL を返します。ここで、CSJS の関数を呼び出します。
public String getUrl() throws JspException {return String.format("javascript:changeLocale('%s');", this.localeInfo.getLocale());}

HTML として、li タグを返します。
public String toListString() throws JspException {final StringBuilder buf = new StringBuilder();
final String url = "href=\"" + getUrl() + "\"";
buf.append("<li><a ").append(url).append(">");
buf.append(getLabel()).append("</a>");buf.append("</li>");return buf.toString();}plugin.xml
プラグインの設定を記述します。
extension 要素の point 属性に jp.co.intra_mart.foundation.ui.theme.utility.item を指定します。 また、item 要素の classname
属性に、プラグイン本体のクラス名を指定します。

62

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01<?xml version="1.0" encoding="UTF-8"?><plugin><extension point="jp.co.intra_mart.foundation.ui.theme.utility.item"><item
id="sample_localeitemprovider"name="localeitemprovider"classname="jp.co.intra_mart.sample.LocaleItemProvider"version="1.0"
rank="1"enable="true"/></extension></plugin>

処理を実行するサーバ側のプログラムを呼び出すための CSJS
ここでは、簡単のため既存のロケール切り替えの仕組みを呼び出すような実装を行います。
プラグイン本体の、scriptSource メソッドが返す値である sample/js/changeLocale.js に下記の実装を記述します。 アクセス先の
user/settings/locale/update_locale は、ルータの設定、サーバ側のロジックの実装などはテナント管理モジュールで実装されています。
function changeLocale(locale) {(function($, locale) {var form = $('<form/>').attr('id', 'sampleform')// 既存のロジックを呼び出します。
.attr('action', 'user/settings/locale/update_locale').attr('method','POST');var locale = $('<input/>').attr('type','hidden').attr('name','locale').attr('value',locale);form.append(locale);form.appendTo('body');
imuiAjaxSubmit('#sampleform', 'POST', 'json', 'home', []);})(jQuery, locale);}

処理を実行するサーバ側のプログラム
このサンプルでは実装を行いません。
サーバ側のロジックはテナント管理モジュールで実装されています。

実行例
このプラグインをデプロイすると以下のような画面が表示され、ロケールを切り替えることができます。

63

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

サンプルプログラムの実装例
プラグイン本体
src/main/java/jp/co/intra_mart/sample/LocaleItemProvider.java

64intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

65

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

package jp.co.intra_mart.sample;
import java.util.ArrayList;
import java.util.List;
import java.util.Locale;
import javax.servlet.jsp.JspException;
import jp.co.intra_mart.common.aid.jdk.java.lang.StringUtil;
import jp.co.intra_mart.foundation.context.Contexts;
import jp.co.intra_mart.foundation.context.model.AccountContext;
import jp.co.intra_mart.foundation.i18n.locale.LocaleInfo;
import jp.co.intra_mart.foundation.i18n.locale.SystemLocale;
import jp.co.intra_mart.foundation.ui.tags.theme.UtilityItemProvider;
import jp.co.intra_mart.system.ui.util.Util;
import org.jamon.escaping.Escaping;
public class LocaleItemProvider implements UtilityItemProvider {private static class LocaleListItemProvider implements UtilityItemProvider {private LocaleInfo localeInfo;/*** コンストラクタ。
* @param localeInfo ロケール情報*/
public LocaleListItemProvider(final LocaleInfo localeInfo) {this.localeInfo = localeInfo;}/*** サブメニューを返します。
* @return null:サブメニューはありません。
* @throws JspException*/@Override
public List<UtilityItemProvider> getChildren() throws JspException {return null;}/*** このメニューのラベルを返します。
* @return ロケール名* @throws JspException エラーが発生したときにスローします。
*/@Override
public String getLabel() throws JspException {return Util.escape(this.localeInfo.getDisplayName(), Escaping.STRICT_HTML);}/*** このメニューをクリックしたときの URL を返します。
* <br/>* このメニューをクリックするとロケールを選択したことになるので、CSJS のロケール変更リクエストを送信するように実装します。
* @throws JspException エラーが発生したときにスローします。
*/@Override
public String getUrl() throws JspException {return String.format("javascript:changeLocale('%s');", this.localeInfo.getLocale());}/*** このUtilityItemProviderを表示するかどうかを返します。
* @return true:表示する*/@Override
public boolean isVisible() {return true;66intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

}
/**
* このUtilityItemProviderが使用する外部CSJSのパスを返します。
* @return null:外部CSJSを使用しません。
*/@Override
public String scriptSource() {return null;}/*** このUtilityItemProviderのHTML表現を返します。
* <br/>* 親メニューのリストの子要素とします。
* @return メニュー項目とする liタグ
* @throws JspException*/@Override
public String toListString() throws JspException {final StringBuilder buf = new StringBuilder();
final String url = "href=\"" + getUrl() + "\"";
buf.append("<li><a ").append(url).append(">");
buf.append(getLabel()).append("</a>");buf.append("</li>");return buf.toString();}}/*** 子メニューのリストを返します。
* @return List 子メニューのリスト* @throws JspException エラーが発生したときにスローします。
*/@Override
public List<UtilityItemProvider> getChildren() throws JspException {final List<UtilityItemProvider> children = new ArrayList<UtilityItemProvider>();LocaleInfo[] localeInfos = SystemLocale.getLocaleInfos();for (LocaleInfo localeInfo: localeInfos) {children.add(new LocaleListItemProvider(localeInfo));}return children;}/*** このプラグインを表示したときのラベルを返します。
* @return ラベル* @throws JspException エラーが発生したときにスローします。
*/@Override
public String getLabel() throws JspException {AccountContext context = Contexts.get(AccountContext.class);
Locale locale = context.getLocale();String name = locale.getDisplayName(locale);return Util.escape(name, Escaping.STRICT_HTML);}/*** クリックしたときの遷移先 URL を返します。
* @return null
* @throws JspException エラーが発生したときにスローします。
*/@Override
public String getUrl() throws JspException {return null;

67

139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

return null;

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01}/*** ロケールの切り替え項目を表示するかどうかを決定します。
* <br/>* 認証済ユーザであれば切り替え項目を表示します。
* @return 切り替え項目を表示する場合は true, しない場合は false*/@Override
public boolean isVisible() {AccountContext context = Contexts.get(AccountContext.class);
return context.isAuthenticated();}/*** このプラグインを動作させるのにCSJSが必要な場合そのパスを返します。
*/@Override
public String scriptSource() {return "sample/js/changeLocale.js";}/*** このUtilityItemProviderのHTML表現を返します。
* @return liタグ*/
@Override
public String toListString() throws JspException {final StringBuilder buf = new StringBuilder();
final String url = getUrl() == null ? StringUtil.EMPTY_STRING : "href=\"" + getUrl() + "\"";
buf.append("<li><a ").append(url).append(">").append(getLabel()).append("</a>");if (getChildren() != null) {buf.append("<ul>");for (final UtilityItemProvider item : getChildren()) {buf.append(item.toListString());}
buf.append("</ul>");}buf.append("</li>");return buf.toString();}}plugin.xml
src/main/plugin/jp.co.intra_mart.sample.locale_item_provider/plugin.xml
1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="UTF-8"?><plugin><extension point="jp.co.intra_mart.foundation.ui.theme.utility.item"><item
id="sample_localeitemprovider"name="localeitemprovider"classname="jp.co.intra_mart.sample.LocaleItemProvider"version="1.0"
rank="1"enable="true"/></extension></plugin>

CSJS
src/main/public/sample/js/changeLocale.js

68intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function changeLocale(locale) {(function($, locale) {var form = $('<form/>').attr('id', 'sampleform').attr('action', 'user/settings/locale/update_locale').attr('method','POST');var locale = $('<input/>').attr('type','hidden').attr('name','locale').attr('value',locale);form.append(locale);form.appendTo('body');
imuiAjaxSubmit('#sampleform', 'POST', 'json', 'home', []);})(jQuery, locale);}フォルダ構成69

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01├── message.properties├── message_en.properties├── message_ja.properties├── message_zh_CN.properties├── module.xml└── src├── main│ ├── conf
│ │ ├── message│ │ ├── routing-jssp-config│ │ └── routing-service-config│ ├── generated│ ├── java│ │ └── jp│ │└── co│ │└── intra_mart│ │└── sample│ │└── LocaleItemProvider.java│ ├── jssp
│ │ └── src│ ├── plugin│ │ └── jp.co.intra_mart.sample.locale_item_provider│ │└── plugin.xml│ ├── public│ │ └── sample│ │└── js│ │└── changeLocale.js│ ├── resources│ ├── schema│ ├── storage│ │ ├── public│ │ └── system│ └── webapp└── test├── conf│ ├── message│ ├── routing-jssp-config│ └── routing-service-config├── generated├── java├── jssp│ └── src
├── plugin├── public├── resources├── schema├── storage│ ├── public│ └── system└── webapp

intra-mart が提供するテーマの一覧
テーマ一覧
テーマサンプル画像

テーマID

テーマ名

intra-mart Accel Platform Slim Side Menu テー im_theme_slim_side_menu_greenery
マ (黄緑 (Greenery))70intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
テーマサンプル画像

テーマID

テーマ名

intra-mart Accel Platform Slim Side Menu テー im_theme_slim_side_menu_blue
マ (青)intra-mart Accel Platform Slim Side Menu テー im_theme_slim_side_menu_green
マ (緑)intra-mart Accel Platform Slim Side Menu テー im_theme_slim_side_menu_orange
マ (オレンジ)

intra-mart Accel Platform Slim Side Menu テー im_theme_slim_side_menu_red
マ (赤)intra-mart Accel Platform Slim Side Menu テー im_theme_slim_side_menu_usunezu
マ (薄鼠)

intra-mart Accel Platform Slim Dropdown テー

im_theme_slim_dropdown_greenery

マ (黄緑 (Greenery))intra-mart Accel Platform Slim Dropdown テー

im_theme_slim_dropdown_blue

マ (青)intra-mart Accel Platform Slim Dropdown テー

im_theme_slim_dropdown_green

マ (緑)intra-mart Accel Platform Slim Dropdown テー
マ (オレンジ)71

im_theme_slim_dropdown_orange

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
テーマサンプル画像

テーマ名

テーマID

intra-mart Accel Platform Slim Dropdown テー

im_theme_slim_dropdown_red

マ (赤)intra-mart Accel Platform Slim Dropdown テー

im_theme_slim_dropdown_usunezu

マ (薄鼠)

intra-mart Accel Platform 標準テーマ (黒)im_theme_dropdown_black

intra-mart Accel Platform 標準テーマ (青)im_theme_dropdown_blue

intra-mart Accel Platform 標準テーマ (茶)im_theme_dropdown_brown

intra-mart Accel Platform 標準テーマ (セラドン

im_theme_dropdown_celadon_green

グリーン)

intra-mart Accel Platform 標準テーマ (ココアブ

im_theme_dropdown_cocoa_brown

ラウン)

intra-mart Accel Platform 標準テーマ (コッパー

im_theme_dropdown_copper_rust

ラスト)

intra-mart Accel Platform 標準テーマ (灰色)72

im_theme_dropdown_grayintra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
テーマサンプル画像

テーマ名

テーマID

intra-mart Accel Platform 標準テーマ (緑)im_theme_dropdown_green

intra-mart Accel Platform 標準テーマ (ヒアシン

im_theme_dropdown_hyacinth_blue

スブルー)

intra-mart Accel Platform 標準テーマ (アイビー

im_theme_dropdown_ivy_green

グリーン)

intra-mart Accel Platform 標準テーマ (ラベン

im_theme_dropdown_lavender_gray

ダーグレー)

intra-mart Accel Platform 標準テーマ (ミディア

im_theme_dropdown_mediumpurple

ムパープル)

intra-mart Accel Platform 標準テーマ (ネイビー

im_theme_dropdown_navy_blue

ブルー)

intra-mart Accel Platform 標準テーマ (オレンジ) im_theme_dropdown_orange

intra-mart Accel Platform 標準テーマ (オーキッim_theme_dropdown_orchid_pink

ド ピンク)

intra-mart Accel Platform 標準テーマ (ピンク)73

im_theme_dropdown_pink

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
テーマサンプル画像

テーマ名

テーマID

intra-mart Accel Platform 標準テーマ (赤)im_theme_dropdown_red

intra-mart Accel Platform 標準テーマ (レッドオ

im_theme_dropdown_red_orange

レンジ)

intra-mart Accel Platform 標準テーマ (ローズグ

im_theme_dropdown_rose_gray

レー)intra-mart Accel Platform 標準テーマ (サーモン

im_theme_dropdown_salmon_pink

ピンク)

intra-mart Accel Platform 標準テーマ (紫)im_theme_dropdown_violet

intra-mart Accel Platform 標準テーマ (ヨットブ

im_theme_dropdown_yacht_blue

ルー)

intra-mart Accel Platform 標準テーマ (黄)im_theme_dropdown_yellow

intra-mart Accel Platform 標準テーマ (イエローim_theme_dropdown_yellow_green

グリーン)

intra-mart Accel Platform 標準テーマ シンプルス im_theme_dropdown_simple
タイル

74

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
テーマサンプル画像

テーマ名

テーマID

iWP/iAF Version6 互換テーマ (青)im_theme_60_blue

iWP/iAF Version6 互換テーマ (緑)im_theme_60_green

iWP/iAF Version6 互換テーマ (オレンジ)

im_theme_60_orange

iWP/iAF Version6 互換テーマ (赤)im_theme_60_red

iWP/iAF Version5 互換テーマ (青)im_theme_50_blue

iWP/iAF Version5 互換テーマ (緑)im_theme_50_green

iWP/iAF Version5 互換テーマ (オレンジ)

im_theme_50_orange

iWP/iAF Version5 互換テーマ (赤)im_theme_50_red

Slim Side Menuテーマ
ここではSlim Side Menuテーマについて説明します。

75

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
項目
画面構成
サイドメニュー
機能
文字サイズ変更機能
メニュー検索機能
メニュー階層のパンくずリスト機能
遷移時のメニュー階層の保持機能

画面構成
Slim Side Menuテーマは以下の構成要素が含まれます。
No 構成

配置内容

1

各種メニューアイコンやグローバルナビ、コピーライト等を表示します。 サイドメニューに関する詳

サイドメニュー

細は、「サイドメニュー」を参照してください。
2

画面タイトル

画面タイトルが表示されます。

3

ツールバー

画面を操作する処理アイコン、処理リンクが表示されます。

4

コンテンツエリア

入力フォーム、一覧、ボタン等のコンテンツを表示します。

サイドメニュー
項目説明
No 分類

項目

配置内容

1

メニュー開閉ボタン

メニューの開閉をします。

ホームボタン

ホーム（ログイン後の画面）に遷移します。

検索ボタン

全文検索を行います。

文字サイズ変更ボタン

文字サイズの変更が行えます。

マイメニューボタン

よく利用するメニューの設定・呼び出しが行えます。

ヘルプドロップダウンボタン

ヘルプドロップダウンを表示します。

サイドバー

76

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
No 分類

2

メニュー

項目

配置内容

サイトマップボタン

サイトマップに遷移します。

ログアウトボタン

ログアウトします。

ログインボタン

ログイン画面に遷移します。ゲストユーザの場合のみ表示されます。

ロゴ画像

ロゴ画像を表示します。クリックでホームに戻ります。

ユーティリティメニュー

ユーザの情報を表示します。ここから個人設定が行えます。

メニュー検索グローバルナビのメニューおよびフォルダの検索が行えます。

グローバルナビ

各種画面へ遷移するメニューが表示されます。

フッタ

コピーライトが表示されます。

コラム
ウィンドウサイズの幅を小さくするとメニューは閉じられます。

機能
Slim Side Menuテーマの機能を説明します。

文字サイズ変更機能
Slim Side Menuテーマでは文字サイズの変更が可能です。

注意
文字サイズ変更機能を有効にしている場合のみ文字サイズの変更が可能です。
文字サイズ変更機能を有効にする設定については、 「 設定ファイルリファレンス 」-「 UI-画面表示設定 」 を参照
してください。
文字サイズ変更機能を有効な場合でも、 文字サイズ変更機能の表示設定が除外となっている画面は、文字サイズ変
更ボタンは表示されません。
文字サイズ変更機能の表示設定については 「 設定ファイルリファレンス 」-「 文字サイズ変更機能表示設定 」 を参照してください。

77intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01
注意
文字サイズ変更機能で文字サイズを変更しても、設定が反映されない画面や項目があります。
インラインフレーム要素（iframeタグ）を利用して表示している画面・要素は設定の対象外です。
IM-HybridSSO ・外部メニュー連携で表示する連携先の画面は設定の対象外です。
以下のPageBuilderが適用されている画面は設定の対象外です。
HeadWithFooterThemeBuilder
HeadWithContainerThemeBuilder
HeadOnlyThemeBuilder
BodyOnlyThemeBuilder
NoThemeBuilder

メニュー検索機能
Slim Side Menuテーマでは、グローバルナビのメニューおよびフォルダの検索が可能です。

メニュー階層のパンくずリスト機能
Slim Side Menuテーマでは、パンくずリストからメニュー階層の移動が可能です。

78

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

遷移時のメニュー階層の保持機能
Slim Side Menuテーマでは、グローバルナビのメニューで遷移を行った場合は、表示中のメニュー階層が保持されます。
また、選択したメニューアイテムがハイライトされて表示されます。

79

intra-mart Accel Platform — テーマ仕様書 第9版 2021-08-01

80