目次


IBM WebSphere Portal 8 テーマのデプロイと開発:ステップバイステップ・ガイド

Comments

はじめに

IBM® WebSphere® Portal バージョン 7 にはテーマおよびスキンの WebDAV エントリー・ポイントが導入されました。これにより Web エージェンシーとの協業によるテーマ開発を円滑化し、最も一般的な成果物を迅速に変更する便利な方法を提供しています。

しかし、テーマ開発を見極め、高度なシナリオに取り組む段階に入ると、ほとんどの場合、EAR ファイルとしてデプロイされる新しい動的なコンテンツ・スポットを作成することになります。結果として、デプロイメントは複雑化し、さまざまなパッケージやテクノロジーが組み込まれるようになったのです。

デプロイメントの簡潔さを重視する環境では、WebSphere Portal 8 は同様に単一の EAR ファイルとしてデプロイメントと開発を提供します。本記事では、IBM Rational Application Developer (RAD) を使用してテーマを保守し、単一の EAR ファイルとしてデプロイする方法について詳しく説明します。

まずは、オリジナルのテーマからさまざまな成果物をアセンブルする方法の説明から開始し、開発中にテーマを簡単にホット・デプロイできる RAD の設定を取り上げます。

その後、カスタムの EAR テーマに合わせて変更が必要な構成/ファイルについて説明し、デプロイメント中の実際の手順を説明した後、最後にデバッグ・オプションを説明します。各テーマ機能を詳しく説明することはせず、関連トピックを言及する場合は追加情報へのリンクを記載します。

: 本ガイドは Portal 8 のテーマを対象に記述されていますが、1 つの EAR ファイルとして WebSphere Portal 7002 Theme をパッケージすることもできます。

テーマ成果物のアセンブル

EAR ファイルにカスタム・テーマを設定するには、既製のテーマからソースを取得する必要があります。基本的に、静的 (Cascaded Style Sheet、WebDAV からアクセスされる JavaScriptTM) と動的 (JavaServer Pages) という 2 種類のリソースが必要です。

動的なリソース

これらは以下の場所のファイルシステムから、製品資料トピック 「Make a unique copy of the dynamic resources for your theme(英語)」 に従ってコピーする必要があります。

  • opt/WebSphere/PortalServer/theme/wp.theme.themes/default80/installedApps/DefaultTheme80.ear/DefaultTheme80.war

