intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01↑Top1

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

目次

2intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

改訂情報
変更年月日

変更内容

2013-10-01

初版

2014-01-01

第2版 下記を変更しました「はじめに」の UIデザインガイドライン（ PC 版） のリンク先を変更しました。

2014-12-01

第3版 下記を変更しました
目次の構成を変更しました。
「標準テーマカスタマイズ について」 の内容を「はじめに」に追加しました。
「標準テーマカスタマイズ について」 の内容を変更しました。
「既存テーマのロゴを変更する」を追加しました。
「ログイン画面の画像を変更する」を追加しました。

2017-12-01

第4版 下記を変更しました「テーマモジュールを作成する」に SlimDropdownテーマに対応したことを追記し、キャプションを差し替えました。
「既存テーマのロゴを変更する」に SlimDropdownテーマに対応したことを追記し、キャプションを差し替えました。

2021-04-01

第5版 下記を変更しました「テーマモジュールを作成する」の「画面構成」に、アプリケーション終了時の注意事項を記載しました。

2021-12-01

第6版 下記を追加しました「テーマモジュールを作成する」の「基本的な操作」に、静的ファイルをデプロイする作業項目を追加しました。

3

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

はじめに本書の目的
intra-mart Accel Platform では、以下5種類のテーマを提供しています。
標準テーマ
標準（シンプル）
v5 互換
v6 互換
slimDropdownテーマ
さらに、標準（シンプル）以外のテーマモジュールには、いくつかのカラーバリエーションがあります。
しかし、提供されているテーマモジュールだけではコーポレートカラーをもったテーマモジュールを使いたい、ロゴを自社のものにしたいという要望に応えられませんでした。このような要望にお応えするため、標準テーマや標準（シンプル）テーマに好みのカラーを指定したり、ロゴ画像を指定したりすることを簡単に行えるように、「 標準テーマカスタマイズ 」を提供いたします。
本書では、 標準テーマカスタマイズ でテーマモジュールを作成するために必要な情報と手順を説明します。

対象読者
本書は、標準テーマカスタマイズ を利用してテーマモジュールを作成する開発者、デザイナを対象としております。 利用する各種製品の詳細については、関連するドキュメントを参照してください。
UIデザインガイドライン（ PC 版）
テーマ仕様書リリースノート
クライアント要件
対応ブラウザが記載されています。

前提条件
事前に標準テーマカスタマイズモジュール含めた環境をご用意してください。詳細は、「標準テーマカスタマイズ セットアップガイド」を参照してください。
また、ログイン方法やメニューへのアクセス方法など、intra-mart Accel Platform の基本的な操作はあらかじめ理解していることを前提とします。不明な点は環境を構築した方にお問い合わせください。

注意事項
テーマカラーを指定している際の画面は、デプロイ後の画面を完全には再現できていません。いくつかのアイコン、ボーダーカラーがデプロイ後のものと異なります。
ブラウザによって、グラデーション表示に差異があります。

4

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

標準テーマカスタマイズ について
標準テーマカスタマイズ には以下の機能があります。
標準テーマカスタマイズ のバージョンによって、利用可能な機能が異なりますのでご注意してください。

テーマモジュールを作成する
標準テーマを新規作成します。
標準テーマカスタマイズ を使い、テーマモジュールを作成します。テーマモジュールの詳細については、テーマ仕様書 を参照してください。
標準テーマカスタマイズ のどのバージョンでもご利用になれます。

既存テーマのロゴを変更する
標準テーマのマイメニュー画像、ロゴ画像を編集します。
標準テーマカスタマイズ を使い、すべての標準テーマの画像を変更するためのユーザモジュールを作成します。
標準テーマカスタマイズ のバージョン 8.0.4 以降でご利用になれます。

ログイン画面の画像を変更するログイン画面のログイン画像を編集します。
標準テーマカスタマイズ を使い、ログイン画像のログイン画像を変更するためのユーザモジュールを作成します。
標準テーマカスタマイズ のバージョン 8.0.4 以降でご利用になれます。

5intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

テーマモジュールを作成する
ここでは、標準テーマカスタマイズ を利用してテーマモジュールを作成する方法を説明します。
基本的な操作と、高度な設定を行う操作の 2つの方法を説明します。
基本的な操作は、標準テーマにない色味を持ったテーマモジュールを作成することが主な目的と想定しています。 高度な設定を行う操作は、ヘッダーとボディとで異なる色味を持たせたり、ロゴ画像を入れ替えたりするなど、より細かなカスタマイズを行うことが目的と想定しています。
標準テーマカスタマイズ のバージョン 8.0.10 よりSlimDropdownテーマのカスタマイズが可能です。

