24 スキンの使用

この章では、WebCenter Portalでスキンを作成、変更および管理する方法について説明します。

注意:

スキンの作成および編集は複雑なタスクであり、CSSの知識と、ページ・テンプレートでスキンがどのように使用されるかについての知識が必要になります。このため、スキンは経験豊富なWeb開発者が開発する必要があります。開発者はJDeveloperを使用してポータルのスキンを開発することをお薦めします。WebCenter Portalの既存のスキンについては、開発者はJDeveloperにアップロードして調整および開発できます。JDeveloperを使用して最初から新しいスキンを開発することもできます。開発が完了したスキンは、開発者が直接WebCenter Portal (ポータル・サーバー)にアップロードして、すぐに使用したり、テストしたりできます。または、開発者はスキンをファイルにエクスポートし、後でポータル・ビルダーを使用してそのスキンをWebCenter Portalにアップロードできます。

詳細は、第20.8項「JDeveloperでのポータル・アセットの使用」およびOracle WebCenter PortalおよびOracle JDeveloperでのポータルの開発の「スキンの開発」を参照してください。

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

第24.1項「スキンについて」
第24.2項「デフォルト・スキンの設定」
第24.3項「スキンの作成」
第24.4項「スキンの編集」
第24.5項「スキンの管理」

権限:

共有スキンでこの章のタスクを実行するには、アプリケーション・レベルの権限Create, Edit, and Delete Skinsが必要です。Application Specialistロールを持つユーザーには、この権限がデフォルトで付与されます。アプリケーション・レベルの権限の詳細は、Oracle WebCenter Portalの管理のアプリケーションのロールと権限の概要に関する項を参照してください。

ポータル・レベルのスキンでこの章のタスクを実行するには、ポータル・レベルの権限Create, Edit, and Delete Assets (標準権限)またはCreate, Edit, and Delete Skins (アドバンスト権限)が必要です。ポータル・レベルの権限の詳細は、第29.1項「ポータルのロールと権限について」を参照してください。

関連項目:

スキンと他のアセットを使用してポータルのルック・アンド・フィールを定義する方法については、第60章「ポータルのルック・アンド・フィールの作成」を参照してください。

24.1 スキンについて

スキンとは、ポータルのページ上で使用される様々なコンポーネントの色、フォントおよびその他の外観を定義するリソースです。スキンによってユーザー・インタフェースの外観が変わりますが、アプリケーションの動作が変わることはありません。スキンを使用することで、個別のポータルに独自の個性を与えたり、特定のブランド設定を適用したりして、組織に適した外観を実現できるようになります。

スキンは、カスケード・スタイル・シート(CSS)仕様に基づきます。スキンは、CSSスタイルを定義する様々なセレクタ、またはコンポーネントの異なる部分のプロパティで構成されます。コンポーネントのスタイル関連のプロパティを変更することによって、コンポーネントのルック・アンド・フィールを調整できます。背景色、前景色、フォント・スタイルなど、一部のセレクタはグローバルで、すべてのコンポーネントに影響する場合があります。

各スキンは、ページ・テンプレートとともに機能して、ポータル内のページのルック・アンド・フィール全体を決定します。ページ・テンプレートはページ上のコンポーネントの場所と動作を制御し、スキンはコンポーネントの視覚的な外観を制御します。スキンのスキン・セレクタは、ページ・テンプレートのスタイル・クラスに対応しているため、スキンの設計時には、そのスキンが目的のページ・テンプレートで使用できることを確認する必要があります。

関連項目:

第21章「ページ・テンプレートの使用」

各ページ・テンプレートで優先スキンを定義すると、それぞれのページ・テンプレートで最適に機能するスキンを指定できます。ページ・テンプレートをポータルのデフォルト・ページ・テンプレートまたはシステム・デフォルトとして選択すると、デフォルトのスキンからページ・テンプレートの優先スキンに自動更新されます。

関連項目:

第21.5項「ページ・テンプレートの優先スキンの設定」

組込みスキン

WebCenter Portalには、次に示す組込みスキンが用意されており、これらを使用してすぐに開始できます。

Skyros v2

