Adobeは、単一ページアプリケーションのフレームワークベースのクライアントサイドレンダリング(React など)を必要とするプロジェクトでは、SPA Editor を使用することをお勧めします。 詳細情報を参照してください。
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 クラスを指定することで、エミュレーターのすべての外観を制御できます。
上の例と同様に、プロジェクトHTMLは、本文コンテンツを 1 つの div 内にラップすることをお勧めします。 本文コンテンツに複数のタグが含まれている場合、予期しない結果が生じる可能性があります。
既存のモバイルエミュレーターは次のとおりです。
/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
:タッチスクロール機能を含みます。
独自のプラグインを定義することで、さらに多くの機能を追加できます。