前提条件

HTML、JavaServer™ Pages (JSP)、カスケード・スタイルシート (CSS)、および JavaScript™ の基本を十分に理解している必要があります。Websphere Portal V6.1.5 上に構築された Lotus Quickr 8.5 では、既存のポータル・ページ・ビルダー・テーマへの拡張としてテーマが提供されます。この記事を最大限に活用するには、IBM WebSphere Porta V6.1.5 のページ・ビルダー・テーマに習熟していることも必要です。ポータル・テーマのカスタマイズの詳細については、「WebSphere Portal 6.1.5 インフォメーション・センター」を参照してください。

上に戻る

はじめに

テーマは、親 JSP ファイル (Default.jsp) を構成するファイル群と、親 JSP の後続フラグメントによって成り立っています。フラグメント JSP は親 JSP 内からインクルードされ、規則として JSPF という拡張子で保存されます。テーマ JSP に加え、テーマ自体もまた、イメージ・ファイル (テーマのグラフィック)、スタイルシート、JavaScript ファイル、および Dojo ウィジェットで構成されます。次のセクションでは、テーマのレイアウトの詳細と、テーマのさまざまな要素の変更方法について説明します。

テーマのレイアウト

前のセクションで述べたように、テーマはフラグメントに分けられます。これらのフラグメントが親 JSP ファイルを通じて集められ、相互に組み合わされてテーマとなります。テーマの主なフラグメントは次のとおりです。

• グローバル・ナビゲーション
• タイトル・バー
• プレース・バー
• サイド・ナビゲーション
• ポートレット・レンダリング領域
• フッター

これらのフラグメントのレイアウトを図 1 に示します。

テーマをシンプルに保つために、レイアウトの各セクションには、JSP または JSP フラグメントが 1 つ存在します。たとえば、globalNav.jsp はグローバル・ナビゲーションをレンダリングするために作成されます。同様に、topNav.jspf と sideNav.jspf は、それぞれタイトル・バーとサイド・ナビゲーションをレンダリングするために作成されます。テーマ JSP の簡単な構造を図 2 に示します。

上に戻る

テーマのカスタマイズ

テーマのカスタマイズは、シンプルなスタイルシートの変更 (ページへの新しいカラー・スキームの追加など) から、高度な変更 (テーマの既存要素の変更) までの広い範囲に及び、カスタム・アプリケーションとコンポーネントとの統合を必要とする変更も可能です。次のセクションでは、テーマをカスタマイズする基本的なメカニズムを説明するとともに、テーマ・レイアウトの変更や新規コンポーネントの統合といった高度なシナリオも取り上げます。

カスタム・テーマの作成

製品内のデフォルトのテーマとスキンは、QuickrThemeApp.ear という名前の EAR ファイルにデプロイされています。これらの変更を行うには、サーバーへの管理者アクセス権が必要です。カスタムのテーマまたはスキンを作成するには、QuickrThemeApp.ear を一時的な場所にコピーし、そのファイルを変更します。新しいテーマは、新規 EAR ファイルとしてパッケージ化およびデプロイされます。

重要: テーマに変更を加える前に、カスタム・テーマを作成してください。暫定 Fix をテーマに適用する、または通常の Fix Pack を追加すると、オリジナルの Lotus Quickr テーマが再デプロイされることがあります。

テーマ EAR ファイルを作成する手順の詳細を以下に示します。

1. デフォルト・テーマのファイル wp_profile/installableApps/QuickrThemeApp.ear を一時的な場所にコピーします。
2. QuickrThemeApp.ear ファイルを解凍します。
3. QuickrThemeApp.ear/META-INF/application.xml ファイルを変更し、固有の表示名、モジュール ID、およびコンテキスト・ルートを追加します。
4. EAR ファイルを再ビルドします。新規 EAR ファイルには、元の QuickrThemeApp.ear ファイルと異なる名前を付ける必要があります。
5. 新規 EAR ファイルをコピーしてサーバーに戻すことにより、デプロイします。WebSphere Portal 6.1.5 インフォメーション・センターの「テーマのデプロイ」を参照してください。
6. 新しいテーマとスキンを登録します。カスタム・テーマをインポートするサンプルの xmlaccess スクリプトをリスト 1 に示します。

