PDF：

WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
WebSphere Portal 8.0 で導入されたモジュラー・アーキテクチャーへの
テーマの移行方法
David Nixon
Chief Programmer Workplace Services Express and
WebSphere Portal Express
IBM
2014年 4月 11日
IBM WebSphere Portal 8.0 では、テーマの開発を容易にするモジュラー・アーキテクチャーが
導入されました。Portal 8.0 へのマイグレーションの完了後、Portal サイトに新規フィーチャー
を追加するにあたって最初にすべきことは、通常、カスタム・テーマをモジュール化すること
です。この記事では、Portal 6.1.5 のテーマをモジュラー・アーキテクチャーに移行するステッ
プを順を追って説明します。テーマ移行の計画に役立つヒントや見積もり時間も記載されてい
ます。
このシリーズの他の記事を見る
はじめに
WebSphere Portal のあるバージョンから別のバージョンへ移行する際のベスト・プラクティス
は、テーマ内でその Portal のマイグレーションを Portal の新機能の追加と切り離すことです。そ
の目的は、Portal の旧バージョンから現行バージョンにカスタム・テーマを現状のまま移行し、
マイグレーション中にテーマへの新規追加を行わないようにすることです。Portal の新規フィー
チャーの多くは Portal 8.0 のテーマを通じて出現するため、通常、フィーチャーの追加はテーマの
開発アクティビティーとなり、全体的なマイグレーションが正常に完了した後に行われます。
さまざまなユーザーが異なる方法でフィーチャーをテーマに追加しています。
• その 1 つは、個々のフィーチャーをカスタム・テーマに追加する方法です。例えば、既存の
テーマ・スキンで Dojo タグ付け/評価ウィジェットを公開することにより、タグ付け/評価を
追加することができます。
• もう 1 つの方法は、開始点として Portal 8.0.0.1 テーマを使用してゼロから始めることです。
まったく新しいルック・アンド・フィールの Web サイトを望む一部のユーザーは、この方法
を選択しています。
© Copyright IBM Corporation 2014
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
商標
ページ 1 / 18
developerWorks®
ibm.com/developerWorks/jp/
• この 2 つのアプローチの折衷案が既存のカスタム・テーマをモジュール化する方法です。こ
のアプローチの利点は、既存サイトの基本的なルック・アンド・フィールを維持しながら最
小限の労力でフィーチャーを追加できることです。この記事では、このアプローチについて
詳しく説明します。
前提条件
IBM WebSphere Portal
この記事は WebSphere Portal バージョン 8.0 に基づいており、8.0.0.1 フィックスパックを必
要とします。8.0.0.1 にマイグレーションした後は、「enable-new-8001-features」構成タス
クを使用して新規フィーチャーを有効にする必要があります。インストール手順について
は、WebSphere Portal の文書を参照してください。enable-new-8001-features タスクの実行手順に
ついては、README を参照してください。
Web ブラウザー
Firebug 拡張機能をインストールした Mozilla Firefox の最新バージョンを使用することをお勧めし
ます。ただし、CSS3 をサポートするブラウザーはすべて利用できます。最近のほとんどのブラウ
ザーには独自の開発ツールが組み込まれていますが、この記事の例では Firebug に基づきます。
WebDAV クライアント
WebSphere Portal テーマを更新するには WebDAV クライアントが必要です。ここでは Linux の
davfs2 を使用します。WebSphere Portal がサポートしているすべての WebDAV を使用できます。
詳細については、「Connecting to the Portal WebDAV with 8.0 」を参照してください。
Linux
テーマの開発はどのプラットフォームでも実行できますが、この記事ではほとんどの Linux ディ
ストリビューションで利用できるツールに基づきます。同様のツールは Windows などのオペレー
ティング・システムにも存在します。
基礎知識
WebSphere Portal のインフォメーション・センターでは、テーマのモジュラー・フレームワーク
の利点とその仕組みについて説明されています。このフレームワークでは、テーマのコード自
体からフィーチャーのイネーブルメントが切り離されています。そのため、フィーチャーの基本
コードの仕組みについて詳しく知らなくても、テーマを容易に開発できます。実行時にモジュー
ルが、テーマへのデータのコントリビューションを行うことがトできる論理ポイントが提供さ
れます。可能な場合は、これらのコントリビューションを組み合わせて最適化することができま
す。複数の異なるリモート・ソースをパフォーマンス改善という 1 つの要求に統合できます。
任意のテーマで開始できますが、この記事では例として使いやすい「Tab Menu – Page Builder」
テーマを使用します (このテーマがデプロイされる EAR ファイルの名前に因んで「Enhanced」
テーマとも呼ばれます)。この記事の最後で、このテーマのモジュール化されたバージョンをダウ
ンロードすることができます。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 2 / 18
ibm.com/developerWorks/jp/
developerWorks®
1. Portal 8.0.0.1 テーマをコピーする
このステップを完了するには、インフォメーション・センターの操作手順(「Create a copy of the
theme」 ) に従います。8.0.0.1 テーマのこのコピーは、「Modular Tab Menu」テーマの開始点と
なります。
この手順では、以下の作業を必要とします。
a. テーマの静的リソースをコピーする
b. スキンの静的リソースをコピーする
c. テーマの動的リソースをコピーする
d. テーマの静的リソースを動的リソースにリンクする
e. テーマの動的リソース参照を変更する
f. スキンの動的リソース参照を変更する
1a. テーマの静的リソースをコピーする
themelist WebDAV から 8.0.0.1 テーマ・リソースをコピーする操作手順に従います。この記事の例
では、次のように themelist がマウントされました。
リスト 1. WebDAV による themelist のマウント
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/themelist/ /mnt/portal/dav/themelist
インフォメーション・センターの指示に従って、好みのメソッドで localized_en.properties ファイ
ルを編集します。多くの言語ファイルがあるため、ここでは sed スクリプトを編集に使用しまし
た。
リスト 2. sed によるテーマ名の設定
cd /tmp/ModularTabMenu/metadata
find . -name "localized_*.properties" | xargs -n 1 sed -i "s/title=.*\$/title=Modular Tab Menu/g"
これにより、ブラウザーのロケール設定に関係なく、テーマ名は「Modular Tab Menu」となりま
す。通常、この名前は Portal 管理者にのみ表示されますが、翻訳が必要な場合は、該当するロー
カライズ・プロパティー・ファイルに翻訳を追加できます。例えば、localized_fr.properties でタ
イトルを「Modulaire Menu Tab」に設定することもできます。
ヒント: 一部のエディターとツールでは、正しく削除されない一時ファイルが WebDAV に作成さ
れます。長さがゼロのこれらのファイルをクリーンアップしてください。
リスト 3. find を使用した WebDAV からの一時ファイルのクリーンアップ
find /mnt/portal/dav/themelist/ModularTabMenu -type f -size 0 -delete
ヒント: ローカル・システムから WebDAV へのコピーが正常に完了したことを確認します。
リスト 4. diff を使用した WebDAV コンテンツの確認
diff -rq /tmp/ModularTabMenu /mnt/portal/dav/themelist/ModularTabMenu
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 3 / 18
developerWorks®
ibm.com/developerWorks/jp/
報告された差異を確認して修正します。
1b. スキンの静的リソースをコピーする
skinlist WebDAV から 8.0.0.1 「隠し」スキンをコピーする操作手順に従います。この記事の例で
は、次のように skinlist がマウントされました。
リスト 5. WebDAV による skinlist のマウント
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/skinlist/
/mnt/portal/dav/skinlist
この記事の例では、skinlist ディレクトリーで作成されたディレクトリーの名前として
「ModularTabMenuStandard」を使用します。上述の手順と同様に sed スクリプトを使用して
localized*.properties ファイルを編集し、タイトルを「Modular Tab Menu Standard」に設定しまし
た。WebDAV にコピーされたファイルを確認します。
1c. テーマの動的リソースをコピーする
このステップを完了するには、インフォメーション・センターの操作手順 (「Copy the dynamic
resources for your theme」) に従います。
この記事の「ダウンロード」セクションに、このステップの EAR ファイルがあります。
ヒント: EAR ファイルの Web アプリケーションおよび下記の例では、「/wps/ModularTabMenu」
のコンテキスト・ルートを使用していますが、各自の環境に適切な任意のコンテキスト・ルート
を使用できます。例えば、「/yourco/ModularTabMenu」や「/yourco/theme」、あるいは単に「/
theme」のコンテキスト・ルートを使用することもできます。
1d. テーマの静的リソースを動的リソースにリンクする
このステップを完了するには、インフォメーション・センターの操作手順(「Binding your theme
to the context root of the web app」 ) に従います。
この記事の「ダウンロード」セクションに、output.xml の編集手順を単純化する xslt ファイルが
あります。
リスト 6. output.xml ファイルのトリミング
xsltproc CustomOnly.xslt output.xml > bindTheme.xml
処理後のbindTheme.xmlファイルは、元のoutput.xmlと比べてかなり小さくなり、より明確になっ
ています。
リスト 7. サンプルの bindTheme.xml
<?xml version="1.0" encoding="utf-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" build="wp8001CF05_001_18" type="update"
version="8.0.0.1"
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 4 / 18
ibm.com/developerWorks/jp/
developerWorks®
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
<portal action="locate">
<skin context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE"
objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
resourceroot="Hidden" action="update" active="true" default="false" domain="rel" type="default">




