単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報を参照してください。
Adobe Experience Manager(AEM)では、作成者がエミュレーターでページを確認できます。エミュレーターは、モバイルデバイスや電子メールクライアントなどでエンドユーザーがページを表示する環境をシミュレートします。
AEM エミュレーターフレームワークの機能を次に示します。
この機能は、クラシック UI でのみサポートされます。
エミュレーターの特徴は次のとおりです。
/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
:をクリックして、タッチスクロール機能を含めます。
独自のプラグインを定義することで、さらに多くの機能を追加できます。