モバイルデバイス用サイトの作成 creating-sites-for-mobile-devices

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

NOTE

単一ページアプリケーションフレームワークを基にしたクライアントサイドレンダリング（React など）が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報。

モバイルサイトの作成は標準サイトの作成と同様ですが、テンプレートおよびコンポーネントの作成も含まれます。テンプレートとコンポーネントの作成について詳しくは、テンプレート、コンポーネントおよび AEM Sites の開発の手引きを参照してください。主な違いは、サイト内での Adobe Experience Manager（AEM）の組み込みのモバイル機能の有効化です。そのためには、モバイルページコンポーネントを使用するテンプレートを作成します。

レスポンシブデザインを使用して、複数の画面サイズに対応する単一のサイトを作成することを検討してください。

作業を開始する際は、AEM で使用可能な We.Retail モバイルデモサイト を確認できます。

モバイルサイトを作成するには、次の手順を実行します。

ページコンポーネントを作成します。
- sling:resourceSuperType プロパティを wcm/mobile/components/page に設定します。
  このようにすることで、コンポーネントはモバイルページコンポーネントに依存します。
- プロジェクトに特有のロジックを使用して body.jsp を作成します。
ページテンプレートを作成します。
- sling:resourceType プロパティを新しく作成したページコンポーネントに設定します。
- allowedPaths プロパティを設定します。
サイト用のデザインページを作成します。
/content ノードの下にサイトのルートページを作成します。
- cq:allowedTemplates プロパティを設定します。
- cq:designPath プロパティを設定します。
サイトのルートページのページプロパティの「モバイル」タブで、デバイスグループを設定します。
新しいテンプレートを使用してサイトページを作成します。

モバイルページコンポーネント（/libs/wcm/mobile/components/page）：

ページプロパティダイアログに「モバイル」タブを追加します。
head.jsp を使用して、現在のモバイルデバイスグループを要求から取得します。デバイスグループが見つかった場合は、そのグループの drawHead() メソッドを使用して、デバイスグループの関連するエミュレーターの init コンポーネント（オーサーモードの場合のみ）とデバイスグループのレンダリング CSS をインクルードします。

NOTE

モバイルサイトのルートページはノード階層のレベル 1 に位置する必要があります。また、このページを /content ノードの下に配置することをお勧めします。

マルチサイトマネージャーによるモバイルサイトの作成 creating-a-mobile-site-with-the-multi-site-manager

標準サイトからモバイルのライブコピーを作成するには、マルチサイトマネージャー（MSM）を使用します。標準サイトは自動的にモバイルサイトに変換されます。モバイルサイトには、モバイルサイトのすべての機能（例：エミュレーター内のエディション）が含まれており、標準サイトと同期してサイトを管理できます。詳しくは、マルチサイトマネージャーのページにある別のチャネル用のライブコピーの作成の節を参照してください。

サーバーサイドのモバイル API server-side-mobile-api

モバイルクラスを格納する Java™ パッケージを次に示します。

com.day.cq.wcm.mobile.api - MobileConstants を定義します。
com.day.cq.wcm.mobile.api.device - Device、DeviceGroup および DeviceGroupList を定義します。
com.day.cq.wcm.mobile.api.device.capability - DeviceCapability を定義します。
com.day.cq.wcm.mobile.api.wurfl - WurflQueryEngine を定義します。
com.day.cq.wcm.mobile.core - WCM モバイルに関連するさまざまなユーティリティメソッドを提供する MobileUtil を定義します。

モバイルコンポーネント mobile-components

We.Retail モバイルデモサイト では、/libs/foundation/components にある以下のモバイルコンポーネントを使用します。

名前

グループ

特徴

mobilefooter

hidden

- footer

mobileimage

モバイル

- image 基盤コンポーネントに基づく
- 画像をレンダリングする（デバイスが対応している場合）

mobilelist

モバイル

- list 基盤コンポーネントに基づく
- listitem_teaser.jsp が画像をレンダリングする（デバイスが対応している場合）

mobilelogo

hidden

- logo 基盤コンポーネントに基づく
- 画像をレンダリングする（デバイスが対応している場合）

mobilereference

モバイル

- reference 基盤コンポーネントと同様

- textimage コンポーネントを mobiletextimage コンポーネントにマップし、image コンポーネントを mobileimage コンポーネントにマップする

mobiletextimage

モバイル

- textimage 基盤コンポーネントに基づく
- 画像をレンダリングする（デバイスが対応している場合）