最新の11.1.1.8.3ページ・テンプレート用の優先スキンを提供します(表21-1 「組込みページ・テンプレート」を参照)。このスキンを以前のページ・テンプレートで使用しないでください。同様に、次に示す以前のスキンを11.1.1.8.3ページ・テンプレートで使用しないでください。
Skyros
WebCenter Portal
フュージョンFX
Spaces FX

これらの組込みスキンの1つを使用して、特定のポータルまたはアプリケーション全体の外観を変更できます。これらの組込みスキンは、特定の組込みページ・テンプレートと連携するように設計されています。詳細は、第21.1.1項「組込みページ・テンプレートについて」を参照してください。

組込みスキンはいずれも、直接編集することはできません。これらのスキンのいずれかを要件に合うように変更する場合、「コピー元」リストから組込みスキンを選択して新しいスキンを作成し、新しいスキンで必要な調整を行う必要があります。

関連項目:

第24.3項「スキンの作成」

24.2 デフォルト・スキンの設定

ユーザーがページを作成するときには、デフォルト・スキンを使用して、ページとそのコンポーネントを決定します。これにより、ポータルのすべてのページの外観に一貫性が保たれます。

スキンはページ・テンプレートとともに機能して、ポータルのページのルック・アンド・フィールを決定します。デフォルトのページ・テンプレートを設定すると、デフォルトのスキンは、そのページ・テンプレートの優先スキン(ある場合)に自動で設定されます。

注意:

デフォルトのスキンを、ページ・テンプレートの優先スキン以外のスキンに変更する場合、ポータルのページの表示状態が予想どおりにならないことがあります。詳細は、第21.5項「ページ・テンプレートの優先スキンの設定」を参照してください。

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

第24.2.1項「ポータルのデフォルト・スキンの設定」
第24.2.2項「すべてのポータルのデフォルト・スキンの設定」
第24.2.3項「ホーム・ポータルのデフォルト・スキンの設定」

24.2.1 ポータルのデフォルト・スキンの設定

権限:

このタスクを実行するには、ポータルレベルの権限Manage Security and ConfigurationまたはManage Configurationが必要です。ポータル・モデレータは、デフォルトでこの権限を持っています。

権限の詳細は、第29.1項「ポータルのロールと権限について」を参照してください。

すべてのポータルには、デフォルト・スキンを含むデフォルト・アセットのセットがあります。ポータルのデフォルト・スキンは、ポータルのすべてのページに適用されます。ただし、管理ページを除きます。管理ページでは、常にFusion FXスキンが使用されます。ポータルを作成する場合、デフォルトでは、ポータルは、その作成時に使用されるポータル・テンプレートに定義されたページ・テンプレートの優先スキンを継承します。ポータル・テンプレートでデフォルトのページ・テンプレートを定義しない場合、システムのデフォルトのページ・テンプレートの優先スキンがかわりに使用されます。

ポータルのページに異なるスキンを使用するために、ポータル管理でデフォルト・スキンの設定を変更できます。

ポータル管理の「設定」ページ(第7.3.1項「ポータルのルック・アンド・フィール設定へのアクセス」を参照)にある「アセット」で、新規の「スキン」を選択します(図24-1)。

図24-1 ポータルのスキンの選択

「図24-1 ポータルのスキンの選択」の説明

リストされるスキンは、「共有アセット」ページまたは「アセット」ページ上のポータルで使用できるようにしたスキンです(第20.5.3項「アセットの表示および非表示」を参照)。[system default]での選択は、システム管理者がすべてのポータルのデフォルトとして指定したスキンに適用されます。詳細は、Oracle WebCenter Portalの管理のデフォルト・スキンの選択に関する項を参照してください。

詳細は、第7.3.3項「ポータルのスキンの変更」を参照してください。

24.2.2 すべてのポータルのデフォルト・スキンの設定

権限:

このタスクを実行するには、アプリケーションレベルの権限Portal Server: Manage AllまたはManage Configurationが必要です。システム管理者(Administratorロール)は、デフォルトでこの権限を持っています。

システム管理者は、システム(またはアプリケーション・レベル)のデフォルト・スキンとして使用するスキンを選択できます。システムのデフォルト・スキンは、ホーム・ポータルのページ、およびポータルの作成に使用されるポータル・テンプレートでデフォルト・スキンを定義しないポータルのページに適用されます。

