| 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 |
|
前 |
次 |
Oracle WebCenter Portal: Spacesのルック・アンド・フィールを作成するには、ページ・テンプレート、ナビゲーション、スキン、ページ・スタイル、コンテンツ・プレゼンタ表示テンプレートなどの機能を組み合せて使用します。この章では、これらの機能を一緒に使用する方法および最大限に利用するためのヒントについて説明します。
この章の内容は次のとおりです。
ルック・アンド・フィールの作成には、次のような複数のテクノロジが関与しています。
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: Spacesには、アプリケーション、個々のスペース、ページ、コンポーネントおよびコンテンツのルック・アンド・フィールを制御する、次の機能が備わっています。
ページ・テンプレート: ページの構造とレイアウトを定義します。ページ・テンプレートには、通常、ページ上部のヘッダー、ページ上部または重要なリンク先のリンクのサイドバーのナビゲーション構造、コンテンツ領域、ページ下部のフッターなどが含まれます。
ページ・テンプレートの詳細は、第13章「ページ・テンプレートの使用」を参照してください。
ナビゲーション: WebCenter Portal: Spacesまたは外部のリソースのコンテンツにアクセスするためのリンクを提供します。たとえば、WebCenter Portal: Spacesには、各ページ上部に沿って並ぶ一連のタブやメニュー、各ページの横にあるツリー構造やリンクのリスト、ユーザーがWebCenter Portal: Spaces内の現在の場所にたどり着くまでのパスを示すブレッドクラム・トレイルなどが含まれます。
ページ・テンプレートの詳細は、第12章「ナビゲーションの使用」を参照してください。
スキン: 色、フォント、その他の外観を定義して、個々のスペースやSpacesアプリケーション全体を個性的にしたり、特定のブランド設定を提供します。
ページ・テンプレートの詳細は、第14章「スキンの使用」を参照してください。
ページ・スタイル: 新しく作成するページのレイアウトを記述し、コンテンツのタイプをページ・サポートに指示することもできます。たとえば、Wikiページ・スタイルでは、インスタントwikiが用意されていて、「空白」ページ・スタイルにはそのスタイルに基づいたページにユーザーが追加できるコンテンツのタイプに対する制限がほとんどありません。
ページ・テンプレートの詳細は、第15章「ページ・スタイルの使用」を参照してください。
「コンテンツ・プレゼンタ表示テンプレート」: 選択したコンテンツのスタイルとレイアウトを定義します。
ページ・テンプレートの詳細は、第42.5項「表示テンプレートの選択」を参照してください。
この項の内容は次のとおりです。
ページ・テンプレートの設計で最大の問題は、テンプレートとページ・コンテンツの両方の要素でコンポーネントをどのようにレイアウトするかという点です。基本的に次の2つの方針があります。
フロー・レイアウト: コンポーネントには固定サイズがあり、左右に配置されます。必要に応じて、ブラウザにスクロール・バーが表示されます。
ストレッチ・レイアウト: コンポーネントはページ上の使用可能なスペースに表示されるようストレッチされます。必要に応じて、個々のコンポーネントにスクロール・バーが表示されます(つまり、1ページ上に複数のスクロール・バーが表示されることがあります)。ストレッチにより、表示可能な領域を最大限使用できるようになります。タブ、アコーディオン、メニュー、ポップアップを使用して、表示可能な領域を実質的に拡張します。
ほとんどのWebサイトでフロー・レイアウトが使用されていて、ユーザーには親しみやすく感じられそうなため、フロー・レイアウトを使用することもできます。しかし、種類が豊富なダッシュボードとアプリケーション向けの場合やデスクトップ操作を模倣する必要がある場合には、ストレッチ・レイアウトが優れています。同一ページでフロー・レイアウトとストレッチ・レイアウトを結合することも可能です。
使用する方針に応じて、次のようにページの垂直方向の動作が異なります。
レイアウト・フロー:
ヘッダーまたはフッターは常に表示されているわけではありません
ページの高さはコンポーネントに基づいて計算されます
コンテンツが垂直方向にストレッチされることはありません
ブラウザにスクロール・バーが表示されることもあります
ストレッチ・レイアウト:
ヘッダーおよびフッターは常に表示されます
ページの高さはブラウザ・ウィンドウにより決まります
コンテンツは垂直方向にストレッチされます
コンテンツにスクロール・バーが表示されることもあります。
使用する方針に応じて、次のようにページの水平方向の動作が異なります。
レイアウト・フロー:
ページにサイド・バー(左側のナビゲーションなど)がある場合でも、サイド・バーは常に表示されているわけではありません
ページの幅はコンポーネントに基づいて計算されます
一部のコンポーネントは、既存スペースを満たすようにストレッチされることがあります
ブラウザにスクロール・バーが表示されることもあります
ストレッチ・レイアウト:
ページにサイド・バー(左側のナビゲーションなど)がある場合、サイド・バーは常に表示されています
ページの幅はブラウザ・ウィンドウにより決まります
コンテンツは水平方向にストレッチされます
コンテンツにスクロール・バーが表示されることもあります。
ページ・テンプレートのレイアウトを定義する際には、次のような複数の検討事項があります。
テンプレート開発者は、コンテンツ・ファセットをページのフロー領域またはストレッチ領域に配置するかどうかを制御しますが、コンテンツを制御することはできません。したがって、ページ・コンテンツ作成者は、レイアウトの方針を認識して考慮する必要があります。
ページ・テンプレートは変更される可能性があるため、ページの作成およびカスタム・コンポーネントの設計では、フローおよびストレッチのコンテキストで適切に表示されるようにします。
トリニダードまたはHTMLタグを使用することも可能ですが、ADF Facesコンテナを使用してページ・レイアウトを作成することをお薦めします。
ブロック・レイアウト(図10-1):
af:panelStretchLayout: 「top」、「start」、「center」、「end」および「bottom」を持つストレッチ・フレーム
af:panelSplitter: ユーザーによる変更可能な2つのセクションに分割されたストレッチ・ボックス
af:panelDashboard: ストレッチされた、ボックスのタイル状構造
af:panelGroupLayout: 一連のコンポーネント(デフォルト、水平、垂直、スクロール構造)
af:panelBorderLayout: 「top」、「start」、「center」「end」および「bottom」を持つフロー・フレーム
trh:tableLayout、trh:rowLayout、およびtrh:cellFormat: フローRaw HTML表構造
レイアウト・コンポーネントごとの外観の詳細は、ADF Facesリッチ・クライアントのデモ・オンライン・ツール(http://jdevadf.oracle.com/adf-richclient-demo/faces/visualDesigns/index.jspx)を参照してください。コンポーネントを表示し、「ソースの表示」メニューから「ページ」または「ページ・テンプレート」を選択し、使用されているタグと属性およびコンポーネント構造のページの外観を確認します。
ストレッチ・レイアウトの作成:
作成する外部構造に格納されたコンテナは、ストレッチでき、その子をストレッチできます。documentコンポーネント内部のdecorativeBox、panelStretchLayout、panelSplitterなどのコンテナを使用して、ストレッチ可能な外部フレームを作成します。
|
注意: 各レイアウトまたはパネル・コンポーネントのタグ・ドキュメントでは、ストレッチできるかどうか、およびそのコンポーネントの「形状管理」ドキュメントでストレッチを実現する方法が識別されます。一部のコンポーネントには、子をストレッチさせるかどうかを決定する属性が含まれています。例: |
フロー・アイランドを作成します。ストレッチ可能な外部構造の内部に、フロー(ストレッチでない)コンポーネントのアイランドを作成します。これをストレッチからフローへ遷移させるには、この遷移ではストレッチ対象となっていてもその子をストレッチさせないため、panelGroupLayoutをtype="scroll"またはtype="vertical"と一緒に使用します。
ストレッチ・コンポーネントをフロー・アイランドに埋め込まないでください。
フロー・コンテナ内部では、何かを垂直方向にストレッチ(高さにパーセント値を使用して)させないでください。
多数のリーフ・コンポーネントは、分離された状態では意味をなしません。たとえば、一連の入力コンポーネントがある場合、それらを単にpanelGroupLayoutに配置することはないでしょう。ラベルとフィールドがそろうようにpanelFormLayoutに配置すれば、ずっと使いやすくなります。
positionスタイルを使用しないでください。
|
注意: 次のコンポーネントは、信頼できる状態でストレッチできないコンポーネントのごく一部です。
|
フロー・レイアウトの作成:
panelGroupLayoutやpanelBorderLayoutなどの非ストレッチ・コンテナを使用します。panelBorderLayoutを使用して、HTML表のコンポーネントの近似値を求めることができます。
複数のスクロール・バーを避けるために、type="vertical"を使用するかわりに、スクロールのpanelGroupLayoutコンポーネントをネストしないでください。
大半のストレッチ可能なADFコンポーネントは、dimensionsFrom="auto"でのフロー・コンテキストでも機能します。
コンポーネントを水平にストレッチさせるには、styleClass="AFStretchWidth"を(inlineStyle="width:100.0%"のかわりに)使用します。
af:divの近似値を求める手順は次のとおりです。
<af:group id="pt_navbarright" rendered="#{securityContext.authenticated}">
<div id="navbarright" class="floatright">
right side menu stuff...
</div>
</af:group>
af:groupはDOM構造を保護します。divにより、CSSスタイルと配置を適用できます。
カスタマイズ可能なコンポーネントの使用:
panelCustomizableで、layout="auto"を使用してその子をストレッチするかどうかを調べます。
フロー・レイアウトまたはストレッチ・レイアウトをサポートするには、showDetailFrameをstretchChildren="auto"と一緒に使用します。
次のメカニズムを使用して、コンポーネントの外観をカスタマイズできます。
カスタム・スタイルには、宣言的な手法(テーマ、ヒント、その他の属性)を使用します。たとえば、af:documentのtheme="dark"を使用してページをダーク・ブルーにします。
テーマ別のdecorativeBoxコンポーネントを使用して、サンプル・スキンで表示されるようなビジュアルな特徴と装飾境界線を持つページのレイヤーを編成します。すべてのスキンに代替テーマがあるわけではないため、区別が確認できないことがあります。decorativeBoxコンポーネントが異なる色の背景で表示されない場合、代替テーマの定義を持つスキンを使用していることが分かっているときには、falseに設定されている"oracle.adf.view.rich.tonalstyles.ENABLED"に対するweb.xml context-paramの設定をしていない可能性があります。
ご使用のドキュメント・コンポーネントにもテーマ属性が備わっているため、それを使用してページの主要な背景のスタイルを変更できます。
既存のスキンに必要なすべてが備わっていない場合には、一貫した外観の変更に対してカスタム・スキンを使用します。
インスタンス固有の代替スタイルには、styleClass属性を使用します。対応するスタイル定義は、カスタム・スキン、ドキュメント・コンポーネントのmetaContainerファセット、ソース・タグにより提供されるスタイルなどの管理しやすい場所に保存します。
最後の手段として、inlineStyle、contentStyle、labelStyleなどのコンポーネントの属性を使用します。これらの属性は、宣言性は少なく、管理が難しく、より多くのページのRaw HTMLサイズを使用し、前述のメカニズムを使用している場合には不要なこともあります。
スタイルはWebブラウザで直接処理されるため、非常に強力ですが、宣言性が少なくエラーを発生しやすいという代償を伴います。ブラウザではすべての要素のすべてのスタイルがサポートされていませんし、スタイルの特定の組み合わせでは明確でない結果となります。次のスタイル構成は回避してください。
"%"単位の"height"値を持つinlineStyle
"90%"から"100%"までの"width"値を持つinlineStyle(かわりにstyleClass="AFStretchWidth"またはstyleClass="AFAuxiliaryStretchWidth"を使用)
"height"値、"top"値、"bottom"値を持つinlineStyle
"width"値、"left"値、"right"値を持つinlineStyle
"position"値を持つinlineStyle
親コンポーネントによりストレッチされた子の場合、"width"値または"height"値を持つinlineStyle
スクロールバーの設置は、フロー・アイランド・コンテンツの周囲にのみとなります。ストレッチ外部フレームからフロー・アイランドへの切替え用遷移コンポーネントには、panelGroupLayout with layout="scroll"をお薦めします。このpanelGroupLayoutのコンテンツが割り当てられたスペースの大きさに合わない場合、ブラウザではスクロールバーが必要かどうかが判断され、自動的に追加されます。
スクロールpanelGroupLayoutコンポーネントをネストすると、ユーザーには複数のスクロールバーが表示されるため、ネストしないでください。また、これはストレッチ領域からフロー領域への遷移でのみ使用され、フロー領域内部にストレッチ領域がないため、通常、ネストされたスクロールバーを使用して終了できません。最もよいのは、ユーザーが検索している項目の表示のためにスクロールする必要のある領域の数を最小限にすることです。ユーザーが必要とするスクロールについて十分検討してください。不要なスクロールバーが存在する場合、そのpanelGroupLayoutのレイアウト属性を"vertical"に変更するだけでよいのです。
Internet Explorer 7.0.5730.11に対して報告されているスクロールに関する既知の問題があります。この問題は、完全なIE8レンダリング・モードで実行する場合には、Internet Explorer 8でのみ解決されます。スクロール・ボックスに含まれたボックスと同じ幅に設定されたコンテンツが存在し、そのコンテンツが明らかに垂直スクロールバーを必要とする大きさである場合、不要な水平のスクロールバーが追加されます。ブラウザでは垂直スクロールバーを備えるコンテンツの幅の調整に失敗すると、水平スクロールバーが表示されます。この水平スクロールバーにより、垂直スクロールバーの幅と等しいわずかなスペースがスクロールされます。この問題では、90%から100%までの幅を指定しないようお薦めします。それより小さな幅では、通常、不具合は発生しません。回避策(このページに表示されたとおり)では、ブラウザでは垂直スクロールバーが収まるだけのスペースが確保されるように、コンテンツの幅を全福より小さく設定します。便宜上、"AFStretchWidth"というstyleClassがスキン内に作成され、このstyleClassを持つコンポーネントがInternet Explorer 7では幅を縮小したり、他のブラウザでは全幅にしたりします。細い補助列に対してさらに小さなサイズが必要な場合、かわりに"AFAuxiliaryStretchWidth"を使用するか、次のように独自のスキンで同様のスキンの定義を作成できます。
@agent ie and (version: 7.0) {
.AFIEOverflowWorkaround75 {
width: 75%;
}
}
ブラウザのCSSボックス・モデル・ルールのため、コンポーネント上の余白、境界線、パディングの定義が複雑になる場合があります。様々なメカニズムをパディングに適用するには、ナビゲーション-マスター-ディテール、タイル・フロー、タイル・ストレッチのレイアウト・パターン例を参照してください。
多くの場合、このようなスタイルを適用するには、複数のコンポーネントを一緒に使用する必要があります。スクロール領域では、追加のpanelGroupLayout with layout="vertical"にパディングを定義してouter layout="scroll" panelGroupLayout内部に追加する必要があります。ストレッチ領域では、panelStretchLayout内のコンポーネントにパディング用のtopファセット、startファセット、endファセット、bottomファセットにスペーサを付加してラップする必要があることがあります。
WebCenter Portal: Spacesのスキンを作成する際、それを大まかな観点と細かい観点から見ることができます。大まかなレベルでは、背景やページの中央のようなページ内の多くの大きい要素には、ごく基本的なスタイル技術を使用して、特定の企業ブランドに対して容易にルック・アンド・フィールを施すことができます。細かいレベルでは、ページ内の特定のコンポーネントとコントロールにスタイルを適用できます。スキンを開発する際に最も効率的な方法は、大まかな要素の定義から開始し、次に細かいスタイルを使用して全体のルック・アンド・フィールを企業ブランドに沿って調整します。
多くの場合、スタイルのハイブリッド・モデルが非常に効果的です。大まかな要素(ページ背景、ボディの主要部分など)を取り込んでそれらとともに従来のCSS手法を使用すると、ADFスキンの使用が特定なものになっても、共に機能してWebCenter Portal: Spacesの外観全体を生成します。
ハイブリッド手法の一例では、WebCenter Portal: Spacesで技術を使用して順序づけられていないリストとリスト項目を使用するメニューを生成し、次に従来のCSSをそれらに適用します。WebCenter Portal: Spacesのナビゲーション・モデルが有効な場合でも、従来のADFスキン作成ではなく、標準CSSを使用しています。
図10-2に図示されたCSSナビゲーションでは、ナビゲーション内の種々の項目を、WebCenter Portal: Spacesでクライアント向けにレンダリングされるマークアップに配置するためにWebCenter Portal: Spacesに用意された式言語が使用されます。その際には、メニューのスタイルを形作るための従来のCSS技術を使用する大まかなスタイルが適用されます。
式言語(EL)を使用すると、テンプレート・デザイン内のナビゲーション用の様々なオブジェクトにアクセスできます。EL内のループは単純で、コーディングはページ・テンプレートとインラインで実行されます。通常のHTMLを直接ループ・マークアップに混在させることができます。
ADFスタイルの他に大まかな技術を使用する場合、WebCenter Portal: Spacesの外部の様々なスタイル・アセットを保持することが役立ちます。それを実行するために、WebCenter Contentを使用してWebCenter Portal: Spaces向けの非構造アセットをすべて管理できます。アセットに環境内で管理するCSSやイメージなどを追加して、リビジョン・コントロールとワークフローを提供できます。設計チームがWebCenter Portal: Spacesにアクセスして、変更のたびに開発チームを巻き込まずに作業できるようにする場合には、これがベスト・プラクティスです。
応答するWebデザインを使用すると、Webページは異なるフォーム・ファクタに柔軟に適応できるようになります。それはWebの世界でWebコンテンツをデスクトップ・ブラウザ、タブレット、スマート・フォンに配信する1つの方法として始まりました。
これらの技術により、HTML/CSSマークアップから類似のルック・アンド・フィールを持つWebCenter Portalに至るまで迅速に進むことができます。モバイル機器の観点から、WebCenter Portal: Spacesの技術を向上させることもできます。
スマート・フォンやタブレット経由でWebCenter Portal: Spacesにアクセス可能にするには、次のような方法を採ることができます。
最も簡単な解決策は、ブラウザベースのオプションを持つ既存のSpacesアプリケーションを利用することです。この方法だと、WebCenter Portal: Spacesが機器のネイティブ・ブラウザ内で確実にレンダリングされるようにする以外は、変更の必要はありません。ただし、この解決策ではユーザーは最善の操作性を得ることができません。
デバイス固有のテンプレートやページを構成して、デバイスのプロファイルに基づいてHTMLを生成することで、既存のSpacesアプリケーションを利用することも可能です。この解決策では、ユーザーの操作性は多少向上します。
ユーザーの操作性を最善にするには、ADFモバイルまたはネイティブiOSまたはAndroid SDKを使用して開発されたネイティブ・アプリケーションを作成できます。これにより最善のユーザーの操作性が得られますが、多くの先行開発時間とサポートも必要になります。
使用可能なビューポートに適応するアプリケーションを設計することで、適応できるプログラミング技術を使用できます。
Spacesアプリケーションを設計する際には、タブレット向けに設計し、デスクトップ向けにそのデザインを拡大します。スマート・フォンには、個々のデザインを作成する必要があります。これらのデザインは、ページ・テンプレートにより実現します。
モバイル機器を設計する際に実行する最も重要な2つの点は、次のとおりです。
viewportメタタグを設定して、モバイルのブラウザで良好な初期ズームを設定します。
ページ・テンプレートに次のフラグメントを追加します。
<f:verbatim>
<![CDATA[
<script type="text/javascript">
var metaTag = document.createElement("meta");
metaTag.name = "viewport"'
metaTag.content = "width=device-width, initial-scale=1.0";
document.getElementsByTagName('head')[0].appendChild(metaTag);
</script>
]]>
</f:verbatim>
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;
}
リセット・スキンを設定して、図10-3で示すようにV1.2 ADFスキンから設定を継承します。
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: Spacesの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>
Spacesアプリケーションのようこそページのモバイル・バージョンへのリンクを記載したメッセージを表示するアプリケーション内の手動リダイレクトの例は、次のとおりです。
#{requestContext.agent.platformName=='windows' ? '' :
'Click <A HREF="http://<host>/myApp/faces/PhoneWelcome.jspx">here</A> to view the mobile site.' }
モバイル機器をSpacesアプリケーションのモバイル・バージョンに自動的にリダイレクトするアプリケーション内のリダイレクトの例は、次のとおりです。
#{requestContext.agent.platformName=='windows' ? '' :
'<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://<host>/myApp/faces/PhoneWelcome.jspx">' }
ChromeおよびFirefoxでビジュアル化機能と調査機能を使用すると、作業のスタイルを形作るために必要なCSSで非常に速く作業できるようになります。さらに、CSS3はビジュアル化に対して非常に強力な機能を備えているため、事前に必要なイメージ(シャドウやグラデーションを付けるなど)を実現できます。SS3ジェネレータを使用して、このタイプのデザインを効率的に処理できます。最後に、JQueryなどを使用すると、Document Object Modelを実際に操作してクライアント側の技術を使用してどのような変更も実現できるようになります。
図10-4は、Google Chrome内での調査機能の例を示しています。上部右側の隅にあるログイン・リンクにカーソルを合わせると、ページのこの特定の要素に適用されているスタイルについて表示されます。これにより、簡単に特定のコンポーネントに対するスキンに戻って調整できるようになります。これは、“細かい”スキンの例です。