</skin>
<theme context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE" action="update" active="true"
default="false"
domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">



<allowed-skin skin="YOUR-SKIN-OID-HERE" update="set"/>
</theme>
</portal>
</request>
リスト 8. Modular Tab Menu テーマの編集後のサンプル bindTheme.xml
<?xml version="1.0" encoding="utf-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" build="wp8001CF05_001_18" type="update"
version="8.0.0.1"
xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd">
<portal action="locate">
<skin context-root="/wps/ModularTabMenu" uniquename="com.ibm.skin.modtabmenu.standard"
objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
resourceroot="ModularTabMenuStandard" action="update" active="true" default="false" domain="rel"
type="default">




</skin>
<theme context-root="/wps/ModularTabMenu" uniquename="com.ibm.theme.modtabmenu" action="update"
active="true" default="false"
domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">



<allowed-skin skin="ZK_J15213K0J0EPD0IVLFLIDO1SG0" update="set"/>
</theme>
</portal>
</request>
1e. テーマの動的リソース参照を変更する
このステップを完了するには、インフォメーション・センターの操作手順(「Modifying the
dynamic resource references for your theme」) に従います。
この記事の例では、ConfigEngine タスクを使用して WP DynamicContentSpotMappings REP のカス
タム・プロパティーの作成を単純化しました。
リスト 9. カスタム・プロパティーの作成
ConfigEngine.sh modify-theme-dynamic-resource-references-80
-DCustomThemePrefixName=modularTabMenu
-DCustomThemeContext=/wps/ModularTabMenu
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 5 / 18
developerWorks®
ibm.com/developerWorks/jp/
modify-theme-dynamic-resource-references-80 タスクは、Portal 8.0.0.1 の累積フィックス 7 以降で
利用できます。
注: このタスクはすべてのカスタム・プロパティーに対してデフォルト値を使用するため、Portal
のコンテキスト・ルートが /wps でない場合は、/wps/themeModules への参照を更新して、使用シ
ステムの該当する値にする必要があります。
theme*.html ファイルの更新では、fs-type1 ディレクトリーをマウントし、sed スクリプトを使用
してファイルを更新しました。
リスト 10. WebDAV による fs-type1 のマウント
mount.davfs http://example.com:10039/wps/mycontenthandler/dav/fs-type1/ /mnt/portal/dav/fs-type1
リスト 11. sed スクリプトによるカスタム・プロパティー参照の更新
find . -name "theme*.html" | xargs -n 1 sed -i "s/80theme_/modularTabMenu_/g"
1f. スキンの動的リソース参照を変更する
このステップを完了するには、インフォメーション・センターの操作手順 (「Modifying the
dynamic resource references for your skin」) に従います。
ここでも、sed スクリプトを使用して skin*.html ファイルを編集しました。
リスト 12. sed スクリプトによるカスタム・プロパティー参照の更新
find . -name "skin*.html" | xargs -n 1 sed -i "s/80theme_/modularTabMenu_/g"
2. テーマにフィーチャーを追加する
新しいテーマが機能しているので、ページを作成し、新規の「Modular Tab Menu」テーマをその
ページに適用します。この時点では、このテーマは Portal 8.0.0.1 テーマとまったく同じに見えま
す。ここから、本当の作業が始まります。
ここに至るまでの作業時間は約 4 時間です。これには、xslt または新しい ConfigEngine タスクの
作成に要した時間は含まれていません。独自のカスタム・テーマの開発コストを見積もるのに役
立つように、時間的な制約は課さずに続けていきます。
開発モードをオンにする
今はテーマの開発モードをオンにすべきときです。このモードでは、サーバーを再起動してサー
バー側のキャッシュをクリアしなくても済むため、変更をより早く確認できます。
開発モードを有効にするには、WP ConfigService リソース環境プロバイダー (REP) 内で
resourceaggregation.development.modeプロパティーを true に設定します。WAS コンソールで
WP ConfigService REP を見つけるには、「リソース」 > 「リソース環境」 > 「リソース環境プロバ
イダー」の順にナビゲートします。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 6 / 18
ibm.com/developerWorks/jp/
developerWorks®
カスタム・テーマをパーツにスライスする
元の「Tab Menu – Page Builder」テーマは Default.jsp に多くのコードを保有していたので、取り組
みやすい開始点となります。ここでの目標は可能な限り Portal 8.0.0.1 テーマを使用することです
が、古いテーマに適合するようにスタイルを変更します。切り取ってモジュールとして定義する
のに適した 3 つの基本パーツを見つけるために、私は Default .jsp を調べました。
最初に、私は jsp パーツを探しました。これらのパーツは、8.0.0.1 テーマでは jsp として実装され
ています。ナビゲーションやテーマのヘッダーおよびフッターのようなものは jsp として定義され
ています。元の「Tab Menu – Page Builder」では、これらはすべて Default .jsp に格納されていま
した。しかし、8.0.0.1 テーマではこれらは別々に存在し、はるかに論理的で保守しやすいパーツ
となります。Portal 文書ではこれらの論理パーツを動的コンテンツ・スポットと呼んでおり、従
来の jsp パーツよりもはるかに柔軟性に富んでいます。動的コンテンツ・スポットの詳細な説明を
お読みください。
次に、私は JavaScript パーツを探しました。元のテーマは、外部の JavaScript ファイルへの参照と
Default.jsp 自体のインライン JavaScript への参照をともに備えていました。
最後に、新しいテーマで必要とされる css ファイルを探しました。
jsp ファイル
必要とされた最大の変更はナビゲーションに対するものでした。元のテーマのナビゲーションは
豊富な Dojo 機能を持ち、子ページ用のドロップダウン・メニューを備えています。表示モード
では、8.0.0.1 テーマは Dojo をまったく使用しないため、Dojo モジュールをテーマに追加する必
要もありましたが、それについては後で詳しく述べます。ログイン、ログアウト、ヘルプなどの
「一般的なアクション」を処理する Default.jsp のスライスも見つけました。私はその jsp のスラ
イスを「commonActions_pb.jsp」へ移しました。このファイルは、テーマの残りの要素とともに
この記事の「ダウンロード」セクションで入手できます。元のテーマの鉛筆アイコンを使用可能
にするために、pageModeToggle.jsp に微調整を施しました。
図 1 にはトップ・ナビゲーションを形成する「ホーム」、「管理」、「アプリケーション」な
どが表示されています。「ようこそ」、「はじめに」などはプライマリー・ナビゲーションの部
分です。右端には、ページの表示モードと編集モードを切り替える鉛筆アイコンと一般的なアク
ションが表示されています。この図には、私が元のテーマからあえてコピーしなかった検索入力
ボックスも表示されています。元のテーマの検索ボックスは 8.0.0.1 テーマの新しいボックスと非
常に似ていたため、新しいほうを保持しました。
図 1. テーマのパーツ
ナビゲーション jsp ファイル
Portal 8.0.0.1 テーマには非常にクリーンで分かりやすい navigation.jsp がありますが、これを完全
に再利用することはできませんでした。トップ・ナビゲーションとプライマリー・ナビゲーショ
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 7 / 18
developerWorks®
ibm.com/developerWorks/jp/
ンを処理するために jsp ファイルを 2 つ新規に作成しました。topNav.jsp と primaryNav.jsp を作成
するために、元の Default.jsp からコードとスタイルをコピーしました。
これらの新しい jsp ファイルを指すように、対応する動的コンテンツ・スポットを変更しました。
詳細については表 1 を参照してください。
表 1. 新しい動的スポット
動的スポット
新しいマッピング
modularTabMenu_topNav
mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/
topNav.jsp,smartphone@,tablet@
modularTabMenu_primaryNav
mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/
primaryNav.jsp?startLevel=1,smartphone@,tablet@
modularTabMenu_commonActions
mvc:res:/wps/ModularTabMenu/themes/html/dynamicSpots/
commonActions_pb.jsp,smartphone/tablet@res:/wps/ModulaTabMenu/
themes/html/dynamicSpots/commonActions.jsp
動的コンテンツ・スポットについて理解を深めてください。
動的コンテンツ・スポットと他の領域にスマートフォンやタブレットへの参照があることに気づ
いたかもしれません。このシリーズの以降の記事ではこうしたトピックについても扱い、この
テーマをレスポンシブにする方法を示します。
新しい動的スポットをすべて定義したら、今度は新しいテーマの theme_en.html に目を向けると
きです。私はこのファイルを編集し、元のテーマと一致するように新しいテーマをレイアウトし
ました。例えば、元のテーマでは鉛筆アイコンが検索バーの横に表示されています。全体のレイ
アウトがまとまるように html を調整しましたが、時間はそれほどかかりませんでした。ただし、
この時点では JavaScript と css が欠けているため、新しいテーマの機能や外観は不十分です。
JavaScript パーツ
関連する JavaScript ファイルを元のテーマで見つける作業は、このプロセスで最も単調かつエ
ラーが起きやすい箇所でした。1 つの jsp ファイルにいくつかの JavaScript ファイルが含まれて
おり、jsp ファイルの 1 つで数ビットがインライン化されているにすぎませんでした。Firebug の
「ネットワーク」タブを使用して、元のテーマによってロードされたすべての JavaScript ファイル
を確認しましたが、Dojo 関連のファイルはすべて無視しました。元のテーマの古いバージョンの
Dojo はあえて使用しませんでした。Portal 8.0.0.1 テーマでは Dojo 1.7.2 が使用されているため、
新しいテーマでも引き続きこれを使用しました。
新しいテーマでは 4 つの新規 JavaScript ファイルが使用されています。元のテーマから 2 つのファ
イルを直接コピーしました。作成したファイルの 1 つは、元のテーマのインライン JavaScript に基
づいています。もう 1 つのファイルは、IBM 提供のファイルを変更したものです。詳細について
は表 2 を参照してください。
表 2. 新しい JavaScript ファイル
ファイル
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
詳細
ページ 8 / 18
ibm.com/developerWorks/jp/
developerWorks®
menu_service.js
Portal 6.1.5 の wp_profile/installedApps/CELLNAME/wps.ear/wps.war/
menu/menu_service.js から新しいテーマの WebDAV のロケーションに
コピー
PageBuilderTheme.js
wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/
wp.theme.enhancedtheme.war/themes/html/Enhanced/js/
PageBuilderTheme.js から新しいテーマの WebDAV のロケーションにコ
ピー
ibmPortalEnhancedTheme-nodojo.js
ibmPortalEnhancedTheme.js の変更バージョン。Portal 8.0.0.1 の
PortalServer/theme/wp.theme.dojo/installedApps/dojo.ear/dojo.war/com/
ibmPortalEnhancedTheme.js に保管
modularTabMenu.js
このファイルは元のテーマにあるインライン JavaScript を保持
これらの JavaScript ファイルすべてに対してモジュールを定義し、テーマの contributions フォル
ダーの WebDAV にモジュールを配置しました。
リスト 13. modularTabMenu.json – JavaScript コントリビューション
{
"modules":[
{
"id":"wp_modular_tabmenu",
"contributions":[{
"type":"config",
"sub-contributions":[
{
"type":"js",
"uris":[{
"value":"/js/menu_service.js"
},
{
"value":"/js/menu_service.js.uncompressed.js",
"type":"debug"
}]
},
{
"type":"js",
"uris":[
{
"value":"/js/ibmPortalEnhancedTheme-nodojo.js"
},
{
"value":"/js/ibmPortalEnhancedTheme-nodojo.js.uncompressed.js",
"type":"debug"
}]
},
{
"type":"js",
"uris":[{
"value":"/js/modularTabMenu.js"
},
{
"value":"/js/modularTabMenu.js.uncompressed.js",
"type":"debug"
}]
},
{
"type":"js",
"uris":[{
"value":"/js/PageBuilderTheme.js"
},
{
"value":"/js/PageBuilderTheme.js.uncompressed.js",
"type":"debug"
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 9 / 18
developerWorks®
ibm.com/developerWorks/jp/
}]
}]
}]
}]
}
次に、この新しいモジュールを新規プロファイルに追加しました。この新規プロファイル
は、profile_full.json のコピーに上述のモジュールを追加して新たなプロファイル名を付けたもの
です。
このプロファイルはまた、テーマのデフォルト・プロファイルに設定する必要
があります。WebDAV themelist/ModularTabMenu/metadata.propertiesを編集
し、resourceaggregation.profileを新規プロファイルに設定します。
リスト 14. デフォルト・プロファイルの設定
resourceaggregation.profile=profiles/profile_modulartabmenu.json
CSS パーツ
スタイルを正しく整える作業は、このプロセスで 2 番目に時間のかかる箇所でした。Firebug で
は、ブラウザー・ウィンドウで元のテーマと新しいテーマを切り替えて、違いを探して修正する
ことに多くの時間を費やしました。Portal 8.0.0.1 に付属しているスタイルは変更しないというの
が基本方針でした。代わりに、スタイルを追加して 8.0.0.1 のスタイルをオーバーライドしまし
た。元のテーマから 4 つの css ファイルを直接コピーし、新規の css ファイルを 1 つ作成しまし
た。
表 3. 新しい CSS ファイル
ファイル
詳細
base.css
Portal 6.1.5 の wp_profile/installedApps/CELLNAME/
Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/
Enhanced/css/base/framework/base.css の変更バージョン
layoutTheme.css
wp_profile/installedApps/CELLNAME/Enhanced_Theme.ear/
wp.theme.enhancedtheme.war/themes/html/Enhanced/css/
defaultTheme/framework/layoutTheme.css から新しいテーマの WebDAV
のロケーションにコピー
default.css
Portal 6.1.5 の wp_profile/installedApps/CELLNAME/
Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/
Enhanced/css/defaultTheme/defaultTheme.css の変更バージョン
modpb.css
新規のファイル。ここでは、テーマの体裁を整えるために各種のオー
バーライドを保持
反復: JavaScript、CSS、theme.html
微調整や再ロードなどを繰り返し、多くの時間を Firebug で費やしました。ここはコーヒーでも飲
みながら、Alt + Tab のキーボード・テクニックを駆使して上質の時間を過ごすことを計画してく
ださい。この作業にはおよそ 6 日かかりました。ヘッダーなどのエレメントを適切なサイズにす
るために、画面上のピクセル・ルーラーにも時間を要しました。
デバッグ・トレースをオンにすると、反復中に個々の要求を確認するのに役立ちます。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 10 / 18
ibm.com/developerWorks/jp/
developerWorks®
リスト 15. デバッグ用のトレース・ストリング
com.ibm.wps.resourceaggregator.CombinerDataSource.RemoteDebug=all
このトレースをオンにすると、個々の JavaScript ファイルと css ファイルを Firebug で確認できま
す。このストリングを設定するには、「管理」 > 「ポータルの分析」 > 「トレースを使用可能に
する」の順に選択します。「これらのトレース設定を追加」でストリングを設定し、「+」アイコ
ンをクリックします。あるいは、WebSphere Application Server の管理コンソールで「ロギングお
よびトレース」 > 「WebSphere_Portal」 > 「診断トレース・サービス」の順にナビゲートして、
このストリングを設定することもできます。
プロジェクト・メニュー
Portal 8 の新規フィーチャーの 1 つに、一連の変更を 1 つのプロジェクトにまとめる機能がありま
す。このプロジェクトには、Web コンテンツ管理の変更や Portal ページの変更など、さまざまな
変更を収めることができます。このフィーチャーは Portal 8 テーマのヘッダー領域に表示される
ため、新しいテーマにこのフィーチャーを追加しましたが、Modular Tab Menu テーマの体裁に合
うようにスタイルを変更しました。
プロジェクト・メニューのマークアップは、theme*.html ファイルの動的コンテンツ・スポット
を介してページに挿入されます。theme_en.html ファイル (「ダウンロード」セクションを参照)
には、このスポットが組み込まれています。このスポットは元の 8.0.0.1 テーマのものと同じです
が、このテーマ向けに微調整が施されています。
リスト 16. theme_en.html 内のプロジェクト・メニューの動的コンテンツ・スポッ
ト

