目次


WebSphere Portal テーマのモバイルへの移行

(パート1) WebSphere Portal 6.1.x または 7.x テーマのモジュール化

WebSphere Portal 8.0 で導入されたモジュラー・アーキテクチャーへのテーマの移行方法

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: WebSphere Portal テーマのモバイルへの移行

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:WebSphere Portal テーマのモバイルへの移行

このシリーズの続きに乞うご期待。

はじめに

WebSphere Portal のあるバージョンから別のバージョンへ移行する際のベスト・プラクティスは、テーマ内でその Portal のマイグレーションを Portal の新機能の追加と切り離すことです。その目的は、Portal の旧バージョンから現行バージョンにカスタム・テーマを現状のまま移行し、マイグレーション中にテーマへの新規追加を行わないようにすることです。Portal の新規フィーチャーの多くは Portal 8.0 のテーマを通じて出現するため、通常、フィーチャーの追加はテーマの開発アクティビティーとなり、全体的なマイグレーションが正常に完了した後に行われます。

さまざまなユーザーが異なる方法でフィーチャーをテーマに追加しています。

  • その 1 つは、個々のフィーチャーをカスタム・テーマに追加する方法です。例えば、既存のテーマ・スキンで Dojo タグ付け/評価ウィジェットを公開することにより、タグ付け/評価を追加することができます。
  • もう 1 つの方法は、開始点として Portal 8.0.0.1 テーマを使用してゼロから始めることです。まったく新しいルック・アンド・フィールの Web サイトを望む一部のユーザーは、この方法を選択しています。
  • この 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」テーマとも呼ばれます)。この記事の最後で、このテーマのモジュール化されたバージョンをダウンロードすることができます。

1. Portal 8.0.0.1 テーマをコピーする

このステップを完了するには、インフォメーション・センターの操作手順(「Create a copy of the theme」 ) に従います。8.0.0.1 テーマのこのコピーは、「Modular Tab Menu」テーマの開始点となります。

この手順では、以下の作業を必要とします。

  1. テーマの静的リソースをコピーする
  2. スキンの静的リソースをコピーする
  3. テーマの動的リソースをコピーする
  4. テーマの静的リソースを動的リソースにリンクする
  5. テーマの動的リソース参照を変更する
  6. スキンの動的リソース参照を変更する

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

報告された差異を確認して修正します。

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」のコンテキスト・ルートを使用することもできます。

このステップを完了するには、インフォメーション・センターの操作手順(「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"
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">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the resourceroot to the directory name of your skin-->
      <!--Use the skin OID ZK_J15213K0J0EPD0IVLFLIDO1SG0 in the allowed-skin tag in your theme-->
    </skin>
    <theme context-root="/wps/defaultTheme80" uniquename="YOUR-UNIQUENAME-HERE" action="update" active="true" default="false" 
    domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the allowed skin to your new custom skin!-->
      <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="" uniquename="" objectid="ZK_J15213K0J0EPD0IVLFLIDO1SG0"
    resourceroot="" action="update" active="true" default="false" domain="rel" type="default">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the resourceroot to the directory name of your skin-->
      <!--Use the skin OID ZK_J15213K0J0EPD0IVLFLIDO1SG0 in the allowed-skin tag in your theme-->
    </skin>
    <theme context-root="" uniquename="" action="update" active="true" default="false"
    domain="rel" objectid="ZJ_J15213K0J0EPD0IVLFLIDO10G7" resourceroot="dynamicSpots">
      <!--Set the context-root!-->
      <!--Set the uniquename to something meaningful-->
      <!--Set the allowed skin to your new custom skin!-->
      <allowed-skin skin="" 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

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 を見つけるには、「リソース」 > 「リソース環境」 > 「リソース環境プロバイダー」の順にナビゲートします。

カスタム・テーマをパーツにスライスする

元の「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 がありますが、これを完全に再利用することはできませんでした。トップ・ナビゲーションとプライマリー・ナビゲーションを処理するために 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 ファイル
ファイル 詳細
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"
        }]
      }]
    }]
  }]
}

次に、この新しいモジュールを新規プロファイルに追加しました。この新規プロファイルは、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 日かかりました。ヘッダーなどのエレメントを適切なサイズにするために、画面上のピクセル・ルーラーにも時間を要しました。

デバッグ・トレースをオンにすると、反復中に個々の要求を確認するのに役立ちます。

リスト 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 内のプロジェクト・メニューの動的コンテンツ・スポット
<!-- displays the state of the current page -->
<div class="wpthemeRight modpbPageTools">
<arel="dynamic-content"href="dyn-cs:id:modularTabMenu_projectMenu"></a>
</div>

プロジェクト・メニュー (図 2) を使用すると、サイト作成者は、現在公開されているサイトの表示と特定の変更が適用されたサイトの表示を切り替えることができます。

図 2. プロジェクト・メニュー

編集モード

元のテーマは、スタイルの設定やページ・レイアウトの変更などを可能にする独自の編集モードを備えていました。このモードを移行させる気はありませんでした。代わりに、新しいテーマの編集モードを使用する方針を立てました。新しい編集モードには Portal 8.0.0.1 のフィーチャーがすべて組み込まれていたため、これは各フィーチャーを利用可能にする最適な方法でした。プロジェクト・メニューの場合とは異なり、元のテーマの体裁に合うようにシェルフをデザインしようとはほとんどしませんでした。これはオーサリング・モードであり、サイト訪問者用の表示モードではないため、シェルフが元のテーマのように見えるかどうかは重要でないと考えました。

上述のプロジェクト・メニューと同様に、編集モードは元の 8.0.0.1 テーマにある動的コンテンツ・スポットです。

リスト 17. theme_en.html 内の編集モード (汎用ツールバー) の動的コンテンツ・スポット
<!-- inserts the universal toolbar -->
<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 を更新しました。

テーマ・スタイルの作成について理解を深めてください。

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、orangeTheme、pinkTheme、purpleTheme)
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 を変更
表 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/

検出された重要な相違は解決してください。

まとめ

私はこの作業に計 9.5 日を費やしました。その時間内に Portal 6.1.5 テーマをモジュール化し、Portal 8 の新規フィーチャーを活用することができました。それと同時に、元のテーマのルック・アンド・フィールを維持することができました。余録として、新しいテーマはサイズが縮小し、元のテーマよりもサーバー要求が減少しています。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=967874
ArticleTitle=WebSphere Portal テーマのモバイルへの移行: (パート1) WebSphere Portal 6.1.x または 7.x テーマのモジュール化
publish-date=04112014