Web ページのレスポンシブデザイン
- 適用対象：
- Experience Manager 6.5
- トピック：
- 開発
作成対象：
- 開発者
IMPORTANT- ヘッドレスコンテンツを視覚的に編集する ユニバーサルエディター。
- ヘッドレスコンテンツのフォームベースの編集のための コンテンツフラグメントエディター。
NOTEWeb ページが表示されるクライアントのビューポートに適応するように web ページをデザインします。レスポンシブデザインを使用すると、同じページを複数のデバイスで、縦、横の両方の向きで効果的に表示できます。以下の画像は、ビューポートサイズの変更に対するページの応答方法の例を示しています。
- レイアウト：ビューポートが小さい場合は 1 列レイアウトを使用し、ビューポートが大きい場合は複数列レイアウトを使用します。
- テキストサイズ：ビューポートが大きい場合は、（見出しなどの適切な箇所で）大きいテキストサイズを使用します。
- コンテンツ：小型デバイスに表示する場合は、重要なコンテンツのみを表示します。
- ナビゲーション：他のページにアクセスするためのデバイス専用のツールを提供します。
- 画像：ウィンドウのサイズに応じて、クライアントの表示域に適した画像レンディションを配信します。
複数のウィンドウサイズと向きに適応可能な HTML5 ページを生成する Adobe Experience Manager（AEM）アプリケーションを開発します。例えば、次のようなビューポートの幅の範囲が、様々なデバイスタイプと向きに対応します。
- 幅 480 ピクセル以下（スマートフォン、縦置き）
- 幅 767 ピクセル以下（スマートフォン、横置き）
- 幅 768～979 ピクセル（タブレット、縦置き）
- 幅 980 ～ 1,199 ピクセル（タブレット、横置き）
- 幅 1,200 ピクセル以上（デスクトップ）
レスポンシブデザインの動作の実装について詳しくは、次のトピックを参照してください。
デザインの際には、サイドキック を使用してページを様々なスクリーンサイズでプレビューします。
開発の前に
Web ページをサポートする AEM アプリケーションを開発する前に、デザインについていくつかの決定を行う必要があります。例えば、次の情報が必要になります。
- ターゲットとするデバイス。
- ターゲットの表示域サイズ。
- ターゲットの表示域サイズごとのページレイアウト。
アプリケーション構造
以下のような一般的な AEM アプリケーション構造により、すべてのレスポンシブデザイン実装をサポートできます。
- ページコンポーネント：/apps/application_name/components 以下に存在
- テンプレート：/apps/application_name/templates 以下に存在
- デザイン：/etc/designs 以下に存在
メディアクエリの使用
メディアクエリによって、ページレンダリング用の CSS スタイルを選択的に使用できます。AEM 開発ツールおよび機能を使用すれば、アプリケーションでメディアクエリを効果的かつ効率的に実装できます。
W3C グループが、この CSS3 機能と構文について示した、メディアクエリに関するレコメンデーションを提供しています。
CSS ファイルの作成
CSS ファイルでは、ターゲットとしているデバイスのプロパティにもとづいてメディアクエリを定義します。以下の実装方法は、各メディアクエリのスタイルを管理するのに効果的です。
- ClientLibraryFolder を使用して、ページのレンダリング時に組み立てられる CSS を定義します。
- 各メディアクエリおよび関連するスタイルを、それぞれ個別の CSS ファイルで定義します。メディアクエリのデバイスの特徴を表したファイル名を使用すると便利です。
- すべてのデバイスに共通するスタイルを、個別の 1 つの CSS ファイルで定義します。
- ClientLibraryFolder の css.txt ファイルで、組み立てられた CSS ファイル内で必要とされる順に CSS ファイルを並べます。
We.Retail Media サンプルではこの実装方法を使用して、サイトデザインのスタイルを定義しています。We.Retail で使用される CSS ファイルは */apps/weretail/clientlibs/clientlib-site/less/grid.less にあります。
以下の表に、css 子フォルダー内のファイルを示します。
...
}
...
}
...
}
...
}
...
}
/etc/designs/weretail/clientlibs フォルダー内の css.txt ファイルには、このクライアントライブラリフォルダーに含まれる CSS ファイルの一覧が記載されています。ファイルの記載順序により、スタイルの優先順位が実装されます。スタイルは、デバイスのサイズが小さくなるほど特化されます。
#base=css
style.css
bootstrap.css
responsive-1200px.css
responsive-980px-1199px.css
responsive-768px-979px.css
responsive-767px-max.css
responsive-480px.css
ヒント：わかりやすいファイル名を使用することで、ターゲットの表示域サイズを容易に識別できます。
AEM ページでのメディアクエリの使用
ページコンポーネントの JSP スクリプトにクライアントライブラリフォルダーを含めます。これにより、メディアクエリを含む CSS ファイルを生成し、そのファイルを参照できます。
<ui:includeClientLib categories="apps.weretail.all"/>
apps.weretail.all クライアントライブラリフォルダーに clientlibs ライブラリが組み込まれています。この JSP スクリプトにより、スタイルシートを参照する以下の HTML コードが生成されます。
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">
特定のデバイスのプレビュー
異なるビューポートサイズでページのプレビューを参照して、レスポンシブデザインの動作をテストします。プレビュー モードでは、サイドキック に「デバイス」ドロップダウンメニューが表示されます。このドロップダウンメニューを使用して、デバイスを選択します。デバイスを選択すると、その表示域サイズに合わせてページが変更されます。
サイドキック でデバイスのプレビューを有効にするには、ページと MobileEmulatorProvider サービスを設定する必要があります。別のページ設定で、「デバイス」リストに表示されるデバイスのリストを制御します。
「デバイス」リストの追加
ページに デバイス リストをレンダリングする JSP スクリプトが含まれる場合、デバイス リストが サイドキック に表示されます。デバイス リストを サイドキック に追加するには、ページの head セクションに /libs/wcm/mobile/components/simulator/simulator.jsp スクリプトを含めます。
head セクションを定義する JSP で次のコードを含めます。
<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>
例を参照するには、CRXDE Lite で /apps/weretail/components/page/head.jsp ファイルを開きます。
シミュレーション用のページコンポーネントの登録
デバイスシミュレーターを有効にしてページで使用できるようにするには、MobileEmulatorProvider ファクトリサービスでページコンポーネントを登録して mobile.resourceTypes プロパティを定義します。
AEM と連携する場合は、いくつかの方法でこのようなサービスの設定を管理できます。詳しくは、OSGi の設定を参照してください。
例えば、アプリケーションで [sling:OsgiConfig](/docs/experience-manager-65/content/implementing/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository) ノードを作成するには、次のように設定します。
-
親フォルダー：
/apps/application_name/config -
名前：
com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*MobileEmulatorProvider サービスがファクトリサービスであるので、-
*alias*サフィックスは必須です。このファクトリで一意となる任意のエイリアスを使用します。 -
jcr:primaryType：sling:OsgiConfig
次のノードプロパティを追加します。
-
名前：
mobile.resourceTypes -
型：
String[] -
値：Web ページをレンダリングするページコンポーネントへのパス。例えば、geometrixx-media アプリケーションでは次の値を使用します。
geometrixx-media/components/page geometrixx-unlimited/components/pages/page geometrixx-unlimited/components/pages/coverpage geometrixx-unlimited/components/pages/issue
デバイスグループの指定
「デバイス」リストに表示されるデバイスグループを指定するには、cq:deviceGroups プロパティをサイトのルートページの jcr:content ノードに追加します。プロパティの値は、デバイスグループノードへのパスの配列です。
デバイスグループノードは /etc/mobile/groups フォルダー内にあります。
例えば、Geometrixx Media サイトのルートページは /content/geometrixx-media です。/content/geometrixx-media/jcr:content ノードには次のプロパティがあります。
- 名前：
cq:deviceGroups - タイプ：
String[] - 値：
/etc/mobile/groups/responsive
デバイスグループを作成および編集するには、ツールコンソールを使用します。
NOTEアダプティブ画像の使用
メディアクエリを使用して、ページに表示する画像リソースを選択できます。ただし、使用条件の設定にメディアクエリを使用しているすべてのリソースがクライアントにダウンロードされます。メディアクエリは、ダウンロードされたリソースが表示されるかどうかを決定するものに過ぎません。
画像などの大きいリソースの場合、すべてのリソースをダウンロードするとなると、クライアントのデータパイプラインを効率的に使用しているとは言えません。リソースを選択的にダウンロードするには、JavaScript を使用してリソースリクエストを開始してから、メディアクエリでリソースの選択を実行するようにします。
次の方法では、メディアクエリを使用して選択されたリソースが 1 つだけ読み込まれます。
- リソースの各バージョンに対して DIV 要素を追加します。リソースの URL を属性値として追加します。ブラウザーには、この属性がリソースとして解釈されません。
- リソースとして該当する各 DIV 要素にメディアクエリを追加します。
- ドキュメントの読み込み時またはウィンドウのサイズ変更時に、JavaScript コードによって各 DIV 要素のメディアクエリが評価されます。
- クエリの結果に基づいて、追加するリソースが決定されます。
- そのリソースを参照する HTML 要素が DOM に挿入されます。
JavaScript を使用したメディアクエリの評価
W3C により定義されている MediaQueryList インターフェイスの実装では、JavaScript を使用してメディアクエリを評価できます。メディアクエリの結果にロジックを適用して、現在のウィンドウ用にターゲットされたスクリプトを実行できます。
-
MediaQueryList インターフェイスを実装するブラウザーは
window.matchMedia()関数をサポートします。この関数は、指定された文字列に対してメディアクエリをテストします。この関数は、クエリ結果へのアクセスを提供するMediaQueryListオブジェクトを返します。 -
このインターフェイスを実装していないブラウザーの場合は、
matchMedia()のポリフィル（無料で利用できる JavaScript ライブラリの matchMedia.js など）を使用できます。
メディア特有のリソースの選択
W3C の picture 要素では、メディアクエリを使用して画像要素用のソースを決定します。picture 要素では、要素の属性を使用してメディアクエリを画像パスに関連付けます。
無料で利用可能な picturefill.js ライブラリは、提案された picture 要素と同様の機能を提供し、同様の戦略を使用します。picturefill.js ライブラリは window.matchMedia を呼び出して、一連の div 要素に対して定義されているメディアクエリを評価します。また、各 div 要素は、Image Source を指定します。Source は、div 要素のメディアクエリが true を返す際に使用されます。
picturefill.js ライブラリを使用するには、次の例のような HTML コードが必要になります。
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
</div>
ページがレンダリングされる際に、picturefull.js は次のように <div data-picture> 要素をimg 要素の最後の子として挿入します。
<div data-picture>
<div data-src='path to default image'></div>
<div data-src='path to small image' data-media="(media query for phone)"></div>
<div data-src='path to medium image' data-media="(media query for tablet)"></div>
<div data-src='path to large image' data-media="(media query for monitor)"></div>
<img src="path to medium image">
</div>
AEM ページでは、data-src 属性の値は、リポジトリ内のリソースへのパスを表します。
AEM でのアダプティブ画像の実装
AEM アプリケーションでアダプティブ画像を実装するには、必要な JavaScript ライブラリを追加し、ページに必要な HTML マークアップを含める必要があります。
ライブラリ
次の JavaScript ライブラリを取得し、クライアントライブラリフォルダーに格納します。
- matchMedia.js（MediaQueryList インターフェイスを実装していないブラウザー用）
- picturefill.js
- jquery.js（
/etc/clientlibs/granite/jqueryクライアントライブラリフォルダー（カテゴリ= jquery）で利用可能 - jquery.debouncedresize.js（ウィンドウのサイズ変更後に一度発生する jquery イベント）
ヒント： 複数のクライアントライブラリフォルダーは、埋め込みをすることによって自動的に連結できます。
HTML
picturefill.js コードが必要とする必須 div 要素を生成するコンポーネントを作成します。AEM ページでは、data-src 属性の値は、リポジトリ内のリソースへのパスになります。例えば、ページコンポーネントは、DAM での画像レンディション用のメディアクエリと関連パスをハードコーディングできます。または、作成者が画像レンディションを選択したり実行時のレンダリングオプションを指定したりできる、カスタムの画像コンポーネントを作成します。
次の HTML の例では、同じ画像の 2 つの DAM レンディションから選択されます。
<div data-picture>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png' data-media="(min-width: 769px)"></div>
<div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png' data-media="(min-width: 481px)"></div>
</div>
- クライアントライブラリフォルダー：
/libs/foundation/components/adaptiveimage/clientlibs - HTML を生成するスクリプト：
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
AEM の画像レンダリングについて
画像レンダリングをカスタマイズするには、静的画像レンダリングの AEM デフォルト実装を理解する必要があります。AEM は画像コンポーネントと画像レンダリングサーブレットを提供しており、これらが連携して web ページ用の画像をレンダリングします。ページの段落システムに画像コンポーネントが含まれる場合に、次の一連のイベントが発生します。
- オーサリング：作成者は画像コンポーネントを編集し、HTML ページに含める画像ファイルを指定します。このファイルパスが、その画像コンポーネントノードのプロパティ値として格納されます。
- ページのリクエスト：ページコンポーネントの JSP により HTML コードが生成されます。画像コンポーネントの JSP により img 要素が生成され、この要素がページに追加されます。
- 画像のリクエスト：web ブラウザーがページを読み込み、img 要素の src 属性に従って画像をリクエストします。
- 画像レンダリング：画像レンダリングサーブレットが web ブラウザーに画像を返します。
例えば、画像コンポーネントの JSP により、次のような HTML 要素が生成されます。
<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">
ブラウザーがページを読み込むときに、src 属性の値を URL として使用して画像をリクエストします。Sling によりこの URL が次のように分解されます。
- リソース：
/content/mywebsite/en/_jcr_content/par/image_0 - ファイル名拡張子：
.jpg - セレクター：
img - サフィックス：
1358372073597.jpg
image_0 ノードの jcr:resourceType 値は foundation/components/image で、sling:resourceSuperType 値は foundation/components/parbase です。parbase コンポーネントには、セレクターとリクエスト URL のファイル名拡張子に一致する img.GET.java スクリプトが含まれています。CQ はこのスクリプト（サーブレット）を使用して画像をレンダリングします。
このスクリプトのソースコードを参照するには、CRXDE Lite を使用して /libs/foundation/components/parbase/img.GET.java
ファイルを開いてください。
現在の表示域サイズに合わせた画像の拡大／縮小
クライアントのビューポートの特性に合わせて画像を実行時に拡大縮小し、レスポンシブデザインの原則に従った画像を配信します。静的画像レンダリングと同じ、サーブレットとオーサリングコンポーネントによるデザインパターンを使用します。
コンポーネントは次のタスクを実行する必要があります。
- 画像リソースのパスと必要な寸法をプロパティ値として保存します。
- メディアセレクターと画像レンダリング用のサービス呼び出しを含む
div要素を生成します。
NOTE画像リクエストを処理するサーブレットは、次のタスクを実行する必要があります。
- コンポーネントのプロパティから画像のパスと寸法を取得します。
- プロパティに従って画像の拡大縮小を行い、画像を返します。
利用できるソリューション
AEM により、ユーザーが利用または拡張できる次の実装がインストールされます。
- メディアクエリを生成するアダプティブ画像基盤コンポーネント、および画像の拡大縮小を行う Adaptive Image Component Servlet への HTTP リクエスト
- Geometrixx Commons パッケージによりインストールされる、画像の解像度を変更するための Image Reference Modification Servlet サンプルサーブレット
アダプティブ画像コンポーネントについて
アダプティブ画像コンポーネントは、デバイス画面に応じてサイズ変更される画像をレンダリングするためのアダプティブ画像コンポーネントサーブレットへの呼び出しを生成します。このコンポーネントには次のリソースが含まれています。
- JSP：メディアクエリと Adaptive Image Component Servlet への呼び出しを関連付ける div 要素を追加します。
- クライアントライブラリ：clientlib フォルダーは、matchMedia polyfill JavaScript ライブラリと変更後の Picturefill JavaScript ライブラリをアセンブリする
cq:ClientLibraryFolderです。 - 編集ダイアログボックス：
cq:editConfigノードは、ドロップターゲットで基盤画像コンポーネントではなくアダプティブ画像コンポーネントが作成されるように、CQ 基盤画像コンポーネントをオーバーライドします。
DIV 要素の追加
adaptive-image.jsp スクリプトには div 要素とメディアクエリを生成する次のコードが含まれています。
<div data-picture data-alt='<%= alt %>'>
<div data-src='<%= path + ".img.320.low." + extension + suffix %>' data-media="(min-width: 1px)"></div> <%-- Small mobile --%>
<div data-src='<%= path + ".img.320.medium." + extension + suffix %>' data-media="(min-width: 320px)"></div> <%-- Portrait mobile --%>
<div data-src='<%= path + ".img.480.medium." + extension + suffix %>' data-media="(min-width: 321px)"></div> <%-- Landscape mobile --%>
<div data-src='<%= path + ".img.476.high." + extension + suffix %>' data-media="(min-width: 481px)"></div> <%-- Portrait iPad --%>
<div data-src='<%= path + ".img.620.high." + extension + suffix %>' data-media="(min-width: 769px)"></div> <%-- Landscape iPad --%>
<div data-src='<%= path + ".img.full.high." + extension + suffix %>' data-media="(min-width: 1025px)"></div> <%-- Desktop --%>
<%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
<noscript>
<img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
</noscript>
</div>
path 変数には、現在のリソース（adaptive-image コンポーネントノード）のパスが含まれています。このコードにより、次の構造を持つ一連の div 要素が生成されます。
<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>
data-scr 属性の値は、Sling が画像をレンダリングするアダプティブ画像コンポーネントサーブレットに解決する URL です。data-media 属性には、クライアントプロパティに対して評価されるメディアクエリが含まれます。
次の HTML コードは、JSP によって生成される div 要素の例です。
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg' data-media="(min-width: 320px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg' data-media="(min-width: 321px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg' data-media="(min-width: 481px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg' data-media="(min-width: 769px)"></div>
<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg' data-media="(min-width: 1025px)"></div>
画像サイズセレクターの変更
アダプティブ画像コンポーネントをカスタマイズし、幅セレクターを変更する場合は、その幅をサポートするように Adaptive Image Component Servlet を設定する必要もあります。
アダプティブ画像コンポーネントサーブレットについて
アダプティブ画像コンポーネントサーブレットは、指定された幅に応じて JPEG 画像のサイズを変更し、JPEG 画質を設定します。
アダプティブ画像コンポーネントサーブレットのインターフェイス
アダプティブ画像コンポーネントサーブレットは、デフォルトの Sling サーブレットにバインドされ、.jpg、.jpeg、.gif および .png ファイル拡張子をサポートします。このサーブレットのセレクターは img です。
CAUTIONそのため、Sling は、このサーブレットで以下の形式の HTTP リクエスト URL を解決します。
*path-to-node*.img.*extension*
例えば、Sling は URL が http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg の HTTP リクエストをアダプティブ画像コンポーネントサーブレットに転送します。
2 つの追加セレクターにより、リクエストされる画像の幅と JPEG 画質を指定します。次の例では、幅 480 ピクセルで中程度の画質の画像をリクエストします。
http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg
サポートされている画像プロパティ
このサーブレットは、有限個の画像の幅と画質を受け入れます。次の幅はデフォルトでサポートされています（ピクセル単位）。
- フル
- 320
- 480
- 476
- 620
full 値は、拡大縮小しないことを示します。
JPEG 画質については、次の値がサポートされています。
- 低画質
- 中画質
- やや高画質
対応する数値はそれぞれ、0.4、0.82、1.0 です。
サポートされているデフォルトの幅の変更
Web コンソール（http://localhost:4502/system/console/configMgr）または sling:OsgiConfig ノードを使用して、Adobe CQ Adaptive Image Component Servlet でサポートされる幅を設定します。
AEM サービスの設定方法について詳しくは、OSGi の設定を参照してください。
サポートされる幅
- サポートされる幅を追加するには、「+」ボタンをクリックし、正の整数を入力します。
- サポートされる幅を削除するには、該当する項目の「-」ボタンをクリックします。
- サポートされる幅を変更するには、フィールド値を編集します。
adapt.supported.widths
- このプロパティは複数値の String です。
実装の詳細
com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet クラスは、AbstractImageServlet クラスを拡張します。AdaptiveImageComponentServlet のソースコードは、/libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl フォルダーにあります。
このクラスは、Felix SCR アノテーションを使用して、サーブレットが関連付けられるリソースタイプとファイル拡張子および 1 つ目のセレクターの名前を設定します。
@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value ={
"jpg",
"jpeg",
"png",
"gif"
}, propertyPrivate = true)
})
このサーブレットは、プロパティ SCR の注釈を使用して、デフォルトでサポートされる画質と寸法を設定します。
@Property(value = {
"320", // iPhone portrait
"480", // iPhone landscape
"476", // iPad portrait
"620" // iPad landscape
},
label = "Supported Widths",
description = "List of widths this component is permitted to generate.")
AbstractImageServlet クラスは、HTTP リクエストを処理する doGet メソッドを提供します。このメソッドは、リクエストに関連付けられるリソースを決定し、リポジトリからリソースのプロパティを取得し、それらのプロパティを ImageContext オブジェクトに返します。
NOTEfileReference プロパティの値を取得する getFileReference method を提供します。AdaptiveImageComponentServlet クラスは、createLayer メソッドをオーバーライドします。このメソッドは、ImageContext オブジェクトから画像リソースのパスとリクエストされた画像幅を取得します。その後、実際の画像の拡大／縮小を実行する info.geometrixx.commons.impl.AdaptiveImageHelper クラスのメソッドを呼び出します。
AdaptiveImageComponentServlet クラスは、writeLayer メソッドもオーバーライドします。このメソッドでは、JPEG 画質が画像に適用されます。
Image Reference Modification Servlet（Geometrixx Common）
サンプルの Image Reference Modification Servlet は、web ページ上の画像の拡大縮小を行うために、img 要素のサイズ関連属性を生成します。
サーブレットの呼び出し
このサーブレットは cq:page リソースにバインドされ、.jpg ファイル拡張子をサポートします。このサーブレットのセレクターは image です。そのため、Sling は、このサーブレットで以下の形式の HTTP リクエスト URL を解決します。
path-to-page-node.image.jpg
例えば、Sling は URL が http://localhost:4502/content/geometrixx/en.image.jpg である HTTP リクエストを Image Reference Modification Servlet に転送します。
3 つの追加セレクターにより、要求される画像の幅、高さおよび画質（任意）を指定します。以下の例では、幅 770 ピクセル、高さ 360 ピクセルで中程度の画質の画像を要求します。
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
サポートされている画像プロパティ
このサーブレットは、有限個の画像の寸法と画質の値を受け入れます。
次の値はデフォルトでサポートされています（幅 x 高さ）。
- 256x192
- 370x150
- 480x200
- 127x127
- 770x360
- 620x290
- 480x225
- 320x150
- 375x175
- 303x142
- 1170x400
- 940x340
- 770x300
- 480x190
画質については、次の値がサポートされています。
- 低
- 中
- 高
AEM と連携する場合は、いくつかの方法でこのようなサービスの設定を管理できます。詳しくは、OSGi の設定を参照してください。
画像リソースの指定
画像のパス、寸法および画質の値は、リポジトリ内のノードのプロパティとして格納する必要があります。
-
ノード名は
imageです。 -
親ノードは
cq:pageリソースのjcr:contentノードです。 -
画像のパスは、
fileReferenceというプロパティの値として格納します。
ページをオーサリングする際には、以下のように サイドキック を使用して画像を指定し、ページのプロパティに image ノードを追加します。
- サイドキック で「ページ」タブをクリックし、「ページのプロパティ」をクリックします。
- 「画像」タブをクリックし、画像を指定します。
- 「OK」をクリックします。
実装の詳細
info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet クラスは、AbstractImageServlet クラスを拡張します。cq-geometrixx-commons-pkg パッケージがインストールされている場合、ImageReferenceModificationServlet のソースコードは /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets フォルダーにあります。
このクラスは、Felix SCR アノテーションを使用して、サーブレットが関連付けられるリソースタイプとファイル拡張子および 1 つ目のセレクターの名前を設定します。
@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
@Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
@Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
@Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})
このサーブレットは、プロパティ SCR の注釈を使用して、デフォルトでサポートされる画質と寸法を設定します。
@Property(label = "Image Quality",
description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
"256x192", // Category page article list images
"370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
"480x200", // "Most popular" phone
"127x127", // article summary phone square images
"770x360", // article summary, desktop
"620x290", // article summary, tablet
"480x225", // article summary, phone (landscape)
"320x150", // article summary, phone (portrait) and fallback
"375x175", // 2-column article summary, desktop
"303x142", // 2-column article summary, tablet
"1170x400", // carousel, full
"940x340", // carousel min-width: 980px
"770x300", // carousel min-width: 768px
"480x190" // carousel min-width: 480px
},
label = "Supported Resolutions",
description = "List of resolutions this component is permitted to generate.")
AbstractImageServlet クラスには、HTTP リクエストを処理する doGet メソッドが含まれます。このメソッドは、呼び出しに関連付けられるリソースを決定し、リポジトリからリソースのプロパティを取得して、ImageContext オブジェクトにそれらのプロパティを保存します。
ImageReferenceModificationServlet クラスは、createLayer メソッドをオーバーライドし、レンダリングする画像リソースを決定するロジックを実装します。このメソッドは、該当するページで jcr:content ノードの子ノード（image）を取得します。画像 オブジェクトはこの image ノードから作成され、getFileReference メソッドは、画像ノードの fileReference プロパティから画像ファイルへのパスを返します。
NOTE可変グリッドの開発
AEM を使用すると、可変グリッドを効率的かつ効果的に実装できます。ここでは、新しく作成した可変グリッドや既存のグリッドの実装（Bootstrap など）を AEM アプリケーションに統合する方法について説明します。
可変グリッドについて詳しくない場合は、このページの下部にある可変グリッドの概要セクションを参照してください。この説明では、可変グリッドの概要と設計に関するガイダンスが示されています。
ページコンポーネントを使用したグリッドの定義
ページコンポーネントを使用して、ページのコンテンツブロックを定義する HTML 要素を生成します。ページが参照する ClientLibraryFolder には、コンテンツブロックのレイアウトを制御する CSS が含まれています。
- ページコンポーネント：コンテンツブロックの行を表す div 要素を追加します。コンテンツブロックを表す div 要素には、作成者がコンテンツを追加する parsys コンポーネントが含まれています。
- クライアントライブラリフォルダー：div 要素用のメディアクエリとスタイルが含まれる CSS ファイルが格納されています。
例えば、サンプルの geometrixx-media アプリケーションには、media-home コンポーネントが含まれています。このページコンポーネントは、2 つのスクリプトを挿入します。これらは、row-fluid クラスの 2 つの div 要素を生成します。
-
最初の行には、
span12クラスのdiv要素（コンテンツは 12 列に及びます）が含まれます。div要素には parsys コンポーネントが含まれます。 -
2 行目には 2 つの
div要素が含まれます。1 つはspan8クラス、もう 1 つはspan4クラスのものです。それぞれのdiv要素には parsys コンポーネントが含まれます。
<div class="page-content">
<div class="row-fluid">
<div class="span12">
<cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
</div>
</div>
<div class="row-fluid">
<div class="span8">
<cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
</div>
<div class="span4">
<cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
</div>
</div>
</div>
cq:include 要素が複数含まれている場合、それぞれの path 属性には異なる値を指定する必要があります。ページコンポーネントグリッドの拡大縮小
geometrixx-media ページコンポーネントに関連付けられているデザイン（/etc/designs/geometrixx-media）には、clientlibs ClientLibraryFolder が含まれます。この ClientLibraryFolder は、row-fluid クラスの子である row-fluid クラス、span* クラス、span* クラスの CSS スタイルを定義します。メディアクエリを使用すると、異なる表示域サイズに合わせてスタイルを再定義できます。
次の CSS の例は、これらのスタイルのサブセットです。このサブセットでは、 span12、span8 および span4 の各クラスのほか、2 つの表示域サイズ用のメディアクエリを重点的に取り上げています。CSS の次の特性に留意してください。
.spanスタイルでは、絶対数を使用して要素の幅を定義しています。.row-fluid .span*スタイルでは、要素の幅を親ページを基準とした割合で定義します。割合は、幅の絶対値から計算されます。- ビューポートが大きいメディアクエリでは、より大きい幅の絶対値が割り当てられます。
NOTE/* default styles (no media queries) */
.span12 { width: 940px }
.span8 { width: 620px }
.span4 { width: 300px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.95744680851064% }
.row-fluid .span4 { width: 31.914893617021278% }
@media (min-width: 768px) and (max-width: 979px) {
.span12 { width: 724px; }
.span8 { width: 476px; }
.span4 { width: 228px; }
.row-fluid .span12 { width: 100%;}
.row-fluid .span8 { width: 65.74585635359117%; }
.row-fluid .span4 { width: 31.491712707182323%; }
}
@media (min-width: 1200px) {
.span12 { width: 1170px }
.span8 { width: 770px }
.span4 { width: 370px }
.row-fluid .span12 { width: 100% }
.row-fluid .span8 { width: 65.81196581196582% }
.row-fluid .span4 { width: 31.623931623931625% }
}
ページコンテンツグリッド内のコンテンツの再配置
Geometrixx Media アプリケーションのサンプルのページにおいて、幅の広いビューポートでは、コンテンツブロックの行が水平方向に配置されます。小さなビューポートでは、同じブロックが垂直方向に配置されます。次の CSS の例は、media-home ページコンポーネントが生成する HTML コードに対してこの動作を実装するスタイルを示しています。
-
media-welcome ページのデフォルトの CSS は、
row-fluidクラスの内部にあるspan*クラスに対してfloat:leftスタイルを割り当てます。 -
小さい表示域用のメディアクエリーでは、同じクラスに対して
float:noneスタイルを割り当てます。
/* default styles (no media queries) */
.row-fluid [class*="span"] {
width: 100%;
float: left;
}
@media (max-width: 767px) {
[class*="span"], .row-fluid [class*="span"] {
float: none;
width: 100%;
}
}
ページコンポーネントのモジュール化
コンポーネントをモジュール化すると、コードを効率的に使用できるようになります。サイトでは、ようこそページ、記事ページ、製品ページなどの、様々なタイプのページを使用している場合があります。ページのタイプごとに異なるタイプのコンテンツが含まれており、異なるレイアウトが使用されている可能性があります。ただし、各レイアウトの特定の要素が複数のページで共通している場合は、レイアウトの共通部分を実装するコードを再利用できます。
ページコンポーネントのオーバーレイの使用
ページの各部分（head セクションや body セクションのほか、本文内の header や content、footer などの各セクション）を生成するためのスクリプトを提供するメインページコンポーネントを作成します。
そのメインページコンポーネントを cq:resourceSuperType として使用する他のページコンポーネントを作成します。これらのコンポーネントには、必要に応じてメインページのスクリプトをオーバーライドするスクリプトが含まれます。
例えば、goemetrixx-media アプリケーションにはページコンポーネントが含まれています（sling:resourceSuperType は基盤ページコンポーネントです）。複数の子コンポーネント（article、category および media-home など）はこのページコンポーネントを sling:resourceSuperType として使用します。各子コンポーネントには、ページコンポーネントの content.jsp ファイルをオーバーライドする content.jsp ファイルが含まれています。
スクリプトを再利用
複数のページコンポーネントに共通する行と列の組み合わせを生成する、複数の JSP スクリプトを作成します。例えば、article コンポーネントと media-home コンポーネントの content.jsp スクリプトは、両方とも 8x4col.jsp スクリプトを参照します。
ターゲットのビューポートサイズに基づいて CSS スタイルを整理
異なる表示域サイズ用の CSS スタイルとメディアクエリを、別々のファイルに含めます。クライアントライブラリフォルダーを使用して連結します。
ページグリッドへのコンポーネントの挿入
コンポーネントがコンテンツの単一ブロックを生成する場合、通常は、ページコンポーネントが作成するグリッドがコンテンツの配置を制御します。
作成者は、コンテンツブロックを様々なサイズや相対位置でレンダリングできます。コンテンツテキストでは、他のコンテンツブロックを参照する相対方向を使用しないでください。
必要に応じて、コンポーネントは、生成される HTML コードに必要な CSS または JavaScript ライブラリを提供する必要があります。CSS ファイルと JS ファイルが生成されるように、コンポーネント内でクライアントライブラリフォルダーを使用します。ファイルを公開するには、/etc フォルダーの下の別のクライアントライブラリフォルダーで、依存関係を作成するか、ライブラリを埋め込みます。
サブグリッド
コンポーネントに複数のコンテンツブロックが含まれる場合は、コンテンツブロックを行の内部に追加して、ページ上にサブグリッドを構築します。
- 含まれるページコンポーネントと同じクラス名を使用すると、div 要素を行およびコンテンツブロックとして表現できます。
- ページデザインの CSS が実装する動作を上書きするには、行 div 要素に 2 番目のクラス名を使用し、関連する CSS をクライアントライブラリフォルダーに指定します。
例えば、/apps/geometrixx-media/components/2-col-article-summary コンポーネントは、2 列のコンテンツを生成します。このコンポーネントが生成する HTML の構造は次のとおりです。
<div class="row-fluid mutli-col-article-summary">
<div class="span6">
<article>
<div class="article-summary-image">...</div>
<div class="social-header">...</div>
<div class="article-summary-description">...</div>
<div class="social">...</div>
</article>
</div>
</div>
ページの CSS の .row-fluid .span6 セレクターが、この HTML 内の同じクラスおよび構造の div 要素に対して適用されます。ただし、このコンポーネントには /apps/geometrixx-media/components/2-col-article-summary/clientlibs クライアントライブラリフォルダーも含まれます。
- CSS ではページコンポーネントと同じメディアクエリを使用して、レイアウトの変更を、同じ離散したページ幅により確立します。
- セレクターでは、行の
div要素のmulti-col-article-summaryクラスを使用して、ページのrow-fluidクラスの動作をオーバーライドします。
例えば、以下のスタイルは /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css ファイルに含まれています。
@media (max-width: 480px) {
.mutli-col-article-summary .article-summary-image {
float: left;
width: 127px;
}
.mutli-col-article-summary .article-summary-description {
width: auto;
margin-left: 127px;
}
.mutli-col-article-summary .article-summary-description h4 {
padding-left: 10px;
}
.mutli-col-article-summary .article-summary-text {
margin-left: 127px;
min-height: 122px;
top: 0;
}
}
可変グリッドの概要
可変グリッドを使用すると、ページレイアウトをクライアントの表示域のサイズに合わせて調整できます。グリッドは、ページ上にコンテンツのブロックを配置する論理列と行で構成されます。
- 列は、コンテンツブロックの水平方向の位置と幅を決定します。
- 行は、コンテンツブロックの相対的な垂直位置を決定します。
HTML5 テクノロジーを使用すると、グリッドを実装し、グリッドを操作して、ページレイアウトを様々な表示域サイズに調整することができます。
- HTML
div要素には、一部の列にまたがるコンテンツのブロックが含まれます。 - これらの div 要素は、1 つ以上の div 要素が共通の親 div 要素を共有する場合、行を構成します。
離散型の幅の使用
ターゲットにしている表示域の幅の各範囲について、静的なページ幅と、一定の幅を持つコンテンツブロックを使用します。ブラウザーウィンドウのサイズを手動で変更すると、離散型のウィンドウ幅（ブレークポイントとも呼ばれます）それぞれでコンテンツサイズが変更されます。したがって、ページデザインはより密接に結び付き、ユーザーエクスペリエンスを最大限に高めます。
グリッドの拡大縮小
グリッドを使用して、異なる表示域サイズに合わせてコンテンツブロックを拡大縮小します。コンテンツブロックは特定の数の列にまたがります。ビューポートのサイズに応じて、列の幅が増減するとコンテンツブロックの幅もそれに応じて増減します。拡大縮小では、コンテンツブロックを隣り合わせで配置できる十分な幅を持つ大規模から中規模のビューポートがサポートされます。
グリッド内のコンテンツの再配置
コンテンツブロックのサイズは、幅の最小値によって制限され、その幅未満になると、拡大縮小は実行されません。小さいビューポートの場合、コンテンツブロックを水平方向ではなく垂直方向に広げるためにグリッドを使用できます。
グリッドのデザイン
ページ上にコンテンツブロックを配置するために必要になる列と行を決定します。ページレイアウトによって、グリッドにまたがる列と行の数が決まります。
列数
すべてのビューポートのサイズに対して、すべてのレイアウトでコンテンツブロックを水平方向に配置するのに十分な列を含めます。現在必要な列よりも多くの列を使用しておくと、今後のページデザインにも対応することができます。
行のコンテンツ
行を使用して、コンテンツブロックの垂直方向の位置を制御します。同じ行を共有するコンテンツブロックを次のように決定します。
- どのレイアウトでも、水平方向に隣り合って配置されているコンテンツブロックは、同じ行にあります。
- 水平方向（幅の広いビューポート）と垂直方向（小さいビューポート）で隣り合うコンテンツブロックは、同じ行にあります。
グリッドの実装
CSS クラスとスタイルを作成して、ページ上のコンテンツブロックのレイアウトを制御できるようにします。多くの場合、ページデザインは、ビューポート内のコンテンツブロックの相対的なサイズと位置に基づいています。ビューポートによって、コンテンツブロックの実際のサイズが決まります。CSS では、相対サイズと絶対サイズを考慮する必要があります。可変グリッドの実装には、次の 3 種類の CSS クラスを使用できます。
- すべての行のコンテナーである
div要素のクラス。このクラスは、グリッドの幅の絶対値を設定します。 - 行を表す
div要素用のクラス。このクラスでは、格納するコンテンツブロックの水平方向または垂直方向の位置を制御します。 - 異なる幅のコンテンツブロックを表す
div要素用のクラス。幅は、親（行）に対する割合で表されます。
ターゲットとなるビューポートの幅（およびその関連するメディアクエリ）によって、ページレイアウトに使用される離散型の幅が決まります。
コンテンツブロックの幅
通常、コンテンツブロッククラスの width スタイルは、ページとグリッドの次の特性に基づいています。
- ターゲットとなる各ビューポートのサイズに使用しているページの幅の絶対値。既知の値。
- 各ページの幅に対応するグリッドの列の幅の絶対値。これらの値は、ユーザーが指定します。
- ページ全体の幅に対する割合として指定した、各列の相対的な幅。これらの値は、ユーザーが計算します。
CSS には、次の構造を使用する一連のメディアクエリが含まれています。
@media(query_for_targeted_viewport){
.class_for_container{ width:absolute_page_width }
.class_for_row { width:100%}
/* several selectors for content blocks */
.class_for_content_block1 { width:absolute_block_width1 }
.class_for_content_block2 { width:absolute_block_width2 }
...
/* several selectors for content blocks inside rows */
.class_for_row .class_for_content_block1 { width:relative_block_width1 }
.class_for_row .class_for_content_block2 { width:relative_block_width2 }
...
}
ページの要素クラスと CSS スタイルを開発するための出発点として、次のアルゴリズムを使用します。
-
すべての行を含む div 要素のクラス名を定義します（例：
content.）。 -
行を表す div 要素用の CSS クラスを定義します（例：
row-fluid）。 -
コンテンツブロック要素のクラス名を定義します。列の範囲という観点で、それぞれの幅に対して 1 つのクラスが必要です。たとえば、3 列にまたがる
div要素にはspan3クラスを使用し、4 列にまたがる場合はspan4クラスを使用します。グリッドにある列と同じ数のクラスを定義します。 -
ターゲットとする表示域サイズごとに、対応するメディアクエリを CSS ファイルに追加します。各メディアクエリに次の項目を追加します。
contentクラス用のセレクター（例：.content{}）。- 各 span クラス用のセレクター（例：
.span3{ }）。 row-fluidクラス用のセレクター（例：.row-fluid{ }）。- row-fluid クラス内にある span クラス用のセレクター（例：
.row-fluid span3 { }）。
-
各セレクターに幅のスタイルを追加します。
contentセレクターの幅を、ページの絶対サイズに設定します（例：width:480px）。- すべての row-fluid セレクターの幅を 100％に設定します。
- すべての span セレクターの幅を、コンテンツブロックの幅の絶対値に設定します。単純なグリッドでは、同じ幅の均等に分布した列
(absolute width of page)/(number of columns)が使用されます。 .row-fluid .spanセレクターの幅を、全体の幅のパーセンテージとして設定します。この幅を計算するには、数式(absolute span width)/(absolute page width)*100を使用します。
行内のコンテンツブロックの配置
.row-fluid クラスの浮動小数スタイルを使用すると、行内のコンテンツブロックを水平方向に配置するか垂直方向に配置するかを制御できます。
-
float:leftまたはfloat:rightスタイルでは、子要素（コンテンツブロック）が水平方向に広げられます。 -
float:noneスタイルでは、子要素が垂直方向に広げられます。
各メディアクエリ内の .row-fluid セレクターにスタイルを追加します。そのメディアクエリに使用するページレイアウトに従って値を設定します。例えば、次の図は、幅の広い表示域ではコンテンツを水平方向に、幅の狭い表示域では垂直方向に広げる行を示しています。
次の CSS によりこの動作を実装できます。
@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
width:100%;
float:left
}
}
@media (max-width:480px){
.row-fluid {
width:100%;
float:none
}
}
コンテンツブロックへのクラスの割り当て
ターゲットとしているそれぞれのビューポートサイズのページレイアウトに対して、各コンテンツブロックがまたがる列数を決定します。次に、それぞれのコンテンツブロックの div 要素で使用するクラスを決定します。
このような div クラスを確立したら、AEM アプリケーションを使用してグリッドを実装できます。