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

この章では、モバイル機器での表示用にポータルのルック・アンド・フィールを最適化する方法を含む、WebCenter Portalで使用可能な機能を使用してポータルのルック・アンド・フィールを作成する方法について説明します。

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

第60.1項「ルック・アンド・フィールの作成について」
第60.2項「ポータルのモバイル機器への最適化について」
第60.3項「設計ツールについて」

権限:

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

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

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

ナビゲーションの詳細は、第22章「ナビゲーション・モデルの使用」を参照してください。
スキンは、色、フォント、その他の外観を定義して、個々のポータルやWebCenter Portalアプリケーション全体を個性的にしたり、特定のブランド設定を提供します。

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

ページ・スタイルの詳細は、第25章「ページ・スタイルの使用」を参照してください。
コンテンツ・プレゼンタ表示テンプレートは、選択したコンテンツのスタイルとレイアウトを定義します。

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

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

応答する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"/>
```
ページ・テンプレートのソース・コードの編集方法の詳細は、第20.4.2項「アセットのソース・コードの編集」を参照してください。

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 リセット・スキン継承の設定」の説明

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 Portalのindex.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.3 設計ツールについて

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

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

図60-2 Google Chrome検査機能

「図60-2 Google Chrome検査機能」の説明