メモ: このカスタム・テーマ・アプリケーションを識別するために、(ステップ 3 で追加した) 固有のコンテキスト・ルートをこのスクリプト内で指定する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<request xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="PortalConfig_6.1.0.xsd" 
type="update" create-oids="true">
    <portal action="locate">
        
        <skin action="update" active="true" default="false" domain="rel" 
        objectid="ibm.portal.skin.qkr_custom" uniquename="ibm.portal.skin.qkr_custom" 
        resourceroot="QkrSkin" context-root="/QuickrTheme_custom" type="default">
            <localedata locale="en">
                <title>QkrSkin_custom</title>
            </localedata>
        </skin>
        <skin action="update" active="true" default="false" 
        domain="rel" objectid="ibm.portal.skin.qkrthin_custom" 
        uniquename="ibm.portal.skin.qkrthin_custom" resourceroot="QkrThinSkin" 
        context-root="/QuickrTheme_custom" type="default">
            <localedata locale="en">
                <title>QkrThinSkin_custom</title>
            </localedata>
        </skin>
        <theme action="update" active="true" 
        context-root="/QuickrTheme_custom" default="false" 
        defaultskinref="ibm.portal.skin.qkr_custom" domain="rel" 
        objectid="ibm.portal.theme.qkrtheme_custom" resourceroot="Quickr" 
        uniquename="ibm.portal.theme.qkrtheme_custom">
            <localedata locale="en">
                <title>QkrTheme_custom</title>
            </localedata>
            <allowed-skin skin="ibm.portal.skin.qkr_custom" 
            update="set"/>
            <allowed-skin skin="ibm.portal.skin.qkrthin_custom" 
            update="set"/>
        </theme>       
        		
    </portal>
</request>

詳細については、WebSphere Portal 6.1.5 インフォメーション・センターの「テーマのインポート」を参照してください。

カスタムのテーマとスキンは、「ホーム」->「拡張管理」->「ポータル・ユーザー・インターフェース」->「テーマとスキン」のリストに表示されます。

最初のデプロイメントでは、テスト用のページまたはプレースを作成し、カスタム・テーマを適用します。「プレースのアクション」->「プレースの編集」を使用すると、テーマをプレースに割り当てられます。テーマを変更し、ユニットをテストしたあと、サーバーのデフォルト・テーマをカスタム・テーマへと更新します。この作業は、｢拡張管理｣の「テーマとスキン」ページで実行できます。既存のプレースでデフォルト以外のテーマを使用するよう設定されていない限り、すべてのプレースが自動的に更新されて、カスタム (デフォルト) テーマが使用されます。

テーマ・ファイルの変更

前のセクションで述べたように、テーマは、テーマの表示セマンティクスを定義する JSP とスタイルシートのセットで構成されています。Lotus Quickr 8.5 のテーマ・スタイルシートは、テーマ、プレース・カタログ、および Lotus Quickr の個々のコンポーネント (ブログ、ライブラリーなど) を含む複数のコンポーネント間で共有されます。また、Lotus Quickr チーム・プレース、プレース・カタログ、およびプレース管理に共通するレイアウト・パーツ (たとえば、フッター) もあります。これらのすべてのリソースは、共通リソース・アプリケーション下にわかりやすく個別にバンドルされています。テーマ・アプリケーションおよび共通リソース・アプリケーションの場所を以下に示します。

テーマ:

共通リソース:

この記事の残りの部分では、上記のテーマの場所を「theme_root ディレクトリー」と表記し、共通リソース・アプリケーションの場所を「common_resources_root ディレクトリー」と表記します。

