エミュレーター

メモ

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

Adobe Experience Manager（AEM）では、作成者がエミュレーターでページを確認できます。エミュレーターは、モバイルデバイスや電子メールクライアントなどでエンドユーザーがページを表示する環境をシミュレートします。

AEM エミュレーターフレームワークの機能を次に示します。

シミュレートされたユーザーインターフェイス（UI）（例：ニュースレターの作成に使用するモバイルデバイスや電子メールクライアント）内でコンテンツを作成できます。
シミュレートされた UI に従ってページコンテンツを変更します。
カスタムエミュレーターを作成できます。

注意

この機能は、クラシック UI でのみサポートされます。

エミュレーターの特徴

エミュレーターの特徴は次のとおりです。

ExtJS に基づいています。
ページの DOM で動作します。
外観は CSS によって制御されます。
プラグイン（例：モバイルデバイスの回転プラグイン）をサポートします。
オーサーインスタンスでのみアクティブになります。
その基本コンポーネントは/libs/wcm/emulator/components/baseです。

エミュレーターによるコンテンツの変換方法

エミュレーターは HTML の本文コンテンツをエミュレーターの DIV にラップすることによって機能します。例えば、次の html コードがあるとします。

<body>
<div id="wrapper" class="page mobilecontentpage ">
    <div class="topnav mobiletopnav">
    ...
    </div>
    ...
</div>
</body>

このコードは、エミュレーターの起動後、次の html コードに変換されます。

<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クライアントライブラリを定義します。name = css、ノードタイプ= cq:ClientLibrary

例として、/libs/wcm/mobile/components/emulators/iPhone/cssノードを参照できます
必要に応じて、JSクライアントライブラリを定義します。例えば、次のような特定のプラグインを定義します。name = js、node type = cq:ClientLibrary

例として、/libs/wcm/mobile/components/emulators/base/jsノードを参照できます
エミュレーターがプラグインで定義される特定の機能（タッチスクロールなど）をサポートしている場合は、エミュレーターの下に設定ノードを作成します。name = cq:emulatorConfig、node type = nt:unstructuredを開き、プラグインを定義するプロパティを追加します。
- 名前= canRotate、種類= Boolean、値= true:をクリックして回転機能を追加します。
- 名前= touchScrolling、種類= Boolean、値= true:をクリックして、タッチスクロール機能を含めます。
独自のプラグインを定義することで、さらに多くの機能を追加できます。

adobe.com 上のリソース

Ecommerce Integrations Mobile Forms Document Generation Version History Customer Experience Management Digital Signage

このページ

次を表示：

A virtual event April 27-28.

Expand your skills and get inspired.

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now