コラム
テーマの詳細、標準テーマカスタマイズを使わずに、テーマモジュールを新規に作成する場合は、「テーマ仕様書」を参照してください。 また、intra-mart Accel Platform のUI指針をまとめた「UIデザインガイドライン（ PC 版）」も合わせて参照してください。

画面構成
画面全体左側の操作エリアで操作すると、右側の画面に操作の結果が反映されます。 右側の画面は操作可能です。選択したテーマカラーなどがどのように反映されるかを確認してください。

終了リンク

画面左上の「標準テーマカスタマイズを終了する」をクリックすると、ホーム画面に戻ります。

注意「標準テーマカスタマイズを終了する」以外から画面を移動した場合、ログインユーザの画面テーマに「標準テーマ（青）」が適用されます。

操作エリア全体

6

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

操作エリアを全て開くと、このような設定項目が表示されます。
「アンカーカラー」と「アンカーホバーカラー」はテーマタイプを「Slim Dropdown」にした場合のみ表示されます。

基本的な操作
1. 「サイトマップ」→「標準テーマカスタマイズ」→「標準テーマ作成」をクリックします。下記のような「標準テーマから新規テーマを作成する」画面が表示されます。

コラム
バージョンが 8.0.3 以下の場合は「サイトマップ」→「標準テーマカスタマイズ」→「標準テーマカスタマイズ」をクリックしてください。

7

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

2. テーマタイプを選択します。「標準」と「シンプル」と「Slim Dropdown」のいずれかを選択できます。

コラム
標準テーマカスタマイズ のバージョン 8.0.10 よりSlimDropdownテーマのカスタマイズが可能になりました。
3. テーマカラーを選択する
テーマカラーを直接指定する方法と、標準テーマの色を選択し、そこから好みの色に近づけていく方法があります。 以下のスクリーン
ショットは、茶色を選択し、少しだけ色を変更した例です。

8intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

4. 好みの色を選択できたら、「ダウンロード」ボタンをクリックします。

9

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

5. 「ダウンロード」ボタンをクリックすると、「テーマプロパティ」ダイアログが表示されます。このテーマモジュールのプロパティを指定します。

テーマID
このテーマモジュールの ID です。アルファベット、数字、- （ハイフン）、_ （アンダースコア）のみ使用可能です。
標準テーマ（青）は、im_theme_dropdown_blue と指定されています。
バージョン
このテーマモジュールのバージョン番号です。1.0.0 のように、3つの数字をピリオドでつないだものを指定してください。
標準テーマ（青）は、8.0.x と指定されています。パッチレベルによって最後の数値が異なります。
ソートキー
テーマ切り替え画面に表示する際のソートキーです。0 以上の整数を指定してください。0 を指定すると先頭に表示されます。
ソートキーが同じ場合、テーマIDで昇順でソートされます。
標準テーマ（青）は、10 と指定されています。
テーマ名
テーマ切り替え画面に表示する際のテーマ名です。日本語、英語、中国語それぞれ入力してください。
標準テーマ（青）は、「intra-mart Accel Platform 標準テーマ （青）」 と指定されています。

10intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01
テーマの説明
テーマ切り替え画面に表示する際のテーマの説明文です。日本語、英語、中国語それぞれ入力してください。
標準テーマ（青）は、「青色を基調色としたドロップダウンメニューのテーマです。」と指定されています。
テーマモジュール名
IM-Jugglingにこのテーマモジュールを追加したときに表示されるモジュール名です。日本語、英語、中国語それぞれ入力してください。
標準テーマ（青）は、「intra-mart Accel Platform 標準テーマ（青）」 と指定されています。
テーマモジュールベンダ名
IM-Jugglingにこのテーマモジュールを追加したときに表示されるモジュールの提供者名です。日本語、英語、中国語それぞれ入力してください。
標準テーマ（青）は、「株式会社エヌ・ティ・ティ・データ・イントラマート」 と指定されています。
テーマモジュールの説明
IM-Jugglingにこのテーマモジュールを追加したときに表示されるモジュールの説明文です。日本語、英語、中国語それぞれ入力してください。
標準テーマ（青）は、「PCブラウザ向けに青基調のドロップダウンメニュー形式の画面デザインを提供します。」と指定されています。

コラム
IM-Jugglingについては「intra-mart Accel Platform セットアップガイド」-「プロジェクトの作成とモジュールの選択」を参照してください。
6. 「ダウンロード」ボタンをクリックしてください。

7. 「ダウンロード」ボタンをクリックし、しばらくするとファイルのダウンロードが完了します。

11

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

