1. Oracle WebCenter Sitesでの開発
  2. モバイル用Webサイトの開発
  3. モバイルWebサイトをサポートするためのWebCenter Sitesの構成

26 モバイルWebサイトをサポートするためのWebCenter Sitesの構成

Mobilityのユーザーは、携帯電話やタブレットなどの様々なモバイル・デバイスにWebサイトを作成、プレビューおよび配信できます。WebCenter Sitesがモバイル向けに最適化されたWebサイトをサポートできるように、Mobilityフレームワークを構成する必要があります。

トピック:

26.1 Mobility開発者の前提条件

Mobilityフレームワークを構成するには、サイト・ナビゲーションやテンプレートなどWebCenter Sitesの中核機能の経験が必要です。

また、モバイル・デバイスとそのユーザー・エージェントに対する理解が必要です。

26.2 主要なMobilityの概念の理解

WebCenter Sitesは、組込みのデバイス検出メカニズムを使用して、Webサイトのコンテンツを要求するデバイスを識別します。デバイスが識別されると、WebCenter Sitesは適切なサイト・ナビゲーション(以前のリリースではサイト・ナビゲーションと呼ばれていました)を検索し、適切なテンプレートを呼び出してWebサイトをレンダリングします。

このデバイス検出プロセスのメカニズムには、デバイス・リポジトリ、デバイス・グループおよび接尾辞、デバイス・アセット、テンプレート・バリアント、サイト・ナビゲーション(モバイルWebサイトをサポートできるように拡張されている)などの新機能が関係しています。この項では、これらの新機能の背後にある概念について説明します。その後、モバイルWebサイトをサポートする機能の構成手順も示します。

機能が構成されたら、Oracle WebCenter Sites: Contributorインタフェースで、次の図に示すようなモバイル・サイトを作成、プレビューおよび配信できます。この図では、avisportsサンプル・サイトのホームページが、3つのデバイスのコンテキストで表示されます(マルチデバイス・プレビュー)。

図26-1 Contributorインタフェースの複数デバイスのコンテキストのavisportサイト・ホームページのプレビュー

図26-1の説明が続きます
「図26-1 Contributorインタフェースの複数デバイスのコンテキストのavisportサイト・ホームページのプレビュー」の説明

トピック:

26.2.1 デバイス・リポジトリについて

デバイス・リポジトリは、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
次の2つのタイプのデバイス・リポジトリがあります。

  • devices.xml: これは、WebCenter Sitesに含まれているデフォルトのリポジトリです。このリポジトリは、製品リリース時に更新され、ポピュラーなデバイスのみが含まれています。必要に応じて、このリポジトリにデータを追加できます。

  • WURFL: これは、ScientiaMobileのサード・パーティ・デバイス情報データベースです。WURFLはdevices.xmlよりも包括的で、ScientiaMobileによって定期的にアップデートされます。WURFLを使用して、常に最新のデバイスを保持することをお薦めします。ライセンス・コピーは、ScientiaMobileから取得できます。WebCenter Sitesには組み込まれていません。

デバイス・リポジトリの使用手順については、「デバイス・リポジトリの構成方法」を参照してください。

26.2.2 デバイス・グループおよび接尾辞について

デバイス・グループでは、デバイスの機能ベースのグループ化が可能です。デバイス・グループは、共通のWebサイトが配信可能な、共通の特徴を持つデバイスのコレクションを定義するアセットです。たとえば、次の図に示すように、すべてのタッチフォンはあるグループに属することができ、ノンタッチ(QWERTY)フォンは別のグループに属することができます。このため、1つのWebサイトがすべてのタッチ・デバイスに配信されます。また、別のWebサイトがすべてのノンタッチ(QWERTY)デバイスに配信されます。そのため、2セットのテンプレートをコーディングする必要があります。1セットはタッチ・デバイス・グループ用で、もう1セットはノンタッチ・デバイス・グループ用です。

図26-2 デバイス・タイプベースのグループ化

図26-2の説明が続きます
「図26-2 デバイス・タイプベースのグループ化」の説明

テンプレート・バリアントをサポートするために、接尾辞の概念が導入されています。接尾辞は、正しいデバイス・グループにテンプレートを関連付けるために使用します。テンプレートおよびデバイス・グループが、_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で使用される基準のいずれか。

    ノート:

    デバイスの検出中に、デバイス・グループへのデバイスの照合が適切に行われるように、複数のデバイス・グループに優先順位を付ける必要があります。

デバイス・グループの構成方法およびデバイス・グループの優先順位付け方法を参照してください

26.2.3 デバイス・アセットについて

モバイル・デバイスは、デバイス・アセットで表すことができ、Contributorインタフェースにおけるモバイル・デバイスのコンテキストで、モバイルWebサイト・コンテンツのプレビューが行えます。デバイス・アセットは、プレビューをサポートする目的でのみ使用されます。デバイス・アセットは、デバイスが同じデバイス・グループで収集されるほど類似している場合でも、バリエーションを示します(画面サイズなど)。デバイス・アセットのコンテキストでプレビューすることにより、コンテンツ・コントリビュータは、対応する実デバイス上でコンテンツが正しくレンダリングされることを確認できます。

デバイス・アセットは、イメージとユーザー・エージェントで構成されます。ユーザー・エージェントは、デバイス・アセットを(1)デバイス・リポジトリの実デバイスおよび(2)基準に一致するデバイス・グループに関連付けるために使用します。デバイス・グループとデバイス・アセットの関係を示す関連付けの例については、この図を参照してください。

図26-3 デバイス・グループに関連付けられたデバイス

図26-3の説明が続きます
「図26-3 デバイス・グループに関連付けられたデバイス」の説明

デバイス・アセットは、デバイス検出によってデバイス・グループに関連付けられます。デバイス・アセットが2つ以上のデバイス・グループで指定される基準に一致する場合、希望する(優先順位が最も高い)デバイス・グループに自動的に関連付けられます。デバイスがすべてのデバイス・グループの基準に一致しない場合、デフォルトのデバイス・グループ(デスクトップ・ブラウザへのWebサイトの提供に使用される)に自動的に割り当てられます。デバイスがデバイス・グループに関連付けられたら、そのデバイス・グループに関連付けられているテンプレートがプレビュー・モードでWebサイト・コンテンツをレンダリングできます。コンテンツは、デバイス・イメージ上で上書きされます。

ノート:

コンテンツ・コントリビュータが次のプレビュー動作を認識していることを確認してください。

  • モバイル・デバイスのWebページのプレビューがすべてのブラウザで機能しているときに、ブラウザとユーザー・エージェント間で不一致がある場合には、一部の機能が正しく表示されません。たとえば、ユーザー・エージェントがAndroid上のFireFoxであるときに、Internet ExplorerでContributorインタフェースを開くと、ブラウザはInternet Explorerエンジンを使用してHTMLをレンダリングします。したがって、Contributorインタフェースのプレビューは、実モバイル・デバイス上の実際のページ表示とは異なる可能性あります。

  • プレビューでは、実デバイス上のフルスクリーン・モード表示でページがレンダリングされます。

デバイス・アセットの作成方法を参照してください。

26.2.4 サイト・ナビゲーションについて

サイト・ナビゲーションは、Webサイトのナビゲーショナル階層を定義します。たとえば、次の図は、Contributorインタフェースでのavisportsサンプル・サイトのDefault、TouchおよびNonTouchサイト・ナビゲーションを示しています。

図26-4 Contributorインタフェースのサイト・ナビゲーション

図26-4の説明が続きます
「図26-4 Contributorインタフェースのサイト・ナビゲーション」の説明

サイト・ナビゲーションを作成する場合、共有接尾辞を選択することによって、デバイス・グループをそのサイト・ナビゲーションに関連付けます。サイト・ナビゲーションは、それらのデバイス・グループのデバイスに提供されます。(選択すると、その接尾辞は他のサイト・ナビゲーションに対して使用できなくなります。)

サイト・ナビゲーションの作成には、次の2つの基本的な方法があります。

  • すべてのデバイス・グループのすべてのデバイスの単一サイト・ナビゲーションを作成します。

  • 異なるデバイス・グループ用に異なるサイト・ナビゲーションを作成します。コンテンツはサイト・ナビゲーション間で再利用することもできれば、サイト・ナビゲーションごとに変えることもできます。

サイト・ナビゲーションの作成方法を参照してください。

26.2.5 モバイル・テンプレートについて

モバイルWebサイトをレンダリングするテンプレートを作成するには、次の2つの基本的な方法があります。

  • すべてのモバイル・デバイス(つまり、すべてのデバイス・グループ)に適応する単一セットのテンプレートを作成します。Adaptiveテンプレートは、デバイスの画面解像度に適応し、コンテンツを適切にレンダリングします。このシナリオでは、接尾辞の付いたテンプレートを作成する必要はありません。

  • 異なるデバイス・グループ用に異なるテンプレートを作成します。(その例が「デバイス・グループと接尾辞について」で説明されています。)このシナリオでは、2セットのテンプレートを作成する必要があります。1つのセットには基本テンプレート(接尾辞なし)を含めます。他のセットには、テンプレート・バリアント(接尾辞付きテンプレート)を含めます。テンプレート・バリアントを作成するには、基本テンプレートの名前に_suffixを追加します。

    たとえば、接尾辞がTouchであるiPhonesというデバイス・グループのテンプレート名は、BaseTemplateName_Touchになります。このネーミング規則、およびデバイス・グループとテンプレートの接尾辞の照合により、WebCenter Sitesで、モバイル・デバイスから適切なテンプレート・バリアントへリクエストがルーティングされるようになります。特定のデバイス・グループにモバイル・テンプレート・バリアントが存在しない場合は常に、基本テンプレートが使用されます。

    ノート:

    WebCenter Sitesは、2つの接尾辞(_Touch_NonTouchなど)を持つテンプレートは認識しません。これらは既存のテンプレートのバリアントだとはみなされません。このようなテンプレートはContributorインタフェース内のアセット・ツール・バー上のページ・レイアウトの選択オプションを介して使用できないため、アセットのレンダリングには使用されません。2つの接尾辞を持つテンプレートのかわりに基本テンプレートが使用されます。

デバイス・グループを作成して接尾辞を把握したら、いつでもテンプレートを作成できます。テンプレートの作成を参照してください。

26.3 Mobility機能を構成するための前提条件

Mobility機能を構成するには、必要な資格証明と情報を持っている必要があります。たとえば、GeneralAdminロールやデバイス・リポジトリなどです。

  • Adminインタフェースの「モビリティ」タブへのアクセスを自動的に付与されるユーザーは、GeneralAdminロールが割り当てられているユーザーのみです。

    ノート:

    MobileSitesDeveloperロールは現在使用できません。11.1.1.8.0リリースからアップグレードした場合、MobileSitesDeveloperロールはユーザー定義のロールとして機能し、特に重要ではないことに注意してください。したがって、「モビリティ」タブへのアクセス権をGeneralAdminロールに付与する必要があります。

  • 使用するデバイス・リポジトリに対する理解。デバイス・リポジトリの構成方法を参照してください。

  • 構成するデバイス・グループに関する情報。

    • 異なるデバイスを編成する対象デバイス・グループの名前。

    • デバイスを特定し、グループ化するのに使用する機能(ユーザー・エージェント、タッチ、タブレット、画面解像度など)。どのデータを提供するかの詳細は、「デバイス・グループの構成方法」を参照してください。

    • どの接尾辞を各デバイス・グループで使用するか。接尾辞は、各デバイス・グループに必要です。(これらのデバイス・グループのテンプレート・バリアントの名前に接尾辞を追加します。サイト・ナビゲーションに対しても同じ接尾辞を選択します。)

    • デフォルトではリストされない機能に条件を適用するためにカスタム・フィルタを使用するかどうか。デバイス・グループ基準に対するカスタム・フィルタの作成方法を参照してください。

  • コントリビュータがモバイルWebサイトのプレビューで使用するデバイスのリスト。WebCenter Sitesは、一般的に使用されている多くのデバイスを表す複数のデバイス・アセットを備えています。

    独自のデバイス・アセットを作成するには、最初に実デバイスの独自のイメージを作成して、その実デバイスのユーザー・エージェントを検索します。これらのイメージとユーザー・エージェント情報を使用して、デバイス・アセットを作成します。また、Contributorインタフェースのデバイス・セレクタ・パネルで使用するためにサムネイル・イメージも作成します。

  • Webサイトのモバイル・バージョン用の効果的なサイト・ナビゲーション。

26.4 Mobility機能の構成

Mobilityインフラストラクチャを作成するために実行するタスクには、デバイス・リポジトリのアクティブ化、デバイス・グループの構成、デバイス・グループ用のカスタム・フィルタの作成などがあります。

次のトピックを参照してください。

26.4.1 デバイス・リポジトリのアクティブ化方法

