1. Oracle WebCenter Portalの開発
  2. WebCenter Portalアセットの使用
  3. スキンの開発

8 スキンの開発

JDeveloperを使用して、WebCenter Portalで使用するためのスキンを作成および編集します。

この章の内容は次のとおりです。

スキンの開発の概要

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

この項には次のトピックが含まれます:

スキンについて

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

スキンの実行時管理について

WebCenter Portalでは、デプロイ後でもポータルの開発をユーザーが続行できるようにスキンの実行時管理をサポートします。実行時管理により、JDeveloperのインストールや知識がなくても、権限のあるユーザーがブラウザ・ベースの環境でアプリケーションのスキンを管理したり、新規に作成できます。詳細は、『Oracle WebCenter Portalでのポータルの構築』の「スキンの使用」を参照してください。

スキンの開発のベスト・プラクティス

WebCenter Portalで使用するスキンの作成または変更には、ある程度別個の2つのタスクとしてアプローチできます。1つ目のタスクは、ページの背景や中央などのページの大まかな要素に基本的なスタイル要素を適用して、企業ブランドのルック・アンド・フィールを規定することです。これは、大抵の場合、最初にしておくことです。2つ目も同様で、より細かいページ要素のいくつかにスタイルを適用して、ルック・アンド・フィールを微調整することです。

多くの場合、これらを組み合せたアプローチも効果的です。大まかな要素(ページ背景、本体の主要部分など)を取り込んでそれらとともに従来のCSSスタイルを適用すると、ADFスキンの使用が特定的になっても、WebCenter Portalの外観全体が生成されます。

ADFスタイルに加えてCSSベースのスタイルと他の技術を使用する場合、WebCenter Portalの外部にスタイル・アセットを格納すると役立つことが多いです。そのために、コンテンツ・サーバーを使用してWebCenter Portal用の非構造アセットをすべて管理できます。アセットに環境内で管理するCSSやイメージなどを追加して、リビジョン・コントロールとワークフローを提供できます。このベスト・プラクティスにより、設計チームは、変更のたびに開発チームを巻き込まなくてもWebCenter Portalにアクセスして作業できるようになります。

スキンの作成

WebCenter Portalでは、portal-skin.cssファイルで定義されるportalスキンをデフォルトで使用します。WebCenter Portalアセット・アプリケーションを作成すると、簡単にこのスキンをJDeveloperにコピーして貼り付けて特定の要件に合せて変更することも、最初から新しいスキンを作成することもできます。WebCenter Portalでのアセットのコピー方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照してください。

この項には次のトピックが含まれます:

スキンの作成方法

この項では、新しいスキン用にWebCenter Portalアセット・アプリケーションを作成する方法について説明します。アセット・アプリケーションが関連するアーティファクトとともに作成されると、続いて「スキンの編集」の説明に従ってスキンのCSSファイルを変更できます。

注意:

イメージやアイコンなどのアセット関連のアーティファクトをコンテンツ・サーバーに格納し、必要な場合にコンテンツを容易に特定して移動できるようにアセット・アーティファクト専用のフォルダ構造をコンテンツ・サーバー上で作成することをお薦めします。こうすることで、このようなコンテンツを他のユーザーが開発者を巻き込まずに変更できるようにもなります。

スキン用にWebCenter Portalアセット・アプリケーションを作成するには:

  1. 「アセット・タイプ」で「スキン」を指定して、アセット用にアセット・アプリケーションを作成します。

    WebCenter Portalアセット・アプリケーションの作成の詳細は、「WebCenter Portalアセット・アプリケーションの作成」を参照してください。スキン用にアセット・アプリケーションを作成する際に作成されるアーティファクトの詳細は、「スキンのアーティファクトに関する必知事項」を参照してください。

  2. アプリケーション・ナビゲータで、新規作成したスキンのCSSファイルを右クリックし、「開く」を選択します(図8-1)。

    図8-1 スキンのCSSファイル

    図8-1の説明が続きます
    「図8-1 スキンのCSSファイル」の説明
  3. 続いて「スキンの編集」の説明に従ってスキンを編集します。

スキンのアーティファクトに関する必知事項

スキン・アセット・アプリケーションを作成すると、次のアーティファクトとともにデフォルト・スキンが生成されます。

  • CSSスキン・セレクタ・ファイル(Skin1.cssなど)

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

どちらのファイルも図8-2に示すようにナビゲーション・バーに表示されます。

図8-2 スキン・アセット・アプリケーションのアーティファクト

図8-2の説明が続きます
「図8-2 スキン・アセット・アプリケーションのアーティファクト」の説明

スキンの編集

CSSファイルを編集してスタイル・セレクタを編集または追加することにより、最初に作成したスキンを編集できます。

注意:

WebCenter Portalで既存または組込みのスキンをコピーし、JDeveloperでページ・スタイルのCSSファイルに貼り付けることをお薦めします。次に、このスキンを新しいスキンの起点として使用し、変更が終了したらWebCenter Portalに公開します。WebCenter Portalでのアセットのコピー方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照してください。

スキンを編集するには:

  1. アプリケーション・ナビゲータで、スキンのCSSファイルを右クリックし、「開く」を選択します(図8-3)。

    図8-3 スキンのCSSファイル

    図8-3の説明が続きます
    「図8-3 スキンのCSSファイル」の説明
  2. portalスキンなど、既存のWebCenter Portalスキン(つまり、アセット・アプリケーションの作成時にデフォルトで作成されたもの以外のスキン)を起点として使用している場合は、CSSファイルにコピーして貼り付けます(『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照)。
  3. スキンのソース・コード内で、アプリケーションのコンポーネントに必要なADF Facesスキン・セレクタを定義します。たとえば、アプリケーション・コンテンツのフォント・ファミリを定義するには、.AFDefaultFont:aliasスキン・セレクタを次に示すように使用できます。
    .AFDefaultFontFamily:alias {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

    次を参照してください。

  4. CSSファイルを保存します。
  5. 「スキンの公開」に示すように、スキンを公開してテストします。

スキンの公開

WebCenter Portalアセット・アプリケーションを作成し、スキンのCSSファイルを編集したら、次の工程はスキンを公開してWebCenter Portalでテストします。アセットを共有アセットとしてWebCenter Portalに公開する、またはポータル・アセットとして特定のポータルに公開する方法の詳細は、「WebCenter Portalアセットの公開」を参照してください。

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

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

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

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

詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザーによるアプリケーションのADFスキンの変更の有効化に関する項を参照してください。

注意:

<skin-family>のデフォルト値は、アセット・アプリケーションとともに作成したスキン・アセットの名前(Skin1など)から空白または特殊文字を除いたものです。デフォルト値を変更すると、アプリケーション・ユーザーは実行時にリソース・マネージャでスキンを設定できません。

また、SkinSetting APIを使用して、ユーザー向けスキンを条件付で設定することもできます。詳細は、Oracle WebCenter PortalのWebCenter Portal Javadoc API Java APIリファレンスを参照してください。