テーマモジュールの作成¶
ここではテーマモジュールの作成方法について説明します。
標準テーマカスタマイズを使って、標準テーマをカスタマイズする方法と、HTML や CSS などはじめから作り込んでいくスクラッチ開発の方法があります。
標準テーマカスタマイズの概要¶
ここでは標準テーマカスタマイズの概要を説明します。
標準テーマカスタマイズは、標準テーマ、標準テーマ(シンプル)をカスタマイズしたテーマモジュールを生成するツールです。 このツールは、テーマの標準的な色とロゴファイルを変更したテーマモジュールを簡単に生成することを目的としています。
カスタマイズ可能な項目は、
- テーマの標準的な色
- ロゴ画像
- グローバルナビの開始位置
です。HTML を修正するようなカスタマイズ、特定の要素だけを変更するような細やかなカスタマイズには対応できません。
カスタマイズできる標準テーマには、v5、v6 の互換テーマは含まれません。
詳細は、「標準テーマカスタマイズ 操作ガイド」を参照してください。
注意
- 実行時にログインユーザが選択しているテーマのIDをデータベース上で書き換えます。「標準テーマカスタマイズを終了する」リンクをクリックせずに別の画面へ遷移すると、そのとき表示していたテーマを選択したことになるので注意してください。
- 画面上の見た目を完全に再現するものではありません。LESS コンパイラの実装の都合上、いくつかのアイコンが参照できません。ダウンロードするテーマモジュールには影響しません。
スクラッチ開発¶
必要なファイルをすべて作り込んでいく方法です。 intra-mart e Builder for Accel Platform でユーザモジュールプロジェクトを作り、テーマモジュールに必要なファイルを作成していきます。
注意
スクラッチ開発を行うと、標準テーマやそのカスタマイズでは実現できない見た目や操作性を実装可能です。 その反面、CSS モジュールや UI コンポーネントを適切にカスタマイズしないと思わぬ画面のレイアウト崩れ、CSJS の 競合などが発生する恐れがあります。
スクラッチ開発を行う場合は、対象となる全画面で全操作を行ってもレイアウトの崩れがないこと、操作した際に CSJS のエラーが発生しないことなどを十分に確認してください。
設定ファイル¶
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¶
ロゴ¶
ロゴは img タグとして実装します。この画像をクリックしたとき、ホームURL へ指定された URL に遷移することが望ましい動きです。ホームURL を取得するには、ThemeManager.getEncodedHomeUrl を呼び出してください。
<a href='<imart type="string" value=home></imart>'><img src="ui/theme/テーマID/images/logo.png"></a>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-search-input 、 .imui-form-global-search-submit に対してスタイルを当ててください。 また、表示/非表示を切り替えるように CSJS で関数を作成してください。
<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 タグを利用して表示する例を下に挙げます。
/* 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>
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 を生成してください。
基となる 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 として配置されています。
サンプル¶
ここでは、以下のようなテーマを作成していきます。
テーマカラーは、#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 を作成します。 内容は以下の通りです。
<?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 "> <theme id="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 Theme CAP.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 に書き換えるように修正します。
--- %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 は修正不要です。
header¶
header は、以下のように実装します。
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
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
footer¶
footer は、以下のように実装します。
src/main/jssp/src/theme/sample_theme/footer.html
<footer> <img src="ui/theme/sample_theme/images/poweredbyim.png"/> </footer>src/main/jssp/src/theme/sample_theme/footer.js
function 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.less
- footer.less
- header.less
parameter.less¶
テーマカラーを #005678 にします。その他の値は修正しません。
@theme-color: #005678;
header.less¶
ヘッダのスタイルを指定します。
#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; } } }