以下のフォルダー/ファイルを一時フォルダーにコピーします。

  • skins/*

  • themes/*

  • WEB-INF/decorations.xml

  • WEB-INF/tld/*

静的リソース

静的リソースを取得するには、トピック 「WebDAV ファイル・ストアの使用」 の説明どおりに WebDAV クライアントを使用して接続します。このユースケースでは、トピック 「ファイル・ストアからのコンテンツのエクスポート」 に従って、以下の URL を使用してブラウザー経由でコンテンツを取得するという簡単な方法も選択できます。

  • テーマ

    • http://:/wps/mycontenthandler/dav/fs-type1/themes/?mime-type=application/zip

  • スキン

    • http://:/wps/mycontenthandler/dav/skinlist/?mime-type=application/zip

  • 共通リソース

    • http://:/wps/mycontenthandler/dav/fs-type1/common-resources/?mime-type=application/zip

ZIP ファイルを解凍して一時フォルダーに保存します。

  • 共通リソースの unzip 時には、フォルダーには「ibm」とだけ名前が付けられています。この「ibm」フォルダーを、「common-resources」という名前で新たに作成したフォルダー内に移動します。

開発環境の設定

テーマを処理するには、WAR ファイルを含める 2 つの動的 Web プロジェクトを作成し、1 つの EAR ファイルとして Portal/Application Server にデプロイする必要があります。

動的リソース

1. RAD を開き、Java EE パースペクティブに切り替えます。

2. 「ファイル」 --- 「新規作成」 --- 「プロジェクト」 --- 「動的 Web プロジェクト」を選択します。

3. 以下のように名前を定義します。

  • プロジェクト名: CustomTheme8Dynamic

  • 動的 Web モジュール・バージョンとして 2.4 を選択します。

  • EAR プロジェクト名: CustomTheme8EAR

4. 「次へ」、「次へ」、「終了 (Finish)」の順にクリックします。

5. ここで、既存のテーマから取得したリソースをプロジェクトにコピーします (図 1 を参照)。

  • skins → WebContent/skins

  • themes → WebContent/themes

  • WEB-INF/decorations.xml → WebContent/WEB-INF/decorations.xml

  • WEB-INF/tld → WebContent/WEB-INF/tld

図 1. 動的リソースのファイル構造
動的リソースのファイル構造
動的リソースのファイル構造

静的リソース

1. 「ファイル」 --- 「新規作成」 --- 「プロジェクト」 --- 「動的 Web プロジェクト」を選択します。

2. 次のように名前を定義します。

  • プロジェクト名:CustomTheme8Static

  • 動的 Web モジュール・バージョンとして 2.4 を選択します。

  • EAR プロジェクト名: CustomTheme8EAR を選択します。

3. 「次へ」、「次へ」、「終了 (Finish)」の順にクリックします。

4. WebDAV から取得済みのリソースを以下のディレクトリーにコピーします。

  • themes → WebContent/themes

  • common-resources → WebContent/common-resources

  • skinlist/ibm.portal.80Hidden → WebContent/skins/Hidden (コピー前に、これらのファイル/フォルダーを削除してください):

    • skinlist/ibm.portal.80Hidden/metadata/*

    • skinlist/ibm.portal.80Hidden/metadata.properties

  • skinlist/ibm.portal.80NoSkin → WebContent/skins/NoSkin (コピー前に、これらのファイル/フォルダーを削除してください):

    • skinlist/ibm.portal.80NoSkin/metadata/*

    • skinlist/ibm.portal.80NoSkin/metadata.properties

  • skinlist/ibm.portal.80Standard → WebContent/skins/Standard (コピー前に、これらのファイル/フォルダーを削除してください):

    • skinlist/ibm.portal.80Standard/metadata/*

    • skinlist/ibm.portal.80Standard/metadata.properties

5. リソースへのアクセスを可能にするために、リスト 1 のコードを WEB-INF/web.xml ファイルに追加します。

リスト 1. WEB-INF/web.xml に追加するコード
<web-app ...>

[…......]


<context-param> 

	<description>A regular expression that defines which of the resources in the WAR 
	file can be served by the portal war datasource.</description> 

	<param-name>com.ibm.portal.whitelist</param-name> 

	<param-value>.*</param-value> 

</context-param> 


<context-param> 

	<description>A regular expression that defines which of the resources in the WAR 
	file cannot be served by the portal war datasource.</description> 

	<param-name>com.ibm.portal.blacklist</param-name> 

	<param-value>WEB-INF/.*</param-value> 

</context-param>

[…......]


</web-app>

詳しくは、トピック 「Add the static content to your custom theme article(英語)」 を参照してください。

図 2. 静的リソースのファイル構造
静的リソースのファイル構造
静的リソースのファイル構造

6. デプロイメント記述子を作成するために、EAR プロジェクトを右クリックし、「Java EE」 --- 「デプロイメントの準備 (Prepare for deployment) 」を選択します。

オリジナルのリソース (ファイルとポータル構成) の変更

カスタム・テーマをデプロイする前に、静的リソースの Dynamic content spots(英語) がカスタムの動的 EAR ファイルをポイントしていることを確認する必要があります。

1. トピック 「Creating a dynamic content spot(英語)」 の指示に従って新しいコンテンツ・スポットを作成します。

2. 以下に一覧されている「カスタム・プロパティー」をリソース環境プロバイダーのエントリーである「WP DynamicContentSpotMappings」に追加します。ここで「CustomTheme8Dynamic」は動的リソース WAR ファイルのコンテキスト・ルートです。

: 以下のパターンを使って、JSP を theme_*.html から直接アドレス指定することもできます。
 <a rel="dynamic-content" href="res:/CustomTheme8Dynamic/themes/html/dynamicSpots/footer.jsp "></a>)

名前: Custom80theme_footer

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/footer.jsp

名前: Custom80theme_crumbTrail

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/crumbTrail.jsp?rootClass=wpthemeCrumbTrail&startLevel=2

名前: Custom80theme_topNav

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeHeaderNav&startLevel=0&primeRoot=true

名前: Custom80theme_primaryNav

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemePrimaryNav%20wpthemeLeft&startLevel=1

名前: Custom80theme_secondaryNav

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/navigation.jsp?rootClass=wpthemeSecondaryNav&startLevel=2&levelsDisplayed=2

名前: Custom80theme_commonActions

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/commonActions.jsp

名前: Custom80theme_pageModeToggle

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/pageModeToggle.jsp,wp_toolbar

名前: Custom80theme_head

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/head.jsp

名前: Custom80theme_status

  • 値: res:/CustomTheme8Dynamic/themes/html/dynamicSpots/status.jsp, wp_status_bar

3. WebSphere Portal を再起動します。

4. ここで、theme_*.html のコンテンツ・スポットを以下のように適用する必要があります。

a) Eclipse で、「CustomTheme8Static/WebContent/themes/Portal8.0/nls/theme_en.html」 を開きます (これは、ソリューションのサポート対象となるローカライズされた theme_*.html ファイルすべてに対して実行する必要があります)。

b) 以下のコンテンツ・スポットを新しい名前と置換します。

80theme_footer → Custom80theme_footer
80theme_crumbTrail → Custom80theme_crumbTrail
80theme_topNav → Custom80theme_topNav
80theme_primaryNav → Custom80theme_primaryNav
80theme_secondaryNav → Custom80theme_secondaryNav
80theme_commonActions → Custom80theme_commonActions
80theme_pageModeToggle → Custom80theme_pageModeToggle
80theme_head → Custom80theme_head
80theme_status → Custom80theme_status

c) また、bootstrap.jspf ( CustomTheme8Dynamic/WebContent/themes/html/bootstrap.jspf ) の以下のパスを WebDAV から新しい WAR ファイルに変更します。

URI davURI = pocSvc.createURI("dav","fs-type1/common-resources/ibm/css/portal/ibmPortlets.css");

上記を以下に変更

URI davURI = pocSvc.createURI("war","CustomTheme8Static/common-resources/ibm/css/portal/ibmPortlets.css");

デバッグ

テーマをより効率的に処理し、WebSphere Portal Server を再起動せずに変更を表示するには、開発システムに以下の設定を行うことをお勧めします (ただし実稼働では必ず削除してください)。

1. 静的リソースの再ロードを有効にするために、Default.jsp に対してリスト 2 に示す変更を行います (CustomTheme8Dynamic/WebContent/themes/html/Default.jsp – 以下の25 行目):

リスト 2. 静的リソースの再ロードを有効にするための変更
--%><r:dataSource uri='<%="spa:" + pageContext.getAttribute("currentNavNodeID", 
PageContext.REQUEST_SCOPE)%>' escape="none"><%-- 
	--%><r:param name="themeURI" value="${themeTemplateURI}"/><%-- 
	--%><r:param name="mime-type" value="text/html"/><%-- 
	--%><r:param name="max-age" value="2"/><%-- 
--%></r:dataSource><%--

2. また、

CustomTheme8Dynamic/WebContent/WEB-INF/ibm-web-ext.xmi

および

CustomTheme8Static/WebContent/WEB-INF/ibm-web-ext.xmi

が以下のように設定されていることも確認します。

reloadingEnabled="true"

デプロイメント・スクリプトとデプロイメント

テーマは WebDAV 経由ではデプロイされないため、自動的に登録されることはなく、テーマとスキンを Portal に登録するには XML アクセスが必要です。添付のサンプル・スクリプトは、以下の 1 つの新しいテーマを登録します。

  • Custom Portal 8.0

また、以下の 3 つのスキンも登録します。

  • Custom Portal 8.0 - 標準

  • Custom Portal 8.0 - スキンなし

  • Custom Portal 8.0 - 非表示

ここで、「非表示」は標準スキンです。さらに、「2ColumnEqual」レイアウト・テンプレートが標準として設定されます。

1. XML Admin Portlet を使用して、または以下の xmlaccess コマンドでサンプル XML である「RegisterCustomTheme.xml」をインポートします。

./xmlaccess.sh/bat -user -password wpsadmin -url :/wps/config -in RegisterCustomTheme.xml -out result.xml

2. 最後の手順として、EAR ファイルを Application Server にデプロイする必要があります。これは以下のように手動で行うことができます。

a) EAR プロジェクト (CustomTheme8EAR) を右クリックして「エクスポート」をクリックし、「EAR ファイル」をクリックします。
b) 名前とエクスポート先を定義して、「終了 (Finish)」をクリックします。

または、ホット・デプロイメントを実行することもできます。これは特にデプロイメント・プロセス中に便利です (これらの手順は、RAD と Portal を同じマシンで実行していることを前提とします)。

(: ホット・デプロイメントを有効にするには、エラーを含むプロジェクトを公開できるようにする必要があります。これを行うには、「ウィンドウ」 --- 「設定」 --- 「サーバー」 --- 「WebSphere Application Server」を選択して、「エラーを含むアプリケーションのサーバーでの公開を許可」を有効にします。)

1. EAR プロジェクト (CustomTheme8EAR) を右クリックして「実行」 --- 「サーバーで実行」を選択します。
2. ドロップダウン・リストから「手動で新規サーバーを定義」と「WebSphere Portal v8.0 Server」を選択します。
3. サーバーのホスト名を入力して任意のサーバー名を定義します。
4. サーバー・ランタイム環境には、「新規ランタイム環境の作成」が示されます (初めて作成する場合)。将来のデプロイメントをスピードアップするために、「このプロジェクトを実行するときは、このサーバーを常に使用」を選択して「次へ」をクリックします。
5. 「WebSphere Portal」と「AppServer」の場所を入力して、管理ユーザーのパスワードを入力し、「次へ」をクリックします。
6. Portal と WAS 管理ユーザーのパスワードを入力して自動ログインを有効にし、「次へ」をクリックします。
7. 設定を確認して、正しければもう一度「次へ」をクリックします。
8. 「CustomTheme8EAR」はデプロイ対象として事前選択されているはずです。「終了 (Finish)」をクリックします。

これでテーマがサーバーにデプロイされています。

最後に、テーマをページに割り当てる必要があります。

1. テーマが変更されるページに移動して、「編集モード」をクリックします。
2. 「概要」タブで (吹き出し表示の) 「編集」を選択します。
3. 「ライトボックス」の「詳細」タブを選択して、テーマとして「カスタム・ポータル 8 (Custom Portal 8)」を選択します。
4. 「保存」をクリックして設定を適用します。

以上です。これで変更が実行されました (例えば CustomTheme8Static/WebContent/themes/Portal8.0/nls/theme_en.html に対して)。変更はサーバーに再デプロイした後、確認できるようになります。

結論

本記事では、RAD を使用して EAR ファイルとしてデプロイするためにテーマをセットアップする方法を学習しました。これは実際のテーマ開発を開始するにあたっての良い足掛かりとなります。WebSphere Portal 7002 および 8 に導入された新しい機能を最大限に活用するために、製品資料トピック 「Developing themes and skins(英語)」 および 「Exceptional Web Experience for WebSphere Portal 8.0」 の Wiki 記事によって理解を深めることができます。

リソース

developerWorks WebSphere Portal ゾーン:
http://www.ibm.com/developerworks/websphere/zones/portal/(英語)

IBM WebSphere Portal V8.0 および IBM Web Experience Factory V8.0 は、統合されたソーシャルで最適化されたコンテキスト・マルチチャネル・オンライン・エクスペリエンスを実現する新しい機能を提供します。
http://www-01.ibm.com/common/ssi/cgi-bin/ssialias?subtype=ca&infotype=an&appname=iSource&supplier=897&letternum=ENUS212-132(英語)

WebSphere Portal フォーラム:
http://www.ibm.com/developerworks/forums/forum.jspa?forumID=168(英語)


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


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=855935
ArticleTitle=IBM WebSphere Portal 8 テーマのデプロイと開発:ステップバイステップ・ガイド
publish-date=02012013