ヘッダーをスキップ
Oracle® Fusion Middleware Oracle WebCenter Portal開発者ガイド
11g リリース1 (11.1.1.7.0)
B72084-02
  ドキュメント・ライブラリへ移動
ライブラリ
製品リストへ移動
製品
目次へ移動
目次
索引へ移動
索引

前
 
次
 

14 スキンの作成および管理

スキンは、アプリケーションの外観を定義します。スキンを使用すると、アプリケーション内の全ページである程度の整合性を達成でき、自社に適したルック・アンド・フィールを実現できます。

この章では、スキンの作成および管理の方法について説明します。次の項が含まれます:

14.1 スキンの概要

スキンを使用すると、色、フォント、イメージ、およびアプリケーション・コンポーネントの高さや幅などのディメンションの詳細を定義して、自社に適したルック・アンド・フィールを表すことができます。

スキンは、Cascading Style Sheet (CSS)仕様に基づいています。スキンは、アプリケーション・コンポーネントのスタイルを定義する種々のスキン・セレクタを含むCSSファイルです。スタイル関連のプロパティを変更することにより、任意のコンポーネントのルック・アンド・フィールを調整できます。アプリケーション内でスキンを使用すると、各コンポーネントに対して個別にスタイルを指定したり、各ページにスタイルシートを挿入する必要がなくなります。各コンポーネントで自動的に、スキンで定義されているスタイルが使用されます。スキンにより、ポータル・ページ自体を変更せずにアプリケーションの外観を変更できます。

ADF Facesスキンでは、WebCenter Portalアプリケーションのルック・アンド・フィールを制御します。ADF Facesでは、fusionblafplus-richblafplus-mediumsimpleなどの様々なビルトイン・スキンがすぐに使える状態で用意されています。デフォルトで、Frameworkアプリケーションは、fusionFx-v1.desktopスキンの拡張であるportalスキンを使用します。

アプリケーションで使用できる組込みスキンがビジネス要件に合ない場合、Oracle JDeveloperで独自のカスタム・スキンを作成できます。カスタム・スキンで作業する際には、スキン関連ファイル(adf-config.xmltrinidad-config.xmlおよびtrinidad-skins.xml)の編集が必要となることがあります。これらのファイルの詳細は、第14.10項「スキン関連のファイル」を参照してください。

Oracle WebCenter Portalはスキンの実行時管理をサポートしているため、アプリケーション・ユーザーはアプリケーションのデプロイ後でも、ポータルの開発を続行できます。実行時管理を有効にすると、権限のあるアプリケーション・ユーザーは、アプリケーションを再デプロイしなくても、実行時にスキンを作成および管理できます。実行時に作成されたスキンを設計時に戻し、編集してデプロイ済アプリケーションにアップロードできます。詳細は、第14.4項「スキンの実行時管理の有効化」を参照してください。

JDeveloperでは、WebCenter PortalのSpacesアプリケーションで使用する新しいスキンを作成できます。JDeveloperでは、もともとSpacesで作成したスキンを編集し、その編集済スキンをSpacesにアップロードして戻すこともできます。詳細は、第14.6項「Spacesのスキンを作成および管理する方法」を参照してください。

14.2 JDeveloperでのスキンの作成

デフォルトで、Frameworkアプリケーションは、portal-skin.cssファイルで定義されるportalスキンを使用します。このファイルは必要に応じて簡単に編集できます。ただし、アプリケーションでカスタム・スキンを使用する場合は、CSSファイルを作成して、必要なスキン・セレクタを定義する必要があります。

この項には次のサブセクションが含まれます:

14.2.1 スキン作成に関する必要な知識

デフォルトでは、CSSファイルを作成すると、JDeveloperではそのファイルはファイル・システム上のAPPLICATION_ROOT/Portal/public_html/cssフォルダの下に格納されます。アプリケーション・ナビゲータで、図14-1に示すように、スキンはフォルダ階層で表示されます。

図14-1 JDeveloperのデフォルトの場所で作成されたスキン

JDeveloperのデフォルトの場所で作成されたスキン
「図14-1 JDeveloperのデフォルトの場所で作成されたスキン」の説明

ただし、このデフォルトの場所に作成されたスキンは、実行時には管理できません。権限のあるアプリケーション・ユーザーが実行時にスキンを管理できるようにするには、スキンをポータル・リソースとしてリソース・マネージャで公開する必要があります。スキンをポータル・リソースとして公開するには、次のパスでスキンを作成する必要があります。

APPLICATION_ROOT/Portal/public_html/oracle/webcenter/portalapp/skins

アプリケーション・ナビゲータでは、このスキンは図14-2に示されるようなフォルダ階層内にリストされます。

図14-2 ポータル・リソースとして作成されたスキン

ポータル・リソースとして公開するように作成されたスキン
「図14-2 ポータル・リソースとして作成されたスキン」の説明