<div class="wpthemeRight modpbPageTools">
<arel="dynamic-content"href="dyn-cs:id:modularTabMenu_projectMenu"></a>
</div>
プロジェクト・メニュー (図 2) を使用すると、サイト作成者は、現在公開されているサイトの表
示と特定の変更が適用されたサイトの表示を切り替えることができます。
図 2. プロジェクト・メニュー
編集モード
元のテーマは、スタイルの設定やページ・レイアウトの変更などを可能にする独自の編集モード
を備えていました。このモードを移行させる気はありませんでした。代わりに、新しいテーマの
編集モードを使用する方針を立てました。新しい編集モードには Portal 8.0.0.1 のフィーチャー
がすべて組み込まれていたため、これは各フィーチャーを利用可能にする最適な方法でした。プ
ロジェクト・メニューの場合とは異なり、元のテーマの体裁に合うようにシェルフをデザインし
ようとはほとんどしませんでした。これはオーサリング・モードであり、サイト訪問者用の表示
モードではないため、シェルフが元のテーマのように見えるかどうかは重要でないと考えまし
た。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 11 / 18
developerWorks®
ibm.com/developerWorks/jp/
上述のプロジェクト・メニューと同様に、編集モードは元の 8.0.0.1 テーマにある動的コンテン
ツ・スポットです。
リスト 17. theme_en.html 内の編集モード (汎用ツールバー) の動的コンテンツ・ス
ポット

