プライマリ・コンテンツに移動
Oracle® Fusion Middleware Oracle WebCenter Portalでのポータルの構築
12c (12.2.1.1)
E77297-02
目次へ移動
目次

前
次

60 ポータルのルック・アンド・フィールの作成

この章では、ページ・テンプレートやスキンなど、WebCenter Portalで使用可能な機能を使用してポータルのルック・アンド・フィールを作成する方法について説明します。この章ではまた、モバイル機器での表示用にポータルのルック・アンド・フィールを最適化する方法についても説明します。

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

権限

この章は、WebCenter Portalの機能を使用して、組織内のポータルに説得力のあるルック・アンド・フィールを作成しようとするWeb開発者を対象としています。

ポータルのルック・アンド・フィールの制御機能を使用するには、適切なアセットに対するアプリケーション・レベルのCreate, Edit and Delete権限が必要です。Application Specialistロールを持つユーザーは、これらの権限を自動的に付与されます。アプリケーション・レベルの権限の詳細は、『Oracle WebCenter Portalの管理』のアプリケーション・ロールと権限の概要に関する項を参照してください。

60.1 ルック・アンド・フィールの作成について

Web開発者の役割の1つは、すべてのポータルに適用できる、その企業ならではの強い影響力のあるルック・アンド・フィールを作成して、組織のWebという存在に一貫したブランド・イメージの外観を提供することです。

ルック・アンド・フィールの作成には、次のような複数のテクノロジが関与しています。

  • HyperText Markup Language (HTML)は、WebページおよびWebブラウザに表示できるその他の情報を表示するための主要言語です。

  • Cascading Style Sheets (CSS)は、一貫性のあるルック・アンド・フィールを確認し、フォント、色、スペースなどのスタイルをWebドキュメントに追加するためのシンプルなメカニズムを提供します。CSSを使用するとコンテンツをプレゼンテーションから分割できるため、アクセシビリティが向上し、異なる状況(携帯電話やスクリーン・リーダー機器など)に対してコンテンツを容易にレンダリングできます。

  • JavaScriptはスクリプト言語で、通常、強化されたユーザー・インタフェースと動的なWebサイトを作成するためにWebブラウザの一部として実装されます。

  • Oracle Application Development Framework (ADF)は、開発者に対してJava EEアプリケーション開発をより速くより簡単にすると同時に、実証済のソフトウェア・パターンを利用して、開発するアプリケーションを確実にスケーラブルで高性能なものにします。

  • 式言語(EL)は、Java EE Webコンテナに格納されたアプリケーション・データの取得および操作のための演算子を提供することで、Webアプリケーション・データを使用する簡単な方法を提供します。

WebCenter Portalには、これらのテクノロジを使用してアプリケーション、個々のポータル、ページ、コンポーネントおよびコンテンツのルック・アンド・フィールを制御する、次の機能が備わっています。

  • ページ・テンプレートは、ページの構造とレイアウトを定義します。ページ・テンプレートには、通常、ページ上部のヘッダー、ページ上部または重要なリンク先のリンクのサイドバーのナビゲーション構造、コンテンツ領域、ページ下部のフッターなどが含まれます。

    ページ・テンプレートの詳細は、「ページ・テンプレートの使用」を参照してください。

  • ナビゲーションは、ポータルまたは外部のリソースのコンテンツにアクセスするためのリンクを提供します。たとえば、ポータルには、各ページ上部に沿って並ぶ一連のタブやメニュー、各ページの横にあるツリー構造やリンクのリスト、ユーザーがポータル内の現在の場所にたどり着くまでのパスを示すブレッドクラム・トレイルなどが含まれます。

    ナビゲーションの詳細は、「ポータル・ナビゲーションのカスタマイズ」および「ページ・テンプレートへのナビゲーションの追加」を参照してください。

  • スキンは、色、フォント、その他の外観を定義して、個々のポータルWebCenter Portalアプリケーション全体に独自の個性を与えたり、特定のブランド設定を提供します。

    スキンの詳細は、「スキンの使用」を参照してください。

  • ページ・スタイルは、新しく作成するページのレイアウトを記述し、そのページでサポートされるコンテンツのタイプも決定できます。たとえば、Wikiページ・スタイルでは、インスタントwikiが用意されていて、「空白」ページ・スタイルにはそのスタイルに基づいたページにユーザーが追加できるコンテンツのタイプに対する制限がほとんどありません。

    ページ・スタイルの詳細は、「ページ・スタイルの使用」を参照してください。

  • コンテンツ・プレゼンタ表示テンプレートは、選択したコンテンツのスタイルとレイアウトを定義します。

    コンテンツ・プレゼンタ表示テンプレートの詳細は、「コンテンツ・プレゼンタ表示テンプレートの使用」を参照してください。