mobiletopnav

hidden

- topnav 基盤コンポーネントに基づく

- テキストのみをレンダリングする

モバイルコンポーネントの作成 creating-a-mobile-component

AEMモバイルフレームワークを使用すると、要求を発行するデバイスに対して機密性の高いコンポーネントを開発できます。以下のコードサンプルは、コンポーネント jsp でAEMモバイル API を使用する方法と、特に以下の方法を示しています。

リクエストからデバイスを取得します。
Device device = slingRequest.adaptTo(Device.class);
デバイスグループを取得します。
DeviceGroup deviceGroup = device.getDeviceGroup();
デバイスグループの機能を取得します。
Collection<DeviceCapability> capabilities = deviceGroup.getCapabilities();
デバイスの属性（WURFL データベースから生の機能のキーと値）を取得します。
Map<String,String> deviceAttributes = device.getAttributes();
デバイスのユーザーエージェントを取得します。
String userAgent = device.getUserAgent();
現在のページからデバイスグループリスト（作成者によってサイトに割り当てられたデバイスグループ）を取得します。
DeviceGroupList deviceGroupList = currentPage.adaptTo(DeviceGroupList.class);
デバイスグループが画像をサポートしているかどうかを確認
if (deviceGroup.hasCapability(DeviceCapability.CAPABILITY_IMAGES)) {
…
または
if MobileUtil.hasCapability(request, DeviceCapability.CAPABILITY_IMAGES) {
…

NOTE

jsp では、slingRequest は <sling:defineObjects>タグ、currentPage は <cq:defineObjects> タグを通じて利用できます。

エミュレーター emulators

エミュレーターに基づくオーサリングを使用すると、作成者はモバイルクライアント向けのコンテンツページを作成できます。モバイルコンテンツのオーサリングは、インプレース WYSIWYG 編集の同じ原則に従います。作成者がモバイルデバイスでのページの外観を確認できるように、モバイルコンテンツページはデバイスエミュレーターを使用して編集されます。

モバイルデバイスエミュレーターは汎用のエミュレーターフレームワークに基づいています。詳しくは、エミュレーターを参照してください。

デバイスエミュレーターのページには、モバイルデバイスが表示されます。一方、通常の編集（parsys、コンポーネント）は、デバイスの画面内でおこなわれます。デバイスエミュレーターは、サイト用に設定されるデバイスグループに依存します。1 つのデバイスグループに複数のエミュレーターを割り当てることができます。これにより、すべてのエミュレーターをコンテンツページで使用できるようになります。デフォルトで表示されるのは、サイトに割り当てた最初のデバイスグループに割り当てられた最初のエミュレーターです。ページ上部にあるエミュレーターのカルーセルまたはサイドキックの編集ボタンを使用してエミュレーターを切り替えることができます。

エミュレーターの作成

エミュレーターを作成するには、汎用エミュレーターに関するページのカスタムモバイルエミュレーターの作成を参照してください。

モバイルエミュレーターの主な特徴

デバイスグループは、複数のエミュレーターのうちの 1 つで構成されます。デバイスグループ設定ページ（例： /etc/mobile/groups/touch）には、jcr:content ノードの下の emulators プロパティが含まれます。
メモ：同じエミュレーターが複数のデバイスグループに属する可能性もありますが、あまり意味がありません。
デバイスグループの設定ダイアログでは、目的のエミュレーターのパスを使用して emulators プロパティが設定されます。（例：/libs/wcm/mobile/components/emulators/iPhone4）。
エミュレーターコンポーネント（例：/libs/wcm/mobile/components/emulators/iPhone4）は、基本モバイルエミュレーターコンポーネント（/libs/wcm/mobile/components/emulators/base）を拡張します。
基本のモバイルエミュレーターを拡張する各コンポーネントは、デバイスグループの設定時に選択できます。これにより、カスタムエミュレーターを簡単に作成または拡張できます。
編集モードでのリクエスト時には、エミュレーターの実装を使用してページをレンダリングします。
ページのテンプレートでモバイルページコンポーネントを使用する場合は、エミュレーターの機能が（モバイルページコンポーネントの head.jsp を使用して）自動的にページに統合されます。

Device Groups device-groups

モバイルデバイスグループは、デバイスの機能に基づいてモバイルデバイスのセグメント化します。デバイスグループは、オーサーインスタンスでのエミュレーターベースのオーサリングおよびパブリッシュインスタンスに適したコンテンツのレンダリングに必要な情報を提供します。作成者がモバイルページにコンテンツを追加して公開すると、そのページをパブリッシュインスタンスでリクエストできます。その場合、エミュレーターの編集ビューではなく、設定済みのいずれかのデバイスグループを使用してコンテンツページがレンダリングされます。デバイスグループの選択は、モバイルデバイスの検出に基づいて行われます。一致するデバイスグループが必要なスタイル設定情報を提供します。

デバイスグループは、/etc/mobile/devices の下のコンテンツページとして定義され、モバイルデバイスグループ テンプレートを使用します。デバイスグループテンプレートは、コンテンツページのフォームでデバイスグループ定義用の設定テンプレートとして機能します。このダイアログの主な特徴を次に示します。

場所: /libs/wcm/mobile/templates/devicegroup
許可されたパス： /etc/mobile/groups/*
ページコンポーネント: wcm/mobile/components/devicegroup

サイトへのデバイスグループの割り当て assigning-device-groups-to-your-site

モバイルサイトを作成する場合は、デバイスグループをサイトに割り当てる必要があります。AEM には、デバイスの HTML および JavaScript のレンダリング機能に対応した 3 つのデバイスグループが用意されています。

フィーチャー フォン：Sony Ericsson W800 などのフィーチャーデバイス用。基本的な HTML はサポートされますが、画像と JavaScript はサポートされません。
スマート フォン、Blackberry® などのデバイス用。基本的な HTML と画像はサポートされますが、JavaScript はサポートされません。
タッチ フォン：iPad などのデバイス用。HTML、画像、JavaScript およびデバイスの回転が完全にサポートされます。

エミュレーターをデバイスグループに関連付けることができます（デバイスグループの作成を参照）。デバイスグループをサイトに割り当てると、作成者は、ページの編集用にデバイスグループに関連付けられている複数のエミュレーターの中から選択できます。

デバイスグループをサイトに割り当てるには、次の手順に従います。

ブラウザーで、Siteadmin コンソールに移動します。
「Web サイト」の下にあるモバイルサイトのルートページを開きます。
ページプロパティを開きます。
「モバイル」タブを選択します。
- デバイスグループを定義します。
- 「OK」をクリックします。

NOTE

サイト用のデバイスグループが定義済みの場合は、そのグループがサイトのすべてのページによって継承されます。

デバイスグループフィルター device-group-filters

デバイスグループフィルターは、デバイスがグループに属するかどうかを指定するための、機能に基づく条件を定義します。デバイスグループの作成時には、デバイスの評価に使用するフィルターを選択できます。

実行時に AEM がデバイスから HTTP リクエストを受信すると、グループに関連付けられている各フィルターはデバイスの機能を特定の条件と比較します。フィルターが要求するすべての機能を備えたデバイスは、グループに属していると見なされます。機能は WURFL™ データベースから取得されます。

デバイスグループでは、0 個以上のフィルターを使用して機能を検出できます。また、複数のデバイスグループで 1 つのフィルターを使用することもできます。AEM には、グループ用に選択された機能がデバイスにあるかどうかを判断するデフォルトのフィルターが用意されています。

CSS
JPG 画像と PNG 画像
JavaScript
デバイスの回転

デバイスグループでフィルターを使用しない場合、デバイスが要求するのは、グループ用に設定された選択済みの機能のみです。

詳しくは、デバイスグループフィルターの作成を参照してください。

デバイスグループの作成 creating-a-device-group

AEM がインストールするグループが要件を満たさない場合は、デバイスグループを作成します。

ブラウザーで、ツール コンソールに移動します。
ツール／モバイル／デバイスグループ でページを作成します。ページを作成 ダイアログで、次の操作を実行します。
- タイトル に「Special Phones」と入力します。
- 名前に「special」と入力します。
- 「モバイルデバイスグループテンプレート」を選択します。
- 「作成」をクリックします。
CRXDE で、デバイスグループ用のスタイルを格納する static.css ファイルを /etc/mobile/groups/special ノードの下に追加します。
Special Phones ページを開きます。
デバイスグループを設定するには、「設定」の横にある「編集」ボタンをクリックします。
「一般」タブで、次の設定を行います。
- タイトル：モバイルデバイスグループの名前
- 説明：グループの説明
- ユーザーエージェント：デバイスを照合するユーザーエージェント文字列。省略可能です。正規表現を使用できます。例：BlackBerryZ10
- 機能：グループで画像、CSS、JavaScript またはデバイスの回転を処理できるかどうかを定義します。
- 「画面の最小の幅」と「画面の最小の高さ」
- エミュレーターを無効にする：コンテンツの編集時にエミュレーターを有効または無効にします。
「エミュレーター」タブで、次の設定を行います。
- エミュレーター：デバイスグループに割り当てられたエミュレーターを選択します。
「フィルター」タブで、次の設定を行います。
- フィルターを追加するには、「項目を追加」をクリックして、ドロップダウンリストからフィルターを選択します。
- フィルターは表示順に評価されます。デバイスがフィルターの条件を満たしていない場合、リスト内の後続のフィルターは評価されません。
「OK」をクリックします。

モバイルデバイスグループ設定ダイアログを次に示します。

screen_shot_2012-02-01at22043pm

デバイスグループ別のカスタム CSS custom-css-per-device-group

前述のとおり、デザインページの CSS と同様に、カスタム CSS をデバイスグループページに関連付けることができます。この CSS は、作成者および公開時におけるページコンテンツのデバイスグループ固有のレンダリングに影響を与えるために使用されます。この CSS は以下に自動的に組み込まれます。

このデバイスグループで使用されるすべてのエミュレーターの作成者インスタンスのページ。
パブリッシュインスタンスのページ（要求のユーザーエージェントがこの特定のデバイスグループ内のモバイルデバイスに一致する場合）。

サーバー側のデバイス検出 server-side-device-detection

HTTP 要求を実行するデバイスの機能を特定するには、フィルターおよびデバイス仕様のライブラリを使用します。

デバイスグループフィルターを開発する develop-device-group-filters

デバイスグループフィルターを作成して、一連のデバイスの機能の要件を定義します。デバイスの機能の必要なグループをターゲットとして指定するには、必要な数のフィルターを作成します。

フィルターを設計して、それらの組み合わせを使用して機能のグループを定義できるようにします。通常、異なるデバイスグループの機能は重複します。そのため、一部のフィルターを複数のデバイスグループ定義と共に使用できます。

作成したフィルターはグループ設定で使用できます。

詳しくは、デバイスグループフィルターの作成を参照してください。

WURFL™ データベースの使用 using-the-wurfl-database

AEM ではサポート対象外のバージョンの WURFL™ データベースを使用して、デバイスのユーザーエージェントに基づいてデバイスの機能（画面の解像度、JavaScript のサポートなど）を照会します。

WURFL™ データベースの XML コードは、wurfl.xml ファイル（/libs/wcm/mobile/devicespecs/wurfl.xml.）を解析することによって、/var/mobile/devicespecs の下にあるノードとして表されます。ノードに対する拡張は cq-mobile-core バンドルの初回起動時に行われます。

デバイスの機能はノードプロパティとして格納されます。ノードはデバイスのモデルを表します。クエリを使用して、デバイスまたはユーザーエージェントの機能を取得できます。

WURFL™ データベースは進化しているので、データベースのカスタマイズまたは置き換えが必要になる場合があります。モバイルデバイスデータベースを更新するためのオプションは次のとおりです。

この使用方法を許可するライセンスを所有している場合は、ファイルを最新バージョンに置き換えます。別の WURFL™ データベースのインストールを参照してください。
AEM で使用可能なバージョンを使用して、ユーザーエージェント文字列を照合し、既存の WURFL™ デバイスを指定する正規表現を設定します。正規表現に基づくユーザーエージェント照合の追加を参照してください。

WURFL™ の機能へのユーザーエージェントのマッピングのテスト testing-the-mapping-of-a-user-agent-to-wurfl-capabilities

デバイスがモバイルサイトにアクセスすると、AEM はそのデバイスを検出し、機能に従ってデバイスグループにマップします。また、デバイスグループに対応するページのビューを送信します。一致するデバイスグループが必要なスタイル設定情報を提供します。このマッピングをモバイルのユーザーエージェントテストページでテストできます。

https://localhost:4502/etc/mobile/useragent-test.html

別の WURFL™ データベースのインストール installing-a-different-wurfl-database

AEM と共にインストールされた WURFL™ データベースのうち、サポート対象外になるのは、
2011年8月30日（PT）以前のリリースです。WURFL のバージョンが 2011年8月30日（PT）以降にリリースされたものである場合は、使用方法がライセンスに適合していることを確認してください。

WURFL™ データベースをインストールするには：

CRXDE Lite で、/apps/wcm/mobile/devicespecs フォルダーを参照します。
WURFL™ ファイルをそのフォルダーにコピーします。
ファイル名を wurfl.xml に変更します。

AEM は wurfl.xml ファイルを自動的に解析して、/var/mobile/devicespecs の下にあるノードを更新します。

NOTE

WURFL™ データベース全体が有効な場合は、解析とアクティブ化に数分かかることがあります。進行状況の情報については、ログで確認できます。

正規表現に基づくユーザーエージェント照合の追加 adding-a-regexp-based-user-agent-matching

ユーザーエージェントを /apps/wcm/mobile/devicespecs/wurfl/regexp に正規表現として追加して、既存の WURFL™ デバイスタイプを指定します。

CRXDE Lite で、/apps/wcm/mobile/devicespecs/regexp の下にノード（例：apple_ipad_ver1）を作成します。
ノードに次のプロパティを追加します。
- regexp：ユーザーエージェントを定義する正規表現（例：.*Mozilla.*iPad.*AppleWebKit.*Safari.*
- deviceId：wurfl.xml で定義されるデバイス ID（例：apple_ipad_ver1）

上記の設定によって、ユーザーエージェントが指定の正規表現に一致するデバイスが、WURFL™ デバイス ID である apple_ipad_ver1（存在する場合）にマップされます。

クライアント側のデバイス検出 client-side-device-detection

この節では、ページのレンダリングを最適化したり、クライアントに代替の web サイトバージョンを提供したりするために、AEM のデバイスのクライアントサイド検出を使用する方法について説明します。

AEM は BrowserMap に基づくデバイスのクライアントサイド検出をサポートしています。BrowserMap は、/etc/clientlibs/browsermap 下のクライアントライブラリとして AEM に同梱されています。

BrowserMap では、次の 3 つの方法を使用して、代替 web サイトをクライアントに提供できます。この方法は、次の順序で使用されます。

代替リンク
デバイスグループ専用の URL
セレクターベースの URL

NOTE

クライアントライブラリの統合について詳しくは、クライアント側 HTML ライブラリの使用を参照してください。

代替リンクの設定 providing-alternate-links

PageVariantsProvider OSGi サービスは、同じファミリーに属するサイトに対して代替リンクを生成できます。サービスが考慮するサイトを設定するには、サイトのルートから jcr:content ノードに cq:siteVariant ノードを追加する必要があります。

cq:siteVariant ノードには以下のプロパティが必要です。

cq:childNodesMapTo - 子ノードのマップ先のリンク要素の属性を指定します。ルートノードの子がグローバル web サイトの言語バリアント用のルートを表すように web サイトのコンテンツを構成することをお勧めします（例：/content/mysite/en、/content/mysite/de）。この場合、cq:childNodesMapTo の値を hreflang にする必要があります。
cq:variantDomain - ページバリアントの絶対 URL を生成するために使用する Externalizer ドメインを示します。この値が設定されていない場合は、相対リンクを使用してページバリアントが生成されます。
cq:variantFamily - このサイトが属する Web サイトのファミリーを示します。同じ Web サイトのデバイス特有の複数の表現は同じファミリーに属している必要があります。
media - リンク要素のメディア属性の値を格納します。BrowserMap が登録した DeviceGroups の名前を使用することをお勧めします。これにより、BrowserMap ライブラリは、クライアントを Web サイトの適切なバリアントに自動的に転送できます。

PageVariantsProvider と Externalizer pagevariantsprovider-and-externalizer

cq:siteVariant ノードの cq:variantDomain プロパティの値が空でない場合、PageVariantsProvider サービスはこの値を Externalizer サービスの設定ドメインとして使用して絶対リンクを生成します。使用する設定を反映させるために、Externalizerサービスの設定を確認します。

NOTE

AEM を操作しているときは、このようなサービスの設定を管理する方法がいくつかあります。詳細および推奨事項については、OSGi の設定を参照してください。

デバイスグループ専用の URL の定義 defining-a-device-group-specific-url

代替リンクを使用しない場合は、それぞれにグローバル URL を設定できます DeviceGroup. browsermap.standard クライアントライブラリを組み込み、デバイスグループを再定義する独自のクライアントライブラリを作成することをお勧めします。

BrowserMap は、カスタマイズされたクライアントライブラリから同名のデバイスグループを作成して BrowserMap オブジェクトに追加することで、デバイスグループ定義を上書きできるように設計されます。

NOTE

詳しくは、カスタマイズされた BrowserMap を参照してください。

セレクターベースの URL の定義 defining-selector-based-urls

BrowserMap 用の代替サイトを指定するために以前のメカニズムを採用していない場合は、DeviceGroups の名前を使用するセレクターが URL に追加されます。この場合、リクエストを処理する独自のサーブレットを指定する必要があります。

例えば、www.example.com/index.html を閲覧するデバイスが BrowserMap によって smartphone と識別された場合、そのデバイスは www.example.com/index.smartphone.html. に転送されます。

ページでの BrowserMap の使用 using-browsermap-on-your-pages

標準の BrowserMap クライアントライブラリをページで使用するには、ページの head セクションで cq:include タグを使用して /libs/wcm/core/browsermap/browsermap.jsp ファイルを含める必要があります。

<cq:include script="/libs/wcm/core/browsermap/browsermap.jsp" />

JSP ファイルで BrowserMap クライアントライブラリを追加する以外にも、client-side に設定した cq:deviceIdentificationMode 文字列プロパティを web サイトのルートの下にある jcr:content ノードに追加する必要があります。

BrowserMap のデフォルトの動作の上書き overriding-browsermap-s-default-behaviour

（DeviceGroups を上書きするか、またはプローブを追加して）BrowserMap をカスタマイズする場合は、browsermap.standard クライアント側ライブラリを埋め込む独自のクライアント側ライブラリを作成する必要があります。

さらに、JavaScript コードで BrowserMap.forwardRequest() メソッドを手動で呼び出す必要があります。

NOTE

クライアントライブラリの統合について詳しくは、クライアント側 HTML ライブラリの使用を参照してください。

カスタマイズされた BrowserMap クライアントライブラリの作成が完了したら、次の手順を実行することをお勧めします。

アプリケーションで browsermap.jsp ファイルを作成します。

code language-xml

code language-xml
<%@include file="/libs/foundation/global.jsp" %> <%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %> <%@ page import=" com.day.cq.wcm.api.variants.PageVariant, com.day.cq.wcm.api.variants.PageVariantsProvider, com.day.cq.wcm.api.devicedetection.DeviceIdentificationMode, com.day.cq.wcm.api.WCMMode" %> <% final PageVariantsProvider p = sling.getService(PageVariantsProvider.class); if(p == null) { throw new IllegalStateException("Missing PageVariantsProvider service"); } for(PageVariant v : p.getVariants(currentPage, slingRequest)) { final String curVar = v.getAttributes().get("data-current-variant"); String media = v.getAttributes().get("media"); if (media != null) { media = media.replaceAll(" ", ""); } %> <link rel="alternate" data-cq-role="site.variant" title="<%= xssAPI.encodeForHTMLAttr(v.getTitle()) %>" hreflang="<%= xssAPI.encodeForHTMLAttr(v.getAttributes().get("hreflang")) %>" media="<%= xssAPI.encodeForHTMLAttr(media) %>" href="<%= xssAPI.getValidHref(v.getURL()) %>" <% if(curVar != null) { %> data-current-variant="<%= curVar %>"<% } %> /> <% } Boolean browserMapEnabled = true; final DeviceIdentificationMode dim = sling.getService(DeviceIdentificationMode.class); String[] selectors = slingRequest.getRequestPathInfo().getSelectors(); boolean isPortletRequest = false; for (int i = 0; i < selectors.length; i++) { if ("portlet".equals(selectors[i])) { isPortletRequest = true; break; } } if (isPortletRequest) { log.debug("Request was made by a portlet container - BrowserMap will not be embedded"); } else { final WCMMode wcmMode = WCMMode.fromRequest(slingRequest); boolean shouldIncludeClientLib = false; if (WCMMode.EDIT != wcmMode && WCMMode.PREVIEW != wcmMode && WCMMode.DESIGN != wcmMode) { if (dim != null) { final String mode = dim.getDeviceIdentificationModeForPage(currentPage); shouldIncludeClientLib = DeviceIdentificationMode.CLIENT_SIDE.equals(mode); if (shouldIncludeClientLib) { browserMapEnabled = (Boolean) request.getAttribute("browsermap.enabled"); if (browserMapEnabled == null) { browserMapEnabled = true; } } } } %> <c:if test="<%= !browserMapEnabled %>"> <meta name="browsermap.enabled" content="false"> </c:if> <c:if test="<%= shouldIncludeClientLib %>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <cq:includeClientLib categories="browsermap.custom"/> </c:if> <% } %>

<%@include file="/libs/foundation/global.jsp" %>
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<%@ page import="
    com.day.cq.wcm.api.variants.PageVariant,
    com.day.cq.wcm.api.variants.PageVariantsProvider,
    com.day.cq.wcm.api.devicedetection.DeviceIdentificationMode,
    com.day.cq.wcm.api.WCMMode"
%>
<%
    final PageVariantsProvider p = sling.getService(PageVariantsProvider.class);
    if(p == null) {
        throw new IllegalStateException("Missing PageVariantsProvider service");
    }
    for(PageVariant v : p.getVariants(currentPage, slingRequest)) {
        final String curVar = v.getAttributes().get("data-current-variant");
        String media = v.getAttributes().get("media");
        if (media != null) {
            media = media.replaceAll(" ", "");
        }
%>
    <link
        rel="alternate"
        data-cq-role="site.variant"
        title="<%= xssAPI.encodeForHTMLAttr(v.getTitle()) %>"
        hreflang="<%= xssAPI.encodeForHTMLAttr(v.getAttributes().get("hreflang")) %>"
        media="<%= xssAPI.encodeForHTMLAttr(media) %>"
        href="<%= xssAPI.getValidHref(v.getURL()) %>"
        <% if(curVar != null) { %> data-current-variant="<%= curVar %>"<% } %>
    />
<%
    }
    Boolean browserMapEnabled = true;
    final DeviceIdentificationMode dim = sling.getService(DeviceIdentificationMode.class);
    String[] selectors  = slingRequest.getRequestPathInfo().getSelectors();
    boolean isPortletRequest = false;
    for (int i = 0; i < selectors.length; i++) {
        if ("portlet".equals(selectors[i])) {
            isPortletRequest = true;
            break;
        }
    }
    if (isPortletRequest) {
        log.debug("Request was made by a portlet container - BrowserMap will not be embedded");
    } else {
        final WCMMode wcmMode = WCMMode.fromRequest(slingRequest);
        boolean shouldIncludeClientLib = false;
        if (WCMMode.EDIT != wcmMode && WCMMode.PREVIEW != wcmMode && WCMMode.DESIGN != wcmMode) {
            if (dim != null) {
                final String mode = dim.getDeviceIdentificationModeForPage(currentPage);
                shouldIncludeClientLib = DeviceIdentificationMode.CLIENT_SIDE.equals(mode);
                if (shouldIncludeClientLib) {
                    browserMapEnabled = (Boolean) request.getAttribute("browsermap.enabled");
                    if (browserMapEnabled == null) {
                        browserMapEnabled = true;
                    }
                }
            }
        }
%>
        <c:if test="<%= !browserMapEnabled %>">
            <meta name="browsermap.enabled" content="false">
        </c:if>
        <c:if test="<%= shouldIncludeClientLib %>">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <cq:includeClientLib categories="browsermap.custom"/>
        </c:if>
<%
    }
%>

head セクションに broswermap.jsp ファイルをインクルードします。

code language-xml
`<cq:include script="browsermap.jsp" />`

特定のページからの BrowserMap の除外 excluding-browsermap-from-certain-pages

クライアント検出が不要な一部のページから BrowserMap ライブラリを除外する場合は、request 属性を追加できます。

<%
request.setAttribute("browsermap.enabled", false);
%>

これにより、/libs/wcm/core/browsermap/browsermap.jsp スクリプトは、BrowserMap が検出を行わないようにする meta タグをページに追加するようになります。

<meta name="browsermap.enabled" content="false">

特定のバージョンの web サイトのテスト testing-a-specific-version-of-a-web-site

通常、BrowserMap スクリプトは常に訪問者を最適なバージョンの web サイト（デスクトップ、または必要に応じてモバイルサイト）にリダイレクトします。

特定のバージョンの web サイトをテストするために、device パラメーターを URL に追加して、リクエストのデバイスを強制することができます。次の URL は、モバイルバージョンの Geometrixx Outdoors web サイトをレンダリングします。

https://localhost:4502/content/geometrixx-outdoors/en.html?wcmmode=disabled&device=smartphone

NOTE

パブリッシュインスタンスの動作をシミュレートするために、wcmmode パラメーターは disabled に設定されます。

上書きされた device の値は Cookie に格納されるので、device パラメーターを各 URL に追加せずに web サイトを閲覧できます。

その結果、デスクトップバージョンの web サイトに戻るには、device が browser に設定された同じ URL を呼び出す必要があります。

NOTE

BrowserMap は、上書きされた device の値を BMAP_device という cookie に格納します。この cookie を削除すると、CQ は現在のデバイス（デスクトップまたはモバイル）に従って適切なバージョンの web サイトを提供します。

モバイルの要求の処理 mobile-request-processing

AEM は、タッチデバイスグループに属するモバイルデバイスが発行した要求を次のように処理します。

iPad が AEM パブリッシュインスタンスにリクエストを送ります（例：https://localhost:4503/content/geometrixx_mobile/en/products.html）。
（最初のレベルのページである /content/geometrixx_mobile がモバイルページコンポーネントを拡張するかどうかを確認することにより）リクエストされたページのサイトがモバイルサイトであるかどうかを AEM が判断します。モバイルサイトである場合は、次の処理が行われます。
AEM が要求ヘッダーのユーザーエージェントに基づいてデバイスの機能を検出します。
AEM がデバイスの機能をデバイスグループにマップし、デバイスグループセレクターとしてtouchを設定します。
AEM がリクエストを https://localhost:4503/content/geometrixx_mobile/en/products.touch.html. にリダイレクト
AEM が応答を iPad に送信します。
- products.touch.html は通常の方法でレンダリングされます。このページはキャッシュ可能です。
- レンダリングコンポーネントでは、セレクターを使用してプレゼンテーションを変更します。
- AEM では、ページ内のすべての内部リンクにモバイルセレクターを自動的に追加します。

統計 statistics

モバイルデバイスから AEM サーバーに対して行われたリクエスト数に関する一部の統計を取得できます。リクエスト数は次のように分類できます。

デバイスグループ別およびデバイス別
年別、月別、日別

統計を表示するには：

ツール コンソールに移動します。
ツール／モバイル から デバイスの統計 ページを開きます。
リンクをクリックして、特定の年、月または日の統計を表示します。

統計ページを次に示します。

screen_shot_2012-02-01at24353pm

NOTE

統計ページは、モバイルデバイスが初めて AEM にアクセスし、そのデバイスが検出されると作成されます。それ以前にこのページを使用することはできません。

統計内にエントリを生成する必要がある場合は、次の手順を実行できます。

モバイルデバイスまたはエミュレーター（例えば、Firefox の場合は https://chrispederick.com/work/user-agent-switcher/）を使用します。
オーサリングモードを無効にして、オーサーインスタンスでモバイルページをリクエストします。次に例を示します。
https://localhost:4502/content/geometrixx_mobile/en/products.html?wcmmode=disabled

これで、統計ページを使用できるようになります。

「友人にリンクを送信」リンク用のページキャッシュのサポート supporting-page-caching-for-send-link-to-a-friend-links

モバイルページは Dispatcher でキャッシュできます。これは、デバイスグループ用にレンダリングされるページが、デバイスグループセレクターによってページの URL で識別されるからです（例：/content/mobilepage.touch.html）。セレクターを使用しない場合、モバイルページに対するリクエストはキャッシュされません。この場合は、デバイスの検出が実行され、最終的には一致するデバイスグループ（または「一致なし」）にリダイレクトされます。デバイスグループセレクターを使用してレンダリングされるモバイルページは、リンクリライターで処理されます。リンクリライターは、デバイスグループセレクターも含めるようにページ内のすべてのリンクを書き換えて、既に要件を満たしているページをクリックするたびにデバイスの検出が再実行されないようにします。

そのため、次のような状況が発生する可能性があります。

Alice というユーザーが coolpage.feature.html にリダイレクトされ、その URL を友人の Bob に送信します。Bob は touch デバイスグループに分類される別のクライアントを使用してその URL にアクセスします。

coolpage.feature.html がフロントエンドキャッシュから提供される場合、要求を分析して、モバイルセレクターが新しいユーザーエージェントに一致しないことを確認する機会が AEM にはありません。そのため、Bob は誤った表現を取得することになります。

この問題を解決するために、単純な選択の UI をページにインクルードできます。このようなページでは、AEM で選択されたデバイスグループをエンドユーザーが上書きできます。上記の例では、エンドユーザーが自分のデバイスで十分だと思う場合、ページ上に表示されたリンク（またはアイコン）により、coolpage.touch.html に切り替えることができます。

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2