8. ダウンロードした imm ファイルを IM-Juggling にユーザモジュールとして追加します。下記画像の「+」アイコンをクリックし、imm ファイルを選択します。この作業は環境を構築した方が実施してください。

9. war ファイルを作成し、デプロイしてください。war ファイルの作成やデプロイについては、WARファイルの出力 を参照してください。この作業は環境を構築した方が実施してください。
10. 静的ファイルを作成し、 Web Server にデプロイしてください。静的ファイルの作成やデプロイについては、静的ファイルの出力 を参照してください。この作業は環境を構築した方が実施してください。
11. 「テーマ」画面にアクセスすると、作成したテーマモジュールが候補として表示されます。

12

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01コラム
スクリーンショットを取得できないため、「テーマ」画面のスクリーンショットは No Image という画像が使われます。

コラム「java.io.IOException: テーマモジュールの生成に失敗しました。」という「エラー」画面が表示されることがあります。 このエラーが発生した場合、ディスククリーンアップを行うことでエラーが解消します。 ディスク クリーンアップを使用してファイルを削除する などを参考に実施してください。

高度な設定
ヘッダとボディとでテーマカラーを異なるものにしたり、グラデーションのかけ方を変更したり、ロゴ画像を変更できます。

13

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01
ヘッダカラー
テーマヘッダカラーとコンポーネントヘッダカラーは、グラデーションのかけ方を指定できます。

グラデーションのかけ方として、以下の 3種類のいずれかを選択できます。
linearCSS3 の linear-gradientradialCSS3 の radial-gradient
flat単色コラム
標準テーマカスタマイズ のバージョン 8.0.10 よりSlimDropdownテーマのカスタマイズが可能になりました。
テーマ種別を「Slim Dropdown」にした場合、グラデーションのかけ方の指定はできません。

ロゴ画像を入れ替える
標準テーマのロゴ画像、標準テーマ シンプルスタイルの左上のアイコンを、好みの画像に入れ替えることができます。

指定可能なファイル形式は、PNG です。
画像の高さはそれぞれ以下のように指定されています。
標準テーマ
35px
標準テーマ シンプルスタイル
24px
SlimDropdownテーマ

14

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01
30px

グローバルナビゲーションの開始位置を指定する
ロゴ画像の幅によっては、グローバルナビの位置を変更しないと重なってしまったり、極端に離れてしまったりと表示が崩れてしまうことがあります。
このような場合、グローバルナビゲーションの左端からの位置を指定することで、適切な場所にグローバルナビを配置できます。

開始位置はそれぞれ以下のように指定されています。
標準テーマ
158px
標準テーマ シンプルスタイル
36px
SlimDropdownテーマ
120px

インポート・エクスポート
テーマモジュールの調整中に指定した色のデータを一時的に保存したい場合、インポート・エクスポート機能を使います。

「エクスポート」ボタンをクリックすると、現在指定されている色のデータが JSON 形式で表示されます。この文字列をコピーし保存しておいてください。
「インポート」ボタンをクリックすると、ダイアログが表示されるので、エクスポート時に保存した JSON 文字列を貼り付け、「OK」ボタンをクリックしてください。

15

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

既存テーマのロゴを変更する
ここでは、 標準テーマカスタマイズ を利用して標準テーマのマイメニュー画像、ロゴ画像を上書きするユーザモジュールを作成する方法を説明します。
標準テーマカスタマイズ のバージョン 8.0.10 よりSlimDropdownテーマのカスタマイズが可能です。

注意
このユーザモジュールを作成するには、選択したテーマに関係なく、すべての標準ドロップダウンのテーマ分（24種類）、またはSlimDropdownテーマ分（6種類）の資材を作成します。
そのため処理に数分程度の時間がかかります。

コラム
この機能はバージョンが 8.0.4 から利用できます。

画面構成
画面全体左側の操作エリアで操作すると、右側の画面に操作の結果が反映されます。 右側の画面は操作可能です。選択したテーマカラーなどがどのように反映されるかを確認してください。

終了リンク

画面左上の「標準テーマカスタマイズを終了する」をクリックすると、ホーム画面に戻ります。

基本的な操作
1. 「サイトマップ」→「標準テーマカスタマイズ」→「標準テーマ変更」をクリックします。下記のような「標準テーマのすべてのロゴを書き換える」画面が表示されます。

16

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

2. テーマタイプは「標準」と「Slim Dropdown」から選択してください。シンプルには対応していません。

