Adobeでは、単一ページアプリケーションのフレームワークベースのクライアント側レンダリング(Reactなど)を必要とするプロジェクトには、SPAエディターを使用することをお勧めします。 詳細情報を参照してください。
Web ページが表示されるクライアントの表示域に適応するように Web ページをデザインします。レスポンシブデザインを使用すると、同じページを複数のデバイスで、縦、横の両方の向きで効果的に表示できます。次の画像の例は、表示域サイズの変更に対してページがどのように応答するかを示しています。
複数のウィンドウサイズと向きに適応可能な HTML5 ページを生成する Adobe Experience Manager(AEM)アプリケーションを開発します。例えば、次のような表示域の幅の範囲が、様々なデバイスタイプと向きに対応します。
レスポンシブデザインの動作の実装について詳しくは、次のトピックを参照してください。
デザイン時に、サイドキックを使用して、様々な画面サイズのページをプレビューします。
Web ページをサポートする AEM アプリケーションを開発する前に、デザインについていくつかの決定をおこなう必要があります。例えば、次の情報が必要になります。
次のような一般的な AEM アプリケーション構造により、すべてのレスポンシブデザイン実装をサポートできます。
メディアクエリによって、ページレンダリング用の CSS スタイルを選択的に使用できます。AEM 開発ツールおよび機能を使用すれば、アプリケーションでメディアクエリを効果的かつ効率的に実装できます。
W3C グループが、この CSS3 機能と構文について示した、メディアクエリに関する推奨事項を提供しています。
CSS ファイルでは、ターゲットとしているデバイスのプロパティに基づいてメディアクエリを定義します。次の実装方法は、各メディアクエリのスタイルを管理するのに効果的です。
We.Retail Media サンプルではこの実装方法を使用して、サイトデザインのスタイルを定義しています。We.Retailで使用されるCSSファイルは*/apps/weretail/clientlibs/clientlib-site/less/grid.less
にあります。
次の表に、css 子フォルダー内のファイルを示します。
ファイル名 | 説明 | メディアクエリー |
---|---|---|
style.css | 共通のスタイル。 | 該当なし |
bootstrap.css | 共通のスタイル(Twitter Bootstrap による定義)。 | 該当なし |
responsive-1200px.css | 幅 1,200 ピクセル以上のすべてのメディア用のスタイル。 | @media (min-width: 1200px) { |
responsive-980px-1199px.css | 幅 980 ~ 1,199 ピクセルのメディア用のスタイル。 | @media (min-width: 980px) and (max-width: 1199px) { |
responsive-768px-979px.css | 幅 768 ~ 979 ピクセルのメディア用のスタイル。 | @media (min-width: 768px) and (max-width: 979px) { |
responsive-767px-max.css | 幅 768 ピクセル未満のすべてのメディア用のスタイル。 | @media (max-width: 767px) { |
responsive-480px.css | 幅 481 ピクセル未満のすべてのメディア用のスタイル。 | @media (max-width: 480) { ... } |
/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
ヒント:説明的なファイル名を使用すると、対象となるビューポートサイズを簡単に識別できます。
ページコンポーネントの JSP スクリプトにクライアントライブラリフォルダーを含めることで、メディアクエリを含む CSS ファイルを生成し、そのファイルを参照できます。
<ui:includeClientLib categories="apps.weretail.all"/>
apps.weretail.all
クライアントライブラリフォルダーには、clientlibsライブラリが埋め込まれています。
この JSP スクリプトにより、スタイルシートを参照する次の HTML コードが生成されます。
<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css?lang=ja" type="text/css">
<link href="/etc/designs/weretail.css?lang=ja" 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?lang=ja"/>
例を見るには、/apps/weretail/components/page/head.jsp
ファイルをCRXDE Liteで開きます。
デバイスシミュレーターを有効にしてページで使用できるようにするには、MobileEmulatorProvider ファクトリサービスによってページコンポーネントを登録して mobile.resourceTypes
プロパティを定義します。
AEM と連携する場合は、いくつかの方法でこのようなサービスの設定を管理できます。詳しくは、OSGi の設定を参照してください。
例えば、アプリケーションで [sling:OsgiConfig](/docs/experience-manager-65/deploying/configuring/configuring-osgi.html?lang=ja#adding-a-new-configuration-to-the-repository)
ノードを作成するには、次のように設定します。
親フォルダー:/apps/application_name/config
名前:com.day.cq.wcm.mobile.core.impl.MobileEmulatorProvider-*alias*
- *alias*
サフィックスは必須です。これは、MobileEmulatorProviderサービスがファクトリサービスであるためです。 このファクトリで一意となる任意のエイリアスを使用します。
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
Devicesリストーに表示されるデバイスグループを指定するには、サイトのルートページのjcr:content
ノードにcq:deviceGroups
プロパティを追加します。 プロパティの値は、デバイスグループノードへのパスの配列です。
デバイスグループノードは/etc/mobile/groups
フォルダーにあります。
例えば、Geometrixx Mediaサイトのルートページは/content/geometrixx-media
です。 /content/geometrixx-media/jcr:content
ノードには次のプロパティが含まれます。
cq:deviceGroups
String[]
/etc/mobile/groups/responsive
デバイスグループを作成および編集するには、ツールコンソールを使用します。
レスポンシブデザインに使用するデバイスグループについては、「一般」タブでデバイスグループを編集して、「エミュレーターを無効にする」を選択します。このオプションによって、レスポンシブデザインに関係のないエミュレーターカルーセルが表示されなくなります。
メディアクエリを使用して、ページに表示する画像リソースを選択できます。ただし、使用条件の設定にメディアクエリを使用しているすべてのリソースがクライアントにダウンロードされます。メディアクエリは、ダウンロードされたリソースが表示されるかどうかを決定するものに過ぎません。
画像などの大きいリソースの場合、すべてのリソースをダウンロードするとなると、クライアントのデータパイプラインを効率的に使用しているとは言えません。リソースを選択的にダウンロードするには、JavaScript を使用してリソース要求を開始してから、メディアクエリでリソースの選択を実行するようにします。
次の方法では、メディアクエリを使用して選択されたリソースが 1 つだけ読み込まれます。
W3Cで定義されるMediaQueryListインターフェイスの実装により、javascriptを使用してメディアクエリを評価できます。メディアクエリの結果にロジックを適用し、現在のウィンドウを対象としたスクリプトを実行できます。
MediaQueryListインターフェイスを実装するブラウザーはwindow.matchMedia()
関数をサポートしています。 この関数は、指定した文字列に対してメディアクエリをテストします。 この関数は、クエリ結果へのアクセスを提供するMediaQueryList
オブジェクトを返します。
インターフェイスを実装しないブラウザーでは、matchMedia.jsなどのmatchMedia()
ポリフィルを使用できます。これは、無料で利用可能なjavascriptライブラリです。
W3C で提言されている picture 要素では、メディアクエリーを使用して画像要素用のソースを決定します。picture 要素では、要素の属性を使用してメディアクエリーを画像パスに関連付けます。
自由に利用できるpicturefill.jsライブラリは、提案されたpicture
要素と同様の機能を提供し、同様の戦略を使用します。 picturefill.jsライブラリは、window.matchMedia
を呼び出して、div
要素のセットに定義されているメディアクエリを評価します。 各div
要素はまた、画像ソースも指定します。 このソースは、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 アプリケーションでアダプティブ画像を実装するには、必要な JavaScript ライブラリを追加し、ページに必要な HTML マークアップを含める必要があります。
ライブラリ
次の JavaScript ライブラリを取得し、クライアントライブラリフォルダーに格納します。
/etc/clientlibs/granite/jquery
クライアントライブラリフォルダー(カテゴリ= 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
/libs/foundation/components/adaptiveimage/adaptiveimage.jsp
以降では、このコンポーネントの詳細について説明します。
画像レンダリングをカスタマイズするには、静的画像レンダリングの AEM デフォルト実装を理解する必要があります。AEM は画像コンポーネントと画像レンダリングサーブレットを提供しており、これらが連携して 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?lang=ja">
ブラウザーがページを読み込むときに、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
です。 このパーベスコンポーネントには、セレクターと要求URLのファイル名拡張子に一致するimg.GET.javaスクリプトが含まれています。 CQは、このスクリプト(サーブレット)を使用してイメージをレンダリングします。
スクリプトのソースコードを確認するには、CRXDE Liteを使用して/libs/foundation/components/parbase/img.GET.java
を開きます
ファイル。
クライアントの表示域の特性に合わせて画像を実行時に拡大縮小し、レスポンシブデザインの原則に従った画像を配信します。静的画像レンダリングと同じ、サーブレットとオーサリングコンポーネントによるデザインパターンを使用します。
コンポーネントは次のタスクを実行する必要があります。
div
要素を生成します。Webクライアントは、matchMediaおよびPicturefillのJavaScriptライブラリ(または類似のライブラリ)を使用して、メディアセレクターを評価します。
画像要求を処理するサーブレットは、次のタスクを実行する必要があります。
利用可能なソリューション
AEM により、ユーザーが利用または拡張できる次の実装がインストールされます。
アダプティブイメージコンポーネントは、デバイス画面に従ってサイズ設定されたイメージをレンダリングするためのAdaptive Image Componentサーブレットへの呼び出しを生成します。 このコンポーネントには次のリソースが含まれています。
cq:ClientLibraryFolder
です。cq:editConfig
ノードは、CQ foundation imageコンポーネントを上書きするので、ドロップターゲットは、foundation imageコンポーネントではなく、アダプティブ画像コンポーネントを作成します。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 を設定する必要もあります。
Adaptive Component Servlet は、指定された幅に応じて JPEG 画像のサイズを変更し、JPEG 画質を設定します。
Adaptive Image Component Servlet は、デフォルトの Sling サーブレットにバインドされ、.jpg、.jpeg、.gif および .png ファイル拡張子をサポートします。このサーブレットのセレクターは img です。
アダプティブレンディション用のアニメーション .gif ファイルは AEM でサポートされていません。
そのため、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
サポートされている画像プロパティ
このサーブレットは、有限個の画像の幅と画質を受け入れます。次の幅はデフォルトでサポートされています(ピクセル単位)。
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 の設定を参照してください。
Webコンソール | sling:OsgiConfig | |
---|---|---|
サービス名またはノード名 | 「設定」タブのサービス名:Adobe CQ Adaptive Image Component Servlet | com.day.cq.wcm.foundation.impl. AdaptiveImageComponentServlet |
Property | サポートされる幅
|
adapt.supported.widths
|
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)
})
このサーブレットは Property 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オブジェクトに返します。
com.day.cq.commons.DownloadResourceクラスはgetFileReference method
を提供します。このクラスは、リソースのfileReference
プロパティの値を取得します。
AdaptiveImageComponentServlet
クラスは、createLayer
メソッドをオーバーライドします。 このメソッドは、ImageContext
オブジェクトからイメージリソースのパスと要求されたイメージ幅を取得します。 次に、info.geometrixx.commons.impl.AdaptiveImageHelper
クラスのメソッドを呼び出し、実際の画像の拡大/縮小を実行します。
また、AdaptiveImageComponentServletクラスは、writeLayerメソッドをオーバーライドします。この方法では、画像にJPEG画質を適用します。
サンプルの 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要求を画像参照変更サーブレットに転送します。
3 つの追加セレクターにより、要求される画像の幅、高さおよび画質(オプション)を指定します。次の例では、幅 770 ピクセル、高さ 360 ピクセルで中程度の画質の画像を要求します。
http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg
サポートされている画像プロパティ
このサーブレットは、有限個の画像サイズと画質の値を受け入れます。
次の値はデフォルトでサポートされています(幅 x 高さ)。
画質については、次の値がサポートされています。
AEM と連携する場合は、いくつかの方法でこのようなサービスの設定を管理できます。詳しくは、OSGi の設定を参照してください。
画像のパス、サイズおよび画質の値は、リポジトリ内のノードのプロパティとして格納する必要があります。
ノード名はimage
です。
親ノードは、cq:page
リソースのjcr:content
ノードです。
画像のパスは、fileReference
というプロパティの値として格納します。
ページを作成する場合は、サイドキックを使用して画像を指定し、image
ノードをページのプロパティに追加します。
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)
})
このサーブレットは Property 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オブジェクトがこのimage
ノードから作成され、getFileReference
メソッドはイメージノードのfileReference
プロパティからイメージファイルへのパスを返します。
com.day.cq.commons.DownloadResourceクラスは、getFileReferenceメソッドを提供します。
AEMを使用すると、流体グリッドを効率的かつ効果的に実装できます。このページでは、流体グリッドまたは既存のグリッド実装(Bootstrapなど)をAEMアプリケーションに統合する方法を説明します。
可変グリッドについて詳しくない場合は、このページの下部にある可変グリッドの概要を参照してください。この概要では、可変グリッドの概要を説明し、その設計方法についてアドバイスしています。
ページコンポーネントを使用して、ページのコンテンツブロックを定義する HTML 要素を生成します。ページが参照する ClientLibraryFolder には、コンテンツブロックのレイアウトを制御する CSS が含まれています。
例えば、サンプルのgeometrixx-mediaアプリケーションにはmedia-homeコンポーネントが含まれています。 このページコンポーネントは2つのスクリプトを挿入します。このスクリプトは、クラスrow-fluid
のdiv
要素を2つ生成します。
最初の行には、クラス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>
コンポーネントにparsysコンポーネントを参照する複数のcq:include
要素が含まれる場合、各path
属性は異なる値を持つ必要があります。
geometrixx-mediaページコンポーネント(/etc/designs/geometrixx-media
)に関連付けられているデザインには、clientlibs
ClientLibraryFolderが含まれています。 このClientLibraryFolderは、row-fluid
クラス、span*
クラス、row-fluid
クラスの子であるspan*
クラスのCSSスタイルを定義します。 メディアクエリを使用すると、ビューポートサイズごとにスタイルを再定義できます。
次の例のCSSは、これらのスタイルのサブセットです。 このサブセットは、span12
、span8
、span4
の各クラスと、2つのビューポートサイズ用のメディアクエリに焦点を当てています。 CSSの次の特性に注意してください。
.span
スタイルは、絶対値を使用して要素の幅を定義します。.row-fluid .span*
スタイルは、親の中心として要素の幅を定義します。 パーセンテージは、幅の絶対数から計算します。Geometrixx Media サンプルでは、Bootstrap JavaScript フレームワークを、その可変グリッド実装に統合しています。Bootstrap フレームワークは bootstrap.css ファイルを提供します。
/* 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 スクリプトを作成します。例えば、記事のcontent.jsp
スクリプトとメディアホームコンポーネントは共に8x4col.jsp
スクリプトを参照します。
ターゲットの表示域サイズによる CSS スタイルの整理
異なる表示域サイズ用の CSS スタイルとメディアクエリを、それぞれ別のファイルに追加します。クライアントライブラリフォルダーを使用してこれらのファイルを連結します。
コンポーネントが 1 つのコンテンツブロックを生成する場合、一般に、そのページコンポーネントが構築するグリッドがコンテンツの配置を制御します。
作成者は、コンテンツブロックが様々なサイズや相対位置でレンダリングされる可能性があることを意識する必要があります。コンテンツのテキストでは、他のコンテンツブロックを指すために相対方向を使用しないようにしてください。
必要であれば、コンポーネントで、生成する HTML コード用に必要となる CSS または JavaScript ライブラリを提供してください。コンポーネント内のクライアントライブラリフォルダーを使用して、CSS および JS ファイルを生成します。ファイルにアクセスできるようにするには、/etc フォルダー内の別のクライアントライブラリフォルダー内で依存関係を作成するかライブラリを組み込みます。
サブグリッド
コンポーネントに複数のコンテンツブロックが含まれている場合は、コンテンツブロックを行の内部に追加して、ページ上にサブグリッドを構築します。
例えば、/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クライアントライブラリフォルダーも含まれます。
multi-col-article-summary
要素の div
クラスを使用して、ページの 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 テクノロジーを使用すれば、グリッドを実装して、ページレイアウトを異なる表示域サイズに合わせて変更するようにグリッドを操作できます。
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.
)。
row-fluid
など、行を表すdiv要素に対してCSSクラスを定義します。
コンテンツブロック要素のクラス名を定義します。可能なすべての幅に対して、列の範囲に関してクラスが必要です。 例えば、3列にまたがるdiv
要素にはspan3
クラスを使用し、4列の範囲にはspan4
クラスを使用します。 グリッド内の列数に応じてクラスを定義します。
ターゲットとする表示域サイズごとに、対応するメディアクエリを CSS ファイルに追加します。各メディアクエリに次の項目を追加します。
content
クラスのセレクター(例:.content{}
)。.span3{ }
)。row-fluid
クラスのセレクター(例:.row-fluid{ }
).row-fluid span3 { }
)。各セレクターに幅のスタイルを追加します。
content
セレクターの幅を、ページの絶対サイズに設定します(例:width:480px
)。(absolute width of page)/(number of columns)
..row-fluid .span
セレクターの幅を、全幅に対する割合で設定します。 (absolute span width)/(absolute page width)*100
式を使用してこの幅を計算します。.row-fluid
クラスのfloatスタイルを使用して、行内のコンテンツブロックを水平または垂直に配置するかどうかを制御します。
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 アプリケーションを使用してグリッドを実装できます。