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

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

目次 ≪  PageBuilder テーマモジュールの作成  ≫

テーマモジュール

ここではテーマモジュールの役割と構成を説明します。

テーマモジュールの役割

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

テーマモジュールの構成

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

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

コラム

テーマを切り替えるには、下図の「テーマ」画面で利用したいテーマの「このテーマを利用する」ボタンをクリックします。

詳細は 「テーマを設定する」を参照してください。

../../_images/themechange.png

「テーマ」画面

設定ファイル

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 ">
    <theme
      id="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
  • caption_ja.properties
  • caption_zh_CN.properties

詳細は、「多言語対応」を参照してください。

JSSP

body

ボディ部分を実装します。

標準テーマは、以下のように実装されています。

<div id="imui-container">
    <imart type="replaceContents"/>
</div>
なお v5,v6 の互換テーマでは、グローバルナビゲーションもこの JSSP に実装されています。

画像

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

CSS

テーマが使用する CSS を実装します。

CSS の @import を使った際のパフォーマンス劣化を避けつつ、テーマモジュール間で共通な部分を共有するために LESS を用いて実装しています。

テーマモジュールのビルド時に、LESS で書いた .less ファイルをコンパイルし、CSS に変換します。また、CSS の最小化も行います。 変換した CSS と 最小化した CSS の両方を Web サーバ、またはアプリケーションサーバにデプロイします。

CSS 上の共通な部分として以下のものがあります。これらはテーマモジュールを作成する際に必須なファイルです。

また、これらのファイルが要求するパラメータも必要です。

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

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 は大きさの変更対象外とする
(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);

目次 ≪  PageBuilder テーマモジュールの作成  ≫

Copyright © 2013 NTT DATA INTRAMART CORPORATION

⇄ Sidebar ↑Top