| Oracle® Fusion Middleware Oracle WebCenter Portalでのポータルの構築 11gリリース1 (11.1.1.8.3) E50013-03 |
|
 前 |
 次 |
この章では、WebCenter Portalでスキンを作成および管理する方法について説明します。
この章の内容は、次のとおりです。
|
権限: 共有スキンでこの章のタスクを実行するには、アプリケーション・レベルの ポータル・レベルのスキンでこの章のタスクを実行するには、ポータル・レベルの権限 |
スキンとは、ポータルのページ上で使用される様々なコンポーネントの色、フォントおよびその他の外観を定義するリソースです。スキンによってユーザー・インタフェースの外観が変わりますが、アプリケーションの動作が変わることはありません。スキンを使用することで、個別のポータルに独自の個性を与えたり、特定のブランド設定を適用したりして、組織に適した外観を実現できるようになります。
スキンは、カスケード・スタイル・シート(CSS)仕様に基づきます。スキンは、CSSスタイルを定義する様々なセレクタ、またはコンポーネントの異なる部分のプロパティで構成されます。コンポーネントのスタイル関連のプロパティを変更することによって、コンポーネントのルック・アンド・フィールを調整できます。背景色、前景色、フォント・スタイルなど、一部のセレクタはグローバルで、すべてのコンポーネントに影響する場合があります。
各スキンは、ページ・テンプレートとともに機能して、ポータル内のページのルック・アンド・フィール全体を決定します。ページ・テンプレートはページ上のコンポーネントの場所と動作を制御し、スキンはコンポーネントの視覚的な外観を制御します。スキンのスキン・セレクタは、ページ・テンプレートのスタイル・クラスに対応しているため、スキンの設計時には、そのスキンが目的のページ・テンプレートで使用できることを確認する必要があります。
各ページ・テンプレートで優先スキンを定義すると、それぞれのページ・テンプレートで最適に機能するスキンを指定できます。ページ・テンプレートをポータルのデフォルト・ページ・テンプレートまたはシステム・デフォルトとして選択すると、デフォルトのスキンからページ・テンプレートの優先スキンに自動更新されます。
組込みスキン
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項「WebCenter Portalの組込みページ・テンプレートについて」を参照して下さい。
組込みスキンはいずれも、直接編集することはできません。これらのスキンのいずれかを要件に合うように変更する場合、「コピー元」リストから組込みスキンを選択して新しいスキンを作成し、新しいスキンで必要な調整を行う必要があります。
ユーザーがページを作成するときには、デフォルト・スキンを使用して、ページとそのコンポーネントを決定します。これにより、ポータルのすべてのページの外観に一貫性が保たれます。
スキンはページ・テンプレートとともに機能して、ポータルのページのルック・アンド・フィールを決定します。デフォルトのページ・テンプレートを設定すると、デフォルトのスキンは、そのページ・テンプレートの優先スキン(ある場合)に自動で設定されます。
|
注意: デフォルトのスキンを、ページ・テンプレートの優先スキン以外のスキンに変更する場合、ポータルのページの表示状態が予想どおりにならないことがあります。詳細は、第21.6項「ページ・テンプレートの優先スキンの設定」を参照してください。 |
この項の内容は、次のとおりです。
|
権限: このタスクを実行するには、ポータルのポータル・モデレータであるか、 権限の詳細は、第29.1項「ポータルのロールと権限について」を参照してください。 |
すべてのポータルには、デフォルト・スキンを含むデフォルト・アセットのセットがあります。ポータルのデフォルト・スキンは、ポータルのすべてのページに適用されます。ただし、管理ページを除きます。管理ページでは、常にFusion FXスキンが使用されます。ポータルを作成する場合、デフォルトでは、ポータルは、その作成時に使用されるポータル・テンプレートに定義されたページ・テンプレートの優先スキンを継承します。ポータル・テンプレートでデフォルトのページ・テンプレートを定義しない場合、システムのデフォルトのページ・テンプレートの優先スキンがかわりに使用されます。
ポータルのページに異なるスキンを使用するために、ポータル管理でデフォルト・スキンの設定を変更できます。
ポータル管理の「設定」ページ(第7.3.1項「ポータルのルック・アンド・フィール設定へのアクセス」を参照)にある「アセット」で、新規の「スキン」を選択します(図24-1)。
リストされるスキンは、「共有アセット」ページまたは「アセット」ページ上のポータルで使用できるようにしたスキンです(第20.5.3項「アセットの表示および非表示」を参照)。[system default]での選択は、システム管理者がすべてのポータルのデフォルトとして指定したスキンに適用されます。詳細は、Oracle Fusion Middleware Oracle WebCenter Portalの管理のデフォルト・スキンの選択に関する項を参照してください。
詳細は、第7.3.3項「ポータルのスキンの変更」を参照してください。
|
権限: このタスクを実行するには、( |
システム管理者は、システム(またはアプリケーション・レベル)のデフォルト・スキンとして使用するスキンを選択できます。システムのデフォルト・スキンは、ホーム・ポータルのページ、およびポータルの作成に使用されるポータル・テンプレートでデフォルト・スキンを定義しないポータルのページに適用されます。
システムのデフォルト・スキンは、特定のスキンがすでに設定されている既存のポータルには適用されません。また、管理ページには、システムのデフォルト・スキンが適用されません。管理ページでは、常にFusion FXスキンが使用されます。
システムのデフォルト・スキンの設定方法については、Oracle Fusion Middleware Oracle WebCenter Portalの管理のデフォルト・スキンの選択に関する項を参照してください。
デフォルトでは、ホーム・ポータルの外観はシステムのデフォルト・スキンによって決定されます。ただし、ユーザーは、ユーザー・プリファレンスの設定を通じて、ホーム・ポータルの表示に適用されるスキンを変更できます。詳細は、『Oracle Fusion Middleware Oracle WebCenter Portalの使用』のビューのルック・アンド・フィールの変更に関する項を参照してください。
アプリケーションの外観に関して特定のブランド要件がある場合は、組込みスキンを使用するのではなく、独自のスキンを作成する可能性があります。
|
注意: スキンの作成はかなり複雑なタスクであり、CSSの知識と、ページ・テンプレートでスキンがどのように使用されるかについての知識が必要になります。このため、最初のスキンの設計は、経験豊富なWeb開発者が仕上げる必要があります。 |
スキンは、アプリケーション・レベルまたはポータル・レベルで作成できます。アプリケーション・レベルのスキンは、ポータルが特に除外されていないかぎり、すべてのポータルで使用できます。ポータル・レベルのスキンは、作成元のポータルでのみ使用できます。
スキンを作成するには:
次のいずれかに移動します。
アプリケーション・レベルのスキンを作成するには、「共有アセット」ページに移動します。詳細は、第59.2項「共有アセットへのアクセス」を参照してください。
ポータル・レベルのスキンを作成するには、そのスキンを作成するポータルの「アセット」ページに移動します。詳細は、第20.2項「ポータル・アセットへのアクセス」を参照してください。
左側のパネルで、「外観とレイアウト」の下の「スキン」をクリックします。
ツールバーで、「作成」(図24-2)をクリックします。
「新規スキンの作成」ダイアログ(図24-3)の「名前」フィールドに、スキンの名前を入力します。
この名前は、「アセット」ページまたは「共有アセット」ページに表示され、スキンの選択時にはリストに表示されます。名前は、できるだけわかりやすいものにする必要があります。
「説明」フィールドに、スキンの説明を入力します。
説明は、「アセット」または「共有アセット」ページで、スキン名の下に表示されます。また、スキンの選択時にツールチップとして表示されます。ユーザーがこの特定のスキンを使用するかどうかを判断する上で、この説明が役立つものであることが必要です。
「コピー元」リストから既存のスキンを選択し、新しいスキンの原案として使用します。
「作成」をクリックします。
新しく作成したスキンが、「アセット」または「共有アセット」ページにリストされます。スキンの横にある空のチェック・ボックスは、ページ・テンプレートがまだ公開されていないため、他のユーザーは使用できないことを示しています。スキンの公開の詳細は、第20.5.3項「アセットの表示および非表示」を参照してください。
最初の作成後、新しいスキンは「コピー元」リストから選択したスキンと同一になります。スキン作成の次の手順では、要件に合せてスキンを編集します。詳細は、第24.4項「スキンの編集」を参照してください。
新しいスキンを作成する際には、既存のスキンをコピーします。このコピーを希望のスキンに変更するには、コピーを編集して要件に合せる必要があります。
|
注意: スキンの編集はかなり複雑なタスクであり、CSSの知識と、ページ・テンプレートでスキンがどのように使用されるかについての知識が必要になります。このため、スキンの編集は、経験豊富なWeb開発者が仕上げる必要があります。 |
スキンの作成後、ポータル内のコンポーネントで必要なADF Facesスキン・セレクタを定義する必要があります。たとえば、.ADFDefaultFontFamily:aliasセレクタを使用して、次のようにポータルにフォント・ファミリを指定できます。
.AFDefaultFontFamily:alias {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
}
詳細の参照先は、次のとおりです。
ADF Facesスキン・セレクタの概要は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・セレクタに関する項を参照してください。スキンで使用できるセレクタについては、JDeveloperのオンライン・ヘルプも参照してください。これらの情報は、JDeveloperのオンライン・ヘルプのFusionのADF Facesコンポーネントのスキン・セレクタ、およびFusionのデータ視覚化ツール・コンポーネントのスキン・セレクタを参照してください。
ADF Facesコンポーネントのスタイル・セレクタの定義は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のスキン・スタイル・プロパティの定義に関する項とコンポーネントのスタイル・プロパティの変更に関する項を参照してください。
コンポーザ・コンポーネントのスキン固有のセレクタの詳細は、『Oracle Fusion Middleware 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ファイル内で目的のサイズをスキン・セレクタに指定します。
「ソースの編集」ダイアログを使用してスキンのソース・コードを編集すると、コードの形式が検証され、なんらかのタグが足りなかったり、不適切に追加された場合はエラー・メッセージが表示されます。
|
注意: スキンのソース・コードのスキン・セレクタを編集する予定の場合は、セレクタに関するCSS仕様を十分に理解している必要があります。拡張しているスキンに自分のセレクタより詳細なセレクタがあると、スタイルが取得されない可能性があります。 |
スキンの基本の外観設定を編集するには:
次のいずれかに移動します。
アプリケーション・レベルのスキンを編集するには、「共有アセット」ページに移動します。詳細は、第59.2項「共有アセットへのアクセス」を参照してください。
ポータル・レベルのスキンを編集するには、そのナビゲーション・モデルを所有するポータルの「アセット」ページに移動します。詳細は、第20.2項「ポータル・アセットへのアクセス」を参照してください。
左側のパネルで、「外観とレイアウト」の下の「スキン」をクリックします。
編集するスキンの行で「編集」クイック・リンクをクリックします。
「編集」ダイアログ(図24-4)の「アイテム」リストから、スキン・プロパティを更新するターゲット領域を選択します。
ページ・テンプレート: ページで使用するテンプレートの背景色、背景イメージおよびフォントを選択できます。
ページ: ページ背景の色とイメージを選択できます。
タスク・フロー/ポートレット: ページのタスク・フローとポートレットの背景色およびイメージを定義できます。
「背景色」リストから、ターゲット領域で使用する背景色を選択します。
背景色を選択すると、そのRGB値がテキスト・ボックスに表示され、右側の「プレビュー」パネル内で、選択したターゲット領域がその色に変わります。
「背景イメージ」フィールドに、背景イメージとして使用するイメージのURIパスを入力します。
|
注意: 絶対URL (このURLはブラウザのアドレス・フィールドに入力しても機能します)、またはWebCenter Portal内のどこかに配置されたイメージを指す相対URLのいずれかを指定できます。WebCenter Portalにイメージを格納するには、『Oracle Fusion Middleware Oracle WebCenter Portalの使用』のファイルのアップロードに関する項に示すように、ドキュメント・ツールを使用して必要なファイルをアップロードする必要があります。その後、『Oracle Fusion Middleware Oracle WebCenter Portalの使用』のフォルダまたはファイルのURLの取得に関する項に示すように、イメージのURLを取得できます。 |
背景イメージの繰返し(水平方向、垂直方向または両方)を選択できます。要件に応じて、次の項目を選択します。
水平方向に繰返し: 背景イメージをページの上部で水平方向に整列して表示します。イメージは、水平方向のバー全体に繰り返されます(図24-5)。
垂直方向に繰返し: 背景イメージをページの左側で垂直方向に整列して表示します。イメージは、垂直方向のバー全体に繰り返されます(図24-6)。
「水平方向に繰返し」と「垂直方向に繰返し」を選択して、選択したイメージをターゲット領域全体で繰り返します(図24-7)。
「フォント・ファミリ」リストから、ページ・テンプレート領域で使用するフォントを選択します。
「フォント・ファミリ」リストは、「アイテム」リストで「ページ・テンプレート」が選択される場合のみ表示されます(手順4を参照)。
終了したら、「保存して閉じる」をクリックします。
次のオプションは、「アセット」ページまたは「共有アセット」ページに表示され、スキンの管理に使用できます。
作成: 詳細は、第24.3項「スキンの作成」を参照してください。
削除: スキンが不要になった場合に削除できます。
詳細は、第20.5.7項「アセットの削除」を参照してください。
アップロード: JDeveloperを使用して開発されたスキンを含むアーカイブ・ファイルをアップロードできます。
詳細は、第20.6.2項「アセットのアップロード」を参照してください。
ダウンロード: スキンをアーカイブ・ファイルにダウンロードして、JDeveloperでさらに開発できます。
詳細は、第20.6.1項「アセットのダウンロード」を参照してください。
アクション
コピー: スキンのコピーを作成できます。
詳細は、第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項「スキンの編集」を参照してください。