重要: カスタムの共通リソース EAR ファイルを作成してデプロイしてください。作業方法については、「カスタム・テーマの作成｣セクションの手順に従います。

スタイルシートの追加

Lotus Quickr 8.5 には、すぐに使えるスタイルシートのセットが含まれています。これらのスタイルシートは、Lotus Quickr のカスタム・パレットから選択して適用できます。利用できるスタイルシートとチーム・プレースに適用されたサンプルのカラー・スキームを図 3 に示します。

すぐに使えるスタイルシートの中に希望するカラー・スキームがない場合は、新しいスタイルシートを作成し、カスタム・パレットに追加して、選択的にプレースに適用できます。あるいは、(共通リソース・アプリケーション内の) デフォルト・スタイルシートを変更し、すべてのプレースと Lotus Quickr ホーム・ページのカラー・スキームを更新することもできます。

カスタム・スタイルシートの作成

スタイルシートは、素早く簡単に作成できます。テーマで使用されるカラーが数種類だけの場合は、新しいカラー・スキームに一致するカラー・コードで既存のカラー・コードを置き換えることにより、既存のスタイルシートから新規スタイルシートを作成できます。スタイルシートで更新する主な色は次のとおりです。

• 本文の背景
• テキスト、ボタンのテキスト、タイトル (選択された状態と選択解除された状態の両方)
• テキスト、ボタンのテキスト、タイトル (選択された状態と選択解除された状態の両方) ボタンの背景色
• 背景および境界線を含むサイド・ナビゲーション

上記の要素の色は複数のスタイル・クラスで使用され、テーマ全体のカラー・スキームを構成します。これらの各要素に新しいカラー・コードを指定した後は、スタイルシート内の該当する各箇所で既存のカラー・コードを新規カラー・コードに置換できます。

パレットのカスタマイズ用に、スタイルシートを作成して追加する方法を以下の手順で示します。

1. 次の場所にある QuickrCommonResourcesApp.ear ファイルを開きます。
   
   custom_common_resources_root \css

   カスタマイズ・パレットの各スタイルに対応するフォルダー (greyTheme、purpleTheme など) のリストがあります。各フォルダーには、カラー・スキームを定義する 1 つのスタイルシートと、カラー・スキームに一致するイメージのセットが含まれています。

2. 2. 既存のスタイル・フォルダー (たとえば、greyTheme) をコピーして、カスタム・スタイルシートを定義します。このフォルダーを <yourCustomTheme> に名前変更します。また、スタイルシートも <yourCustomTheme>.css に名前変更します。
3. 自社のテーマ・カラーを含むようにカスタム CSS ファイルを更新します。変更を保存します。

   次に、カスタム・スタイルシートをカスタム・パレットで使えるようにする必要があります。