コラム
標準テーマカスタマイズ のバージョン 8.0.10 よりSlimDropdownテーマが選択できるようになりました。
3. テーマの色を選択し、それぞれのテーマで確認できます。
4. ロゴ画像を変更します。
標準のロゴ画像のサイズは「130×35」、SlimDropdownテーマは「110×30」です。
このサイズと異なる画像を指定した場合でも、高さはそれぞれのテーマタイプの高さ（35px または 30px） に応じた画像が表示されます。
指定可能なファイル形式は、PNG です。
ここでは以下の画像を利用します。画像のサイズは「200×90」のアイコンをアップロードして説明します。

以下のスクリーンショットのようにロゴ画像が変更されて表示されます。

17

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

5. マイメニュー画像を変更します。
標準のマイメニュー画像のサイズは「45×45」、SlimDropdownテーマは「24×24」です。
このサイズと異なる画像を指定した場合でも、高さはそれぞれのテーマタイプの高さ（45px または 24px） に応じた画像が表示されます。
指定可能なファイル形式は、PNG です。
ここでは以下の画像を利用します。画像のサイズは「45×45」のアイコンをアップロードして説明します。

以下のスクリーンショットのようにマイメニュー画像が変更されて表示されます。

6. ロゴ画像の位置に合わせてグローバルナビゲーションの開始位置を調整します。
7. 「ダウンロード」ボタンをクリックすると、確認ダイアログが表示されます。「決定」ボタンをクリックします。

18intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01
注意
このユーザモジュールを作成するには、選択したテーマに関係なく、すべての標準ドロップダウンのテーマ分（24種類）の資材を作成します。
そのため処理に数分程度の時間がかかります。

8. 「決定」ボタンをクリックし、しばらくすると「dropdown_logo_customize-8.0.0.imm」ファイルのダウンロードが完了します。

コラム
標準テーマカスタマイズ のバージョン 8.0.10 より生成する imm ファイルの名称が変更になりました。
テーマタイプが「標準」の場合は「dropdown_logo_customize-8.0.0.imm」が生成されます。
テーマタイプが「slimDropdown」の場合は「slimDropdown_logo_customize-8.0.0.imm」が生成されます。
9. ダウンロードした imm ファイルを IM-Juggling にユーザモジュールとして追加します。下記画像の「+」アイコンをクリックし、imm ファイルを選択します。この作業は環境を構築した方が実施してください。

19

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

10. war ファイルを作成し、デプロイしてください。war ファイルの作成やデプロイについては、WARファイルの出力 を参照してください。この作業は環境を構築した方が実施してください。
11. homeを表示することでロゴとマイメニュー画像が変更されたことが確認できます。

コラム
画像が変更されない場合はブラウザのキャッシュを削除してください。

20

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

ログイン画面の画像を変更する
ここでは、 標準テーマカスタマイズ を利用してログイン画面の画像を上書きするユーザモジュールを作成する方法を説明します。

コラム
この機能はバージョンが 8.0.4 から利用できます。

画面構成
画面全体左側の操作エリアで画像をアップロードすると、右側の画面に操作の結果が反映されます。 選択した画像がどのように反映されるかを確認してください。

基本的な操作
1. 「サイトマップ」→「標準テーマカスタマイズ」→「ログイン画像変更」をクリックします。下記のような「ログイン画面のアイコンを変更する」画面が表示されます。

21

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

2. ログイン画面の画像を変更します。
標準のログイン画面の画像のサイズは「150×45」です。
このサイズと異なる画像を指定した場合、その画像の大きさのままの状態の画像が表示されます。
指定可能なファイル形式は、PNG です。
ここでは元の画像サイズ「200×90」のアイコンをアップロードして説明します。

以下のスクリーンショットのようにログイン画像が変更されて表示されます。

3. 「ダウンロード」ボタンをクリックすると、確認ダイアログが表示されます。「決定」ボタンをクリックします。

22

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

4. 「決定」ボタンをクリックし、しばらくすると「loginIcon_customize-8.0.0.imm」ファイルのダウンロードが完了します。

5. ダウンロードした imm ファイルを IM-Juggling にユーザモジュールとして追加します。下記画像の「+」アイコンをクリックし、imm ファイルを選択します。この作業は環境を構築した方が実施してください。

23

intra-mart Accel Platform — 標準テーマカスタマイズ 操作ガイド 第6版 2021-12-01

Copyright © 2013 NTT DATA INTRAMART CORPORATION

6. war ファイルを作成し、デプロイしてください。war ファイルの作成やデプロイについては、WARファイルの出力 を参照してください。この作業は環境を構築した方が実施してください。
7. 「ログイン」画面を表示すると画像が変更されたことが確認できます。

コラム
画像が変更されない場合はブラウザのキャッシュを削除してください。

24