60.2 スキンの定義のヒント

WebCenter Portalのスキンを作成する際、それを大まかな観点と細かい観点から見ることができます。大まかなレベルでは、背景やページ中央などのページ内の多数の大きな要素にごく基本的なスタイル技術を使用して、特定の企業ブランドに対するルック・アンド・フィールを容易に施すことができます。細かいレベルでは、ページ内の特定のコンポーネントとコントロールにスタイルを適用できます。スキンを開発する際に最も効率的な方法は、大まかな要素の定義から開始し、次に細かいスタイルを使用して全体のルック・アンド・フィールを企業ブランドに沿って調整します。

多くの場合、スタイルのハイブリッド・モデルが非常に効果的です。大まかな要素(ページ背景、ボディの主要部分など)を取り込んでそれらとともに従来のCSS手法を使用すると、ADFスキンの使用が特定的になっても、ともに機能してWebCenter Portalの外観全体を生成します。

式言語(EL)を使用すると、テンプレート・デザイン内のナビゲーション用の様々なオブジェクトにアクセスできます。EL内のループは単純で、コーディングはページ・テンプレートとインラインで実行されます。通常のHTMLを直接ループ・マークアップに混在させることができます。

60.2.1 静的アセット

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

60.3 ポータルのモバイル機器への最適化について

応答するWebデザインを使用すると、Webページは異なるフォーム・ファクタに柔軟に適応できるようになります。それはWebの世界でWebコンテンツをデスクトップ・ブラウザ、タブレット、スマートフォンに配信する1つの方法として始まりました。

これらの技術により、HTML/CSSマークアップから類似のルック・アンド・フィールを持つポータルへと迅速に進むことができます。また、モバイル機器から表示する際のポータルの操作性も向上します。

スマート・フォンやタブレット経由でWebCenter Portalにアクセスできるようにするには、次のような複数の方法があります。

  • 最も簡単な解決策は、ブラウザベースのオプションを持つ既存のWebCenter Portalアプリケーションを利用することです。この方法だと、WebCenter Portalが機器のネイティブ・ブラウザ内で確実にレンダリングされるようにする以外は、変更の必要はありません。ただし、この解決策ではユーザーは最善の操作性を得ることができません。

  • デバイス固有のテンプレートやページを構成して、デバイスのプロファイルに基づいてHTMLを生成することで、既存のWebCenter Portalアプリケーションを利用することも可能です。この解決策では、ユーザーの操作性は多少向上します。

  • ユーザーの操作性を最善にするには、ADFモバイルまたはネイティブiOSまたはAndroid SDKを使用して開発されたネイティブ・アプリケーションを作成できます。これにより最善のユーザーの操作性が得られますが、多くの先行開発時間とサポートも必要になります。

使用可能なビューポートに適応するアプリケーションを設計することで、適応できるプログラミング技術を使用できます。

様々なサイズの画面に表示されるポータル

ポータルを設計する際には、タブレット向けに設計し、デスクトップ向けにそのデザインを拡大します。スマート・フォンには、個々のデザインを作成する必要があります。これらのデザインは、ページ・テンプレートにより実現します。

モバイル機器を設計する際に実行する最も重要な2つの点は、次のとおりです。

  • viewportメタ・タグを設定して、モバイルのブラウザで良好な初期ズームを設定します。

    ページ・テンプレートのページ定義のパラメータ・セクションで、viewportパラメータを次のように設定します。

    <parameter id="viewport" value="width=device-width, initial-scale=1.0"/>
    

    ページ・テンプレートのソース・コードの編集方法の詳細は、「アセットのソース・コードの編集」を参照してください。

    viewportパラメータの値は、viewportメタ・タグのcontent属性の値として使用されるので、推奨値の"width=device-width, initial-scale=1.0"に設定すると、次のメタ・タグがページに追加されます。

    <meta name="viewport" content="width-device, initial-scale=1.0"/>
    
  • max-widthをイメージに設定して、イメージをモバイルのブラウザにうまく合わせます。

    次のコードをCSSに追加します。

    img, object {
         max-width: 100%;
    }
    

