26 モバイルWebサイトをサポートするためのWebCenter Sitesの構成
Mobilityのユーザーは、携帯電話やタブレットなどの様々なモバイル・デバイスにWebサイトを作成、プレビューおよび配信できます。WebCenter Sitesがモバイル向けに最適化されたWebサイトをサポートできるように、Mobilityフレームワークを構成する必要があります。
トピック:
Mobility開発者の前提条件
Mobilityフレームワークを構成するには、サイト・ナビゲーションやテンプレートなどWebCenter Sitesの中核機能の経験が必要です。
また、モバイル・デバイスとそのユーザー・エージェントに対する理解が必要です。
主要なMobilityの概念の理解
WebCenter Sitesは、組込みのデバイス検出メカニズムを使用して、Webサイトのコンテンツを要求するデバイスを識別します。デバイスが識別されると、WebCenter Sitesは適切なサイト・ナビゲーション(以前のリリースではサイト・ナビゲーションと呼ばれていました)を検索し、適切なテンプレートを呼び出してWebサイトをレンダリングします。
このデバイス検出プロセスのメカニズムには、デバイス・リポジトリ、デバイス・グループおよび接尾辞、デバイス・アセット、テンプレート・バリアント、サイト・ナビゲーション(モバイルWebサイトをサポートできるように拡張されている)などの新機能が関係しています。この項では、これらの新機能の背後にある概念について説明します。その後、モバイルWebサイトをサポートする機能の構成手順も示します。
機能が構成されたら、Oracle WebCenter Sites: Contributorインタフェースで、次の図に示すようなモバイル・サイトを作成、プレビューおよび配信できます。この図では、avisportsサンプル・サイトのホームページが、3つのデバイスのコンテキストで表示されます(マルチデバイス・プレビュー)。
図26-1 Contributorインタフェースの複数デバイスのコンテキストのavisportサイト・ホームページのプレビュー
「図26-1 Contributorインタフェースの複数デバイスのコンテキストのavisportサイト・ホームページのプレビュー」の説明
トピック:
デバイス・リポジトリについて
デバイス・リポジトリは、WebCenter Sitesでモバイル・デバイスの検出に使用するファイルです。デバイス・リポジトリには、デバイスのプロパティが含まれ、そのユーザー・エージェントに基づいて各デバイスを一意に識別します。WebCenter Sitesは、デバイス・リポジトリで指定されるユーザー・エージェントにデバイスのユーザー・エージェントを一致させることにより、デバイスを検出します。
ノート:
ユーザー・エージェントは、ユーザーの代理として機能するソフトウェア・エージェントです。ユーザー・エージェント文字列のフォーマットは、オプションのコメントを持つ製品トークン(キーワード)のリストです。ほとんどのブラウザは、次のフォーマットを指定します。
Mozilla[version] (system and browser information]) [ platform] ([platform details]) [extensions]
たとえば:
Mozilla/so(iPad;u;CPUOS 3.2.1 like Mac OSx;en-us)ppleWebkit/531.21.10(KHTML,like Gecko) Mobile/7B405
-
devices.xml
: これは、WebCenter Sitesに含まれているデフォルトのリポジトリです。このリポジトリは、製品リリース時に更新され、ポピュラーなデバイスのみが含まれています。必要に応じて、このリポジトリにデータを追加できます。 -
WURFL: これは、ScientiaMobileのサード・パーティ・デバイス情報データベースです。WURFLは
devices.xml
よりも包括的で、ScientiaMobileによって定期的にアップデートされます。WURFLを使用して、常に最新のデバイスを保持することをお薦めします。ライセンス・コピーは、ScientiaMobileから取得できます。WebCenter Sitesには組み込まれていません。
デバイス・リポジトリの使用手順については、「デバイス・リポジトリの構成方法」を参照してください。
デバイス・グループおよび接尾辞について
デバイス・グループでは、デバイスの機能ベースのグループ化が可能です。デバイス・グループは、共通のWebサイトが配信可能な、共通の特徴を持つデバイスのコレクションを定義するアセットです。たとえば、次の図に示すように、すべてのタッチフォンはあるグループに属することができ、ノンタッチ(QWERTY)フォンは別のグループに属することができます。このため、1つのWebサイトがすべてのタッチ・デバイスに配信されます。また、別のWebサイトがすべてのノンタッチ(QWERTY)デバイスに配信されます。そのため、2セットのテンプレートをコーディングする必要があります。1セットはタッチ・デバイス・グループ用で、もう1セットはノンタッチ・デバイス・グループ用です。
テンプレート・バリアントをサポートするために、接尾辞の概念が導入されています。接尾辞は、正しいデバイス・グループにテンプレートを関連付けるために使用します。テンプレートおよびデバイス・グループが、_Touch
(または_NonTouch
)などの、同じ接尾辞を持つ場合に関連付けが行われます。たとえば、基本テンプレートHomeLayout
がデスクトップWebサイトのレンダリングに使用される場合は、テンプレートのバリアント、つまり、HomeLayout_
suffix
という名前のテンプレートを作成します。この例では、タッチ・デバイス・グループ内のデバイスのコンテンツをレンダリングするためにHomeLayout_Touch
テンプレートを作成します。また、ノンタッチ・デバイス・グループ内のデバイスのコンテンツをレンダリングするためにHomeLayout_NonTouch
テンプレートも作成します。
実行時に、WebCenter Sitesは、テンプレート・バリアントの名前に対してデバイス・グループの接尾辞を照合します。タッチ・デバイスからHomeLayout
がリクエストされると、WebCenter Sitesは、HomeLayout_Touch
テンプレートを使用してWebサイトをレンダリングします。これはデバイス検出の一環です。
ノート:
接尾辞のないテンプレートは、基本テンプレートと呼ばれます。接尾辞のあるテンプレートは、基本テンプレートのバリアントと呼ばれます。基本テンプレートは、そのバリアントが作成される前に存在している必要があります。
接尾辞は、デバイス・グループをナビゲーション・プランに関連付けるためにも使用されます。これにより、異なるデバイス・グループ内のデバイスに対して異なるWebサイト・ナビゲーションを実装できます。テンプレートは、配信システムにおけるWebサイト・ナビゲーションを指定するために、device:siteplan
タグを使用してコーディングされます。
デバイス・グループを作成するには、タイプDeviceGroup
のアセットを作成します。その過程で、次のものを指定します。
-
接尾辞。
-
登録されているデバイス名、またはデバイスを作成対象のグループに関連付けるためにWebCenter Sitesで使用される基準のいずれか。
ノート:
デバイスの検出中に、デバイス・グループへのデバイスの照合が適切に行われるように、複数のデバイス・グループに優先順位を付ける必要があります。
デバイス・グループの構成方法およびデバイス・グループの優先順位付け方法を参照してください
デバイス・アセットについて
モバイル・デバイスは、デバイス・アセットで表すことができ、Contributorインタフェースにおけるモバイル・デバイスのコンテキストで、モバイルWebサイト・コンテンツのプレビューが行えます。デバイス・アセットは、プレビューをサポートする目的でのみ使用されます。デバイス・アセットは、デバイスが同じデバイス・グループで収集されるほど類似している場合でも、バリエーションを示します(画面サイズなど)。デバイス・アセットのコンテキストでプレビューすることにより、コンテンツ・コントリビュータは、対応する実デバイス上でコンテンツが正しくレンダリングされることを確認できます。
デバイス・アセットは、イメージとユーザー・エージェントで構成されます。ユーザー・エージェントは、デバイス・アセットを(1)デバイス・リポジトリの実デバイスおよび(2)基準に一致するデバイス・グループに関連付けるために使用します。デバイス・グループとデバイス・アセットの関係を示す関連付けの例については、この図を参照してください。
デバイス・アセットは、デバイス検出によってデバイス・グループに関連付けられます。デバイス・アセットが2つ以上のデバイス・グループで指定される基準に一致する場合、希望する(優先順位が最も高い)デバイス・グループに自動的に関連付けられます。デバイスがすべてのデバイス・グループの基準に一致しない場合、デフォルトのデバイス・グループ(デスクトップ・ブラウザへのWebサイトの提供に使用される)に自動的に割り当てられます。デバイスがデバイス・グループに関連付けられたら、そのデバイス・グループに関連付けられているテンプレートがプレビュー・モードでWebサイト・コンテンツをレンダリングできます。コンテンツは、デバイス・イメージ上で上書きされます。
ノート:
コンテンツ・コントリビュータが次のプレビュー動作を認識していることを確認してください。
-
モバイル・デバイスのWebページのプレビューがすべてのブラウザで機能しているときに、ブラウザとユーザー・エージェント間で不一致がある場合には、一部の機能が正しく表示されません。たとえば、ユーザー・エージェントがAndroid上のFireFoxであるときに、Internet ExplorerでContributorインタフェースを開くと、ブラウザはInternet Explorerエンジンを使用してHTMLをレンダリングします。したがって、Contributorインタフェースのプレビューは、実モバイル・デバイス上の実際のページ表示とは異なる可能性あります。
-
プレビューでは、実デバイス上のフルスクリーン・モード表示でページがレンダリングされます。
デバイス・アセットの作成方法を参照してください。
サイト・ナビゲーションについて
サイト・ナビゲーションは、Webサイトのナビゲーショナル階層を定義します。たとえば、次の図は、Contributorインタフェースでのavisportsサンプル・サイトのDefault、TouchおよびNonTouchサイト・ナビゲーションを示しています。
サイト・ナビゲーションを作成する場合、共有接尾辞を選択することによって、デバイス・グループをそのサイト・ナビゲーションに関連付けます。サイト・ナビゲーションは、それらのデバイス・グループのデバイスに提供されます。(選択すると、その接尾辞は他のサイト・ナビゲーションに対して使用できなくなります。)
サイト・ナビゲーションの作成には、次の2つの基本的な方法があります。
-
すべてのデバイス・グループのすべてのデバイスの単一サイト・ナビゲーションを作成します。
-
異なるデバイス・グループ用に異なるサイト・ナビゲーションを作成します。コンテンツはサイト・ナビゲーション間で再利用することもできれば、サイト・ナビゲーションごとに変えることもできます。
サイト・ナビゲーションの作成方法を参照してください。
モバイル・テンプレートについて
モバイルWebサイトをレンダリングするテンプレートを作成するには、次の2つの基本的な方法があります。
-
すべてのモバイル・デバイス(つまり、すべてのデバイス・グループ)に適応する単一セットのテンプレートを作成します。Adaptiveテンプレートは、デバイスの画面解像度に適応し、コンテンツを適切にレンダリングします。このシナリオでは、接尾辞の付いたテンプレートを作成する必要はありません。
-
異なるデバイス・グループ用に異なるテンプレートを作成します。(その例が「デバイス・グループと接尾辞について」で説明されています。)このシナリオでは、2セットのテンプレートを作成する必要があります。1つのセットには基本テンプレート(接尾辞なし)を含めます。他のセットには、テンプレート・バリアント(接尾辞付きテンプレート)を含めます。テンプレート・バリアントを作成するには、基本テンプレートの名前に
_suffix
を追加します。たとえば、接尾辞が
Touch
であるiPhonesというデバイス・グループのテンプレート名は、BaseTemplateName
_Touch
になります。このネーミング規則、およびデバイス・グループとテンプレートの接尾辞の照合により、WebCenter Sitesで、モバイル・デバイスから適切なテンプレート・バリアントへリクエストがルーティングされるようになります。特定のデバイス・グループにモバイル・テンプレート・バリアントが存在しない場合は常に、基本テンプレートが使用されます。ノート:
WebCenter Sitesは、2つの接尾辞(
_Touch_NonTouch
など)を持つテンプレートは認識しません。これらは既存のテンプレートのバリアントだとはみなされません。このようなテンプレートはContributorインタフェース内のアセット・ツール・バー上のページ・レイアウトの選択オプションを介して使用できないため、アセットのレンダリングには使用されません。2つの接尾辞を持つテンプレートのかわりに基本テンプレートが使用されます。
デバイス・グループを作成して接尾辞を把握したら、いつでもテンプレートを作成できます。テンプレートの作成を参照してください。
Mobility機能を構成するための前提条件
Mobility機能を構成するには、必要な資格証明と情報を持っている必要があります。たとえば、GeneralAdmin
ロールやデバイス・リポジトリなどです。
-
Adminインタフェースの「モビリティ」タブへのアクセスを自動的に付与されるユーザーは、
GeneralAdmin
ロールが割り当てられているユーザーのみです。ノート:
MobileSitesDeveloper
ロールは現在使用できません。11.1.1.8.0リリースからアップグレードした場合、MobileSitesDeveloper
ロールはユーザー定義のロールとして機能し、特に重要ではないことに注意してください。したがって、「モビリティ」タブへのアクセス権をGeneralAdmin
ロールに付与する必要があります。 -
使用するデバイス・リポジトリに対する理解。デバイス・リポジトリの構成方法を参照してください。
-
構成するデバイス・グループに関する情報。
-
異なるデバイスを編成する対象デバイス・グループの名前。
-
デバイスを特定し、グループ化するのに使用する機能(ユーザー・エージェント、タッチ、タブレット、画面解像度など)。どのデータを提供するかの詳細は、「デバイス・グループの構成方法」を参照してください。
-
どの接尾辞を各デバイス・グループで使用するか。接尾辞は、各デバイス・グループに必要です。(これらのデバイス・グループのテンプレート・バリアントの名前に接尾辞を追加します。サイト・ナビゲーションに対しても同じ接尾辞を選択します。)
-
デフォルトではリストされない機能に条件を適用するためにカスタム・フィルタを使用するかどうか。デバイス・グループ基準に対するカスタム・フィルタの作成方法を参照してください。
-
-
コントリビュータがモバイルWebサイトのプレビューで使用するデバイスのリスト。WebCenter Sitesは、一般的に使用されている多くのデバイスを表す複数のデバイス・アセットを備えています。
独自のデバイス・アセットを作成するには、最初に実デバイスの独自のイメージを作成して、その実デバイスのユーザー・エージェントを検索します。これらのイメージとユーザー・エージェント情報を使用して、デバイス・アセットを作成します。また、Contributorインタフェースのデバイス・セレクタ・パネルで使用するためにサムネイル・イメージも作成します。
-
Webサイトのモバイル・バージョン用の効果的なサイト・ナビゲーション。
Mobility機能の構成
Mobilityインフラストラクチャを作成するために実行するタスクには、デバイス・リポジトリのアクティブ化、デバイス・グループの構成、デバイス・グループ用のカスタム・フィルタの作成などがあります。
次のトピックを参照してください。
デバイス・リポジトリの構成方法
devices.xml
(デフォルトのリポジトリ)とWURFLのどちらかのデバイス・リポジトリを使用するオプションが用意されています。
-
devices.xml
を使用するには、次の手順を実行します。-
ファイルに必要なデバイス名とユーザー・エージェントが含まれていることを確認します。
DeviceRepository
ディレクトリ内でファイルを検索し、必要な変更を行います。 -
devices.xml
をWebCenter Sitesにアップロードすることによってアクティブ化します。-
「一般的な管理」ツリーを開き、「モビリティ」ノードを展開し、「デバイス・リポジトリ」をダブルクリックします。
-
「デバイス・リポジトリ・アップローダ」フォームで、
devices.xml
をアップグレードして、保存します。
-
-
-
devices.xml
ファイルに現在登録されているものより多くの機能およびデバイスをサポートするには、WURFLをデバイス・リポジトリとして使用します。次の手順を実行します。-
次のいずれかのフォーマットでWURFLリポジトリを取得します。
-
WURFL.zip
-
WURFL.xml
(WURFLパッチ・ファイルと一緒に)。パッチ・ファイルは、WURFL.xml
のコンテンツをオーバーライドするために使用します。パッチ・ファイルの詳細は、http://wurfl.sourceforge.net/
を参照してください。ノート:
WURFLは、サード・パーティのデバイス・リポジトリです。このリポジトリを使用するには、ScientiaMobileからライセンスを購入する必要があります。WebCenter Sitesには組み込まれていません。
-
-
wurfl.xml
ファイルとパッチを使用する場合は、他のステップに進む前にパッチ・ファイルを構成します。 -
WURFLリポジトリをWebCenter Sitesにアップロードすることによってアクティブ化します。
-
デバイス・グループ基準に対するカスタム・フィルタの作成方法
WebCenter Sitesでは、入力としてXMLファイルをとる、デフォルトのカスタム・フィルタ実装(DefaultCustomFilter.java
)を提供しています。独自のカスタム・フィルタを作成するには、CustomDeviceFilter.java
インタフェースの実装を記述します。カスタム・フィルタ用のXMLファイルは、「デバイス・グループの構成方法」で説明するように、「デバイス・グループ」構成ページからアップロードされます。
この項には、次の項目が含まれます。
ノート:
カスタム・フィルタの使用方法の詳細は、「デバイス・グループの構成方法」を参照してください。
WebCenter Sitesに付属するデフォルトのDefaultCustomFIlter.javaカスタム・フィルタの使用
カスタム・フィルタのデフォルト実装クラスは、COM.FutureTense.Mobility.Filter.DefaultCustomFilter
と呼ばれています。XML形式の入力を受け入れます。WebCenter Sitesが提供するデフォルトのカスタム・フィルタ実装では、すべての属性が渡された場合にのみ、フィルタが渡されます。同様に、そのすべてのフィルタが渡されると、カスタム・フィルタ全体が渡されます。そのため、どのシナリオでも、フィルタ条件を機能させるために、すべての引数を渡す必要があります。
次の例は、WURFLリポジトリからデバイス・プロパティ名をとるサンプル・フィルタXMLを示しています。
<?xml version="1.0" encoding="UTF-8"?> <devicefilters> <filter name="tabletFilter" classname="COM.FutureTense.Mobility.Filter.DefaultCustomFilter"> //Filter 1 <argument name="is_tablet" value="true" datatype="boolean"/> //argument 1 of filter 1 <argument name="pointing_method" value="touchscreen" datatype="string" operator="equals"/> //argument 2 of filter 1 </filter> <filter name="flashFilter" classname="COM.FutureTense.Mobility.Filter.DefaultCustomFilter"> //Filter 2 <argument name=" full_flash_support" value="false" datatype="boolean"/> //argument 1 of filter 1 </filter> </devicefilters>
前述のサンプルでは、tabletFilter
は2つの引数を持ちます。argument 1
は、is_tablet
プロパティの値がtrue
である必要があり、argument 2
は、pointing_method
プロパティの値がtouchscreen
である必要があります。flashFilter
は、full_flash_support
プロパティの値がfalse
である必要がある、1つの引数のみを持ちます。各引数はルールで、完全なフィルタです。すべての引数の条件が満たされる場合にのみ、前述のカスタム・フィルタを含むデバイス・グループとデバイスが一致します。
このサンプルXMLでは、WURFLリポジトリからのデバイス・プロパティ名を使用します。デフォルト・デバイス・リポジトリ(devices.xml
) XMLは、次の例のようになります(プロパティ名が変更されていることに注意してください)。このフィルタXMLには、tabletFilter
およびflashFilter
という、2つのフィルタがあります。
<?xml version="1.0" encoding="UTF-8"?> <devicefilters> <filter name="tabletFilter" classname="COM.FutureTense.Mobility.Filter.DefaultCustomFilter"> //Filter 1 <argument name="tablet" value="true" datatype="boolean"/> //argument 1 of filter 1 <argument name="touch" value="true" datatype="string" operator="equals"/> //argument 2 of filter 1 </filter> <filter name="flashFilter" classname="COM.FutureTense.Mobility.Filter.DefaultCustomFilter"> //Filter 2 <argument name="flash" value="false" datatype="boolean" /> //argument 1 of filter 1 </filter></devicefilters>
DefaultCustomFIlter.java
に基づいてカスタム・フィルタを作成する場合は、次の点を考慮してください。
-
カスタム・フィルタでは、
datatype
引数属性の可能な値は、string
、number
、boolean
です。デフォルト値はstring
です。-
datatype
=number
の場合、operator
属性の可能な値は、<>
、notequals
、<
、lt
、>
、gt
、=
、equals
です。デフォルト値はequals
です。 -
datatype
=boolean
の場合、operator
属性の可能な値は、=
、equals
です。他の値は、equals
の逆の値として処理されます。デフォルト値はequals
です。 -
datatype
=string
の場合、operator
属性の可能な値は、=
、equals
、%
、like
、!=
、notequals
、!%
、notlike
です。デフォルト値はequals
です。次のスニペットは、operator
属性のlike
または%
値の使用を示しています。<argument name="pointing_method" value="touch" datatype="string" operator="like"/>
ここでは、
pointing_method
プロパティの値には、touch
がサブ文字列または単語全体として含まれている必要があります。
-
-
プロパティ属性の値は、現在のデバイス・リポジトリのプロパティ名どおりである必要があります(
devices.xml
またはWURFL.xml
のいずれか)。
独自のDeviceGroupFilter実装の作成
次の例は、DeviceGroupFilter
インタフェースを実装し、matches
メソッドを使用するJavaクラスを示しています。カスタム・フィルタは1つ以上のフィルタで構成できます。各フィルタには0以上の引数を含めることができます。カスタム・フィルタ実装は、OR
ルールまたはカスタム・ロジックを使用できます。
public class UserDefinedCustomFilter implements DeviceGroupFilter { public boolean matches(DeviceContext context) { // Logic that returns true/false depending on whether criteria matched or not. } }
デバイス・グループの構成方法
デバイス・グループを構成するには:
-
「モビリティ」ノードで、「デバイス・グループ」ノードを開きます。
-
この図に示すように、「デバイス・グループの追加」をクリックします。
「デバイス・グループ」フォームが開きます。
-
「デバイス・グループ」フォームで「コンテンツ」タブを選択して、次の操作を実行します。
-
「名前」フィールドに、作成しているデバイス・グループのわかりやすい名前を入力します。
-
「接尾辞」セクションで、このデバイス・グループ用に作成するテンプレートで使用する接尾辞を入力します。または、既存の接尾辞がある場合は、それを選択します。
ノート:
この接尾辞は編集できません。後で変更するには、このデバイス・グループを再作成して、この接尾辞を変更する必要があります。
-
「アクティブ」フィールドで「はい」を選択すると、このデバイス・グループのデバイス検出が有効になります。
ノート:
デバイス・グループはグローバルです。有効化すると、すべてのサイトで利用できるようになります。同様に、無効化すると、すべてのサイトで利用不可になり、デバイス検出で使用されなくなります。
-
-
「基準」タブ(次の図を参照)を選択し、適切なテンプレート・バリアントに関連付けることのできる、実デバイスの照合用のルール・セットを作成します。
1つ以上のデバイス名を入力するか(残りのフォームは無効になります。次の図を参照)、デバイス名を省略して残りのフォームに記入します。
-
デバイス名を入力する場合は、デバイス・リポジトリに登録されているのと同じ名前を入力します。
devices.xml
をアップロードした場合は、デバイス・エントリ名を入力します。WURFLをアップロードした場合は、デバイスのmodel_name
を入力します。「デバイス名」フィールドには先行入力機能が用意されているため、使用可能なデバイスのリストから登録済のデバイス名を選択できます。デバイス・モデル番号の入力を開始すると、一般的な文字から始まる登録済のデバイスがすべて表示されます。最初の50のデバイスをスクロールしてこの中から簡単に選択できます。これ以外のデバイスを表示するには、検索フィルタを絞り込みます。デバイスは、一度に1つのデバイス・グループにしか属することができません。
-
デバイス名を省略する場合は、次のように、残りのフォームを記入します。
-
「ユーザーエージェント」セクション: このセクションは、デバイス名を指定する場合は無効になります。
このフィールドには、デバイス名のリスト、またはユーザー・エージェント、画面ディメンション、機能およびカスタム・フィルタの組合せを入力します。ユーザー・エージェント
regex
、機能、画面ディメンションおよびカスタム・フィルタの組合せでは、デバイスは、デバイス・グループとの照合に使用されるすべてのルールを満たす必要があります。受信リクエストの送信元のブラウザと一致するユーザー・エージェントを入力します。または、ユーザー・エージェントのセットと照合する正規表現や部分文字列を入力します。たとえば、すべてのiPhoneユーザー・エージェントを照合するには、ユーザー・エージェント
reg exp
を(m|M)ozilla/5.0(| )\(i(p|P)(hone|od|rod).*
として指定します。この式は、iPhone
Javaregex
を含むすべてのユーザー・エージェント文字列に一致します。または、すべてのiPhoneに一致する部分文字列iPhone;
を使用します。ノート:
デバイス・リポジトリ内で入力したユーザー・エージェント用として使用可能なデバイスの数を確認するには、「一致しているデバイス」セクションで「リフレッシュ」アイコンをクリックします。
-
「機能」セクション: このセクションは、デバイス名を指定する場合は無効になります。その機能は、「タッチ・スクリーン」、「JavaScript」、「縦横方向」および「タブレット」です。各機能には、「はい」、「いいえ」、「評価しない」というオプションがあります。
たとえば、このデバイス・グループでJavaScriptをサポートしないタブレット・デバイスのみを照合するには、「タブレット」機能で「はい」を、「JavaScript」機能で「いいえ」を、残りの機能で「評価しない」を選択します。
-
「画面解像度」セクション: このセクションは、デバイス名を指定する場合は無効になります。表示領域の最大と最小の幅および高さ(単位はピクセル)を入力します。たとえば、最大幅が640である場合、画面解像度の幅が640以下であるすべてのデバイスにこのデバイス・グループが一致します。
-
「カスタム・デバイス・フィルタ」セクションで「参照」をクリックして、「デバイス・グループ」の「基準」タブにリストされていない機能に対して条件を適用するために作成した可能性のあるカスタム・フィルタを選択します。
-
-
-
「保存」アイコンをクリックして、デバイス・グループを保存します。
新しいデバイス・グループが「モビリティ」タブで、(次の図に示すように)「デバイス・グループ」ノードの最下部にリストされます。
デバイス・グループの優先順位付け方法
実行時のデバイス検出で、優先順位が最も高いデバイス・グループに実デバイスが自動的に関連付けられるように、複数のデバイス・グループに優先順位を付ける必要があります。
デバイス・グループに優先順位を付けるには:
デバイス・アセットの作成方法
デバイス・アセット作成するには:
-
「モビリティ」ノードで、「デバイス」ノードを開きます。
-
「デバイスの追加」をクリックします。
「デバイス」フォームが開きます。
-
「コンテンツ」タブで、次を実行します。
-
「名前」フィールドに、このデバイス・アセットの名前を入力します。
この名前はContributorインタフェースに表示されます。デバイス・リポジトリ内の名前と一致している必要はありません。
-
(オプション)。「製造業者」フィールドに、デバイス・メーカーの名前を入力します。
-
「ユーザー・エージェント」フィールドで、イメージを追加するデバイスの登録済ユーザー・エージェントを指定します。ユーザー・エージェントは、デバイス・リポジトリからコピーできます。
ノート:
「ユーザー・エージェント」フィールドは、このデバイス・アセットが表す実デバイスを識別します。このフィールドは、優先順位が一番高い、一致するデバイス・グループにこのデバイスを関連付けするために、デバイス検出ロジックで使用します。
-
「ユーザー・エージェントのテスト」をクリックしてデバイス検出を実行し、このデバイスが特定のデバイス・グループに一致していることを確認します。
-
このデバイス・アセットをデバイス検出メカニズムでデバイス・グループに関連付けることができるように、「有効化」オプションを選択します。
-
「デバイス・イメージ」フィールドの隣にある「参照」をクリックして、イメージの保存先ディレクトリからデバイス・イメージを選択します。
-
(オプション)。「サムネイル・イメージ」フィールドの横で、Contributorインタフェースのプレビュー機能に関連付けられているデバイス・セレクタ・パネルに表示するサムネイル・イメージをアップロードします。サムネイルを選択すると、デバイス・イメージのページ・プレビューが表示されます。
-
-
「画面ディメンション」タブで、「高さ」、「幅」、「上」および「左」の各フィールドに必要なピクセルを入力し、「ピクセル率」フィールドにピクセル率を入力して、画面領域の適切なディメンションを決定します。
-
高さ: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の高さ。
-
幅: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の幅。
-
上: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の上部マージン。
-
左: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の左マージン。
-
ピクセル率: 物理ピクセルと論理ピクセルの間の比率。たとえば、iPhone 7では、物理線形導出は論理線形導出の2倍のため、ピクセル率は2です。
各フィールドにピクセルを入力すると、デバイス・イメージの画面領域もそれに応じてリセットされ始めます。この機能により、デバイス表示領域の正確なディメンションをその場で決定できます。
-
-
フォーム上の「保存」アイコンをクリックして、新しいデバイスを作成します。
成功メッセージが表示されます。
サイト・ナビゲーションの作成方法
複数のサイト・ナビゲーションと単一のサイト・ナビゲーションのどちらが必要かは、設計方法により異なります。サイト・ナビゲーションを作成している場合、共通の接尾辞を選択することによって、デバイス・グループをこのナビゲーションに関連付けます。選択した接尾辞は、他のサイト・ナビゲーションで使用できなくなります。
サイト・ナビゲーションを作成するには:
配信システムへのデバイス・リポジトリのミラー・パブリッシュ
モバイル・サイト向けにインフラストラクチャを構成したら、配信システムにデバイス・リポジトリをミラー・パブリッシュする必要があります。
ノート:
デバイス・リポジトリを変更およびミラーリングした後は、必ずしも値を変更せずに、編集および保存を目的としてデバイス・グループを開くことにより、ターゲット・システム上のデバイス・グループへのデバイスの再関連付けをトリガーできます。WURFLデバイス・リポジトリをミラー・パブリッシュするには:
テンプレートの作成
WebCenter Sitesの接尾辞機能を使用して、すべてのモバイル・デバイスに対して機能するテンプレートを1セットのみ作成することも、様々なセットを作成することもできます。
そのため、モバイルWebサイトをレンダリングするテンプレートを作成するには、次の2つの基本的な方法があります。
-
すべてのモバイル・デバイス(つまり、すべてのデバイス・グループ)に適応する単一セットのテンプレートを作成します。
-
異なるデバイス・グループ用に異なるテンプレートを作成します。このシナリオには接尾辞を使用する必要があります。この項では、この2番目の方法について説明します。
次のトピックを参照してください。
テンプレート・バリアントを作成するための基本ガイドライン
異なるデバイス・グループ用の異なるテンプレートを作成する際には、次の要件に注意してください。
-
基本テンプレート(デスクトップWebサイトをレンダリングするテンプレート)を作成します。
-
基本テンプレートの名前を使用し、
_
suffix
を追加して、テンプレート・バリアントを作成します。 -
テンプレートに基づいてページをキャッシュする場合は、キャッシュ基準の1つとして接尾辞(
d
パラメータ)を使用します。
Mobilityタグの理解
次の表では、テンプレートの作成時に使用するMobilityのタグについて説明しています。『Oracle WebCenter Sitesリファレンス・タグ・リファレンス』を参照してください。
表26-1 Mobilityのタグ
タグ | 説明 |
---|---|
|
現在のデバイスを検出して、デバイス情報をロードします。 |
|
このタグは、ロードされたデバイスに対して |
|
このタグでは、現在ロードされているデバイスに対して特定の条件や、その条件が満たされると実行されるコードを指定できます。オプション属性 |
|
このタグは、現在ロードされているデバイスが、このタグで指定された機能をサポートしているかどうかをチェックします。タグ内のコードが実行されるのは、デバイスがこの機能をサポートしている場合です。 |
|
このタグは、現在ロードされているデバイスに対して、 |
|
実行時に、WebCenter Sitesではデバイス検出を使用して、 |
デバイス検出とページ・レンダリングをサポートするために変更されるタグ
次のタグには、Mobility固有の属性が含まれます。
-
render:getpageurl
-
render:calltemplate
-
render:gettemplateurl
-
render:gettemplateurlparameters
-
insite:calltemplate
-
satellite:page
-
satellite:link
属性は次のとおりです。
-
d
: デバイス・グループの接尾辞。 -
resolvetemplatefordevice
: テンプレート名にデバイス・グループ接尾辞を追加します。デフォルト値はtrue
。値がfalse
に設定される場合、接尾辞がテンプレート名に追加されず、基本テンプレートがロードされます。
d
パラメータは、前述の各タグからなるチェーンで、自動的に下流に伝達されます。タグは、渡されたd
属性に基づいて、適切なテンプレート・バリアントをコールします。
avisportsサンプル・サイトの次の例で、c=Page
およびTestSite
は現在のサイトです。
<render:calltemplate tname='Detail' args="c,cid,p,d,locale,form-to-render" /> (i) for d=Desktop (default) or blank, the following template is called: TestSite/Page/Detail (ii) for d=Touch, the following template is called: TestSite/Page/Detail_Touch
d
属性の使用方法の詳細は、「デバイス検出の仕組み」を参照してください。
テンプレート・バリアントの作成
テンプレート・バリアントを作成するには、接尾辞をコピー、変更、および基本テンプレートに追加します。この接尾辞機能を使用して、バリアントが存在しない接尾辞に対して単一のテンプレート・バリアントの作成とテンプレート・バリアントのバルク作成の両方を行うことができます。
この項には次のトピックが含まれます:
ノート:
接尾辞ベースの検索を使用すると、特定の接尾辞のテンプレートを簡単に検索できます。つまり、メニュー・バーの「検索」をクリックし、「検索」表からテンプレートの検索を選択します。「検索対象: テンプレート」画面で、「検索」ドロップダウン・リストから「接尾辞」を選択し、「検索文字列」ドロップダウン・リストから目的の接頭辞を選択します。検索結果には、非アクティブ化されたテンプレートまたは削除されたテンプレートも含まれます。(これらのタイプをサイトから削除し、検索結果に再表示されないようにしてください。)
モバイルWebサイトのイメージの最適化
イメージ最適化フィルタでは、モバイルWebサイトのイメージを最適化できます。
また、独自のイメージ最適化実装をプラグインし、イメージをカスタム手法で最適化することもできます。次の各項では、これら両方の方法について説明します。
イメージ最適化フィルタを使用したイメージの最適化方法
WebCenter Sitesのイメージ最適化機能は、フレックス・アセット・ファミリに対して使用できます。フルサイズのイメージを最適化し、様々なタイプのモバイル・デバイスで適切に表示できます。この機能を使用すると、様々な接尾辞に対してイメージを最適化し、様々な画面ディメンションをサポートできます。たとえば、一部のデバイスでは、表示されるイメージはフルサイズのイメージの50%にする必要がありますが、他のデバイスでは、実際のサイズの50%より小さく表示する必要があります。
イメージ最適化フィルタを使用してイメージを最適化するには:
サイトのイメージ定義へのフィルタの追加
ステップ1で作成したフィルタをサイトのイメージ定義に追加するには、次のステップを実行します(たとえば、avisportsサンプル・サイトで、Image
定義を検索できます)。
blobタイプ属性アセットのインスタンスの作成
WebCenter Sitesでは、単一値と複数値の両方のblobタイプ属性がサポートされています。すべてのテンプレート・バリアントにイメージ最適化フィルタを適用するには、サイトの接尾辞の数と同じ数のblob
タイプ属性アセットのインスタンスを作成します。たとえば、avisportsサンプル・サイトでは、既存のblob
タイプ属性はimageFile
です。このため、この場合、Touch
接尾辞に対してこの属性アセットのインスタンスを作成し、NonTouch
接尾辞に対して別のインスタンスを作成します。
既存のイメージへのイメージ最適化フィルタの適用
イメージを作成または編集する場合は、イメージ最適化フィルタが機能します。このため、このフィルタを既存のイメージに適用するには、これらのイメージを編集して保存する必要があります。
- イメージを編集モードで開きます。
- 「保存」アイコンをクリックし、フィルタを適用します。
サイトでの最適化されたイメージの使用
render:getbloburl
タグのoptimize
属性をtrue
に設定します(<render:getbloburl c=... cid=.. optimize='true' />
)。『Oracle Fusion Middleware Oracle WebCenter Sitesプロパティ・ファイル・リファレンス』を参照してください。
デバイス検出の仕組み
WebCenter Sitesは、組込みのデバイス検出メカニズムを使用して、Webサイトのコンテンツを要求するデバイスを識別します。デバイスが特定されると、WebCenter Sitesは一致するデバイス・グループを検索して、その接尾辞を読み取ります。接尾辞を使用して、サイト・ナビゲーションを見つけ、テンプレート・バリアントを呼び出してそのコンテンツをレンダリングします。
詳細なステップは次のとおりです。
-
リモートSatellite Serverは、実デバイスからページ・リクエストを受信します。このリクエストのヘッダーには、デバイスのユーザー・エージェントが含まれます。
-
リモートSatellite Serverは独自のキャッシュ内でそのページを検索します。ページの検索に失敗すると、リモートSatellite ServerはWebCenter Sitesにページ・リクエストを送信します。
-
WebCenter Sitesは次のように応答します。
-
リクエスト・ヘッダーのユーザー・エージェントによってデバイスを識別します。
-
デバイス・リポジトリでユーザー・エージェントを検索します。
-
デバイス・リポジトリで一致するデバイスを見つけると、WebCenter Sitesはそのデバイスの機能も検索します。
-
WebCenter Sitesはユーザー・エージェント機能とデバイス機能を使用して、基準に合ったデバイス・グループを検索します。
-
そのデバイスを優先順位の一番高いデバイス・グループに関連付けます。
-
このデバイス・グループの接尾辞を読み取ります。
-
その接尾辞を
ics
スコープ内のd
パラメータに割り当てます。 -
_suffix
をURLで要求されたテンプレート名に追加します。 -
d=
suffix
を要求されたページのURLに追加します。たとえば:
接尾辞が
Touch
の場合、WebCenter Sitesでは、元のURLpagename=avisports/HomeLayout1&c=Page&cid=1482760932
をURLpagename=avisports/HomeLayout1_Touch&c=Page&cid=1482760932&d=Touch
に変換します -
テンプレート・バリアントが存在する場合、WebCenter Sitesは新しいURLを実行してそのページをキャッシュし、それをリモートSatellite Serverに送信します。
テンプレート・バリアントが存在しない場合、WebCenter Sitesは元のURLを実行してそのページをキャッシュし、それをリモートSatellite Serverに送信します。
-
-
リモートSatellite Serverはそのページをキャッシュして、デバイスにレスポンスを送信します。
-
リモートSatellite Serverは、デバイス検出情報もキャッシュして、それを同じデバイスからの後続のリクエストを処理するために使用します。これにより、WebCenter Sitesでのデバイス検出の再実行が回避されます。