システムのデフォルト・スキンは、特定のスキンがすでに設定されている既存のポータルには適用されません。また、管理ページには、システムのデフォルト・スキンが適用されません。管理ページでは、常にFusion FXスキンが使用されます。

システムのデフォルト・スキンの設定方法については、Oracle WebCenter Portalの管理のデフォルト・スキンの選択に関する項を参照してください。

24.2.3 ホーム・ポータルのデフォルト・スキンの設定

デフォルトでは、ホーム・ポータルの外観はシステムのデフォルト・スキンによって決定されます。ただし、ユーザーは、ユーザー・プリファレンスの設定を通じて、ホーム・ポータルの表示に適用されるスキンを変更できます。詳細は、Oracle WebCenter Portalの使用のビューのルック・アンド・フィールの変更に関する項を参照してください。

24.3 スキンの作成

使用可能なスキンがいずれも要件を満たさない場合、独自のテンプレートを作成できます。スキンを作成する場合は、既存のスキンを新しいスキンの開始点として使用します。

注意:

JDeveloperで後で調整することにして、ページ・テンプレートをWebCenter Portalで作成する場合、アプリケーション・レベルまたはポータル・レベルで作成できます。アプリケーション・レベルのスキンは、ポータルが特に除外されていないかぎり、すべてのポータルで使用できます。ポータル・レベルのスキンは、作成元のポータルでのみ使用できます。

スキンを作成するには:

次のいずれかに移動します。
- アプリケーション・レベルのスキンを作成するには、「共有アセット」ページに移動します。詳細は、第59.2項「共有アセットへのアクセス」を参照してください。
- ポータル・レベルのスキンを作成するには、そのスキンを作成するポータルの「アセット」ページに移動します。詳細は、第20.2項「ポータル・アセットへのアクセス」を参照してください。
左側のパネルで、「外観とレイアウト」の下の「スキン」をクリックします。
ツールバーで、「作成」(図24-2)をクリックします。

図24-2 スキンを作成する「作成」アイコン

「図24-2 スキンを作成する「作成」アイコン」の説明
「新規スキンの作成」ダイアログ(図24-3)の「名前」フィールドに、スキンの名前を入力します。

この名前は、「アセット」ページまたは「共有アセット」ページに表示され、スキンの選択時にはリストに表示されます。名前は、できるだけわかりやすいものにする必要があります。

図24-3 「新規スキンの作成」ダイアログ

「図24-3 「新規スキンの作成」ダイアログ」の説明
「説明」フィールドに、スキンの説明を入力します。

説明は、「アセット」または「共有アセット」ページで、スキン名の下に表示されます。また、スキンの選択時にツールチップとして表示されます。ユーザーがこの特定のスキンを使用するかどうかを判断する上で、この説明が役立つものであることが必要です。
「コピー元」リストから既存のスキンを選択し、新しいスキンの原案として使用します。

ヒント:
第20.5.4項「アセットのコピー」の説明に従い、既存のスキンのコピーを作成することもできます。
「作成」をクリックします。

新しく作成したスキンが、「アセット」または「共有アセット」ページにリストされます。スキンの横にある空のチェック・ボックスは、ページ・テンプレートがまだ公開されていないため、他のユーザーは使用できないことを示しています。スキンの公開の詳細は、第20.5.3項「アセットの表示および非表示」を参照してください。

最初の作成後、新しいスキンは「コピー元」リストから選択したスキンと同一になります。スキン作成の次の手順では、要件に合せてスキンを編集します。詳細は、第24.4項「スキンの編集」を参照してください。

24.4 スキンの編集

WebCenter Portalでは、コンポーザを使用して要件にあわせてスキンを編集できます。

注意:

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

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

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

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

スキンのCSSファイルには、ADFおよびコンポーザのスキン・セレクタの他に、WebCenter Portal固有の3つのセレクタが含まれます。これらは次のとおりです。

.WCPageTemplate:alias - 上部バナーの下のページ・テンプレートのメイン領域の背景色およびイメージとその位置を定義します。次に例を示します。

.WCPageTemplate:alias
{
  background-image:url(/afr/fusion/dbd_centerGradient.png);
  background-repeat:repeat-y;
  background-position:top center;
  background-color: #024296;
  color: white;
}

