Web ページのレスポンシブデザイン responsive-design-for-web-pages

Web ページが表示されるクライアントのビューポートに適応するように web ページをデザインします。レスポンシブデザインを使用すると、同じページを複数のデバイスで、縦、横の両方の向きで効果的に表示できます。以下の画像は、ビューポートサイズの変更に対するページの応答方法の例を示しています。

複数のウィンドウサイズと向きに適応可能な HTML5 ページを生成する Adobe Experience Manager（AEM）アプリケーションを開発します。例えば、次のようなビューポートの幅の範囲が、様々なデバイスタイプと向きに対応します。

レスポンシブデザインの動作の実装について詳しくは、次のトピックを参照してください。

デザインの際には、サイドキック ​を使用してページを様々なスクリーンサイズでプレビューします。

開発の前に before-you-develop

Web ページをサポートする AEM アプリケーションを開発する前に、デザインについていくつかの決定を行う必要があります。例えば、次の情報が必要になります。

アプリケーション構造 application-structure

以下のような一般的な AEM アプリケーション構造により、すべてのレスポンシブデザイン実装をサポートできます。

メディアクエリの使用 using-media-queries

メディアクエリによって、ページレンダリング用の CSS スタイルを選択的に使用できます。AEM 開発ツールおよび機能を使用すれば、アプリケーションでメディアクエリを効果的かつ効率的に実装できます。

W3C グループが、この CSS3 機能と構文について示した、メディアクエリに関するレコメンデーションを提供しています。

CSS ファイルの作成 creating-the-css-file

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 ページでのメディアクエリの使用 using-media-queries-with-aem-pages

ページコンポーネントの JSP スクリプトにクライアントライブラリフォルダーを含めます。これにより、メディアクエリを含む CSS ファイルを生成し、そのファイルを参照できます。

<ui:includeClientLib categories="apps.weretail.all"/>

この 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">

特定のデバイスのプレビュー previewing-for-specific-devices

異なるビューポートサイズでページのプレビューを参照して、レスポンシブデザインの動作をテストします。プレビュー ​モードでは、サイドキック ​に「デバイス」ドロップダウンメニューが表示されます。このドロップダウンメニューを使用して、デバイスを選択します。デバイスを選択すると、その表示域サイズに合わせてページが変更されます。

サイドキック ​でデバイスのプレビューを有効にするには、ページと MobileEmulatorProvider サービスを設定する必要があります。別のページ設定で、「デバイス」リストに表示されるデバイスのリストを制御します。

「デバイス」リストの追加 adding-the-devices-list

ページに​ デバイス ​リストをレンダリングする 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 ファイルを開きます。

シミュレーション用のページコンポーネントの登録 registering-page-components-for-simulation

デバイスシミュレーターを有効にしてページで使用できるようにするには、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) ノードを作成するには、次のように設定します。

次のノードプロパティを追加します。

デバイスグループの指定 specifying-the-device-groups

「デバイス」リストに表示されるデバイスグループを指定するには、cq:deviceGroups プロパティをサイトのルートページの jcr:content ノードに追加します。プロパティの値は、デバイスグループノードへのパスの配列です。

デバイスグループノードは /etc/mobile/groups フォルダー内にあります。

例えば、Geometrixx Media サイトのルートページは /content/geometrixx-media です。/content/geometrixx-media/jcr:content ノードには次のプロパティがあります。

デバイスグループを作成および編集するには、ツールコンソールを使用します。

アダプティブ画像の使用 using-adaptive-images

メディアクエリを使用して、ページに表示する画像リソースを選択できます。ただし、使用条件の設定にメディアクエリを使用しているすべてのリソースがクライアントにダウンロードされます。メディアクエリは、ダウンロードされたリソースが表示されるかどうかを決定するものに過ぎません。

画像などの大きいリソースの場合、すべてのリソースをダウンロードするとなると、クライアントのデータパイプラインを効率的に使用しているとは言えません。リソースを選択的にダウンロードするには、JavaScript を使用してリソースリクエストを開始してから、メディアクエリでリソースの選択を実行するようにします。

