テーマモジュール¶
ここではテーマモジュールの役割と構成を説明します。
項目
テーマモジュールの構成¶
設定ファイル¶
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¶
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 の要素を扱えるようにするライブラリを読み込みます。
<!--[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コンポーネントのCSJS¶
UIコンポーネント の 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” のプレースホルダー¶
<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
- 個人設定
です。
プラグインは、UtilityItemProvider インタフェースを実装したクラスとして作ります。このプラグインの作成方法は、ユーティリティプラグイン を参照してください。
ヘルプドロップダウン¶
ヘルプドロップダウンは、画面に簡易ヘルプを表示する機能とドキュメントライブラリへのリンクをまとめたメニュー群です。 メニューはサイトヘルプカテゴリに登録されたメニューアイテムが表示されています。
コラム
ヘルプドロップダウンは 2014 Winter(Iceberg) からの機能です。
CSS¶
テーマが使用する CSS を実装します。
CSS の @import を使った際のパフォーマンス劣化を避けつつ、テーマモジュール間で共通な部分を共有するために LESS を用いて実装しています。
テーマモジュールのビルド時に、LESS で書いた .less ファイルをコンパイルし、CSS に変換します。また、CSS の最小化も行います。 変換した CSS と 最小化した CSS の両方を Web サーバ、またはアプリケーションサーバにデプロイします。
CSS 上の共通な部分として以下のものがあります。これらはテーマモジュールを作成する際に必須なファイルです。
- intra-mart Accel Platform が提供する CSS Module List
- intra-mart Accel Platform が提供するコンポーネント
- jQueryUI が定義するコンポーネント
また、これらのファイルが要求するパラメータも必要です。
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);