単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報を参照してください。
モバイルサイトの作成は標準サイトの作成と同様ですが、この処理にはテンプレートとコンポーネントの作成も含まれます。テンプレートとコンポーネントの作成について詳しくは、テンプレート、コンポーネントおよび AEM Sites の開発の手引きを参照してください。主な違いは、サイト内での 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()
メソッドを使用して、デバイスグループの関連するエミュレーターの初期化コンポーネント(作成者モードのみ)とデバイスグループのレンダリングCSSを含めます。モバイルサイトのルートページはノード階層のレベル 1 に位置する必要があります。また、このページを /content ノードの下に配置することをお勧めします。
マルチサイトマネージャー(MSM)を使用して、標準サイトからモバイルライブコピーを作成します。標準サイトは、自動的にモバイルサイトに変換されます。モバイルサイトにはモバイルサイトのすべての機能(エミュレータ内のエディションなど)があり、標準サイトと同期して管理できます。マルチサイトマネージャーページの異なるチャネル用のライブコピーの作成を参照してください。
モバイルクラスを格納する 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 — はMobileUtilを定義します。これはWCM Mobileを中心に回転する様々なユーティリティメソッドを提供します。
We.Retailモバイルデモサイトでは、/libs/foundation/components
の下にある次のモバイルコンポーネントを使用します。
名前 | グループ | 特徴 |
mobilefooter | hidden | - フッター |
mobileimage | モバイル | - image 基盤コンポーネントに基づく - 画像をレンダリングする(デバイスが対応している場合) |
mobilelist | モバイル | - list 基盤コンポーネントに基づく - listitem_teaser.jsp が画像をレンダリングする(デバイスが対応している場合) |
mobilelogo | hidden | - logo 基盤コンポーネントに基づく - 画像をレンダリングする(デバイスが対応している場合) |
mobilereference | モバイル | — 参照基礎コンポーネントと類似 - textimage コンポーネントを mobiletextimage コンポーネントにマップし、image コンポーネントを mobileimage コンポーネントにマップする |
mobiletextimage | モバイル | - textimage 基盤コンポーネントに基づく - 画像をレンダリングする(デバイスが対応している場合) |
mobiletopnav | hidden | - topnav foundationコンポーネントに基づく - テキストのみをレンダリングする |
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) {
…
JSPでは、slingRequest
は<sling:defineObjects>
タグを通して、currentPage
は<cq:defineObjects>
タグを通じて使用できます。
エミュレータベースのオーサリングは、モバイルクライアント向けのコンテンツページを作成する手段を作成者に提供します。モバイルコンテンツのオーサリングは、インプレースWYSIWYGの編集と同じ原則に従います。作成者がモバイルデバイス上でページの外観を認識できるように、モバイルコンテンツページはデバイスエミュレーターを使用して編集されます。
モバイルデバイスエミュレーターは汎用のエミュレーターフレームワークに基づいています。詳しくは、エミュレーターを参照してください。
デバイスエミュレーターのページには、モバイルデバイスが表示されます。一方、通常の編集(parsys、コンポーネント)は、デバイスの画面内でおこなわれます。デバイスエミュレーターは、サイト用に設定されるデバイスグループに依存します。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
を使用して)自動的にページに統合されます。
モバイルデバイスグループを使用すると、デバイスの機能に基づくモバイルデバイスのセグメント化が可能になります。デバイスグループは、オーサーインスタンスでのエミュレーターベースのオーサリングおよびパブリッシュインスタンスに適したコンテンツのレンダリングに必要な情報を提供します。作成者がモバイルページにコンテンツを追加して公開すると、そのページをパブリッシュインスタンスで要求できます。その場合、エミュレーターの編集ビューではなく、設定済みのいずれかのデバイスグループを使用してコンテンツページがレンダリングされます。デバイスグループの選択はモバイルデバイスの検出に基づいておこなわれます。一致するデバイスグループが必要なスタイル設定情報を提供します。
デバイスグループは/etc/mobile/devices
の下のコンテンツページとして定義され、モバイルデバイスグループテンプレートを使用します。 デバイスグループテンプレートは、コンテンツページのフォームでデバイスグループ定義用の設定テンプレートとして機能します。このダイアログの主な特徴を次に示します。
/libs/wcm/mobile/templates/devicegroup
/etc/mobile/groups/*
wcm/mobile/components/devicegroup
モバイルサイトを作成する場合は、デバイスグループをサイトに割り当てる必要があります。AEM には、デバイスの HTML および JavaScript のレンダリング機能に対応した 3 つのデバイスグループが用意されています。
フィーチャーフォン:Sony Ericsson W800 などのフィーチャーデバイス用。基本的な HTML はサポートされますが、画像と JavaScript はサポートされません。
ス マートフォン。基本的なHTMLと画像はサポートするが、JavaScriptはサポートしないBlackberryなどのデバイス用です。
タッチフォン:iPad などのデバイス用。HTML、画像、JavaScript およびデバイスの回転が完全にサポートされます。
エミュレータはデバイスグループに関連付けることができるので(デバイスグループの作成を参照)、デバイスグループをサイトに割り当てると、デバイスグループに関連付けられたエミュレータを選択してページを編集できます。
デバイスグループをサイトに割り当てるには:
ブラウザーで、サイト管理者コンソールに移動します。
「Web サイト」の下にあるモバイルサイトのルートページを開きます。
ページプロパティを開きます。
「モバイル」タブを選択します。
サイト用のデバイスグループが定義済みの場合は、そのグループがサイトのすべてのページによって継承されます。
デバイスグループフィルターは、デバイスがグループに属するかどうかを指定するための、機能に基づく条件を定義します。デバイスグループの作成時には、デバイスの評価に使用するフィルターを選択できます。
実行時に AEM がデバイスから HTTP 要求を受信すると、グループに関連付けられている各フィルターはデバイスの機能を特定の条件と比較します。フィルターが要求するすべての機能を備えたデバイスは、グループに属していると見なされます。機能は WURFL™ データベースから取得されます。
デバイスグループでは、0 個以上のフィルターを使用して機能を検出できます。また、複数のデバイスグループで 1 つのフィルターを使用することもできます。AEM には、グループ用に選択された機能がデバイスにあるかどうかを判断するデフォルトのフィルターが用意されています。
デバイスグループでフィルターを使用しない場合、デバイスが要求するのは、グループ用に設定された選択済みの機能のみです。
詳しくは、デバイスグループフィルターの作成を参照してください。
AEM がインストールするグループが要件を満たさない場合は、デバイスグループを作成します。
ブラウザーで、ツールコンソールに移動します。
ツール > モバイル > デバイスグループの下に新しいページを作成します。ページを作成ダイアログで、次の操作を行います。
Special Phones
と入力します。special
と入力します。CRXDEで、/etc/mobile/groups/special
ノードの下のデバイスグループのスタイルを含むstatic.cssファイルを追加します。
スペシャルフォンページを開きます。
デバイスグループを設定するには、「設定」の横にある「編集」ボタンをクリックします。
「一般」タブで、次の設定を行います。
BlackBerryZ10
「エミュレーター」タブで、次の設定をおこないます。
「フィルター」タブで、次の設定をおこないます。
「OK」をクリックします。
モバイルデバイスグループ設定ダイアログを次に示します。
前述のとおり、デザインページの CSS と同様に、カスタム CSS をデバイスグループページに関連付けることができます。この CSS はオーサーインスタンスおよびパブリッシュインスタンスでページコンテンツのデバイスグループ固有のレンダリングに影響を与えるために使用されます。この CSS は次のページに自動的にインクルードされます。
HTTP 要求を実行するデバイスの機能を特定するには、フィルターおよびデバイス仕様のライブラリを使用します。
デバイスグループフィルターを作成して、一連のデバイスの機能の要件を定義します。デバイスの機能の必要なグループをターゲットとして指定するのに必要な数のフィルターを作成してください。
フィルターを組み合わせて機能のグループを定義できるようにフィルターを設計します。通常、異なるデバイスグループの機能は重複します。そのため、一部のフィルターを複数のデバイスグループ定義と共に使用できます。
作成したフィルターはグループ設定で使用できます。
詳しくは、デバイスグループフィルターの作成を参照してください。
AEMは、デバイスのUser-Agentに基づいて、WURFL™データベースの切り詰めバージョンを使用し、画面解像度やjavascriptのサポートなど、クエリデバイスの機能をサポートします。
/libs/wcm/mobile/devicespecs/wurfl.xml.
にあるwurfl.xml
ファイルを解析することで、WURFL™データベースのXMLコードは/var/mobile/devicespecs
の下のノードとして表されます。ノードへの拡張は、cq-mobile-core
バンドルが初めて起動したときに発生します。
デバイスの機能はノードプロパティとして格納されます。ノードはデバイスのモデルを表します。クエリを使用して、デバイスまたはユーザーエージェントの機能を取得できます。
WURFL™ データベースは進化しているので、データベースのカスタマイズまたは置き換えが必要になる場合があります。モバイルデバイスデータベースを更新するためのオプションは次のとおりです。
デバイスがモバイルサイトにアクセスすると、AEM はそのデバイスを検出し、機能に従ってデバイスグループにマップします。また、デバイスグループに対応するページのビューを送信します。一致するデバイスグループが必要なスタイル設定情報を提供します。マッピングは、モバイルユーザーエージェントのテストページでテストできます。
http://localhost:4502/etc/mobile/useragent-test.html
AEMと共にインストールされる切り捨てられたWURFL™データベースは、
2011年8月30日。 WURFLのバージョンが2011年8月30日以降にリリースされた場合は、使用状況がライセンスに準拠していることを確認してください。
WURFL™ データベースをインストールするには:
/apps/wcm/mobile/devicespecs
wurfl.xml
に変更します。AEMは自動的にwurfl.xml
ファイルを解析し、/var/mobile/devicespecs
の下のノードを更新します。
WURFL™ データベース全体が有効な場合は、解析とアクティブ化に数分かかることがあります。進行状況の情報については、ログで確認できます。
/apps/wcm/mobile/devicespecs/wurfl/regexpの下の追加正規式としてのuser-agentは、既存のWURFL™デバイスタイプを指すように指定します。
CRXDE Lite で、/apps/wcm/mobile/devicespecs/regexp の下にノード(例:apple_ipad_ver1)を作成します。
この ノードに次のプロパティを追加します。
上記の設定では、User-Agentが指定された正規式と一致するデバイスが存在する場合、そのデバイスはapple_ipad_ver1 WURFL™デバイスIDにマップされます。
この節では、ページレンダリングを最適化するため、またはクライアントに代替のWebサイトバージョンを提供するために、AEMのデバイスのクライアント側検出を使用する方法について説明します。
AEMは、BrowserMap
に基づくデバイスのクライアント側検出をサポートしています。 BrowserMap
は、のクライアントライブラリとしてAEMに出荷され /etc/clientlibs/browsermap
ます。
BrowserMap
には、次の順序で使用される代替webサイトをクライアントに提供する3つの方法があります。
クライアントライブラリの統合について詳しくは、クライアント側 HTML ライブラリの使用を参照してください。
PageVariantsProvider
OSGiサービスは、同じファミリに属するサイトの代替リンクを生成できます。 サービスが考慮するサイトを設定するには、cq:siteVariant
ノードをサイトのルートからjcr:content
ノードに追加する必要があります。
cq:siteVariant
ノードには次のプロパティが必要です。
cq:childNodesMapTo
— 子ノードをマップするリンク要素の属性を決定します。ルートノードの子がグローバルwebサイトの言語バリアント(例: /content/mysite/en
, /content/mysite/de
)の場合、の値 cq:childNodesMapTo
は hreflang
;
cq:variantDomain
- ページバリアントの絶対 URL を生成するために使用する Externalizer
ドメインを示します。この値が設定されていない場合は、相対リンクを使用してページバリアントが生成されます。
cq:variantFamily
- このサイトが属する Web サイトのファミリーを示します。同じ Web サイトのデバイス特有の複数の表現は同じファミリーに属している必要があります。
media
- リンク要素のメディア属性の値を格納します。BrowserMap
が登録した DeviceGroups
の名前を使用することをお勧めします。これにより、BrowserMap
ライブラリは、クライアントを Web サイトの適切なバリアントに自動的に転送できます。
cq:siteVariant
ノードのcq:variantDomain
プロパティの値が空でない場合、PageVariantsProvider
サービスは、この値をExternalizer
サービス用に設定されたドメインとして使用して絶対リンクを生成します。 Externalizer
サービスを設定し、設定を反映させてください。
AEM を操作しているときは、このようなサービスの設定を管理する方法がいくつかあります。詳細および推奨事項については、OSGi の設定を参照してください。
代替リンクを使用しない場合は、各 DeviceGroup
にグローバル URL を設定できます。browsermap.standard
クライアントライブラリを埋め込む独自のクライアントライブラリを作成し、デバイスグループを再定義することをお勧めします。
は、カスタマイズされたクライアントライブラリから同名の新しいデバイスグループを作成して BrowserMap
BrowserMap オブジェクトに追加することで、デバイスグループ定義を上書きできるように設計されます。
詳しくは、カスタマイズされた BrowserMap に関する節を参照してください。
BrowserMap
用の代替サイトを指定するために以前のメカニズムを採用していない場合は、DeviceGroups
の名前を使用するセレクターが URL
に追加されます。この場合、要求を処理する独自のサーブレットを指定する必要があります。
例えば、BrowserMapでsmartphone
と識別されたwww.example.com/index.html
を参照しているデバイスは、www.example.com/index.smartphone.html.
に転送されます
標準のBrowserMapクライアントライブラリをページで使用するには、cq:include
タグを使用して/libs/wcm/core/browsermap/browsermap.jsp
ファイルをページのhead
セクションに含める必要があります。
<cq:include script="/libs/wcm/core/browsermap/browsermap.jsp" />
BrowserMap
クライアントライブラリをJSP
ファイルに追加する他に、client-side
に設定したcq:deviceIdentificationMode
StringプロパティをWebサイトのルートの下のjcr:content
ノードに追加する必要もあります。
(BrowserMap
を上書きするか、またはプローブを追加して)DeviceGroups
をカスタマイズする場合は、browsermap.standard
クライアント側ライブラリを埋め込む独自のクライアント側ライブラリを作成する必要があります。
さらに、JavaScript
コードのBrowserMap.forwardRequest()
メソッドを手動で呼び出す必要があります。
クライアントライブラリの統合について詳しくは、クライアント側 HTML ライブラリの使用を参照してください。
カスタマイズされた BrowserMap
クライアントライブラリの作成が完了したら、次の手順を実行することをお勧めします。
アプリケーションで browsermap.jsp
ファイルを作成します。
<%@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
ファイルをインクルードします。
<cq:include script="browsermap.jsp" />
クライアント検出が不要な一部のページから BrowserMap ライブラリを除外する場合は、request 属性を追加できます。
<%
request.setAttribute("browsermap.enabled", false);
%>
これにより、/libs/wcm/core/browsermap/browsermap.jsp
スクリプトは、BrowserMap
が検出を実行しないようにするメタタグをページに追加します。
<meta name="browsermap.enabled" content="false">
通常、BrowserMap スクリプトは常に訪問者を最適なバージョンの Web サイト(デスクトップ、または必要に応じてモバイルサイト)にリダイレクトします。
特定のバージョンの Web サイトをテストするために、device
パラメーターを URL に追加して、要求のデバイスを強制することができます。次の URL は、モバイルバージョンの Geometrixx Outdoors Web サイトをレンダリングします。
http://localhost:4502/content/geometrixx-outdoors/en.html?wcmmode=disabled&device=smartphone
パブリッシュインスタンスの動作をシミュレートするために、wcmmode
パラメーターは disabled
に設定されます。
上書きされた の値は Cookie に格納されるので、device
device パラメーターを各 URL
に追加せずに Web サイトを閲覧できます。
その結果、デスクトップバージョンの Web サイトに戻るには、URL
が device
に設定された同じ browser
を呼び出す必要があります。
BrowserMap は、上書きされた device の値を BMAP_device
という Cookie に格納します。この Cookie を削除すると、CQ は現在のデバイス(デスクトップまたはモバイル)に従って適切なバージョンの Web サイトを提供します。
AEM は、タッチデバイスグループに属するモバイルデバイスが発行した要求を次のように処理します。
iPadは、AEM発行インスタンス(http://localhost:4503/content/geometrixx_mobile/en/products.html
AEMは、要求されたページのサイトがモバイルサイトであるかどうかを判断します(第1レベルのページ/content/geometrixx_mobile
がモバイルページコンポーネントを拡張するかどうかをチェックします)。 「はい」の場合:
AEMは、リクエストヘッダー内のUser-Agentに基づいてデバイス機能を検索します。
AEMは、デバイスの機能をデバイスグループにマッピングし、touch
をデバイスグループセレクターとして設定します。
AEMはリクエストをhttp://localhost:4503/content/geometrixx_mobile/en/products.touch.html.
にリダイレクト
AEMが応答をiPadに送信します。
products.touch.html
は通常の方法でレンダリングされます。このページはキャッシュ可能です。モバイルデバイスによってAEMサーバーに対して行われた要求の数に関する統計を取得できます。リクエストの数は次のように分類できます。
統計を表示するには:
ツールコンソールに移動します。
ツール/モバイルからデバイスの統計ページを開きます。
リンクをクリックして、特定の年、月または日の統計を表示します。
統計ページを次に示します。
統計情報ページは、モバイルデバイスが初めてAEMにアクセスし、検出されたときに作成されます。それ以前は利用できません。
統計内にエントリを生成する必要がある場合は、次の手順を実行できます。
モバイルデバイスまたはエミュレーター(例:https://chrispederick.com/work/user-agent-switcher/ on Firefox)を使用します。
オーサリングモードを無効にして、オーサーインスタンスのモバイルページをリクエストします。例:
http://localhost:4502/content/geometrixx_mobile/en/products.html?wcmmode=disabled
これで、統計ページを使用できるようになります。
モバイルページは通常、ディスパッチャーでキャッチ可能です。これは、デバイスグループに対してレンダリングされるページは、デバイスグループセレクター(例:/content/mobilepage.touch.html
)によってページURL内で識別されるからです。セレクターのないモバイルページへのリクエストはキャッシュされないので、この場合のようにデバイス検出は動作し、最後に一致するデバイスグループ(その場合は「一致」)にリダイレクトされます。 デバイスグループセレクターを使用してレンダリングされるモバイルページは、リンクリライターで処理されます。リンクリライターは、デバイスグループセレクターも含めるようにページ内のすべてのリンクを書き換えて、既に要件を満たしているページをクリックするたびにデバイスの検出が再実行されないようにします。
そのため、次のような状況が発生する可能性があります。
Alice というユーザーが coolpage.feature.html
にリダイレクトされ、その URL を友人の Bob に送信します。Bob は touch
デバイスグループに分類される別のクライアントを使用してその URL にアクセスします。
coolpage.feature.html
がフロントエンドキャッシュから提供される場合、要求を分析して、モバイルセレクターが新しいユーザーエージェントに一致しないことを確認する機会が AEM にはありません。そのため、Bob は誤った表現を取得することになります。
この問題を解決するために、単純な選択の UI をページにインクルードできます。このようなページでは、AEM で選択されたデバイスグループをエンドユーザーが上書きできます。上の例では、ページ上のリンク(またはアイコン)は、エンドユーザが自分のデバイスで十分だと思う場合にcoolpage.touch.html
に切り替えることを許可します。