CSSファイルの作成後、アプリケーション内の必須コンポーネントで必要なADF Facesスキン・セレクタを定義する必要があります。たとえば、.AFDefaultFontFamily:aliasセレクタを使用して、次のようにアプリケーションにフォント・ファミリを指定できます。

.AFDefaultFontFamily:alias {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

ポータル・リソースとして公開されたスキンに関連するイメージを、次の場所に保存する必要があります。

APPLICATION_ROOT/Portal/public_html/oracle/webcenter/portalapp/shared

競合やイメージが上書きされるのを避ける最良の方法として、イメージをsharedディレクトリの下のサブディレクトリに保存できます。イメージ参照を追加するには、次の例に示された形式を使用します。

.AFBrandingBarLogo {
  background-image:
url('/oracle/webcenter/portalapp/shared/skins/images/image1.gif');

14.2.2 CSSファイルを作成する方法

CSSファイルを作成するには:

  1. Oracle JDeveloperでアプリケーションを開きます。

  2. 「CSSレベル3」および「ADF Faces」が選択されていることを確認します。

    1. メニュー・バーから、「ツール」「プリファレンス」「CSSエディタ」の順に選択します。

    2. 「CSSレベルをサポート」リストから、「CSSレベル3」を選択します。

    3. 「サポート対象コンポーネント」に対して、「ADF Faces拡張機能」を選択します。

  3. 「ポータル」プロジェクトを選択し、「ファイル」メニューから、「新規」を選択します。

  4. 「新規ギャラリ」ダイアログの「カテゴリ」で、「Web層」を開き、「HTML」を選択します。

  5. 「CSSファイル」を選択し、「OK」をクリックします。

  6. 「Cascading Style Sheetの作成」ダイアログの「ファイル名」フィールドに、スキンの名前を入力します。

  7. 「ディレクトリ」フィールドに、CSSファイルを作成する場所のパスを入力します。「参照」ボタンを使用して、そのパスを指定します。


    注意:

    Frameworkアプリケーションで、スキンを実行時リソース・マネージャで公開できるようにするには、次のパスのskinsルート・ディレクトリの下か、そのサブディレクトリにスキンを作成する必要があります。

    APPLICATION_ROOT/Portal/public_html/oracle/webcenter/portalapp/skins


  8. 「OK」をクリックします。

    スキンのCSSファイルが「ソース・ビュー」で開きます。

    これで、スキンに必要なスキン・セレクタを定義できます。詳細は、第14.2.3項「スキン・セレクタを定義する方法」を参照してください。

14.2.3 スキン・セレクタを定義する方法

ADF Facesスキン・セレクタを使用して、アプリケーションの様々なコンポーネントのルック・アンド・フィールを定義します。

詳細の参照先は、次のとおりです。

  • ADF Facesスキン・セレクタの概要は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・セレクタに関する項を参照してください。スキンで使用できるセレクタについては、Oracle JDeveloperのオンライン・ヘルプも参照してください。これらの情報は、JDeveloperのオンライン・ヘルプのFusionのADF Facesコンポーネントのスキン・セレクタ、およびFusionのデータ視覚化ツール・コンポーネントのスキン・セレクタを参照してください。

  • ADF Facesコンポーネントのスタイル・セレクタの定義は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・プロパティの定義に関する項およびコンポーネントのスタイル・プロパティの変更に関する項を参照してください。

14.3 portal-skin.cssの編集

この項には次のサブセクションが含まれます:

14.3.1 portal-skin.cssに関する必要な知識

デフォルトでは、Frameworkアプリケーションはportal-skin.cssスキン・ファイルを使用するように構成されます。このスキン・ファイルには種々の便利なスキン・セレクタのスケルトン構造が用意されていて、各スキン・セレクタの用途を説明するコメントアウト済のエントリが含まれています(図14-3)。

図14-3 portal-skin.cssファイル

portal-skin.cssファイル
「図14-3 portal-skin.cssファイル」の説明

portal-skin.cssを簡単に変更するだけで、デフォルトのスキン設定を要件に応じてカスタマイズできます。新規のスキン・セレクタをこのファイルに追加できます。必要な値を指定して、スキン・セレクタのデフォルト設定をオーバーライドすることもできます。たとえば、アプリケーション・コンテンツに16pxのフォント・サイズを設定するには、.AFDefaultFont:aliasスキン・セレクタを検索して、次の例の太字でマークされたコードを追加します。

.AFDefaultFont:alias
{
font-size:16px;
}

14.3.2 portal-skin.cssの編集方法

portal-skin.cssを編集するには:

  1. JDeveloperでアプリケーションを開きます。

  2. アプリケーション・ナビゲータで、次のフォルダ・パスにナビゲートします。PortalWeb Contentoraclewebcenterportalappskins

  3. portal-skin.cssを右クリックして、「開く」を選択します。

  4. ビジュアル・エディタで編集するスキン・セレクタを検索し、必要な設定を追加します。

    スキン・セレクタの詳細は、第14.2.3項「スキン・セレクタを定義する方法」を参照してください。

  5. portal-skin.cssを保存します。

14.4 スキンの実行時管理の有効化

この項には次のサブセクションが含まれます:

14.4.1 スキンの実行時管理の有効化に関する必要な知識

Frameworkアプリケーションのリソース・マネージャを使用すると、管理者権限のあるユーザーは、スキンなどポータル・リソースを実行時に作成および変更できるようになります。リソース・マネージャでスキンを公開することによって、管理者は実行時にそのスキンを管理できます。アプリケーションのデプロイ後にさらにスキンを作成して公開する場合には、JDeveloperからランタイム・アプリケーションにそれらを公開します。実行時に、リソース・マネージャには、エクスポートしたスキンをアップロードするオプションが用意されています。


注意:

実行時にスキンを作成した場合に、設計時環境にインポートして戻さないときは、新規スキンがアプリケーションの再デプロイ時に失われることがあります。詳細は、『Oracle Fusion Middleware Oracle WebCenter Portal管理者ガイド』のリソース・カスタマイズの保存に関する項を参照してください。


スキンの実行時管理を有効化するには、そのスキンをポータル・リソースとしてリソース・マネージャに追加する必要があります。スキンをポータル・リソースとして追加するには、そのスキンがAPPLICATION_ROOT/Portal/public_html/oracle/webcenter/portalapp/skinsディレクトリに配置されている必要があります。

スキンをポータル・リソースとして公開する際、特定の属性を設定する必要があります(図14-4)。表14-1では、スキンに固有の属性について説明します。汎用属性の詳細は、第16.2.1項「リソースをリソース・マネージャに追加する方法」を参照してください。


注意:

「コンテンツ・ディレクトリ」フィールドは、APPLICATION_ROOT/Portal/public_html/oracle/webcenter/portalapp/sharedディレクトリまたはその下のサブディレクトリを指す必要があります。これは、イメージ、JavaScript、スタイルシート、HTMLファイルなど、リソースの依存オブジェクトの格納場所のパスです。このパスに配置されたオブジェクトのみが、スキンのエクスポート・アーカイブに含まれ、実行時にアップロードされます。


図14-4 ポータル・リソースとしてのスキンの作成

ポータル・リソースとしてのスキンの作成
「図14-4 ポータル・リソースとしてのスキンの作成」の説明

表14-1 スキン固有の属性

プロパティ 説明

Skin ID

スキンの一意の識別子を指定します。通常、これはBrightBlue.desktopのような、スキン・ファミリとレンダリング・キットとの組合せです。

Skin Family

スキンが属するファミリを指定します。これは、様々なレンダリング・キットで多数のスキンにより使用される識別子です。たとえば、BrightBlueという名前のファミリがあるとします。これは、レンダリング・キットのdesktopまたはmobileで使用できます。

スキン・ファミリは、実際には、trinidad-config.xmlが特定の属性で適合するスキンを検索する際に使用する値です。

Skin Family属性が一意であることを確認してください。Frameworkアプリケーションでは、デフォルト・スキンはportal-skin.cssファイルで、スキン・ファミリはportalです。portalを他のスキンのスキン・ファミリのIDとして使用していないことを確認します。

Skin Extends

拡張するスキンのIDを指定します。

新規スキンを作成する場合、拡張するには、fusionFx-v1.desktopが最も一般的なスキンです。

表14-2に、Spacesで使用できる組込みスキンのスキンIDをリストします。



注意:

スキンはスキンIDにより内部で識別されます。JDeveloperで既存のカスタム・スキンをポータル・リソースとして追加する際には、Skin IDSkin FamilyおよびSkin Extendsの値を変更しないでください。さもないと、スキンをアプリケーションにアップロードしたときに、新規スキンとして含められ、既存スキンは置換されません。


Spacesのスキンの拡張

SpacesのスキンをJDeveloperに取り込んで、さらに開発することが可能です(第14.6項「Spacesのスキンを作成および管理する方法」)。新規スキンをJDeveloperで作成して、Spacesアプリケーションで使用することもできます。既存のスキンを拡張して新規スキンを作成できます。JDeveloperで、blafplus-rich.desktopfusion.desktopfusionFx-v1.desktopなどの組込みADF Facesスキンを拡張できます。Spacesで使用できる組込みスキンのいずれかを拡張することも可能です。表14-2にSpacesで使用できる組込みスキンのスキンIDをリストしています。

表14-2 Spacesでの組込みスキンのID

Spacesでの組込みスキン スキンID

フュージョンFX

webcenter-fusion.desktop

Spaces FX

webcenterfx.desktop


14.4.2 スキンの実行時管理を有効にする方法

スキンのCSSファイルのポップアップ・メニューから次のオプションを使用して、リソース・マネージャでスキンを登録、更新または登録解除します。

14.4.3 デプロイしたスキンのさらなる開発を有効にする方法

リソースの実行時管理を有効にすると、権限のあるユーザーは新規スキンを作成したり、実行時に既存のスキンを変更できるようになります。ユーザーがスキンを実行時に作成または編集する場合は、さらなる拡張のためにJDeveloperにスキンを戻す必要があることがあります。このタイプのラウンドトリップ開発には、次の内容が含まれます。

  • スキンのEARファイル取得のためにデプロイ済アプリケーションからスキンをダウンロードする

  • スキンのEARファイルをJDeveloperにインポートする

  • JDeveloperでスキンを編集する

  • JDeveloperでEARファイルとして編集したスキンをエクスポートする

  • EARファイルをデプロイ済アプリケーションにアップロードして戻す

この項では、JDeveloperでスキンをインポートおよびエクスポートする方法について説明します。次の項が含まれます:

デプロイ済アプリケーション内のリソースのダウンロードとアップロードに関する一般的な情報は、『Oracle Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド』のリソースのダウンロードに関する項とリソースのアップロードに関する項を参照してください。

14.4.3.1 スキンのインポート

スキンをデプロイ済アプリケーションからダウンロードすると、作成されるEARファイルには、スキンのCSSファイルおよびgeneric-site-resources.xmlファイル(ダウンロードしたスキン固有のメタデータが記述されています)が含まれるEARファイルが作成されます。

スキンのダウンロード後、EARファイルをJDeveloperにインポートする必要があります。インポートの際、CSSファイルが次のパスに抽出されます。

APPLICATION_ROOT/Portal/public_html/oracle/webcenter/siteresources/scopedMD/scope_GUID/

リソースのインポートの詳細な手順は、第16.4.2項「ポータル・リソースをJDeveloperにインポートする方法」を参照してください。

スキンのインポート後に、設計時に他のスキン・ファイルのようにCSSファイルを編集できます。スキンの編集の詳細は、第14.2.3項「スキン・セレクタを定義する方法」を参照してください。更新済のスキンをデプロイ済アプリケーションにエクスポートする必要があります。


注意:

スキンをデプロイ済アプリケーションからダウンロードしてから、それをJDeveloperにインポートして変更する場合には、Skin FamilySkin IDおよびSkin Extendsの属性値を変更しないでください。さもないと、スキンをデプロイ済アプリケーションにアップロードする際に、既存のスキンが置換されません。



注意:

インポート済スキンでイメージ(またはJavaScriptsやHTMLファイルなど、その他の依存オブジェクト)を編集または追加するには、イメージを次のパス(実行時に作成されたスキンのデフォルトのコンテンツ・ディレクトリ)に配置する必要があります。

APPLICATION_ROOT/Portal/public_html/oracle/webcenter/siteresources/scopedMD/shared/

イメージは常に、ポータル・リソースのコンテンツ・ディレクトリとして設定されているディレクトリのサブディレクトリの下または中に直接配置する必要があります。コンテンツ・ディレクトリ・パスは、「ポータル・リソースの更新」ダイアログにあります。

競合を避けるために、イメージをsharedディレクトリの下のサブディレクトリ内に配置できます。たとえば、イメージをskins/imagesサブディレクトリに配置できます。この場合、新しい場所を指すようにコンテンツ・ディレクトリ・パスを更新する必要があります。

イメージを追加すると、次の例で示すように、CSSファイルでそれを参照できるようになります。

.AFBrandingBarLogo {
background-image:url('/oracle/webcenter/siteresources/scopedMD/shared/skins/images/image1.gif');}

詳細は、第14.2.1項「スキン作成に関する必要な知識」を参照してください。


14.4.3.2 スキンのエクスポート

次のような場合、スキンのエクスポートは必要となることがあります。

  • デプロイしたアプリケーションからインポートして変更したスキンをコピーして戻します。

  • 新規スキンをデプロイ済アプリケーションで公開します。

スキンをJDeveloperにエクスポートすると、スキンのCSSファイルとgeneric-site-resources.xmlファイルが含まれたEARファイルが作成されます。管理者権限のあるユーザーは、この後、リソース・マネージャを使用してこのEARファイルをデプロイしたアプリケーションにアップロードできます。スキンをアップロードすると、実行時に管理および適用できるようになります。

リソースのエクスポートの詳細な手順は、第16.4.3項「ポータル・リソースをJDeveloperからエクスポートする方法」を参照してください。

14.4.4 JDeveloperでのスキンの作成および実行時における有効化

Frameworkアプリケーションをデプロイした後でも、設計時に新規スキンを作成して実行時に有効化できます。それには、次の手順を実行します。

  1. JDeveloperでスキンを作成します。詳細は第14.2項「JDeveloperでのスキンの作成」を参照してください。

  2. 「ポータル・リソースの作成」オプションを使用して、スキンをポータル・リソースとして追加します。詳細は第14.4.2項「スキンの実行時管理を有効にする方法」を参照してください。

  3. JDeveloperでスキンをポータル・リソースとしてエクスポートします。詳細は、第16.4.3項「ポータル・リソースをJDeveloperからエクスポートする方法」を参照してください。

  4. リソース・マネージャを使用して、スキンをランタイム・アプリケーションにアップロードします。詳細は、『Oracle Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド』のリソースのアップロードに関する項を参照してください。

14.4.5 実行時にスキンを作成および管理する方法

Frameworkアプリケーションで実行時の管理を有効にすると、権限のあるユーザーはリソース・マネージャを使用して、新規スキンの作成、スキンの編集、ソース・コードの編集、セキュリティの設定、表示または非表示、属性の設定、スキンの削除、アップロードおよびダウンロードといったタスクを実行できます。

図14-5に、スキンの「編集」メニューが表示されたリソース・マネージャを示します。

図14-5 実行時のスキンの管理

実行時のスキンの管理
「図14-5 実行時のスキンの管理」の説明

リソース・マネージャにアクセスする方法の詳細は、第16.3.2項「リソース・マネージャを実行時に使用する方法」を参照してください。デプロイ済Frameworkアプリケーションでスキンを使用する手順はSpacesアプリケーションの手順と同じです。実行時のスキンの作成および管理の一般的な情報は、『Oracle Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド』のスキンの使用に関する項を参照してください。

14.5 スキンのWebCenter Portal: Frameworkアプリケーションへの適用

異なるスキンをFrameworkアプリケーションに適用することもできます。実行時管理が有効になっている場合、権限のあるユーザーは実行時にスキンを変更できます。

この項には次のサブセクションが含まれます:

14.5.1 設計時におけるスキンの適用

設計時に、ポータル・リソースとして作成された別のスキンに切り替えるには、adf-config.xmlファイルを直接編集します。adf-config.xmlで設定できる属性の詳細は、第14.10.1項「adf-config.xml」を参照してください。

ポータル・リソースとして作成されたスキンを設計時にFrameworkアプリケーションに適用するには:

  1. JDeveloperで、アプリケーションのadf-config.xmlを開きます。

    このファイルをアプリケーション・ナビゲータで見つけるには、「アプリケーション・リソース」「ディスクリプタ」「ADF META-INF」の順に開きます。

  2. <portal:preferences>の下で、次のスキン・プロパティを検索します。

          <portal:preference id="oracle.webcenter.portalapp.skin"
                             desc="Default Portal Skin" value="portal"
                             resourceType="Skin" display="true"/>
    
  3. valueプロパティで、アプリケーションに適用するスキンのファミリ名を指定します。

    値は、必要なスキンの「ポータル・リソースの作成」または「ポータル・リソースの更新」ダイアログのSkin Family属性で指定された値と同じである必要があります。

  4. 必要に応じて、descプロパティで、適用するスキンの説明を指定します。

  5. adf-config.xmlを保存します。


注意:

APPLICATION_ROOT/Portal/public_html/oracle/webcenter/portalapp/skins以外の場所で作成したスキンを適用する場合には、そのスキンをtrinidad-skins.xmlファイルに登録して、そのスキンを使用するようにアプリケーションを構成する必要があります。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスタイルとスキンを使用した外観のカスタマイズに関する項の章を参照してください。


14.5.2 実行時におけるスキンの適用

リソースの実行時管理を有効にすると、必ずしもスキンを手動でアプリケーションに登録する必要はありません。実行時に目的のスキンをデプロイ済アプリケーションに適用できます。

実行時にデプロイ済Frameworkアプリケーションにスキンを適用するには:

  1. アプリケーション管理者としてログオンし、WebCenter Portal管理コンソールにナビゲートします。

  2. 「構成」タブをクリックします。

  3. 「デフォルト・スキン」リストから、必要なスキンを選択します(図14-6)。

    図14-6 実行時におけるスキンの適用

    実行時におけるスキンの適用
    「図14-6 実行時におけるスキンの適用」の説明

14.6 Spacesのスキンを作成および管理する方法

WebCenter PortalのSpacesアプリケーションには、すぐに使用できる特定のデフォルト・スキンが備わっています。これらのデフォルトのスキンが要件に適さない場合には、Spaces内で独自のスキンを作成できます。詳細は、『Oracle Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド』のスキンの使用に関する項の章を参照してください。

ただし、Spacesでは、必要とするすべての機能を備えたスキンを作成するためのコントロール機能がすべて提供されていない可能性があります。そのような場合は、JDeveloperで独自のスキンを作成してから、それをSpacesにアップロードできます。Spacesから既存のスキンをダウンロードして、それをJDeveloperで編集したり、いずれかのサンプル・スキンを起点として使用した後に、Spacesにアップロードして戻すこともできます。

WebCenter Portalには特別なJDeveloperワークスペース(DesignWebCenterSpaces.jws)が用意されており、スキンなどのリソースを開発してSpacesにアップロードする際に利用できます。第55章「JDeveloperを使用したSpacesアプリケーションの拡張」には、サンプルのワークスペースの場所、およびWebCenterSpacesResourcesプロジェクトを使用してカスタムのスキンやSpacesのその他のタイプのリソースを作成する方法が記載されています。

14.7 個別共有ライブラリとしてのスキンのデプロイ

Frameworkアプリケーションにカスタム・スキンを使用する際のベスト・プラクティスとして、カスタム・スキンを個別共有ライブラリとしてデプロイする必要があります。これは、アプリケーションと同じスキンを使用してレンダリングするポートレットをFrameworkアプリケーションに使用させる場合に、特に重要です。

14.7.1 スキン共有について

WebCenter Portal: Frameworkには、様々なデフォルトのスキンが用意されています。すべてのWebCenter Portalスキン・アーティファクトは、共有ライブラリ(oracle.webcenter.skin)で使用できます。共有ライブラリはEARとしてパッケージ化されており、次のタイプのファイルがある複数のスキンJARが含まれています。

  • .cssファイル: スキン・セレクタ・ファイル

  • .png: イメージ・ファイル

  • .js: javascriptファイル

  • trinidad-skins.xml: スキン定義ファイル

デフォルトでは、oracle.webcenter.skin共有ライブラリは、すべてのFrameworkアプリケーションとポートレット・プロデューサ・アプリケーションによって参照されます。したがって、すべてのスキンはクラスパスを介して使用できます。Frameworkアプリケーションでポートレットを使用すると、ポートレットはアプリケーションに対して定義されたスキンを使用してレンダリングされます。そのため、スキン共有を実現するには、同一のスキンが共有ライブラリを介して、Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションの両方でアクセス可能である必要があります。

ただし、Frameworkアプリケーションでportal-skin.cssを変更した場合がある可能性があります。したがって、共有ライブラリで使用可能なスキンは、Frameworkアプリケーションで使用可能な更新バージョンと同じではありません。Frameworkアプリケーションのスキンのバージョンが共有ライブラリのスキンと同一ではない場合、FrameworkアプリケーションとPortlet Producerアプリケーション間のスキンの共有が失敗します。これは、Frameworkアプリケーションが変更済スキンを使用する場合に、Portlet producerが共有ライブラリでパッケージ化された元のバージョンのスキンにしかアクセスできないためです。Frameworkアプリケーションでは、最新のスキンの変更でレンダリングします。一方、同じアプリケーション内のポートレットでは、共有ライブラリから元のスキンでレンダリングします。この動作はスキンのコーディネーションと呼ばれます。

デフォルトのスキンを使用せずに、Frameworkアプリケーション内でポータル・リソースとして新規カスタム・スキンを作成したり、一意のスキン・ファミリIDでスキンをtrinidad-skins.xmlに定義する場合があります。アプリケーションでポートレットが使用される場合、ポートレット・プロデューサは共有ライブラリでカスタム・スキンを検出できません。これによりスキンの不一致エラーが発生し、ポートレットはFrameworkアプリケーションで使用されるカスタム・スキンではなく、必要最小限の単純なスキンでレンダリングします。

そのため、Frameworkアプリケーションでスキンを変更したりカスタム・スキンを作成するたびに、その新規スキンや変更済スキンを共有ライブラリとしてデプロイする必要があります。

14.7.2 個別共有ライブラリとしてのスキンのデプロイ方法

共有ライブラリとしてスキンをデプロイするには:

  1. trinidad-skins.xmlのコピーがFrameworkアプリケーションのWEB-INFフォルダで確実に使用できるようにします。そうでない場合には、新規の作成となります。

  2. trinidad-skins.xmlを更新して、新規に作成するスキンのCSSファイルを指定します。

  3. 新規MANIFEST.MFファイルをプロジェクトで作成し、新規共有ライブラリの詳細を指定します。

    次に、MANIFEST.MFファイルのサンプル・コードを示します。

    Manifest-Version: 1.0
     Ant-Version: Apache Ant 1.7.1
     Created-By: 1.6.0 (Sun Microsystems, Inc.)
     Extension-Name: oracle.webcenter.customskin
     Implementation-Title: oracle.webcenter.customskin
     Implementation-Version: 11.1.1
     Implementation-Vendor: Oracle
     Specification-Title: Custom WebCenter shared library
     Specification-Version: 11.1.1
    
  4. 新規デプロイメント・プロファイルを作成するには:

    1. 「ポータル」プロジェクトを右クリックし、「新規」を選択します。

    2. 「新規ギャラリ」ダイアログで、「一般」「デプロイメント・プロファイル」「共有ライブラリJARファイル」を選択して、「OK」をクリックします。

    3. 「デプロイメント・プロファイルの作成」ダイアログで、「デプロイメント・プロファイル名」フィールドにプロファイル名を入力して「OK」をクリックします。

    4. 「JARデプロイメント・プロファイルのプロパティの編集」ダイアログで、「manifestファイルを含める」チェック・ボックスが選択されていることを確認します。

    5. 「追加のmanifestファイルをMANIFEST.MFにマージ」セクションで、「追加」ボタンを使用して、trinidad-skins.xmlと必要なスキンCSSファイルを共有ライブラリに追加します。

    6. 「OK」をクリックします。

    7. 「プロジェクト・プロパティ」ダイアログで、「OK」をクリックします。

  5. 「ポータル」プロジェクトを右クリックし、「デプロイ」を選択し、JAR共有ライブラリのデプロイメント・プロファイル名を選択します。

  6. 「デプロイ」ダイアログで、「Weblogicアプリケーション・サーバーにデプロイ」を選択して「次へ」をクリックします。

  7. ポートレット・プロデューサをホストするWebLogic Serverを選択し、「次へ」をクリックします。

  8. 「共有ライブラリとしてデプロイ」が選択されていることを確認し、「終了」をクリックします。

  9. Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションの両方で、カスタム・スキン共有ライブラリを参照するように/META-INF/weblogic-application.xmlを更新します。

                <library-ref>
                    <library-name>Custom_Library_Name</library-name>
                    <specification-version>Library_Version</specification-versi     on>
                  </library-ref>
    
  10. Frameworkアプリケーションとポートレット・プロデューサ・アプリケーションの両方を再デプロイします。

    これでカスタム・スキンをこのアプリケーション間で共有できます。


注意:

カスタム・スキン共有ライブラリはデプロイする必要があり、実際のスキン共有が実現されるには、WebLogic Serverコンソールで「アクティブ」と表示されている必要があります。共有ライブラリJARになんらかの問題がある場合(不適切なマニフェスト、不正なバージョンなど)、デプロイ済共有ライブラリはWebLogic Serverコンソールで「アクティブ」とは表示されません。



注意:

複数のスキン・ファイルがある場合、すべてのスキン・アーティファクトを1つの共有ライブラリJARに格納して、2つのtrinidad-skins.xmlファイルを1つのファイルに統合できます。この共有ライブラリはすべてのカスタム・スキン開発で引き続き使用できます。


14.8 ユーザー用スキンの条件付変更

実際のアプリケーション・ロジックに影響を与えずに、ユーザー、ページ、アプリケーションなどに対して、それぞれ異なるスキンを割り当てることができます。スキンを条件付で設定するには、trinidad-config.xmlファイルで<skin-family>エントリを使用します。

動的に評価できるEL式を使用して、表示するスキンを決定できます。たとえば、ユーザーのブラウザがドイツ語ロケールに設定されているときドイツ語スキンを使用し、それ以外では英語スキンを使用する場合には、trinidad-config.xmlファイルで次の<skin-family>エントリを使用します。

<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>

詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキンを動的に変更するためのコンポーネントの構成方法に関する項を参照してください。


注意:

<skin-family>のデフォルト値は#{preferenceBean.defaultTrinidadSkin}です。デフォルト値を変更すると、アプリケーション・ユーザーは実行時にリソース・マネージャでスキンを設定できません。


また、SkinSetting APIを使用して、ユーザー向けスキンを条件付で設定することもできます。使用できるコールについては、APIを参照してください。このAPIは、次のサイトから入手できます。

http://download.oracle.com/docs/cd/E15523_01/apirefs.1111/e15995/oracle/webcenter/generalsettings/model/SkinSetting.html

14.9 スキンでの問題のトラブルシューティング

この項では、スキンの使用中に発生する可能性のある問題のトラブルシューティングに役立つ情報を提供します。

問題

アプリケーションで、設計時に加えたスキンの変更内容が反映されません。

解決方法

開発時にスキンを変更した後、サーバーを再起動せずにCSSの変更内容を確認できます。CHECK_FILE_MODIFICATIONコンテキスト・パラメータは、スキンのタイムスタンプをチェックして、スキンが変更されていればリロードするようサーバーに要求します。この設定は、反復開発がアプリケーションで有効になっていると、自動的にtrueに設定されます。反復開発が無効になっている場合には、次の例で示すように、WEB-INF/web.xmlCHECK_FILE_MODIFICATIONtrueに設定されていることを確認します。

<context-param>
<param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
<param-value>true</param-value>
</context-param>

問題

スキンのCSSファイルをブラウザで開くと、スキン・セレクタがエンコードされ圧縮された状態で表示されます。

解決方法

デフォルトでは、CSSファイルのクラス名は、ファイルの全サイズを削減するために圧縮されています。したがって、たとえばFirefoxのFirebug拡張子のスキン・セレクタは、元の名前との関連がほとんどないエンコードされた値になっています。たとえば、CSSファイルには次のようなエントリが含まれていることがあります。

 .x123 {color: #534741}

圧縮が無効となっているときにCSSファイルを調べる方が簡単です。圧縮を無効化するには、次のコードで示すように、WEB-INF/web.xmlDISABLE_CONTENT_COMPRESSIONコンテキスト・パラメータの値をtrueに設定します。

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value>
</context-param>

圧縮が無効になると、エントリは次のようになります。

.af_panelFormLayout_label-cell{color: #534741}

パフォーマンスの向上には、本番環境でCSSの圧縮を有効にすることをお薦めします。CSS圧縮を無効にすると、次の問題のシナリオで説明するように、スキンの不一致につながる場合があります。

問題

ポートレットが含まれるページを実行すると、ポートレットがスタイルや形式なしでレンダリングされます。

解決方法

アプリケーションでADFアプリケーションに基づいたポートレットを使用すると、ポートレット・プロデューサはアプリケーションのスキンを一致させようとします。スキンが一致すると、プロデューサはアプリケーションのスキンを使用します。

スキン圧縮はスキンを一致させるときには考慮されません。スキン圧縮設定が異なるがスキンが一致する場合、プロデューサは".x123"のようなIDを返し、アプリケーションでこれらの値が見つけられることを期待しますが、アプリケーションは".af_panelFormLayout_label-cell"のような値を返す場合があります。したがって、スタイルが見つからず、ポートレットのレンダリングに失敗します。

アプリケーションとポートレット・プロデューサは、同じスキンは圧縮の設定を使用する必要があります。アプリケーションで圧縮されていないスキンを使用したら、ポートレット・プロデューサでも圧縮されていないスキンを使用する必要があります。

問題

MDSフォルダ構造(oracle/webcenter/portalapp)内のスタイルシート・ファイル(CSS)が、trinidad-skins.xmlで指定されているように有効になりません。

解決方法

MDSフォルダ構造内のスタイルシート・ファイル(CSS)では、次の例で示すように、trinidad-skins.xml内のパスに接頭辞"mds:"を付けてください。

<skin>
   <id>myskin2.desktop</id>
   <family>myskin2</family>
   <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
 <style-sheet-name>mds:/oracle/webcenter/portalapp/css/skin.css</style-sheet-name>
   <extends>fusion.desktop</extends>
</skin>

14.10 スキン関連のファイル

この項は、次の各項で構成されています。これらの項では、スキンを作成または変更する際に作成または変更されるファイルについて説明します。

14.10.1 adf-config.xml

Frameworkアプリケーションの参照メカニズムを利用できます。また、adf-config.xmlで、実行時に使用されるスキンの参照を定義するためのビルトイン・サポートがあります。このファイルはMETA-INFディレクトリにあります。例14-1は、adf-config.xmlで使用可能なデフォルトのスキン・プリファレンスを示しています。

例14-1 adf-config.xmlのスキン・プリファレンス

<portal:preference id="oracle.webcenter.portalapp.skin"
  desc="Default Portal Skin" value="portal"
  resourceType="Skin" display="true"/>

adf-config.xmlで、スキンに次のプロパティを定義できます。

  • preference id - アプリケーションで使用されるスキンのプリファレンス値を検索するキーとして、ポータル・プリファレンスAPIで使用されるハードコードされた値。

  • desc - スキンの説明。実行時に、この値がスキンの表示名として表示されます。

  • value - アプリケーションで使用されるスキンのファミリ名。値は、必要なスキンの「ポータル・リソースの作成」または「ポータル・リソースの更新」ダイアログのSkin Family属性で指定された値と同じである必要があります。アプリケーションで異なるスキンを使用する場合、ここで必要なスキン・ファミリ名を指定します。

  • resourceType - リソースのタイプ(ここではスキン)。

  • display - スキンのリストを実行時にスキン・ピッカーに表示するかどうかを指定します。

14.10.2 trinidad-config.xml

JDeveloperでは、Frameworkアプリケーションを作成する場合、初期trinidad-config.xmlファイルが/WEB-INFディレクトリに自動的に作成されます。例14-2に、初期trinidad-config.xmlファイルを示します。

例14-2 JDeveloperにより作成された初期trinidad-config.xmlファイル

<?xml version="1.0" encoding="US-ASCII"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>#{preferenceBean.defaultTrinidadSkin}</skin-family>
</trinidad-config>

trinidad-config.xmlで、使用するスキンや必要に応じて付随する条件を決定する<skin-family>を設定できます。trinidad-config.xmlファイルは単純なXML構造であり、JSF Expression Language (EL)や静的な値を使用して、要素のプロパティを定義できます。


注意:

<skin-family>のデフォルト値は#{preferenceBean.defaultTrinidadSkin}です。デフォルト値を変更すると、アプリケーション・ユーザーは実行時にリソース・マネージャでスキンを設定できません。


14.10.3 trinidad-skins.xml

trinidad-skins.xmlファイルは、JARとして提供されるどのスキンにも必要です。このファイルは、通常、各スキンJARとバンドルされていて、スキンIDとスキンの実際のパスの間の検索を実行します。ただし、Frameworkアプリケーションのポータル・リソースとして作成されるスキンでは、個々の実行時APIを使用してスキンの場所が検索されます。したがって、このファイルはそのようなスキンには必要ありません。

trinidad-skins.xmlの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスタイルとスキンを使用した外観のカスタマイズに関する項の章を参照してください。