単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(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
カテゴリを使用した CSS クライアントライブラリの定義 cq.wcm.mobile.emulator
エミュレーターの外観の場合:name = css
, node type = 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
, Type = Boolean
,値= true
:をクリックして回転機能を組み込みます。
名前= touchScrolling
, Type = Boolean
,値= true
:タッチスクロール機能を含める。
独自のプラグインを定義することで、さらに多くの機能を追加できます。