| Oracle® Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド 11g リリース1(11.1.1.7.0) B72923-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle WebCenter Portal: Spacesユーザーズ・ガイド 11g リリース1(11.1.1.7.0) B72923-01 |
|
前 |
次 |
個々のスペースやSpacesアプリケーション全体に個性を持たせたり、特定のブランド情報と関連付けるために、ポータル設計者はスキンを使用して、組織に適した外観とルック・アンド・フィールを実現できます。
この章では、Spacesでスキンを作成および管理する方法について説明します。内容は次のとおりです。
様々なタイプのリソースの追加および編集の一般情報については、第11章「ポータルまたはコミュニティを作成するリソースの使用」を参照してください。
対象読者
この章は、Spacesアプリケーションでスキンの作成および管理を行うユーザーを対象としています。
Application-Skins-Create, Edit, and Delete Skinsというアプリケーション権限を持つポータル設計者は、アプリケーションレベルのスキンを管理できます。Space-Resources-Create, Edit, and Delete Resources (標準権限モデル)またはSpace-Skin-Create, Edit, and Delete Skins (アドバンスト権限モデル)の権限を持つスペース・モデレータは、スペースレベルのスキンを管理できます。ロールおよび権限の詳細は、第23章「セキュリティの理解」を参照してください。
スキンとは、スペースのページ上で使用される様々なコンポーネントの色、フォントおよびその他の外観を定義するリソースです。スキンによってユーザー・インタフェースの外観が変わりますが、アプリケーションの動作が変わることはありません。
スキンは、カスケード・スタイル・シート(CSS)仕様に基づきます。スキンは、CSSスタイルを定義する様々なセレクタ、またはコンポーネントの異なる部分のプロパティで構成されます。コンポーネントのスタイル関連のプロパティを変更することによって、コンポーネントのルック・アンド・フィールを調整できます。背景色、前景色、フォント・スタイルなど、一部のセレクタはグローバルで、すべてのコンポーネントに影響する場合があります。
デフォルトで、Spacesには特定の組込みスキンが用意されています(図14-1)。権限を持つユーザーは、組込みスキンを使用して、特定のスペースまたはアプリケーション全体の外観を変更できます。
組込みスキンでは要件を十分に満たさない場合は、Spaces内で独自のカスタム・スキンを作成して、アプリケーションまたは特定のスペースを必要に応じてブランド化できます。
Spacesは、Oracle JDeveloperのようなIDEを使用して新しいスキンを作成したり、カスタムのSpacesスキンを編集する柔軟性も備えています。これらのスキンはSpacesアプリケーションにアップロードして戻します。
アプリケーションの外観に関して特定のブランド要件がある場合は、組込みスキンを使用するのではなく、独自のカスタム・スキンを作成する必要がある可能性があります。Spacesでは、2つのレベル—アプリケーション・レベルとスペース・レベルでスキンを作成できます。
カスタム・スキンを作成するには、次の手順を実行します。
第11.1.4項「リソースへのアクセス」の手順に従って、Spacesアプリケーションまたはカスタム・スキンを作成するスペースの「リソース」ページに移動します。
左側のナビゲーション・パネルで、「外観とレイアウト」の下の「スキン」を選択します。
メニュー・バーで、「作成」をクリックします。
「新規スキンの作成」ダイアログで、「名前」フィールドに、カスタム・スキンの名前を入力します(図14-2)。
「説明」フィールドに、カスタム・スキンの説明を入力します。
説明は、「リソース」ページ内でスキン名の下、およびスキンを選択したときのツールチップとして表示されます。ユーザーがこの特定のスキンを使用するかどうかを判断する上で、この説明が役立つものであることが必要です。
「コピー元」ドロップダウン・リストから、新しいカスタム・スキンの開始点として使用する既存のスキンを選択します。
「OK」をクリックします。
新しく作成したカスタム・スキンが、「リソース」ページにリストされます。カスタム・スキンの横のグレーの丸いアイコンは、カスタム・スキンがまだ公開されていないため、他のユーザーは使用できないことを示しています。スキンの公開の詳細は、第14.4.1項「スキンの表示および非表示」を参照してください。
|
注意: Oracle JDeveloperなどのツールを使用してスキンを作成することもできます。このツールは、スキンの作成で優れた制御性と柔軟性を発揮します。詳細は、第14.6項「JDeveloperを使用したスキンの構築」を参照してください。 |
この項では、カスタム・スキンの編集方法について説明します。この項の内容は次のとおりです。
Spacesでは、ソース・コード編集および簡易編集という2種類のスキン編集がサポートされています。
この項の内容は次のとおりです。
ソース編集では、テキスト・エディタでカスタム・スキンのソース・コードを編集できます。これは、スキンのCSSファイルで使用可能なすべてのスキン・セレクタを編集できる強力な方法です。
カスタム・スキンのソース・コードを編集するには、「ソースの編集」ダイアログを使用します。このダイアログの「CSS」タブにソース・コードが表示されます(図14-3)。
スキンのCSSファイルは、ADFスキン・セレクタおよびコンポーザ・コンポーネントに関連するスキン・セレクタをサポートし、これらが含まれています。ADFスキン・セレクタの詳細は、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。コンポーザ・コンポーネントのスキン固有のセレクタの詳細は、『Oracle Fusion Middleware Oracle WebCenter Portal開発者ガイド』のコンポーザ・コンポーネントのスタイル・セレクタに関する項を参照してください。
スキンのCSSファイルには、ADFおよびコンポーザのスキン・セレクタに加えて、Spaces固有の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;
}
カスタム・スキンのソース・コードを編集する際は、要件に合うように任意のスキン・セレクタを追加、編集または削除できます。たとえば、デフォルトのフォント・サイズを上書きするには、例14-1に示すように、スキンのCSSファイル内で目的のサイズをスキン・セレクタに指定します。
「ソースの編集」ダイアログでコードを編集すると、コードの形式が検証されて、任意のタグが欠落するか、不正に追加された場合はエラー・メッセージが表示されます。
スキンのソース・コードの編集方法の詳細は、第14.3.2項「カスタム・スキンのソース・コードの編集」を参照してください。
簡易編集は、フォント、背景色および背景イメージというスキンの基本的な外観設定を編集できる簡単な方法です。簡易編集を行うには、「編集」ダイアログを使用します(図14-4)。
「編集」ダイアログでは、次に示すターゲット領域の設定を定義できます。各ターゲット領域は、スキンのCSSファイル内で使用可能なWebCenter Portal固有のスキン・セレクタ(第14.3.1.1項「ソース・コード編集について」を参照)にマップされます。
ページ・テンプレート - ページで使用するテンプレートの背景色、背景イメージおよびフォントを定義できます。スキンのCSSファイル内で、このターゲット領域は.WCPageTemplate:aliasセレクタにマップされ、すべてのページ・テンプレートがこれを使用します。
ページ - ページ背景の色とイメージを選択できます。このターゲット領域は、CSSファイル内の.WCContentスタイル・セレクタを設定します。
タスク・フロー/ポートレット - ページのタスク・フローとポートレットの背景色およびイメージを定義できます。これはCSSファイル内の.WCPortletContentMedium:aliasセレクタを設定します。このセレクタは、medium背景を使用する詳細表示フレームの背景色を定義するものです。
スキンのソース・コードの編集方法の詳細は、第14.3.3項「「編集」ダイアログを使用したカスタム・スキンの編集」を参照してください。
「ソースの編集」ダイアログを使用して、カスタム・スキンの基礎となるコードを表示し、スキンを構成するスキン・セレクタを調整します。
|
注意: スキン・セレクタを編集する予定の場合は、セレクタに関するCSS仕様を十分に理解している必要があります。スタイルがなぜ取得されないのかわからない状況に陥ることもあれば、拡張しているスキンに、自分のセレクタより詳細なセレクタがあることもよくあります。 |
カスタム・スキンのソース・コードを編集するには、次の手順を実行します。
第11.1.4項「リソースへのアクセス」の説明に従って、アプリケーションまたは目的のスペースの「リソース」ページに移動します。
左側のナビゲーション・パネルで、「外観とレイアウト」の下の「スキン」をクリックします。
右側に表示されるスキンのリストから、ソース・コードを編集するスキンを選択します。
「編集」メニューから、「ソースの編集」を選択します。
「ソースの編集」ダイアログで、必要な設定を変更します(図14-5)。
「OK」をクリックします。
「編集」ダイアログを使用してカスタム・スキンの簡易編集を行うには、次の手順を実行します。
第11.1.4項「リソースへのアクセス」の説明に従って、アプリケーションまたは目的のスペースの「リソース」ページに移動します。
左側のナビゲーション・パネルで、「外観とレイアウト」の下の「スキン」をクリックします。
右側に表示されるスキンのリストから、編集するスキンを選択します。
「編集」メニューから「編集」を選択します。
「編集」ダイアログの「アイテム」リストから、スキン・プロパティを更新するターゲット領域を選択します。
次のいずれかのオプションを選択します。
ページ・テンプレート - ページで使用するテンプレートの背景色、背景イメージおよびフォントを選択できます。
ページ - ページ背景の色とイメージを選択できます。
タスク・フロー/ポートレット - ページのタスク・フローとポートレットの背景色およびイメージを定義できます。
「背景色」リストから、ターゲット領域で使用する背景色を選択します。
背景色を選択するとそのRGB値が「色」フィールドに表示され、右側の「プレビュー」パネル内で、選択したターゲット領域がその色でハイライト表示されます。
「イメージ」フィールドに、背景イメージとして使用するイメージのURIパスを入力します。
|
注意: 絶対URL (ブラウザのアドレス・フィールドに入力してもこのURLは機能します)、またはSpaces内のどこかに配置されたイメージを指す相対URLのいずれかを指定できます。Spacesにイメージを保存するには、第43.8.1項「ファイルのアップロード」の説明に従って、ドキュメント・サービスを使用して必要なファイルをアップロードする必要があります。第43.27.1項「フォルダまたはファイルのURLの取得」の手順に従って、イメージのURLを取得できます。 |
背景イメージの水平方向と垂直方向での繰返しを選択できます。要件に応じて、次のチェック・ボックスを選択します。
水平方向に繰返し - 背景イメージをページの上部で水平方向に整列して表示します。イメージは、水平方向のバー全体に繰り返されます(図14-7)。
垂直方向に繰返し - 背景イメージをページの左側で垂直方向に整列して表示します。イメージは、垂直方向のバー全体に繰り返されます(図14-8)。
両方のチェック・ボックスを選択すると、選択されたイメージのコピーがターゲット領域全体で繰り返されます(図14-9)。
「フォント・ファミリ」リストから、ページ・テンプレート領域で使用するフォントを選択します。
フォント・リストは、ターゲット領域としてページ・テンプレートが選択される場合のみ表示されます。
「OK」をクリックします。
この項では、スキンの管理に関係するタスクについて説明します。この項の内容は次のとおりです。
カスタム・スキンを作成すると、デフォルトでは非表示としてマークされます。非表示のスキンは、アプリケーション、ホーム・スペースまたはその他のスペースでは使用できません。スキンを使用可能にするには、これを公開する必要があります。さらに、アプリケーション・レベルで作成したカスタム・スキンは、アプリケーション内のすべてまたは選択したスペースでのみ使用できるように制御できます。
スキンの表示または非表示は、その他のリソースと同じ手順に従います。詳細は、第11.4.3項「リソースの表示および非表示」を参照してください。
Spaces内でのリソースの可用性に関する一般情報については、第11.4.2項「リソースのプロパティの設定」を参照してください。
カスタム・スキンには一連のプロパティが関連付けられており、権限を持つユーザーは「プロパティの編集」ダイアログを通じてアクセスできます。
この項の内容は次のとおりです。
カスタム・スキン・プロパティを使用すると、次の操作を実行できます。
表示名と説明を入力できます
使用するアイコンを設定できます
カテゴリを適用してスキンを分類できます
可用性を指定できます(アプリケーションレベル・スキンの場合のみ)
属性の名前/値ペアを関連付けて、たとえば、選択したページ・スタイルに基づいて作成したページを表示モードと編集モードのどちらで開くかを制御できます
図14-10は、カスタム・スキンの「プロパティの編集」ダイアログを示しています。「一般」、「リソース使用率の除外」および「属性」セクションで、様々なプロパティを指定します。
各カスタム・スキンには、skinId、skinFamilyおよびskinExtendsという3つのデフォルト属性が関連付けられます。表14-1は、これらの属性について説明しています。
|
注意: 権限を持つユーザーは、カスタム・スキンの属性を追加、変更または削除できます。ただし、これらの属性を管理するには、属性を十分に理解している必要があります。 |
表14-1 スキンのデフォルト属性
| 属性 | 説明 |
|---|---|
|
|
スキンの一意の識別子を指定します。通常、これは、スキン・ファミリとレンダー・キットの組合せです(たとえば、 |
|
|
スキンが属するファミリを指定します。これは、様々なレンダーキットの多くのスキンが使用できる識別子です。たとえば、 |
|
|
拡張されるスキンのIDを指定します。たとえば、 |
カスタム・スキンの名前、説明およびカテゴリを設定するには、その他のリソースと同じ手順に従います。詳細は、第11.4.2.3項「リソースの名前変更、説明および分類」を参照してください。
アイコンをカスタム・スキンに関連付けるには、その他のリソースと同じ手順に従います。詳細は、第11.4.2.4項「アイコンのリソースへの関連付け」を参照してください。
スペース内でのアプリケーションレベルのカスタム・スキンの可用性を設定するには、その他のリソースと同じ手順に従います。詳細は、第11.4.2.5項「アプリケーションレベルのリソースの他のスペースにおける可用性の設定」を参照してください。
カスタム・スキンの属性を設定するには、その他のリソースと同じ手順に従います。詳細は、第11.4.2.6項「リソースの属性の使用」を参照してください。
デフォルト・スキン属性の詳細は、表14-1を参照してください。
アプリケーションまたはスペースで作成したカスタム・スキンに、すべてのユーザーがアクセス可能か、特定のユーザーまたはグループのみがアクセス可能かを制御できます。カスタム・スキンへのアクセスを設定するには、その他のリソースと同じ手順に従います。詳細は、第11.4.4項「リソースのセキュリティ設定」を参照してください。
Spacesでは、スキンのコピーを作成できます。スキンをバックアップしたり、使用中のオリジナルを保持してスキンを更新する場合に、この機能を使用できます。
スキンをコピーするには、その他のリソースと同じ手順に従います。一般的な手順については、第11.4.1項「リソースのコピー」を参照してください。
必要な権限が割り当てられていれば、どのカスタム・スキンも削除できます。スキンを削除するには、その他のリソースと同じ手順に従います。詳細は、第11.4.5項「リソースの削除」を参照してください。
各スキンには、スキンに関する有用な情報がまとめられた「バージョン情報」ページが関連付けられています(図14-11)。
スキンに関する情報にアクセスするには、その他のリソースと同じ手順に従います。「バージョン情報」ダイアログへのアクセス方法およびダイアログに表示されるプロパティの詳細は、第11.1.5項「リソースに関する情報の表示」を参照してください。
スキン固有のデフォルト属性の詳細は、表14-1を参照してください。
Spaces管理者は、スキンを変更することによって、すべてのユーザーに対するアプリケーションのデフォルトの外観をカスタマイズできます。スペース・モデレータは、スキンを変更することによって、すべてのユーザーに対するスペースの外観をカスタマイズできます。個々のユーザーは、ユーザー・プリファレンスの設定を通じて、ホーム・スペースに適用されるスキンを変更できます。
この項の内容は次のとおりです。
Spacesアプリケーションのスキンを設定すると、ホーム・スペースと、アプリケーションレベルのスキン設定を使用するすべてのスペースにスキンが適用されます。スキンは、新しく作成されるスペースにも適用されます。しかし、特定のスキンがすでに設定されている既存のスペースにはスキンが適用されません。また、管理ページにはスキンが適用されません。デフォルトでは、これらのページではFusion FXスキンを使用します。
Spacesアプリケーションにスキンを適用するには、次の手順を実行します。
「スペース管理」ページを開きます。第4.1項「「スペース管理」ページへのアクセス」を参照してください。
「構成」タブ、「一般」サブタブの順にクリックします。
次のいずれかを実行します。
表示されるリストからアプリケーション・スキンを選択します。(図14-12)。
|
注意: 「アプリケーション・スキン」リストに目的のスキンが表示されない場合は、そのスキンが非表示とマークされている可能性があります。スキンを選択できるためには、使用可能とマークされている必要があります。詳細は、第14.4.1項「スキンの表示および非表示」を参照してください。 |
「拡張編集オプション」アイコンをクリックし、「式ビルダー」を選択して、特定の条件に基づいてデフォルトのアプリケーション・スキンを動的に決定するEL式を入力します。
たとえば、ログインしたユーザーが属する部門や組織に応じてデフォルト・スキンを変更できます。
「適用」をクリックします。
選択するスキンは、ホーム・スペース、作成される新しいスペース、およびアプリケーションレベルのスキン設定を使用するすべてのスペースに適用されます。アプリケーションレベルのスキン設定を上書きするスペースには、スキンは適用されません。
スキンをスペースに適用すると、スペースのすべてのページにスキンが適用されます。ただし、管理ページは影響を受けずに、常にデフォルト・スキンで表示されます。スペースへのスキンの適用の詳細は、第53.4.10項「スペースのスキンの変更」を参照してください。
ホーム・スペースの個人ビューへのスキンの適用の詳細は、第38.5項「ビューのホーム・スペースのルック・アンド・フィールの変更」を参照してください。
Spacesの編集機能を超えてスキンを作成することが必要な場合や、JDeveloperでの作業が必要な場合があります。これを行うには、いくつかの方法があります。
「ソースの編集」オプションを使用して、スキンのソース・コードを編集します。ソース・コードは「ソースの編集」ダイアログで直接編集することもできれば、ダイアログのコンテンツをJDeveloperにコピーして編集し、編集済のコードをダイアログにコピーして戻すこともできます。詳細は、第14.3.2項「カスタム・スキンのソース・コードの編集」を参照してください。
既存のSpacesのスキンをダウンロードし、JDeveloperにインポートして編集し、Spacesアプリケーションにアップロードして戻します。
JDeveloperでまったく新しいスキンを作成し、Spacesにアップロードします。
Spacesからスキンをアップロードおよびダウンロードする手順は、第11.5.2項「リソースのダウンロード」および第11.5.3項「リソースのアップロード」を参照してください。
Oracleでは、スキンなどのSpacesリソースを開発するために、特別なJDeveloperワークスペース(DesignWebCenterSpaces.jws)が用意されています。このワークスペースでは、スキンを作成および編集するほか、テスト目的でSpacesにスキンをアップロードできる設計環境が提供されています。詳細およびJDeveloperワークスペースのダウンロードは、『Oracle Fusion Middleware Oracle WebCenter Portal開発者ガイド』のSpacesアプリケーションのリソースの開発に関する項を参照してください。
Spacesで使用するスキンを作成する際の具体的な考慮事項については、『Oracle Fusion Middleware Oracle WebCenter Portal開発者ガイド』のスキンの作成と管理に関する章を参照してください。