.WCContent - 実際のページ・コンテンツが含まれるページ・テンプレートの領域の背景色を定義します。
```
.WCContent
{
  background-color:#EEF3F8;
  border-top:1px solid #BECFE2;
}
```
.WCPortletContentMedium:alias - showDetailFrameコンポーネント内のタスク・フローとポートレットの背景色およびイメージを定義します。
```
.WCPortletContentMedium:alias
{
  background-image:url(/adf/images/gradient-275x275-fcfcfc.png);
  background-repeat:no-repeat;
}
```

WebCenter Portalには、スキンの基本的な外観設定を編集するための「編集」ダイアログがあります。この設定は、CSSファイルで使用できるWebCenter Portal固有のスキン・セレクタにターゲット領域をマッピングすることで編集します。

CSSファイルの、その他のスキン・セレクタを編集するには、スキンのソース・コードを編集する必要があります。スキンのソース・コードの編集中は、要件に合うように任意のスキン・セレクタを追加、編集または削除できます。たとえば、デフォルトのフォント・サイズをオーバーライドするには、例24-1に示すように、スキンのCSSファイル内で目的のサイズをスキン・セレクタに指定します。

例24-1 スキンのCSSファイルでのデフォルトのフォント・サイズのオーバーライド

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

「ソースの編集」ダイアログを使用してスキンのソース・コードを編集すると、コードの形式が検証され、なんらかのタグが足りなかったり、不適切に追加された場合はエラー・メッセージが表示されます。

関連項目:

スキンのソース・コードの編集方法の詳細は、第20.4.2項「アセットのソース・コードの編集」を参照してください。

注意:

スキンのソース・コードのスキン・セレクタを編集する予定の場合は、セレクタに関するCSS仕様を十分に理解している必要があります。拡張しているスキンに自分のセレクタより詳細なセレクタがあると、スタイルが取得されない可能性があります。

スキンの基本の外観設定を編集するには:

次のいずれかに移動します。
- アプリケーション・レベルのスキンを編集するには、「共有アセット」ページに移動します。詳細は、第59.2項「共有アセットへのアクセス」を参照してください。
- ポータル・レベルのスキンを編集するには、そのナビゲーション・モデルを所有するポータルの「アセット」ページに移動します。詳細は、第20.2項「ポータル・アセットへのアクセス」を参照してください。
左側のパネルで、「外観とレイアウト」の下の「スキン」をクリックします。
編集するスキンの行で「編集」クイック・リンクをクリックします。
「編集」ダイアログ(図24-4)の「アイテム」リストから、スキン・プロパティを更新するターゲット領域を選択します。
- ページ・テンプレート: ページで使用するテンプレートの背景色、背景イメージおよびフォントを選択できます。
- ページ: ページ背景の色とイメージを選択できます。
- タスク・フロー/ポートレット: ページのタスク・フローとポートレットの背景色およびイメージを定義できます。
図24-4 スキン・プロパティの編集

「図24-4 スキン・プロパティの編集」の説明
「背景色」リストから、ターゲット領域で使用する背景色を選択します。

背景色を選択すると、そのRGB値がテキスト・ボックスに表示され、右側の「プレビュー」パネル内で、選択したターゲット領域がその色に変わります。

「背景イメージ」フィールドに、背景イメージとして使用するイメージのURIパスを入力します。

注意:

絶対URL (このURLはブラウザのアドレス・フィールドに入力しても機能します)、またはWebCenter Portal内のどこかに配置されたイメージを指す相対URLのいずれかを指定できます。WebCenter Portalにイメージを格納するには、Oracle WebCenter Portalの使用のファイルのアップロードに関する項に示すように、ドキュメント・ツールを使用して必要なファイルをアップロードする必要があります。その後、Oracle WebCenter Portalの使用のフォルダまたはファイルのURLの取得に関する項に示すように、イメージのURLを取得できます。

背景イメージの繰返し(水平方向、垂直方向または両方)を選択できます。要件に応じて、次の項目を選択します。
- 水平方向に繰返し: 背景イメージをページの上部で水平方向に整列して表示します。イメージは、水平方向のバー全体に繰り返されます(図24-5)。
  
  図24-5 ターゲット領域でのイメージの水平方向の繰返し
  
  「図24-5 ターゲット領域でのイメージの水平方向の繰返し」の説明