次の方法では、メディアクエリを使用して選択されたリソースが 1 つだけ読み込まれます。

JavaScript を使用したメディアクエリの評価 evaluating-media-queries-using-javascript

W3C により定義されている MediaQueryList インターフェイスの実装では、JavaScript を使用してメディアクエリを評価できます。メディアクエリの結果にロジックを適用して、現在のウィンドウ用にターゲットされたスクリプトを実行できます。

メディア特有のリソースの選択 selecting-media-specific-resources

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 でのアダプティブ画像の実装 implementing-adaptive-images-in-aem

AEM アプリケーションでアダプティブ画像を実装するには、必要な JavaScript ライブラリを追加し、ページに必要な HTML マークアップを含める必要があります。

ライブラリ

次の JavaScript ライブラリを取得し、クライアントライブラリフォルダーに格納します。

ヒント： ​複数のクライアントライブラリフォルダーは、埋め込みをすることによって自動的に連結できます。

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>

AEM の画像レンダリングについて understanding-image-rendering-in-aem

画像レンダリングをカスタマイズするには、静的画像レンダリングの 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">

ブラウザーがページを読み込むときに、src 属性の値を URL として使用して画像をリクエストします。Sling によりこの URL が次のように分解されます。

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
ファイルを開いてください。

現在の表示域サイズに合わせた画像の拡大／縮小 scaling-images-for-the-current-viewport-size

クライアントのビューポートの特性に合わせて画像を実行時に拡大縮小し、レスポンシブデザインの原則に従った画像を配信します。静的画像レンダリングと同じ、サーブレットとオーサリングコンポーネントによるデザインパターンを使用します。

コンポーネントは次のタスクを実行する必要があります。

画像リクエストを処理するサーブレットは、次のタスクを実行する必要があります。

利用できるソリューション

AEM により、ユーザーが利用または拡張できる次の実装がインストールされます。

アダプティブ画像コンポーネントについて understanding-the-adaptive-image-component

アダプティブ画像コンポーネントは、デバイス画面に応じてサイズ変更される画像をレンダリングするためのアダプティブ画像コンポーネントサーブレットへの呼び出しを生成します。このコンポーネントには次のリソースが含まれています。

DIV 要素の追加 adding-the-div-elements

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>

画像サイズセレクターの変更 changing-the-image-size-selectors

アダプティブ画像コンポーネントをカスタマイズし、幅セレクターを変更する場合は、その幅をサポートするように Adaptive Image Component Servlet を設定する必要もあります。

アダプティブ画像コンポーネントサーブレットについて understanding-the-adaptive-image-component-servlet

アダプティブ画像コンポーネントサーブレットは、指定された幅に応じて JPEG 画像のサイズを変更し、JPEG 画質を設定します。

アダプティブ画像コンポーネントサーブレットのインターフェイス the-interface-of-the-adaptive-image-component-servlet

アダプティブ画像コンポーネントサーブレットは、デフォルトの Sling サーブレットにバインドされ、.jpg、.jpeg、.gif および .png ファイル拡張子をサポートします。このサーブレットのセレクターは img です。

そのため、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 の設定を参照してください。

実装の詳細 implementation-details

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 オブジェクトに返します。

AdaptiveImageComponentServlet クラスは、createLayer メソッドをオーバーライドします。このメソッドは、ImageContext オブジェクトから画像リソースのパスとリクエストされた画像幅を取得します。その後、実際の画像の拡大／縮小を実行する info.geometrixx.commons.impl.AdaptiveImageHelper クラスのメソッドを呼び出します。

AdaptiveImageComponentServlet クラスは、writeLayer メソッドもオーバーライドします。このメソッドでは、JPEG 画質が画像に適用されます。

Image Reference Modification Servlet（Geometrixx Common） image-reference-modification-servlet-geometrixx-common