ADFスキンはポートレットにより機能して共通のルック・アンド・フィールを実現しますが、多数のスタイルをHTMLに挿入するので、必ずリセット・スキンを作成して-tr-inhibitプロパティを使用します。

リセット・スキンは、次のようになります。

body {
     color: inherit;
     font: inherit;
}
af|document {
     -tr-inhibit: all;
}
af|commandLink {
     -tr-inhibit: all;
}
af|goLink {
     -tr-inhibit: all;
}
af|inputText::content {
     font: inherit;
}

リセット・スキンを設定して、図60-1で示すようにV1.2 ADFスキンから設定を継承します。

図60-1 リセット・スキン継承の設定

図60-1の説明が続きます
「図60-1 リセット・スキン継承の設定」の説明

CSS3メディア問合せを使用すると、小さいスクリーンへの適合、向きの調整など、特定の状況専用にCSSルールを記述できます。CSS3メディア問合せの例は、次のとおりです。

@media only screen and (max-width: 480px) {
     #content {
          margin: 0;
     }

     #navbarright {
          display: none;
     }
}

ADF Rich Facesには、次のモバイル・サポートが用意されています。

  • iPadのサポート

  • HTMLによるDVTコンポーネントのレンダリング

  • タッチ・ジェスチャのサポート

  • ページ・サイズの最大20%の縮小

適応する技術によりWebおよびタブレットのデザインを稼働できますが、デザインを電話向けに調整する必要があります。特定のスマート・フォンのユースケースに重点を置きます。個々のサイトと個々のテンプレートを作成し、コードに組み込んでスマート・フォンを検出して適切なデザインにリダイレクトします。

WebCenter Portalindex.htmlに追加できる簡単なJavaScriptリダイレクトの例は、次のとおりです。

<script>
     car Browser = navigator.userAgent;

     if (Browser.indexOf('iPad') > 0)
     {
          location.replace('http://<host>/CustomerAccount/faces/pages_home');
     }
     else if (Browser.indexOf('iPhone') > 0)
     {
          location.replace('http://<host>/CustomerAccount/faces/PhonePage.jspx');
     }
     else {
          location.replace('http://<host>/CustomerAccount/faces/pages_home');
     }
</script>

WebCenter Portalのようこそページのモバイル・バージョンへのリンクを記載したメッセージを表示するアプリケーション内の手動リダイレクトの例は、次のとおりです。

#{requestContext.agent.platformName=='windows' ? '' :
'Click <A HREF="http://<host>/myApp/faces/PhoneWelcome.jspx">here</A> to view the mobile site.' }

モバイル機器をWebCenter Portalのモバイル・バージョンに自動的にリダイレクトするアプリケーション内のリダイレクトの例は、次のとおりです。

#{requestContext.agent.platformName=='windows' ? '' :
'<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://<host>/myApp/faces/PhoneWelcome.jspx">' }

関連項目:

モバイル機器での表示用にデザインした代替ページを作成する方法の詳細は、「デバイス・グループのページ・バリアントの作成」を参照してください。

60.4 設計ツールについて

Google ChromeおよびFirefoxでビジュアル化機能と調査機能を使用すると、作業のスタイルを形作るために必要なCSSで非常に速く作業できるようになります。さらにCSS3には、従来はイメージで実現する必要があったビジュアルを提示できる、非常に強力な機能があります。たとえば、CSS3ジェネレータを使用して、ドロップ・シャドウやグラデーションなどのデザインを効率的に処理できます。最後に、JQueryなどのツール使用すると、Document Object Modelを操作してクライアント側の技術を使用して、どのような変更も実現できます。

図60-2は、Google Chrome内での調査機能の例を示しています。上部右側の隅にある「ログイン」リンクにカーソルを合わせると、ページのこの特定の要素に適用されているスタイルについて表示されます。これにより、簡単に特定のコンポーネントに対するスキンに戻って調整できるようになります。これは、細かいスキンの例です。

図60-2 Google Chrome検査機能

図60-2の説明が続きます
「図60-2 Google Chrome検査機能」の説明