デバイス・リポジトリをアクティブ化するには:

  1. Adminインタフェースで、General Adminツリーを開き、「モビリティ」ノードを展開し、「デバイス・リポジトリ」をダブルクリックします。
  2. 「デバイス・リポジトリ・アップローダ」フォームで、デフォルトのリポジトリ(devices.xml)またはWURFLリポジトリ(WURFL.zipまたはwurfl.xmlおよび現在のパッチ・ファイル)をアップロードします。

    ノート:

    デバイス・リポジトリを切り替える場合、すべてのデバイス・グループにわたってdevices.xmlで変更したデバイス名を更新するよう注意されます。

    WURFL.patchファイルは、デバイス・リポジトリ表のWURFL.patchのレコードがまだActive=F (false)に設定されていることとは関係なく、WURFL.xmlファイルと一緒に使用されます。

    図26-5 「デバイス・リポジトリ・アップローダ」フォーム

    図26-5の説明が続きます
    「図26-5 「デバイス・リポジトリ・アップローダ」フォーム」の説明
  3. 「保存」アイコンをクリックします。

26.4.2 デバイス・リポジトリの構成方法

devices.xml (デフォルトのリポジトリ)とWURFLのどちらかのデバイス・リポジトリを使用するオプションが用意されています。

  • devices.xmlを使用するには、次の手順を実行します。

    1. ファイルに必要なデバイス名とユーザー・エージェントが含まれていることを確認します。DeviceRepositoryディレクトリ内でファイルを検索し、必要な変更を行います。

    2. devices.xmlをWebCenter Sitesにアップロードすることによってアクティブ化します。

      1. 「一般的な管理」ツリーを開き、「モビリティ」ノードを展開し、「デバイス・リポジトリ」をダブルクリックします。

      2. 「デバイス・リポジトリ・アップローダ」フォームで、devices.xmlをアップグレードして、保存します。

  • devices.xmlファイルに現在登録されているものより多くの機能およびデバイスをサポートするには、WURFLをデバイス・リポジトリとして使用します。次の手順を実行します。

    1. 次のいずれかのフォーマットでWURFLリポジトリを取得します。

      • WURFL.zip

      • WURFL.xml (WURFLパッチ・ファイルと一緒に)。パッチ・ファイルは、WURFL.xmlのコンテンツをオーバーライドするために使用します。パッチ・ファイルの詳細は、http://wurfl.sourceforge.net/を参照してください。

        ノート:

        WURFLは、サード・パーティのデバイス・リポジトリです。このリポジトリを使用するには、ScientiaMobileからライセンスを購入する必要があります。WebCenter Sitesには組み込まれていません。

    2. wurfl.xmlファイルとパッチを使用する場合は、他のステップに進む前にパッチ・ファイルを構成します。

    3. WURFLリポジトリをWebCenter Sitesにアップロードすることによってアクティブ化します。

26.4.3 デバイス・グループ基準に対するカスタム・フィルタの作成方法

WebCenter Sitesでは、入力としてXMLファイルをとる、デフォルトのカスタム・フィルタ実装(DefaultCustomFilter.java)を提供しています。独自のカスタム・フィルタを作成するには、CustomDeviceFilter.javaインタフェースの実装を記述します。カスタム・フィルタ用のXMLファイルは、「デバイス・グループの構成方法」で説明するように、「デバイス・グループ」構成ページからアップロードされます。

この項には、次の項目が含まれます。

ノート:

カスタム・フィルタの使用方法の詳細は、「デバイス・グループの構成方法」を参照してください。

26.4.3.1 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のいずれか)。

26.4.3.2 独自の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.
    }
}

26.4.4 デバイス・グループの構成方法