サンプルの Image Reference Modification Servlet は、web ページ上の画像の拡大縮小を行うために、img 要素のサイズ関連属性を生成します。

サーブレットの呼び出し calling-the-servlet

このサーブレットは 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 高さ）。

画質については、次の値がサポートされています。

AEM と連携する場合は、いくつかの方法でこのようなサービスの設定を管理できます。詳しくは、OSGi の設定を参照してください。

画像リソースの指定 specifying-the-image-resource

画像のパス、寸法および画質の値は、リポジトリ内のノードのプロパティとして格納する必要があります。

ページをオーサリングする際には、以下のように​ サイドキック ​を使用して画像を指定し、ページのプロパティに image ノードを追加します。

実装の詳細 implementation-details-1

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 プロパティから画像ファイルへのパスを返します。

可変グリッドの開発 developing-a-fluid-grid

AEM を使用すると、可変グリッドを効率的かつ効果的に実装できます。ここでは、新しく作成した可変グリッドや既存のグリッドの実装（Bootstrap など）を AEM アプリケーションに統合する方法について説明します。

可変グリッドについて詳しくない場合は、このページの下部にある可変グリッドの概要セクションを参照してください。この説明では、可変グリッドの概要と設計に関するガイダンスが示されています。

ページコンポーネントを使用したグリッドの定義 defining-the-grid-using-a-page-component

ページコンポーネントを使用して、ページのコンテンツブロックを定義する HTML 要素を生成します。ページが参照する ClientLibraryFolder には、コンテンツブロックのレイアウトを制御する CSS が含まれています。

例えば、サンプルの geometrixx-media アプリケーションには、media-home コンポーネントが含まれています。このページコンポーネントは、2 つのスクリプトを挿入します。これらは、row-fluid クラスの 2 つの div 要素を生成します。

<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>

ページコンポーネントグリッドの拡大縮小 scaling-the-page-component-grid

geometrixx-media ページコンポーネントに関連付けられているデザイン（/etc/designs/geometrixx-media）には、clientlibs ClientLibraryFolder が含まれます。この ClientLibraryFolder は、row-fluid クラスの子である row-fluid クラス、span* クラス、span* クラスの CSS スタイルを定義します。メディアクエリを使用すると、異なる表示域サイズに合わせてスタイルを再定義できます。

次の CSS の例は、これらのスタイルのサブセットです。このサブセットでは、 span12、span8 および span4 の各クラスのほか、2 つの表示域サイズ用のメディアクエリを重点的に取り上げています。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% }
}

ページコンテンツグリッド内のコンテンツの再配置 repositioning-content-in-the-page-component-grid

Geometrixx Media アプリケーションのサンプルのページにおいて、幅の広いビューポートでは、コンテンツブロックの行が水平方向に配置されます。小さなビューポートでは、同じブロックが垂直方向に配置されます。次の CSS の例は、media-home ページコンポーネントが生成する HTML コードに対してこの動作を実装するスタイルを示しています。

