Show Menu
トピック×

エミュレーター

単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。 詳細情報 を参照してください。
Adobe Experience Manager(AEM)では、作成者がエミュレーターでページを確認できます。エミュレーターは、モバイルデバイスや電子メールクライアントなどでエンドユーザーがページを表示する環境をシミュレートします。
AEM エミュレーターフレームワークの機能を次に示します。
  • シミュレートされたユーザーインターフェイス(UI)(例:ニュースレターの作成に使用するモバイルデバイスや電子メールクライアント)内でコンテンツを作成できます。
  • シミュレートされた UI に従ってページコンテンツを変更します。
  • カスタムエミュレーターを作成できます。
この機能は、クラシック UI でのみサポートされます。

エミュレーターの特徴

エミュレーターの特徴は次のとおりです。
  • ExtJS に基づいています。
  • ページの DOM で動作します。
  • 外観は CSS によって制御されます。
  • プラグイン(例:モバイルデバイスの回転プラグイン)をサポートします。
  • オーサーインスタンスでのみアクティブになります。
  • Its base component is at /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
When the page component relies on the mobile page component ( /libs/wcm/mobile/components/page ), the emulator functionality is automatically integrated in the page through the following mechanism:
  • モバイルページコンポーネント head.jsp は、次のメソッドを使用して、デバイスグループの関連するエミュレーターの init コンポーネント(オーサーモードの場合のみ)とデバイスグループのレンダリング CSS をインクルードします。
    deviceGroup.drawHead(pageContext);
  • The method DeviceGroup.drawHead(pageContext) includes the emulator's init component, i.e. calls the init.html.jsp of the emulator component. エミュレータコンポーネントに独自の機能がなく、モバ 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

カスタムモバイルエミュレーターの作成

カスタムモバイルエミュレーターを作成するには:
  1. 次に、コ /apps/myapp/components/emulators ンポーネント myemulator を作成します(ノードタイプ: cq:Component )。
  2. Set the sling:resourceSuperType property to /libs/wcm/mobile/components/emulators/base
  3. エミュレーターの外観のカテゴリを使用して、CSSク cq.wcm.mobile.emulator ライアントライブラリを定義します。name = css 、node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/iPhone/css
  4. 必要に応じて、JSクライアントライブラリを定義します。例えば、特定のプラグインを定義するには、次のようにします。name = js、node type = cq:ClientLibrary
    As an example, you can refer to the node /libs/wcm/mobile/components/emulators/base/js
  5. エミュレーターがプラグインで定義された特定の機能(タッチスクロールなど)をサポートしている場合は、エミュレーターの下に設定ノードを作成します。name = cq:emulatorConfig 、 node type = nt:unstructured 、プラグインを定義するプロパティを追加します。
    • Name = canRotate , Type = Boolean , Value = true :をクリックします。
    • Name = touchScrolling , Type = Boolean , Value = true :をクリックします。
    独自のプラグインを定義することで、さらに機能を追加できます。