Adobe Experience Manager(AEM)では、作成者がエミュレーターでページを確認できます。エミュレーターは、モバイルデバイスや電子メールクライアントなどでエンドユーザーがページを表示する環境をシミュレートします。
AEM エミュレーターフレームワークの機能を次に示します。
- シミュレートされたユーザーインターフェイス(UI)(例:ニュースレターの作成に使用するモバイルデバイスや電子メールクライアント)内でコンテンツを作成できます。
- シミュレートされた UI に従ってページコンテンツを変更します。
- カスタムエミュレーターを作成できます。
警告:
この機能は、クラシック UI でのみサポートされます。
エミュレーターの特徴は次のとおりです。
- ExtJS に基づいています。
- ページの DOM で動作します。
- 外観は CSS によって制御されます。
- プラグイン(例:モバイルデバイスの回転プラグイン)をサポートします。
- オーサーインスタンスでのみアクティブになります。
- 基本コンポーネントは /libs/wcm/emulator/components/base にあります。
<body> <div id="wrapper" class="page mobilecontentpage "> <div class="topnav mobiletopnav"> ... </div> ... </div> </body>
<body> <div id="cq-emulator-toolbar"> ... </div> <div id="cq-emulator-wrapper"> <div id="cq-emulator-device"> <div class=" android vertical" id="cq-emulator"> ... <div class=" android vertical" id="cq-emulator-content"> ... <div id="wrapper" class="page mobilecontentpage"> ... </div> ... </div> </div> </div> </div> ... </body>
次の 2 つの div タグが追加されます。
- id が cq-emulator の div:エミュレーター全体を保持します。
- id が cq-emulator-content の div:ページコンテンツが配置されているデバイスの viewport/screen/content 領域を表します。
また、新しいエミュレーターの div には新しい CSS クラスが割り当てられます。これらのクラスは現在のエミュレーターの名前を表します。
エミュレーターのプラグインは、割り当てられた CSS クラスのリストを拡張できます。回転プラグインの例に示すように、現在のデバイスの回転に応じて「vertical」クラスまたは「horizontal」クラスを挿入します。
この方法では、エミュレーターの div の ID と CSS クラスに対応する CSS クラスを指定することで、エミュレーターのすべての外観を制御できます。
注意:
前述の例と同様に、単一の div 内の本文コンテンツをプロジェクトの HTML でラップすることをお勧めします。本文コンテンツに複数のタグが含まれる場合は、予測できない結果が生じる可能性があります。
既存のモバイルエミュレーターの特徴は次のとおりです。
- /libs/wcm/mobile/components/emulators にあります。
- 次の場所にある JSON サーブレットを通じて使用できます。
http://localhost:4502/bin/wcm/mobile/emulators.json
ページコンポーネントでモバイルページコンポーネント(/libs/wcm/mobile/components/page)を使用する場合は、次のメカニズムによって、エミュレーターの機能が自動的にページに統合されます。
- モバイルページコンポーネント head.jsp は、次のメソッドを使用して、デバイスグループの関連するエミュレーターの init コンポーネント(オーサーモードの場合のみ)とデバイスグループのレンダリング CSS をインクルードします。
deviceGroup.drawHead(pageContext); - DeviceGroup.drawHead(pageContext) メソッドは、エミュレーターの init コンポーネントをインクルードします。つまり、エミュレーターコンポーネントの init.html.jsp を呼び出します。エミュレーターコンポーネントに独自の init.html.jsp がなく、モバイルの基本エミュレーター(wcm/mobile/components/emulators/base)を使用する場合は、モバイルの基本エミュレーターの init スクリプトが呼び出されます(/libs/wcm/mobile/components/emulators/base/init.html.jsp)。
- モバイルの基本エミュレーターの init スクリプトは JavaScript を使用して次の定義をおこないます。
- ページ用に定義されるすべてのエミュレーターの設定(emulatorConfigs)
- 次のメソッドを使用してエミュレーターの機能をページに統合するエミュレーターマネージャー
emulatorMgr.launch(config);
エミュレーターマネージャーは次のファイルで定義されます。
/libs/wcm/emulator/widgets/source/EmulatorManager.js
カスタムモバイルエミュレーターを作成するには:
- /apps/myapp/components/emulators に myemulator コンポーネント(ノードタイプ:cq:Component)を作成します。
- sling:resourceSuperType プロパティを /libs/wcm/mobile/components/emulators/base に設定します。
- エミュレーターの外観用に cq.wcm.mobile.emulator カテゴリの CSS クライアントライブラリを定義します。名前 = css、ノードタイプ = cq:ClientLibrary
例として、/libs/wcm/mobile/components/emulators/iPhone/css ノードを参照できます。 - 必要に応じて、JS クライアントライブラリを定義します。例えば、名前 = js、ノードタイプ = cq:ClientLibrary のプラグインを定義します。
例として、/、/libs/wcm/mobile/components/emulators/base/js ノードを参照できます。 - プラグインで定義した特定の機能(タッチスクロールなど)がエミュレーターでサポートされる場合は、エミュレーターの下に設定ノード(名前 = cq:emulatorConfig、ノードタイプ = nt:unstructured)を作成して、プラグインを定義するプロパティを追加します。
- 名前 = canRotate、タイプ = Boolean、値 = true:回転機能をインクルードします。
- 名前 = touchScrolling、タイプ = Boolean、値 = true:タッチスクロール機能をインクルードします。
独自のプラグインを定義することで、その他の機能を追加できます。