/* 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%;
    }
}

ページコンポーネントのモジュール化 tip-modularize-your-page-components

コンポーネントをモジュール化すると、コードを効率的に使用できるようになります。サイトでは、ようこそページ、記事ページ、製品ページなどの、様々なタイプのページを使用している場合があります。ページのタイプごとに異なるタイプのコンテンツが含まれており、異なるレイアウトが使用されている可能性があります。ただし、各レイアウトの特定の要素が複数のページで共通している場合は、レイアウトの共通部分を実装するコードを再利用できます。

ページコンポーネントのオーバーレイの使用

ページの各部分（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 スタイルとメディアクエリを、別々のファイルに含めます。クライアントライブラリフォルダーを使用して連結します。

ページグリッドへのコンポーネントの挿入 inserting-components-into-the-page-grid

コンポーネントがコンテンツの単一ブロックを生成する場合、通常は、ページコンポーネントが作成するグリッドがコンテンツの配置を制御します。

作成者は、コンテンツブロックを様々なサイズや相対位置でレンダリングできます。コンテンツテキストでは、他のコンテンツブロックを参照する相対方向を使用しないでください。

必要に応じて、コンポーネントは、生成される 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 クライアントライブラリフォルダーも含まれます。

例えば、以下のスタイルは /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;
    }
}

可変グリッドの概要 introduction-to-fluid-grids

可変グリッドを使用すると、ページレイアウトをクライアントの表示域のサイズに合わせて調整できます。グリッドは、ページ上にコンテンツのブロックを配置する論理列と行で構成されます。

HTML5 テクノロジーを使用すると、グリッドを実装し、グリッドを操作して、ページレイアウトを様々な表示域サイズに調整することができます。

離散型の幅の使用 using-discrete-widths

ターゲットにしている表示域の幅の各範囲について、静的なページ幅と、一定の幅を持つコンテンツブロックを使用します。ブラウザーウィンドウのサイズを手動で変更すると、離散型のウィンドウ幅（ブレークポイントとも呼ばれます）それぞれでコンテンツサイズが変更されます。したがって、ページデザインはより密接に結び付き、ユーザーエクスペリエンスを最大限に高めます。

グリッドの拡大縮小 scaling-the-grid

グリッドを使用して、異なる表示域サイズに合わせてコンテンツブロックを拡大縮小します。コンテンツブロックは特定の数の列にまたがります。ビューポートのサイズに応じて、列の幅が増減するとコンテンツブロックの幅もそれに応じて増減します。拡大縮小では、コンテンツブロックを隣り合わせで配置できる十分な幅を持つ大規模から中規模のビューポートがサポートされます。

グリッド内のコンテンツの再配置 repositioning-content-in-the-grid

コンテンツブロックのサイズは、幅の最小値によって制限され、その幅未満になると、拡大縮小は実行されません。小さいビューポートの場合、コンテンツブロックを水平方向ではなく垂直方向に広げるためにグリッドを使用できます。

グリッドのデザイン designing-the-grid

ページ上にコンテンツブロックを配置するために必要になる列と行を決定します。ページレイアウトによって、グリッドにまたがる列と行の数が決まります。

列数

すべてのビューポートのサイズに対して、すべてのレイアウトでコンテンツブロックを水平方向に配置するのに十分な列を含めます。現在必要な列よりも多くの列を使用しておくと、今後のページデザインにも対応することができます。

行のコンテンツ

行を使用して、コンテンツブロックの垂直方向の位置を制御します。同じ行を共有するコンテンツブロックを次のように決定します。

グリッドの実装 grid-implementations

CSS クラスとスタイルを作成して、ページ上のコンテンツブロックのレイアウトを制御できるようにします。多くの場合、ページデザインは、ビューポート内のコンテンツブロックの相対的なサイズと位置に基づいています。ビューポートによって、コンテンツブロックの実際のサイズが決まります。CSS では、相対サイズと絶対サイズを考慮する必要があります。可変グリッドの実装には、次の 3 種類の CSS クラスを使用できます。

ターゲットとなるビューポートの幅（およびその関連するメディアクエリ）によって、ページレイアウトに使用される離散型の幅が決まります。

コンテンツブロックの幅 widths-of-content-blocks

通常、コンテンツブロッククラスの 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 スタイルを開発するための出発点として、次のアルゴリズムを使用します。

行内のコンテンツブロックの配置 positioning-content-blocks-in-rows

.row-fluid クラスの浮動小数スタイルを使用すると、行内のコンテンツブロックを水平方向に配置するか垂直方向に配置するかを制御できます。

各メディアクエリ内の .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
   }
}

コンテンツブロックへのクラスの割り当て assigning-classes-to-content-blocks

ターゲットとしているそれぞれのビューポートサイズのページレイアウトに対して、各コンテンツブロックがまたがる列数を決定します。次に、それぞれのコンテンツブロックの div 要素で使用するクラスを決定します。

このような div クラスを確立したら、AEM アプリケーションを使用してグリッドを実装できます。