アダプティブテンプレートレンダリング

アダプティブテンプレートレンダリングを使用すると、バリエーションを持つページを管理できます。この機能は元々、モバイルデバイス(フィーチャーフォンとスマートフォンなど)用に様々な HTML 出力を提供する際に便利でしたが、異なるマークアップまたは HTML 出力を必要とする各種デバイスにエクスペリエンスを提供する際にも役立ちます。

概要

テンプレートは一般にレスポンシブグリッドを中心に構築されます。これらのテンプレートをベースに作成されたページは完全にレスポンシブとなり、クライアントデバイスのビューポートに合わせて自動的に調整されます。ページエディターの「エミュレータ」ツールバーを使用して、作成者はレイアウトを特定のデバイスにターゲットできます。

また、アダプティブレンダリングに対応するようテンプレートを設定することもできます。デバイスグループが正しく設定されている場合、エミュレーターモードでデバイスを選択すると、URL に別のセレクターを使用してページがレンダリングされます。セレクターを使用すると、特定のページレンダリングを、URL を使用して直接呼び出すことができます。

デバイスグループを設定する際は、以下の点に留意してください。

  • 各デバイスは、少なくとも 1 つのデバイスグループに属している必要があります。
  • デバイスは複数のデバイスグループに属することができます。
  • デバイスは複数のデバイスグループに属することができるので、複数のセレクターを結合できます。
  • セレクターの結合は、リポジトリ内で保持されるので、上から下に向かって評価されます。
メモ

デバイスグループ​レスポンシブデバイス​にはセレクターがありません。これは、レスポンシブデザインに対応していると認識されるデバイスは、アダプティブなレイアウトを必要としないと見なされるからです。

設定

アダプティブレンダリングのセレクターは、既存のデバイスグループ、または独自に作成したグループに対して設定できます。

この例では、We.Retail 内に​エクスペリエンスページ​テンプレートの一部としてアダプティブレンダリングセレクターが含まれるように、既存のデバイスグループである​スマートフォン​を設定します。

  1. http://localhost:4502/miscadmin#/etc/mobile/groups内のアダプティブセレクターを必要とするデバイスグループを編集

    エミュレーターを無効にする」オプションを設定して保存します。

    chlimage_1-157

  2. 以降の手順でテンプレート構造およびページ構造にデバイスグループ​スマートフォン​を追加すると、Blackberry および iPhone 4 でセレクターが使用できるようになります。

    chlimage_1-158

  3. CRXDE Lite を使用し、テンプレートの構造で複数値文字列プロパティ cq:deviceGroups にデバイスグループを追加します。これにより、テンプレートでデバイスグループを使用できるようになります。

    /conf/<your-site>/settings/wcm/templates/<your-template>/structure/jcr:content

    例えば、スマートフォンデバイスグループを追加する場合は、以下のようになります。

    /conf/we-retail/settings/wcm/templates/experience-page/structure/jcr:content

    chlimage_1-159

  4. CRX DE Liteを使用して、デバイスグループをサイトの構造上の複数値の文字列プロパティcq:deviceGroupsに追加することで、そのデバイスグループをサイトで使用できるようにします。

    /content/<your-site>/jcr:content

    例えば、スマートフォン​デバイスグループを使用できるようにする場合は、次のようになります。

    /content/we-retail/jcr:content

    chlimage_1-160

これで、ページエディターでエミュレーターを使用する際(レイアウトを変更する場合など)、設定済みのデバイスグループのデバイスを選択すると、URL の一部としてセレクターを持つページがレンダリングされるようになります。

この例では、エクスペリエンスページ​テンプレートに基づいてページを編集し、エミュレーターでiPhone 4を選択すると、セレクターを含むページがarctic-surfing-in-lofoten.htmlではなくarctic-surfing-in-lofoten.smart.htmlとしてレンダリングされます

このセレクターを使用してページを直接呼び出すこともできます。

chlimage_1-161

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now