4. custom_theme_root\system\styles.json ファイルを開いて編集します。

   JSON ファイルには、カスタマイズ・パレットにリストされている各スタイルシートに対応するエントリーが含まれています。カスタム・スタイルシートのエントリーを追加するには、既存のエントリーをコピーし、カスタム・スタイルシートのパスを指すように ID を編集します。新規エントリーの例を示します。

   {'label':'<newLabel>','id':'<yourCustomTheme>/<yourCustomTheme>
.css','thumbnail':ibmPortalConfig.themeRootURI+'/images/changeStyle/
<yourCustomTheme>.gif','help':''}

メモ: このファイルにエラーがあると、サーバー上でカスタム・パレットをロードできなくなります。この問題が発生する場合は、ファイルをチェックし、コンマの欠落、開いたままの括弧、他の構文エラーがないか確認してください。

上記のステップを完了すると、使えるようになったカスタム・スタイルシートがシェルフに表示されます。カスタム・スタイルシートを図 4 に示します。

プレース・カタログ用のスタイルシートの更新

ログイン直後のページ (プレース・カタログ) には、使用可能なプレースのリストが表示されます。このページのスタイルは、共通リソース・アプリケーションに格納されている JSP を使用して設定されます。カスタム・スタイルシートをプレース・カタログ・ページに適用する方法を以下の手順で示します。

1. Copy the custom_common_resources_root\defaultTheme\commonstyles.jsp ファイルを custom_common_resources_root \<yourCustomTheme> フォルダーにコピーします。
2. custom_common_resources_root \<yourCustomTheme>\commonStyles.jsp ファイルを開き、defaultTheme.css ファイルを <yourCustomTheme>.css ファイルに置換します。
3. 最後に、次のようにテキスト行を置換して、リストされている JSP を編集します。
   
   

   置換する JSP:

   1. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/catalog.jsp
   2. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/search.jsp
   3. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/templates.jsp
   4. wp_profile/installedApps/qkr/placeCntrApp.ear/placeCntrAppUI.war/WEB-INF/jsp/noPermission.jsp
   5. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/PlaceSearchCenter.jsp
   6. wp_profile/installedApps/qkr/searchApp.ear/searchCenterUI.war/WEB-INF/jsp/ECMSearchCenter.jsp

   次のテキスト行を置換します。

   <link rel="stylesheet" href="${commonRes}/css/defaultTheme/
commonstyles${rtlSuffix}.jsp" type="text/css" />

   以下のように置換します。

   <link rel="stylesheet" href="${commonRes}/css/
<yourCustomTheme>/commonstyles${rtlSuffix}.jsp" type="text/css" />

変更を保存してブラウザーを更新すると、カスタム・スタイルシートがプレース・カタログ・ページに適用され、新たな表示となります。

上に戻る

デフォルト・スタイルシートの更新

ロゴ

To update to your company logo, drop in the new logo to replace the following files:

• custom_theme_root\css\images\logo_black.png
• custom_theme_root \css\images\logo_white.png
• custom_theme_root \css\images\logo.png

ロゴのスタイル・クラスは themeroot\css\themeStyles.jsp ファイルに圧縮されています。ロゴの高さ、幅、背景色などを調整するには、この JSP を更新します。

グローバル・ナビゲーションとプレース・タブ

ページの一番上にあるナビゲーション・リンクは、Lotus Quickr のすべてのページで一定の位置に表示されます。これらのリンクは、グローバル・ナビゲーション・リンクと呼ばれています。レンダリングされた、すぐに使えるグローバル・ナビゲーションを図 5 に示します。

既存のグローバル・ナビゲーションは、Dojo ウィジェットによってレンダリングされます。Dojo に変更を加えなくても、ナビゲーション・バーを変更できます。ナビゲーションにエントリーを追加する方法の例を以下の図 6 とリスト 2 に示します。

<ul id="quickrGlobalNav" class="lotusInlinelist lotusLinks">
<li class="lotusSelected"><a href="/places">Places</a></li>
<li class="lotusInlinelist"><a href="http://yourPortalURL">Portal</a></li>

</ul>

同様に、custom_theme_root\topNav.jspf ファイルを編集することにより、プレース・タブ行を変更できます。リスト 3 のコード・スニペットにより、別のタブがプレース・タブ行に追加されます (図 7 参照)。

<ul class="lotusTabs lotusLeft" style="width: 50%" id="quickrTopNav">
<li class="lotusFirst">
<a href="/places/publicplaces">Public Places</a></li>
    <li class="lotusFirst">
    <a href="/places/myplaces">My Places</a></li>
    <li class="lotusFirst">
    <a href="http://yourcustomURL">Custom Service</a></li>
</ul>

別の方法として、既存のウィジェット・コードを使用して、LotusQuickr の構成ファイルに追加されたカスタム・サービスへのリンクを作成することもできます。Lotus Quickr 構成サービスにカスタム・サービスを追加する方法の詳細については、「Lotus Quickr 8.5 Information Center」の手順を参照してください。

サイド・ナビゲーション

左ナビゲーションとも呼ばれるサイド・ナビゲーションによって、Lotus Quickr プレースの内部にページがレンダリングされます。デフォルトでは、サイド・ナビゲーションは Dojo ウィジェットを使用して作成されます。ユーザーは、サイド・ナビゲーションを変更することにより、カラー・スキームや要素レイアウトを編集したり、エントリーを追加したりすることができます。色や他の表示セマンティクスは、共通リソース・アプリケーション内の CSS を更新することで変更できますが、既存の「メンバー」リンクと同様のリンクを追加するなどの変更は、<themeroot> にある sideNav.jspf ファイルへの変更が必要です。

サイド・ナビゲーションにエントリーを追加する方法の例をリスト 4 に示します。

<ul>
     <li <c:if test="${!inPlace}">class="lotusSelected"</c:if>>
        <a id="membersLink" href="${appMembers}
        &mp=${mp}&mr=${mr}&eap=${eap}'
        cp=${colorPalette}<%= ref %>" <c:if 
        test="${!inPlace}">style="cursor:pointer"</c:if>>
        <portal-fmt:text key="view.membership" 
        bundle="nls.quickr" /></a>
     </li>
     <li><a href="">Item 1</a></li>
     <li><a href="">Item 2</a></li>
     <li><a href="">Item 3</a></li>
     \</ul>

色、メニュー・スタイル、およびレイアウトを更新したサイド・ナビゲーション・メニューのサンプルを図 8 に示します。サイド・ナビゲーションに適用されたスタイルは、共通リソース・アプリケーションに格納されています。

カスタマイズ・シェルフ

カスタマイズ・シェルフは、プレース・マネージャーがプレースをカスタマイズするための場所であり、利用可能な多数のページ・レイアウト、カラー・テーマ、および Lotus Quickr コンポーネントから選択することによってカスタマイズできます。マネージャーではないプレース・ユーザーは、カスタマイズ・シェルフを利用できません。

カスタマイズ・シェルフは、「コンテンツの追加」、「レイアウトの変更」、「スタイルの変更」という 3 つのタブで構成され、いつでも利用できます。「コンテンツの追加」はコンポーネントをプレースに追加するために使用されるのに対し、「レイアウトの変更」と「スタイルの変更」には、プレースの表示をカスタマイズするレイアウトとスタイルシートが含まれています。

前のセクション「スタイルシートの追加」では、スタイルシートを作成し、カスタム・テーマに追加する方法を説明しました。同様に、custom_theme_root\new_quickr.json ファイルを編集し、カスタム・コンポーネントをシェルフに追加できます。追加したカスタム・コンポーネントは、Lotus Quickr の各プレース・マネージャーから利用できます。

コンポーネントをカスタマイズ・シェルフに追加するために必要な変更を以下の手順で示します。

1. custom_theme_root \new_quickr.json ファイルを開いて編集します。
   
   

   JSON ファイルには、カスタマイズ・パレットにリストされている各コンポーネントに対応するエントリーが含まれています。カスタム・コンポーネントのエントリーを追加するには、既存のエントリーをコピーし、カスタム・コンポーネントの値ラベルを編集します。値ラベルには、component_title、description、portletID (ポートレットの uid)、id (ポートレットの uid)、および thumbnail があります。リスト5 に、新規エントリーの例を示します。

   
   
   リスト 5. エントリーの例: new_quickr.json
   

   {'label':'CustomComponent’, 'component_title':' CustomComponent ', 'description':'This is my custom component', 'applicationID':ibmPortalConfig.appID, 'portletID':'wps.p.teamCalendar', 'id':'wps.p.teamCalendar', 'redirect':'true', 'nodesOnLevel':ibmPortalConfig.nodesOnLevel, 'samePage':'true', 'cmdUrl':ibmPortalConfig.myurl, 'thumbnail': 'class:qkrSprite-components qkrSprite-components-events-16x16'}

   
   

これらステップを完了すると、使用可能になったカスタム・コンポーネントがシェルフに表示されます。

ヒント: 新規エントリーを最後のエントリーとして JSON ファイルに追加する場合は、直前の行末にコンマを挿入し、正しいファイル・フォーマットを維持します。このファイルにエラーがあると、サーバー上でカスタム・パレットをロードできなくなります。

カスタマイズ・シェルフへのカスタム・コンポーネントの追加に関する詳細については、Lotus Quickr Wiki の記事「Adding components to customize shelf: qp85」を参照してください。

フッター

テーマ・ページの一番下のセクションがテーマ・フッターであり、テーマ・フッターは Lotus Quickr プレースのすべてのページ、プレース・カタログ、およびプレース管理ページで共通です。共通フッターは、Lotus Quickr 共通リソース・アプリケーションに含まれています。フッター JSP をカスタマイズして、エントリーの追加と削除、レイアウトの変更、またはフッター・スタイルの変更を行うことができます。custom_common_resources_root/jsp/footer.jsp ファイルにアクセスすることにより、テーマ・フッターに変更を加えられます。

上に戻る

スキンのカスタマイズ

ポートレット・スキンは、ポートレットを包み込むラッパーです。ポートレット・タイトル、ポートレット・メニュー・アクション、およびポートレット領域を示す境界線は、すべてスキンによってレンダリングされます。スキンはテーマ EAR 内にバンドルされ、次の場所にあります。

Lotus Quickr に表示されるデフォルト・スキンを図 9 に示します。

Lotus Quickr には、すぐに使える 2 つの主なスキンが含まれています。

• XQkrSkin (Lotus Quickr テーマで使用されるデフォルト・スキン)
• QkrThinSkin

ユーザーは必要に応じてどちらかのスキン・タイプを選択できます。デフォルトの QkrSkin は図 9 のように表示されますが、QkrThinSkin ではスキン・ラッパーが非表示になり、マウス・ポインターがポートレット領域の上に位置する場合にのみ表示されます。同様に、ユーザーがカスタム・スキンを作成して、プレースに適用することもできます。QkrThinSkin で表示したプレースを図 10 に示します。

この表示では、ポートレットの回りにスキン・ラッパーがないことに注目してください。ただし、ポートレットにマウス・ポインターを移動すると、ラッパーが表示されます。このラッパーは、スキンをまったく表示しないカスタマイズや、ポートレット・メニューだけを常に表示するカスタマイズが可能です。

上に戻る

変換ファイル

Lotus Quickr テーマの言語バンドルは、次の場所にあります。

\portalserver\shared\app\nls\quickr_xx.properties.

これらのファイルは、quickr_[language].properties という名前パターンに従います。新しいリソース・バンドルをディレクトリーに追加することにより、新規ストリングをテーマに追加できます。リソース・バンドルの追加に関する詳細については、「WebSphere Portal インフォメーション・センター V6.1.5」を参照してください。

上に戻る

まとめ

この記事では、Lotus Quickr 8.5 でのテーマのカスタマイズに関する一般的なシナリオについてまとめました。この記事で説明した情報を活用することにより、テーマを作成する準備が整い、独自のテーマを作成できます。この記事は、テーマのさまざまな部分の変更方法を理解するためのガイドとしてご使用ください。

参考文献

• Read the developerWorks® article, "Customizing themes in IBM Lotus Quickr services for IBM WebSphere Portal 8.0."
  
  
• See the Lotus Quickr 8.5 for WebSphere Portal documentation.
  
  
• See the Lotus Quickr wiki.
  
  
• IBM WebSphere Portal バージョン 6.1.5 インフォメーション・センターへようこそ
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• 前提条件
• はじめに
• テーマのカスタマイズ
• デフォルト・スタイルシートの更新
• スキンのカスタマイズ
• 変換ファイル
• まとめ
• 参考文献
• 著者について
• コメント