デバイス・グループを構成するには:

  1. 「モビリティ」ノードで、「デバイス・グループ」ノードを開きます。

  2. この図に示すように、「デバイス・グループの追加」をクリックします。

    図26-6 デバイス・グループの追加

    図26-6の説明が続きます
    「図26-6 デバイス・グループの追加」の説明

    「デバイス・グループ」フォームが開きます。

  3. 「デバイス・グループ」フォームで「コンテンツ」タブを選択して、次の操作を実行します。

    1. 「名前」フィールドに、作成しているデバイス・グループのわかりやすい名前を入力します。

    2. 「接尾辞」セクションで、このデバイス・グループ用に作成するテンプレートで使用する接尾辞を入力します。または、既存の接尾辞がある場合は、それを選択します。

      ノート:

      この接尾辞は編集できません。後で変更するには、このデバイス・グループを再作成して、この接尾辞を変更する必要があります。

    3. 「アクティブ」フィールドで「はい」を選択すると、このデバイス・グループのデバイス検出が有効になります。

      ノート:

      デバイス・グループはグローバルです。有効化すると、すべてのサイトで利用できるようになります。同様に、無効化すると、すべてのサイトで利用不可になり、デバイス検出で使用されなくなります。

  4. 「基準」タブ(次の図を参照)を選択し、適切なテンプレート・バリアントに関連付けることのできる、実デバイスの照合用のルール・セットを作成します。

    1つ以上のデバイス名を入力するか(残りのフォームは無効になります。次の図を参照)、デバイス名を省略して残りのフォームに記入します。

    図26-7 デバイス名の追加

    図26-7の説明が続きます
    「図26-7 デバイス名の追加」の説明

    1. デバイス名を入力する場合は、デバイス・リポジトリに登録されているのと同じ名前を入力します。devices.xmlをアップロードした場合は、デバイス・エントリ名を入力します。WURFLをアップロードした場合は、デバイスのmodel_nameを入力します。

      「デバイス名」フィールドには先行入力機能が用意されているため、使用可能なデバイスのリストから登録済のデバイス名を選択できます。デバイス・モデル番号の入力を開始すると、一般的な文字から始まる登録済のデバイスがすべて表示されます。最初の50のデバイスをスクロールしてこの中から簡単に選択できます。これ以外のデバイスを表示するには、検索フィルタを絞り込みます。
      devicegrp_typeahead.pngの説明が続きます
      図devicegrp_typeahead.pngの説明

      デバイスは、一度に1つのデバイス・グループにしか属することができません。

    2. デバイス名を省略する場合は、次のように、残りのフォームを記入します。

      1. 「ユーザーエージェント」セクション: このセクションは、デバイス名を指定する場合は無効になります。

        このフィールドには、デバイス名のリスト、またはユーザー・エージェント、画面ディメンション、機能およびカスタム・フィルタの組合せを入力します。ユーザー・エージェントregex、機能、画面ディメンションおよびカスタム・フィルタの組合せでは、デバイスは、デバイス・グループとの照合に使用されるすべてのルールを満たす必要があります。

        受信リクエストの送信元のブラウザと一致するユーザー・エージェントを入力します。または、ユーザー・エージェントのセットと照合する正規表現や部分文字列を入力します。たとえば、すべてのiPhoneユーザー・エージェントを照合するには、ユーザー・エージェントreg expを(m|M)ozilla/5.0(| )\(i(p|P)(hone|od|rod).*として指定します。この式は、iPhone Java regexを含むすべてのユーザー・エージェント文字列に一致します。または、すべてのiPhoneに一致する部分文字列iPhone;を使用します。

        ノート:

        デバイス・リポジトリ内で入力したユーザー・エージェント用として使用可能なデバイスの数を確認するには、「一致しているデバイス」セクションで「リフレッシュ」アイコンをクリックします。

      2. 「機能」セクション: このセクションは、デバイス名を指定する場合は無効になります。その機能は、「タッチ・スクリーン」、「JavaScript」、「縦横方向」および「タブレット」です。各機能には、「はい」、「いいえ」、「評価しない」というオプションがあります。

        たとえば、このデバイス・グループでJavaScriptをサポートしないタブレット・デバイスのみを照合するには、「タブレット」機能で「はい」を、「JavaScript」機能で「いいえ」を、残りの機能で「評価しない」を選択します。

      3. 「画面解像度」セクション: このセクションは、デバイス名を指定する場合は無効になります。表示領域の最大と最小の幅および高さ(単位はピクセル)を入力します。たとえば、最大幅が640である場合、画面解像度の幅が640以下であるすべてのデバイスにこのデバイス・グループが一致します。

      4. 「カスタム・デバイス・フィルタ」セクションで「参照」をクリックして、「デバイス・グループ」の「基準」タブにリストされていない機能に対して条件を適用するために作成した可能性のあるカスタム・フィルタを選択します。

  5. 「保存」アイコンをクリックして、デバイス・グループを保存します。

    新しいデバイス・グループが「モビリティ」タブで、(次の図に示すように)「デバイス・グループ」ノードの最下部にリストされます。

    図26-8 新しいデバイス・グループ

    図26-8の説明が続きます
    「図26-8 新しいデバイス・グループ」の説明

26.4.5 デバイス・グループの優先順位付け方法

実行時のデバイス検出で、優先順位が最も高いデバイス・グループに実デバイスが自動的に関連付けられるように、複数のデバイス・グループに優先順位を付ける必要があります。

デバイス・グループに優先順位を付けるには:

  1. 「モビリティ」ノードの下で、「デバイス・グループ」ノードを開きます。
  2. 「デバイス・グループの並替え」をダブルクリックします。

    図26-9 デバイス・グループの並替え

    図26-9の説明が続きます
    「図26-9 デバイス・グループの並替え」の説明
  3. 「デバイス・グループの並替え」ページで、希望する優先順位となるようにデバイス・グループをドラッグ・アンド・ドロップします。

    図26-10 デバイス・グループのドラッグ・アンド・ドロップ

    図26-10の説明が続きます
    「図26-10 デバイス・グループのドラッグ・アンド・ドロップ」の説明

    デバイス・グループを並べ替えると、それらが「デバイス・グループの並替え」ページに新しい順序で表示されます(たとえば、次の図のようになります)。

    図26-11 並べ替えられたデバイス・グループ

    図26-11の説明が続きます
    「図26-11 並べ替えられたデバイス・グループ」の説明
  4. 「優先順位の保存」をクリックします。

    「デバイス・グループの優先順位の再設定が正常に行われました」メッセージが表示されます。

    デバイス・グループに優先順位を付けてデバイス・アセットを作成したら、デバイス・グループとデバイス・アセットがデバイス検出によって正しく関連付けられていることを確認します。デバイス・グループを開いて「デバイス」タブを選択し、そのデバイス・グループに関連付けられているデバイス・アセットのリストを表示します。

26.4.6 デバイス・アセットの作成方法

デバイス・アセット作成するには:

  1. 「モビリティ」ノードで、「デバイス」ノードを開きます。

  2. 「デバイスの追加」をクリックします。

    図26-12 デバイスの追加

    図26-12の説明が続きます
    「図26-12 デバイスの追加」の説明

    「デバイス」フォームが開きます。

    図26-13 「デバイス」フォーム - 「コンテンツ」タブ

    図26-13の説明が続きます
    「図26-13 「デバイス」フォーム - 「コンテンツ」タブ」の説明

  3. 「コンテンツ」タブで、次を実行します。

    1. 「名前」フィールドに、このデバイス・アセットの名前を入力します。

      この名前はContributorインタフェースに表示されます。デバイス・リポジトリ内の名前と一致している必要はありません。

    2. (オプション)。「製造業者」フィールドに、デバイス・メーカーの名前を入力します。

    3. 「ユーザー・エージェント」フィールドで、イメージを追加するデバイスの登録済ユーザー・エージェントを指定します。ユーザー・エージェントは、デバイス・リポジトリからコピーできます。

      ノート:

      「ユーザー・エージェント」フィールドは、このデバイス・アセットが表す実デバイスを識別します。このフィールドは、優先順位が一番高い、一致するデバイス・グループにこのデバイスを関連付けするために、デバイス検出ロジックで使用します。

    4. 「ユーザー・エージェントのテスト」をクリックしてデバイス検出を実行し、このデバイスが特定のデバイス・グループに一致していることを確認します。

    5. このデバイス・アセットをデバイス検出メカニズムでデバイス・グループに関連付けることができるように、「有効化」オプションを選択します。

    6. 「デバイス・イメージ」フィールドの隣にある「参照」をクリックして、イメージの保存先ディレクトリからデバイス・イメージを選択します。

    7. (オプション)。「サムネイル・イメージ」フィールドの横で、Contributorインタフェースのプレビュー機能に関連付けられているデバイス・セレクタ・パネルに表示するサムネイル・イメージをアップロードします。サムネイルを選択すると、デバイス・イメージのページ・プレビューが表示されます。

  4. 「画面ディメンション」タブで、「高さ」、「幅」、「上」および「左」の各フィールドに必要なピクセルを入力し、「ピクセル率」フィールドにピクセル率を入力して、画面領域の適切なディメンションを決定します。

    • 高さ: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の高さ。

    • 幅: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の幅。

    • 上: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の上部マージン。

    • 左: サイト・コンテンツをプレビューするデバイス・イメージ内の表示領域の左マージン。

    • ピクセル率: 物理ピクセルと論理ピクセルの間の比率。たとえば、iPhone 7では、物理線形導出は論理線形導出の2倍のため、ピクセル率は2です。

    各フィールドにピクセルを入力すると、デバイス・イメージの画面領域もそれに応じてリセットされ始めます。この機能により、デバイス表示領域の正確なディメンションをその場で決定できます。

    図26-14 「画面ディメンション」タブ

    図26-14の説明が続きます
    「図26-14 「画面ディメンション」タブ」の説明

  5. フォーム上の「保存」アイコンをクリックして、新しいデバイスを作成します。

    成功メッセージが表示されます。

26.4.7 サイト・ナビゲーションの作成方法

複数のサイト・ナビゲーションと単一のサイト・ナビゲーションのどちらが必要かは、設計方法により異なります。サイト・ナビゲーションを作成している場合、共通の接尾辞を選択することによって、デバイス・グループをこのナビゲーションに関連付けます。選択した接尾辞は、他のサイト・ナビゲーションで使用できなくなります。

サイト・ナビゲーションを作成するには:

  1. Adminインタフェースで「一般的な管理」ツリーを開き、「管理」ノード、「サイト」ノード、およびサイト・ナビゲーションの作成場所であるサイトの順に開きます。
  2. 「サイト・ナビゲーション」ノードを開きます。
  3. 「新規追加」をダブルクリックします。

    図26-15 「管理」タブの「サイト・ナビゲーション」ノード

    図26-15の説明が続きます
    「図26-15 「管理」タブの「サイト・ナビゲーション」ノード」の説明

    「サイト・ナビゲーションの追加」フォームが開きます。

  4. 「名前」フィールドに、サイト・ナビゲーションのわかりやすい名前を入力します。
  5. (オプション)「説明」フィールドに、サイト・ナビゲーションの説明を入力します。
  6. デバイス・グループをこのサイト・ナビゲーションに関連付けるには、「接尾辞」セクションに移動して、これらのデバイス・グループによって使用される接尾辞を選択します。

    ノート:

    「接尾辞」セクションには、サイト・ナビゲーションに割り当てられていない接尾辞のみがリストされます。

    「関連付けられたデバイス・グループ」パネルに、選択した接尾辞に関連付けられているデバイス・グループがリストされます。

    図26-16 「関連付けられたデバイス・グループ」パネル

    図26-16の説明が続きます
    「図26-16 「関連付けられたデバイス・グループ」パネル」の説明
  7. サイト・ナビゲーションにわかりやすい名前のアイコンを追加し、ウェブ・モードまたはフォーム・モードで開いているページがこのサイト・ナビゲーションに属するかどうかをコンテンツ・コントリビュータが識別しやすくします。この機能は、複数のサイト・ナビゲーションを操作する場合に非常に役に立ちます。アイコンを追加するには、「アイコン」フィールドの横で、「参照」をクリックし、アイコンが配置されているディレクトリに移動します。推奨されるアイコン・イメージのサイズは16ピクセル * 16ピクセルです。

    Contributorインタフェースでは、このアイコンは、Webモードまたはフォーム・モードで開かれたときに、サイト・ナビゲーションの左側およびページの左側に表示されます。たとえば、この図を参照してください。

    図26-17 「ナビゲーション」アイコン

    この図は「サイト・ナビゲーション」アイコンを示しています。
  8. 「追加」をクリックして、サイト・ナビゲーションを完了します。

    この図のようなページが開きます。

    図26-18 作成された新しいサイト・ナビゲーション

    図26-18の説明が続きます
    「図26-18 作成された新しいサイト・ナビゲーション」の説明
  9. 「サイト・ナビゲーション」タブをクリックして、新しく作成されたサイト・ナビゲーションを表示します。

    サイト・ナビゲーションを修正するには、「管理」タブ上のサイト・ノードの下にあるサイト・ナビゲーションをダブルクリックします。「サイト・ナビゲーションの変更」ページで、変更を行ってから、「修正」をクリックします。

26.4.8 サイト・ナビゲーションの編成方法

AdminおよびContributorインタフェースでサイト・ナビゲーションを特定の順序で表示するには、これらを並べ替えます。

サイト・ナビゲーションを編成するには:

  1. Adminインタフェースの「一般的な管理」ツリーの下で、「管理」ノード、「サイト」ノード、およびサイト・ナビゲーションを優先順位を付ける場所であるサイトの順に開きます。

    ノート:

    SiteAdminロールが割り当てられている場合は、かわりに「サイト管理者」タブを使用します。

  2. 「サイト・ナビゲーション」の下で、「サイト・ナビゲーションの並替え」をダブルクリックします。

    図26-19 サイト・ナビゲーションの並替え

    図26-19の説明が続きます
    「図26-19 サイト・ナビゲーションの並替え」の説明
  3. 「サイト・ナビゲーションの並替え」ページで、サイト・ナビゲーションをドラッグ・アンド・ドロップして、希望の順序に並べ替えます。

    図26-20 サイト・ナビゲーションのドラッグ・アンド・ドロップ

    図26-20の説明が続きます
    「図26-20 サイト・ナビゲーションのドラッグ・アンド・ドロップ」の説明

    サイト・ナビゲーションを並べ替えたら、「サイト・ナビゲーションの並替え」ページがこの図のように表示されます。

    図26-21 並べ替えられたサイト・ナビゲーション

    図26-21の説明が続きます
    「図26-21 並べ替えられたサイト・ナビゲーション」の説明
  4. 「保存」をクリックします。

    「修正に成功しました。」メッセージが表示されます。

26.5 配信システムへのデバイス・リポジトリのミラー・パブリッシュ

モバイル・サイト向けにインフラストラクチャを構成したら、配信システムにデバイス・リポジトリをミラー・パブリッシュする必要があります。

ノート:

デバイス・リポジトリを変更およびミラーリングした後は、必ずしも値を変更せずに、編集および保存を目的としてデバイス・グループを開くことにより、ターゲット・システム上のデバイス・グループへのデバイスの再関連付けをトリガーできます。

WURFLデバイス・リポジトリをミラー・パブリッシュするには:

  1. 「モビリティ」ノードの下で、「デバイス・グループ」ノードをダブルクリックします。
  2. デバイス・アップローダ画面の「WURFL」の下で、「単一Zipのアップロード」オプションを選択し、wurfl.zipファイルをアップロードします。
  3. 「保存」アイコンの横にある「ミラー」アイコンをクリックします。

    使用可能な宛先オプションが表示されます。

    起動し稼働している宛先は「緑」アイコンで、現在稼働していない宛先は「赤」アイコンです。宛先のアイコンが「赤」である場合、チェック・ボックスは無効です。

    mirror_icon_options.pngの説明が続きます
    図mirror_icon_options.pngの説明
  4. 目的のアセット・オプションのチェック・ボックスを選択します。

    ノート:

    次のステップを実行する前に、宛先マシンでWURFL.jarがすでに使用可能であることを確認します。WURFL.jarのコピーを配信システムに配置せずにWURFLデバイス・リポジトリをミラーリングすると、デバイス・グループが正常に機能しなくなります。

  5. 「ミラー」をクリックします。

    選択したデバイス・リポジトリが選択した宛先にミラーリングされます。成功メッセージが表示されます。

    リポジトリがミラーリングされた後、選択した宛先のインジケータが緑になります。

26.6 テンプレートの作成

WebCenter Sitesの接尾辞機能を使用して、すべてのモバイル・デバイスに対して機能するテンプレートを1セットのみ作成することも、様々なセットを作成することもできます。

そのため、モバイルWebサイトをレンダリングするテンプレートを作成するには、次の2つの基本的な方法があります。

  • すべてのモバイル・デバイス(つまり、すべてのデバイス・グループ)に適応する単一セットのテンプレートを作成します。

  • 異なるデバイス・グループ用に異なるテンプレートを作成します。このシナリオには接尾辞を使用する必要があります。この項では、この2番目の方法について説明します。

次のトピックを参照してください。

26.6.1 テンプレート・バリアントを作成するための基本ガイドライン

異なるデバイス・グループ用の異なるテンプレートを作成する際には、次の要件に注意してください。

  1. 基本テンプレート(デスクトップWebサイトをレンダリングするテンプレート)を作成します。

  2. 基本テンプレートの名前を使用し、_suffixを追加して、テンプレート・バリアントを作成します。

  3. テンプレートに基づいてページをキャッシュする場合は、キャッシュ基準の1つとして接尾辞(dパラメータ)を使用します。

26.6.2 Mobilityタグの理解

次の表では、テンプレートの作成時に使用するMobilityのタグについて説明しています。『Oracle WebCenter Sitesリファレンス・タグ・リファレンス』を参照してください。

表26-1 Mobilityのタグ

タグ 説明

<device:load name="<Name of Current Device>" />

現在のデバイスを検出して、デバイス情報をロードします。asset:loadと同様。

<device:get name="<Name of Current Device>" property="useragent|devicegroup|suffix" [output="propName"] />

このタグは、ロードされたデバイスに対してuseragent、devicegroupまたはsuffixプロパティのいずれかの値を返します。オプション属性outputが指定されている場合、プロパティの値をoutput変数に設定します。output属性がない場合、プロパティの値を、そのプロパティの名前を持つ変数に設定します。

<device:if name="<Name of Current Device>" property="touch" value="true" [datatype="boolean"] [operator="equals"] > ... conditional code for touch devices only ... </device:if>

このタグでは、現在ロードされているデバイスに対して特定の条件や、その条件が満たされると実行されるコードを指定できます。オプション属性datatypeのデフォルト値はStringで、オプション属性operatorのデフォルト値は"="です。

<device:hascapability name="<Name of the Device Loaded Earlier>" capability="<WURFL_CAPABILITY_NAME>" > conditional code </device:hascapabiilty>

このタグは、現在ロードされているデバイスが、このタグで指定された機能をサポートしているかどうかをチェックします。タグ内のコードが実行されるのは、デバイスがこの機能をサポートしている場合です。

<device:capability name="<Name of the Device Loaded Earlier>" capability="<WURFL_CAPABILITY_NAME>" output="capabilityValue" />

このタグは、現在ロードされているデバイスに対して、icsスコープ内の指定された機能の値を設定します。

<device:siteplan output=<NAME_OF_VARIABLE_HOLDING_RESULTING_SITEPLAN_ID> [pubid = <%=ics.GetVar("pubid")%>] [site=<%=ics.GetVar("site")%>] [d= <%=ics.GetVar("d")%>] />

device:siteplanタグを使用して、デバイスのサイト・ナビゲーションを検索します。タグは、デバイス・グループの接尾辞である、dパラメータをとります。

実行時に、WebCenter Sitesではデバイス検出を使用して、dパラメータの値を計算します。タグは、dパラメータ(つまり、接尾辞)の値を使用して、同じ接尾辞を持つサイト・ナビゲーションを検索し、そのサイト・ナビゲーションのIDを返します。サイト・ナビゲーションIDは、Webサイト・ナビゲーションを構築するために他のタグによって使用されます。

26.6.3 デバイス検出とページ・レンダリングをサポートするために変更されるタグ

次のタグには、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属性の使用方法の詳細は、「デバイス検出の仕組み」を参照してください。

26.6.4 テンプレート・バリアントの作成

テンプレート・バリアントを作成するには、接尾辞をコピー、変更、および基本テンプレートに追加します。この接尾辞機能を使用して、バリアントが存在しない接尾辞に対して単一のテンプレート・バリアントの作成とテンプレート・バリアントのバルク作成の両方を行うことができます。

この項には次のトピックが含まれます:

ノート:

接尾辞ベースの検索を使用すると、特定の接尾辞のテンプレートを簡単に検索できます。つまり、メニュー・バーの「検索」をクリックし、「検索」表からテンプレートの検索を選択します。「検索対象: テンプレート」画面で、「検索」ドロップダウン・リストから「接尾辞」を選択し、「検索文字列」ドロップダウン・リストから目的の接頭辞を選択します。検索結果には、非アクティブ化されたテンプレートまたは削除されたテンプレートも含まれます。(これらのタイプをサイトから削除し、検索結果に再表示されないようにしてください。)

26.6.4.1 単一のテンプレートのバリアントの作成方法

テンプレート・バリアントを作成するには:

  1. テンプレートのバリアントがすでに存在するかどうかを確認します。テンプレートの「調査」モードの「テンプレート・バリアント」セクションに移動します。

    特定の接尾辞に対してテンプレート・バリアントが存在する場合は「アクション」列の下に「表示」リンクが表示され、それ以外の場合は「作成」リンクが表示されます。

    図26-22 テンプレート・バリアント

    図26-22の説明が続きます
    「図26-22 テンプレート・バリアント」の説明
  2. テンプレートのバリアントを作成するには、「作成」リンクをクリックします。

    「テンプレート」フォームが表示されます。

    図26-23 テンプレート・フォーム

    図26-23の説明が続きます
    「図26-23 テンプレート・フォーム」の説明
  3. 「テンプレート・アセット、CSElementアセットおよびSiteEntryアセットの作成」の「テンプレート・アセットの名前付けと記述」を実行します。
26.6.4.2 テンプレート・バリアントのバルク作成方法

複数のテンプレートのテンプレート・バリアントを作成するには:

  1. デバイス・タブで、「テンプレート」を開き、「一括コピー・テンプレート」をダブルクリックします。
  2. 「一括コピー・テンプレート」ページで、「接尾辞」ドロップダウン・リストから必要な接頭辞を選択します。
  3. 「アセット・タイプ」ボックスで、テンプレートをコピーするアセットを選択します。

    これにより、関連する基本テンプレートが「使用可能な基本テンプレート(n)」ボックスに表示されます。

  4. コピーするテンプレートを選択します。必要に応じて、「使用可能な基本テンプレート」ボックスに表示されているテンプレートを1つ、複数またはすべて選択します。

    「選択された基本テンプレート」ボックスに、選択したテンプレートが移入されます。

    図26-24 一括コピー・テンプレート

    図26-24の説明が続きます
    「図26-24 一括コピー・テンプレート」の説明
  5. 「生成」をクリックします。

    「テンプレートは正常に生成されました: <name>」メッセージが表示されます。

26.7 モバイルWebサイトのイメージの最適化

イメージ最適化フィルタでは、モバイルWebサイトのイメージを最適化できます。

また、独自のイメージ最適化実装をプラグインし、イメージをカスタム手法で最適化することもできます。次の各項では、これら両方の方法について説明します。

26.7.1 イメージ最適化フィルタを使用したイメージの最適化方法

WebCenter Sitesのイメージ最適化機能は、フレックス・アセット・ファミリに対して使用できます。フルサイズのイメージを最適化し、様々なタイプのモバイル・デバイスで適切に表示できます。この機能を使用すると、様々な接尾辞に対してイメージを最適化し、様々な画面ディメンションをサポートできます。たとえば、一部のデバイスでは、表示されるイメージはフルサイズのイメージの50%にする必要がありますが、他のデバイスでは、実際のサイズの50%より小さく表示する必要があります。

イメージ最適化フィルタを使用してイメージを最適化するには:

26.7.1.1 ImageOptimizationFilterタイプのフレックス・フィルタの作成
  1. メニュー・バーの「新規」をクリックします。
  2. オプションのリストから、「新規フィルタ」をクリックします。

    「新規フィルタ」フォームが表示されます。

  3. 「名前」フィールドで、新しいフィルタの名前を入力します。
  4. dropdown list, choose ImageOptimizationFilter, then click Get Arguments.

    図26-25 ImageOptimizationFilter

    この図は、「フィルタ」ダイアログを示しています。
  5. 「引数」セクションの下で、「値」フィールドに、サイトの既存のblobタイプ属性アセットの名前を入力します。たとえば、avisportsサンプル・サイトの場合、このアセットはimageFileで、フレックス・ファミリはcontentです。この値を適用するには、「追加」をクリックします。
  6. 「保存」アイコンをクリックします。
26.7.1.2 サイトのイメージ定義へのフィルタの追加

ステップ1で作成したフィルタをサイトのイメージ定義に追加するには、次のステップを実行します(たとえば、avisportsサンプル・サイトで、Image定義を検索できます)。

  1. 編集するためにImage定義を開きます。
  2. 「属性」セクションの「使用可能」の下で、フレックス・ファミリを選択し、「必須」をクリックします。avisportsの場合、フレックス・ファミリはすでに選択されています。
  3. 「フィルタ」セクションの「使用可能」の下で、前のステップで作成したイメージ最適化フィルタ(この例ではmyImageOptimizationFilter)を選択し、「選択」をクリックします。

    図26-26 イメージ定義

    この図は、イメージ定義ダイアログを示しています。
  4. 「保存」アイコンをクリックします。
26.7.1.3 blobタイプ属性アセットのインスタンスの作成

WebCenter Sitesでは、単一値と複数値の両方のblobタイプ属性がサポートされています。すべてのテンプレート・バリアントにイメージ最適化フィルタを適用するには、サイトの接尾辞の数と同じ数のblobタイプ属性アセットのインスタンスを作成します。たとえば、avisportsサンプル・サイトでは、既存のblobタイプ属性はimageFileです。このため、この場合、Touch接尾辞に対してこの属性アセットのインスタンスを作成し、NonTouch接尾辞に対して別のインスタンスを作成します。

  1. メニュー・バーの「新規」をクリックします。
  2. オプションのリストから、「新規属性」をクリックします。

    「新規属性」フォームが表示されます。

  3. 「名前」フィールドで、フォーマット<blob_attribute_name>_<Suffix>で名前を入力します。このため、avisportsサイトの場合は、imageFile_TouchおよびimageFile_NonTouchになります。
  4. 「属性タイプ」ドロップダウン・リストから、「BLOB」を選択します。
  5. 「保存」アイコンをクリックします。
26.7.1.4 最適化用のイメージ・プロパティの設定
  1. 「モビリティ」タブの下で、「イメージのプロパティ」ノードをダブルクリックします。
  2. 必要な接尾辞については、次のプロパティを設定します。

    • preferredFormats: オプションのプロパティ。様々なタイプのイメージ・フォーマット。たとえば、avisportsサイトの場合、Touch接尾辞とNonTouch接尾辞の両方で、フォーマットはjpg、png、bmp、gifです。様々なフォーマットを使用する目的は、最も小さいイメージを得ることです。フォーマットは、優先順位の順に提供されます。最初のフォーマットであるjpgにより、最適化されたイメージを実現できる場合、このフォーマットが使用されます。それ以外の場合、次の優先順位のフォーマットが使用されます。必要なサイズを実現する上でサポートされているフォーマットが1つも役に立たない可能性がある場合は、デバイス上でフルサイズのイメージがレンダリングされます。

      省略すると、最適化されたイメージのフォーマットは元/フルサイズのイメージと同じになります。

    • targetSize: デバイス上のイメージの平均サイズ。これはパーセンテージである必要があります。たとえば、フルサイズのイメージの40%などです。

    • maxsize: デバイス上のイメージの最大サイズ。これはパーセンテージである必要があります。たとえば、フルサイズのイメージの50%などです。最適化されたイメージがmaxsizeを超える場合、レンディションとして格納されません。最適化されたイメージのサイズ(バイト単位)がmaxSizeを超える場合、メイン・イメージが使用されます。

26.7.1.5 既存のイメージへのイメージ最適化フィルタの適用

イメージを作成または編集する場合は、イメージ最適化フィルタが機能します。このため、このフィルタを既存のイメージに適用するには、これらのイメージを編集して保存する必要があります。

  1. イメージを編集モードで開きます。
  2. 「保存」アイコンをクリックし、フィルタを適用します。
26.7.1.6 イメージ最適化フィルタが適用されているかどうかの確認
  1. Contributorインタフェースを開きます。
  2. イメージを検索して開きます。

    イメージの「コンテンツ」タブには、各接尾辞のサムネイルが含まれます。次の図に、フルサイズのイメージ(デフォルトのサイト用)用、Touch接尾辞用、およびNonTouch接尾辞用の3つのサムネイルが表示されたサンプル・イメージの「コンテンツ」タブを示します。

    図26-27 サンプル・イメージのコンテンツ

    この図は、サンプル・イメージを示しています。
  3. 各接尾辞の最適化されたイメージを表示するには、「URL」タブ上で使用可能な各URLをクリックします。

    図26-28 サンプル・イメージのURL

    この図は、サンプル・イメージのURLを示しています。
26.7.1.7 サイトでの最適化されたイメージの使用
  1. render:getbloburlタグのoptimize属性をtrueに設定します(<render:getbloburl c=... cid=.. optimize='true' />)。

26.7.2 プラガブル・インタフェースを使用したイメージの最適化方法

モバイルWebサイトのイメージを最適化するには、次のように、イメージ最適化API ImageOptimizer.javaのカスタム実装をプラグインします。

  1. 抽象クラスImageOptimizer.javaを拡張するクラスを作成します。たとえば、WebCenter Sitesに含まれるImagePercentScaler.javaクラスのデフォルトの実装com.fatwire.mobility.image.impl.ImagePercentScalerを参照してください。
  2. 必要に応じて、抽象クラスTargetImageProperties.javaを拡張するクラスを作成します。たとえば、WebCenter Sitesに含まれるDefaultTargetImageProperties.javaクラスのデフォルトの実装com.fatwire.mobility.image.impl.DefaultTargetImagePropertiesを参照してください。または、デフォルトの実装で許可されているプロパティ以外のプロパティが使用されない場合、既存のデフォルトの実装クラス自体を再使用します。

    ノート:

    デフォルトのターゲット・プロパティを使用する場合、ステップ3に示すXMLスニペットの最初の行を変更しないでください。

  3. <WebCenter Sites_HOME>/config/にあるMobilityService.xml構成ファイル内で、属性クラスの値をTargetImageProperties.javaおよびImageOptimizer.java抽象クラスの各実装(COM.FutureTense.Mobility.Image.ImageOptimizerおよびCOM.FutureTense.Mobility.Image.TargetImageProperties)に置き換えます。
    <bean id="TargetImageProperties" class="com.fatwire.mobility.image.impl.DefaultTargetImageProperties" singleton="false"/>
<bean id="ImageOptimizationService" class="com.fatwire.mobility.image.impl.ImagePercentScaler" singleton="true" >
       <constructor-arg ref="TargetImageProperties"/>
</bean>

    これで、実装の使用を開始できます。同様の実装については、次のコードを参照してください。

    ImageOptimizer srv = ServiceLocator.getService( "ImageOptimizationService", ImageOptimizer.class );
TargetImageProperties targetImageProperties = srv.getTargetImageProperties();
 targetImageProperties.putAll( customPropertnValues );
 //'customPropertnValues' is a map that contains custom property names and values as required by userimplementation ofimageoptimization API

26.8 デバイス検出の仕組み

WebCenter Sitesは、組込みのデバイス検出メカニズムを使用して、Webサイトのコンテンツを要求するデバイスを識別します。デバイスが特定されると、WebCenter Sitesは一致するデバイス・グループを検索して、その接尾辞を読み取ります。接尾辞を使用して、サイト・ナビゲーションを見つけ、テンプレート・バリアントを呼び出してそのコンテンツをレンダリングします。

詳細なステップは次のとおりです。

  1. リモートSatellite Serverは、実デバイスからページ・リクエストを受信します。このリクエストのヘッダーには、デバイスのユーザー・エージェントが含まれます。

  2. リモートSatellite Serverは独自のキャッシュ内でそのページを検索します。ページの検索に失敗すると、リモートSatellite ServerはWebCenter Sitesにページ・リクエストを送信します。

  3. WebCenter Sitesは次のように応答します。

    1. リクエスト・ヘッダーのユーザー・エージェントによってデバイスを識別します。

    2. デバイス・リポジトリでユーザー・エージェントを検索します。

    3. デバイス・リポジトリで一致するデバイスを見つけると、WebCenter Sitesはそのデバイスの機能も検索します。

    4. WebCenter Sitesはユーザー・エージェント機能とデバイス機能を使用して、基準に合ったデバイス・グループを検索します。

    5. そのデバイスを優先順位の一番高いデバイス・グループに関連付けます。

    6. このデバイス・グループの接尾辞を読み取ります。

    7. その接尾辞をicsスコープ内のdパラメータに割り当てます。

    8. _suffixをURLで要求されたテンプレート名に追加します。

    9. d=suffixを要求されたページのURLに追加します。

      次に例を示します。

      接尾辞がTouchの場合、WebCenter Sitesでは、元のURL pagename=avisports/HomeLayout1&c=Page&cid=1482760932をURL pagename=avisports/HomeLayout1_Touch&c=Page&cid=1482760932&d=Touch に変換します

    10. テンプレート・バリアントが存在する場合、WebCenter Sitesは新しいURLを実行してそのページをキャッシュし、それをリモートSatellite Serverに送信します。

      テンプレート・バリアントが存在しない場合、WebCenter Sitesは元のURLを実行してそのページをキャッシュし、それをリモートSatellite Serverに送信します。

  4. リモートSatellite Serverはそのページをキャッシュして、デバイスにレスポンスを送信します。

  5. リモートSatellite Serverは、デバイス検出情報もキャッシュして、それを同じデバイスからの後続のリクエストを処理するために使用します。これにより、WebCenter Sitesでのデバイス検出の再実行が回避されます。