- 垂直方向に繰返し: 背景イメージをページの左側で垂直方向に整列して表示します。イメージは、垂直方向のバー全体に繰り返されます(図24-6)。
  
  図24-6 ターゲット領域でのイメージの垂直方向の繰返し
  
  「図24-6 ターゲット領域でのイメージの垂直方向の繰返し」の説明
「水平方向に繰返し」と「垂直方向に繰返し」を選択して、選択したイメージをターゲット領域全体で繰り返します(図24-7)。

図24-7 ターゲット領域全体でのイメージの繰返し

「図24-7 ターゲット領域全体でのイメージの繰返し」
「フォント・ファミリ」リストから、ページ・テンプレート領域で使用するフォントを選択します。

「フォント・ファミリ」リストは、「アイテム」リストで「ページ・テンプレート」が選択される場合のみ表示されます(手順4を参照)。
終了したら、「保存して閉じる」をクリックします。

24.5 スキンの管理

次のオプションは、「アセット」ページまたは「共有アセット」ページに表示され、スキンの管理に使用できます。

作成: 詳細は、第24.3項「スキンの作成」を参照してください。
削除: スキンが不要になった場合に削除できます。

詳細は、第20.5.9項「アセットの削除」を参照してください。
アップロード: JDeveloperを使用して開発されたスキンを含むアーカイブ・ファイルをアップロードできます。

詳細は、第20.5.8項「アセットのアップロード」を参照してください。
ダウンロード: スキンをアーカイブ・ファイルにダウンロードして、JDeveloperでさらに開発できます。

詳細は、第20.5.7項「アセットのダウンロード」を参照してください。
アクション
- コピー: スキンのコピーを作成できます。
  
  詳細は、第20.5.4項「アセットのコピー」を参照してください。
- セキュリティ設定: スキンにアクセスできるユーザーを制御します(すべてのユーザーを対象にするか、指定したユーザーまたはグループのみにするか)。
  
  詳細は、第20.5.6項「アセットのセキュリティの設定」を参照してください。
- プロパティの表示: 各スキンには、そのスキンについての有用な情報がまとめられた「プロパティの表示」ダイアログが関連付けられています。
  
  詳細は、第20.5.1項「アセットに関する情報の表示」を参照してください。
- ソースの編集: スキンのソース・コードを直接編集できます。
  
  詳細は、第20.4.2項「アセットのソース・コードの編集」を参照してください。
- プロパティの編集: 各スキンには、ポータルでの表示方法を制御する特定のプロパティが関連付けられています。これらのプロパティは、「プロパティの編集」ダイアログで編集できます。
  
  詳細は、第20.5.5項「アセットのプロパティの設定」を参照してください。
  
  スキンは、次に示す3つのデフォルトの属性も定義します。
  - skinId: スキンの一意の識別子を指定します。通常は、スキン・ファミリとレンダー・キットの組合せになります(たとえば、BrightBlue.desktop)。
  - skinFamily: スキンが属するファミリを指定します。これは、様々なレンダリング・キットで多数のスキンにより使用される識別子です。たとえば、BrightBlueという名前のファミリがあるとします。これは、レンダリング・キットのdesktopまたはmobileで使用できます。
  - skinExtends: 拡張されるスキンのIDを指定します。たとえば、midnightスキンを気にいっているが、そのスキン内で異なるフォント・サイズが必要だとします。スキンを構成してmidnight.desktopスキンを拡張し、スキンのソース・コードを編集してフォント・サイズをオーバーライドできます。
  これらの属性は、追加、編集または削除できます。詳細は、第20.5.5.5項「アセットの属性の設定」を参照してください。

使用可能: このチェック・ボックスを選択または選択解除することにより、ポータルでスキンを使用できるかどうかを制御できます。

詳細は、第20.5.3項「アセットの表示および非表示」を参照してください。

ヒント:

スキンの表示または非表示の他に、WebCenter Portalの任意のポータル、すべてのポータルまたは選択されたポータルのいずれかで、共有スキンを使用できるように制御することも可能です。詳細は、第20.5.5項「アセットのプロパティの設定」を参照してください。

編集: 詳細は、第24.4項「スキンの編集」を参照してください。