エミュレーター

検索
Experience Manager 6.3 Sites 開発ユーザーガイド
対象アプリケーション: Experience Manager 6.3 Sites

在中国购买的 Creative Cloud 产品不含 CC 桌面应用程序中的 Creative Cloud 移动应用程序和在线服务及相关功能。

現在表示中:

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

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

カスタムモバイルエミュレーターを作成するには：

  1. /apps/myapp/components/emulators に myemulator コンポーネント（ノードタイプ：cq:Component）を作成します。
  2. sling:resourceSuperType プロパティを /libs/wcm/mobile/components/emulators/base に設定します。
  3. エミュレーターの外観用に cq.wcm.mobile.emulator カテゴリの CSS クライアントライブラリを定義します。名前 = css、ノードタイプ = cq:ClientLibrary
    例として、/libs/wcm/mobile/components/emulators/iPhone/css ノードを参照できます。
  4. 必要に応じて、JS クライアントライブラリを定義します。例えば、名前 = js、ノードタイプ = cq:ClientLibrary のプラグインを定義します。
    例として、/、/libs/wcm/mobile/components/emulators/base/js ノードを参照できます。
  5. プラグインで定義した特定の機能（タッチスクロールなど）がエミュレーターでサポートされる場合は、エミュレーターの下に設定ノード（名前 = cq:emulatorConfig、ノードタイプ = nt:unstructured）を作成して、プラグインを定義するプロパティを追加します。
    - 名前 = canRotate、タイプ = Boolean、値 = true：回転機能をインクルードします。
    - 名前 = touchScrolling、タイプ = Boolean、値 = true：タッチスクロール機能をインクルードします。
    独自のプラグインを定義することで、その他の機能を追加できます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー