アダプティブテンプレートレンダリングを使用すると、バリエーションを持つページを管理できます。この機能は元々、モバイルデバイス(フィーチャーフォンとスマートフォンなど)用に様々な HTML 出力を提供する際に便利でしたが、異なるマークアップまたは HTML 出力を必要とする各種デバイスにエクスペリエンスを提供する際にも役立ちます。
テンプレートは一般にレスポンシブグリッドを中心に構築されます。これらのテンプレートをベースに作成されたページは完全にレスポンシブとなり、クライアントデバイスのビューポートに合わせて自動的に調整されます。作成者は、ページエディターのエミュレーターツールバーを使用して、特定のデバイスに対してレイアウトをターゲット設定できます。
また、アダプティブレンダリングに対応するようテンプレートを設定することもできます。デバイスグループが正しく設定されている場合、エミュレーターモードでデバイスを選択すると、URL に別のセレクターを使用してページがレンダリングされます。セレクターを使用すると、特定のページレンダリングを、URL を使用して直接呼び出すことができます。
デバイスグループを設定する際は、以下の点に留意してください。
デバイスグループレスポンシブデバイスにはセレクターがありません。これは、レスポンシブデザインに対応していると認識されるデバイスは、アダプティブなレイアウトを必要としないと見なされるからです。
アダプティブレンダリングのセレクターは、既存のデバイスグループ、または独自に作成したグループに対して設定できます。
この例では、We.Retail 内にエクスペリエンスページテンプレートの一部としてアダプティブレンダリングセレクターが含まれるように、既存のデバイスグループであるスマートフォンを設定します。
アダプティブセレクターが必要なデバイスグループを http://localhost:4502/miscadmin#/etc/mobile/groups
「エミュレーターを無効にする」オプションを設定して保存します。
以降の手順でテンプレート構造およびページ構造にデバイスグループスマートフォンを追加すると、Blackberry および iPhone 4 でセレクターが使用できるようになります。
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
CRX DE Lite を使用して、複数値の文字列プロパティにデバイスグループを追加することで、サイトでデバイスグループを使用できるようにします cq:deviceGroups
を使用して、サイトの構造を確認します。
/content/<your-site>/jcr:content
例えば、スマートフォンデバイスグループを使用できるようにする場合は、次のようになります。
/content/we-retail/jcr:content
これで、ページエディターでエミュレーターを使用する際(レイアウトを変更する場合など)、設定済みのデバイスグループのデバイスを選択すると、URL の一部としてセレクターを持つページがレンダリングされるようになります。
この例では、 エクスペリエンスページ テンプレートを作成し、エミュレーターで「 iPhone 4 」を選択すると、ページはセレクターを「 」として含めてレンダリングされます。 arctic-surfing-in-lofoten.smart.html
の代わりに arctic-surfing-in-lofoten.html
このセレクターを使用してページを直接呼び出すこともできます。