<a rel="dynamic-content" href="dyn-cs:id:modularTabMenu_toolbar"></a>
図 3 は、Portal 8.0.0.1 テーマの編集モードがトップ・ナビゲーションとプライマリー・ナビゲー
ションの間でどのように表示されるかを示しています。Modular Tab Menu テーマでも同様の処理
を施します。
図 3. Portal 8.0.0.1 テーマの編集モード
編集モードのシェルフは、Portal 8.0.0.1 テーマと同様にグレーのスタイルです。スペースに微調
整を加えてシェルフが正しく適合するようにしました (図 4 参照)。
図 4. Modular Tab Menu テーマの編集モード
編集モードの各タブの内容を容易にカスタマイズすることもできます。例えば、元のテーマの
「スタイル」タブには、Portal 8.0.0.1 テーマとは異なる色の選択リストがあります。そのため、
元のテーマにある色と一致するように system/styles.json を更新しました。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 12 / 18
ibm.com/developerWorks/jp/
developerWorks®
テーマ・スタイルの作成について理解を深めてください。
3. 整理
期待どおりにテーマが機能していることを確認した後、私は丸 1 日を割いて最終的な各種作業に
取り組み、環境を整理しました。Dojo ShrinkSafe を使用して、必要とされた JavaScript をすべて
圧縮しました。さらに、追加した css ファイルも圧縮しました。theme_en.html の最終完成版に基
づいてすべての theme_*.html ファイルを更新しました。diff ツールを使用して、言語固有の部分
を上書きしないように注意しながら theme_en.html の変更を他の言語バージョンにマージしまし
た。さらに、デバッグ・トレースをオフにしてテスト・スイートを再度実行しました。
変更の全リスト
表 4. WebDAV: WebDAV/fs-type1/themes/Portal8.0 と WebDAV/fs-type1/themes/
ModularTabMenu の比較
ファイル
変更内容
ModularTabMenu/contributions/modularTabMenu.json
JavaScript コントリビューションを定義する新規モジュール
ModularTabMenu/css
複数のフォルダーを削除
(black、blue、gold、green、orange、purple、white)
ModularTabMenu/css
複数のフォルダーを追加。Portal 6.1.5 の wp_profile/installedApps/
CELLNAME/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/
html/Enhanced/css/
からコピー
(blueTheme、greenTheme、greyTheme、lightGreenTheme、lightGreyTheme、orang
ModularTabMenu/css/default/default.css*
本体のスタイルを削除
/ModularTabMenu/css/default/icon.gif
元のテーマと一致するように変更
ModularTabMenu/css/default/modpb_mobile.css*
プレースホルダー
ModularTabMenu/css/images
Portal 6.1.5 から多くのイメージをコピー
ModularTabMenu/css/pagebuilder
新規の css ファイル。一部は Portal 6.1.5 からコピーして微調整
ModularTabMenu/css/widgets
ModularTabMenu/css/master.css*
新規の JavaScript への参照を追加
ModularTabMenu/images/favicon.ico
元のテーマのファビコンを使用
ModularTabMenu/js/ibmPortalEnhancedTheme-nodojo.js*
Portal 8.0.0.1 の PortalServer/theme/wp.theme.dojo/installedApps/
dojo.ear/dojo.war/com/ibmPortalEnhancedTheme.js の変更バージョン
(Dojo の参照を削除)
ModularTabMenu/js/menu_service.js*
Portal 6.1.5 からコピー
ModularTabMenu/js/PageBuilderTheme.js*
Portal 6.1.5 からコピー
ModularTabMenu/js/modularTabMenu.js*
Portal 6.1.5 の Default.jsp から派生
ModularTabMenu/nls/sidenav/*
動的スポットの参照を更新
ModularTabMenu/profiles/profile_modulartabmenu.json
テーマの新しいデフォルト・プロファイル。profile_full.json からコ
ピーして名前を変更
ModularTabMenu/system/styles.json
元のテーマと一致するように編集モードのスタイル・タブを更新
ModularTabMenu/nls/theme_*.html
元のレイアウトと一致するように HTML を変更
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 13 / 18
developerWorks®
ibm.com/developerWorks/jp/
表 5. EAR: ModularTabMenu.ear と PortalServer/theme/wp.theme.themes/default80/
installedApps/DefaultTheme80.ear の比較
ファイル
変更内容
themes/html/dynamicSpots/commonActions.jsp
新しいテーマでは不使用
themes/html/dynamicSpots/commonActions_pb.jsp
一般的なアクションを実装
themes/html/dynamicSpots/crumbTrail.jsp
クラス名をエスケープするための退屈な微調整
themes/html/dynamicSpots/mobileNavigation.jsp
新しいテーマでは使用されないが、微調整を加えて blank.gif への参照
を削除
themes/html/dynamicSpots/pageBuilderModularConfig.jsp
テーマの初期化に必要なロジックを保持する新規 jsp。元の Default.jsp
の部分からコピー
themes/html/dynamicSpots/pageModeToggle.jsp
鉛筆アイコンを表示するために微調整
themes/html/dynamicSpots/primaryNav.jsp
プライマリー・ナビゲーションの生成に使用する新規 jsp。元の
Default.jsp の部分からコピー
themes/html/dynamicSpots/status.jsp
blank.gif への参照を削除
themes/html/dynamicSpots/topNav.jsp
トップ・ナビゲーションの生成に使用する新規 jsp。元の Default.jsp の
部分からコピー
themes/html/bootstrap.jspf
ナビゲーションに必要な変数を追加
パフォーマンスの比較
元のテーマとモジュール化された新しいテーマの完全なパフォーマンス比較は実施しませんでし
た。ただし、ブランク・ページを対象に要求およびダウンロード・サイズを 2 つのテーマ間で比
較しました。
表 6. 部分的なパフォーマンスの比較
Portal 6.1.5 の元のテーマ
モジュール化された Tab Menu テーマ
要求
38
25
合計バイト数
2.5 MB
1.5MB
ModularThemeExploit.zip
「ダウンロード」セクションで入手可能なこの zip 内には 3 つのファイルがあります。グラフィ
カルな diff ツール (Beyond Compare または meld both work) を使用して、zip のコンテンツを
WebDAV 内のコンテンツと比較しました。
リスト 18. WebDAV と ModularTabMenu-webdav.zip のコンテンツの比較
unzip ModularTabMenu-webdav.zip -d /tmp/ModularTabMenu
bcompare /mnt/portal/dav/themelist/ModularTabMenu/ /tmp/ModularTabMenu/themelist/ModularTabMenu/
bcompare /mnt/portal/dav/skinlist/ModularTabMenuStandard/ /tmp/ModularTabMenu/skinlist/
ModularTabMenuStandard/
bcompare /mnt/portal/dav/fs-type1/themes/ModularTabMenu/ /tmp/ModularTabMenu/fs-type1/themes/ModularTabMenu/
検出された重要な相違は解決してください。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 14 / 18
ibm.com/developerWorks/jp/
developerWorks®
まとめ
私はこの作業に計 9.5 日を費やしました。その時間内に Portal 6.1.5 テーマをモジュール化
し、Portal 8 の新規フィーチャーを活用することができました。それと同時に、元のテーマのルッ
ク・アンド・フィールを維持することができました。余録として、新しいテーマはサイズが縮小
し、元のテーマよりもサーバー要求が減少しています。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 15 / 18
developerWorks®
ibm.com/developerWorks/jp/
ダウンロード
内容
サンプル・テーマのモジュール化バージョン
ファイル名
ModularThemeExploit.zip
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
サイズ
3310KB
ページ 16 / 18
ibm.com/developerWorks/jp/
developerWorks®
参考文献
• • • • IBM WebSphere Portal 8.0 の概要
IBM WebSphere Portal 8.0 製品資料
Developing themes for WebSphere Portal 8.0
developerWorks シリーズ:WebSphere Portal を使用してレスポンシブ Web デザインを実装す
る
• developerWorks シリーズ:WebSphere Portal と IBM Worklight による卓越したモバイル Web
エクスペリエンスの提供
• developerWorks のモバイル開発のサイト:包括的な IBM MobileFirst 製品ポートフォリオで、
モバイル・アプリケーション開発者を対象とする最新のツールとテクノロジーをお試しくだ
さい。無料のソフトウェア・ダウンロード、クラウドの試用版、サンプル・コード、専門家
によるハウツー・アドバイス、動画、トレーニング、ディスカッションなどをご利用いただ
けます。
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 17 / 18
developerWorks®
ibm.com/developerWorks/jp/
著者について
David Nixon
David Nixon is the Chief Programmer for WebSphere Portal 8.0.0.1. David has worked
in Portal and Portal Express for many years and has contributed code in many areas
including theme development, virtual portal features, and deployment scenarios.
© Copyright IBM Corporation 2014
(www.ibm.com/legal/copytrade.shtml)
商標
(www.ibm.com/developerworks/jp/ibm/trademarks/)
WebSphere Portal テーマのモバイルへの移行: （パート1）
WebSphere Portal 6.1.x または 7.x テーマのモジュール化
ページ 18 / 18

Open as PDF

Similar pages: Peripheral - Capture and Compare Unit 8 (CCU8)