3 レスポンシブ・アプリケーションの設計
Oracle JETおよびレスポンシブ・デザイン
レスポンシブ・デザインでは、流動的なグリッド、スケーラブルなイメージおよびメディア・クエリーを使用してメディア・タイプに基づいて別のレイアウトを表示するデザイン概念が記述されます。レスポンシブ・デザインを使用すると、小型の電話からワイド画面のデスクトップまで、広範囲のデバイス上で魅力的な外観になるようOracle JETアプリケーションを構成できます。
Oracle JETには、フレキシブル・ボックス・レイアウトをサポートするクラスが含まれています。フレックス・レイアウトで、任意の方向にフレックス・コンテナの子をレイアウトでき、子は、未使用の領域を埋めるために拡大するか、または親がオーバーフローしないように縮小します。ボックスをネスト(たとえば、垂直内に水平または水平内に垂直)して、二次元のレイアウトを作成することもできます。
また、Oracle JETには、小、中、大および特大の画面またはデバイス用のスタイルが組み込まれている12列グリッド・システムおよびフォーム・レイアウトのクラスも用意されており、これをフレックス・レイアウトのクラスとともに使用すると、アプリケーションのレイアウトをさらに詳細に制御できます。グリッド・システムおよびフォームのクラスでは、画面またはデバイスの幅に基づいてスタイルを設定するためのメディア・クエリーが使用され、これらを使用すると、ユーザーのニーズに基づいてページ・レイアウトをカスタマイズできます。
さらに、メディア・クエリーによって、画面の幅に基づいてコンテンツの表示または非表示、テキストの位置揃えまたはコンテンツのフロートを実行するレスポンシブ・ヘルパー・クラスの基礎が形成されます。これらは、画面の幅に基づいてコンテンツを条件に応じてロードする、またはコンポーネントのオプションを設定するレスポンシブJavaScriptの基礎でもあります。
メディア・クエリー
CSS3メディア・クエリーでは、対応するスタイル・ルールが適用されるケースを定義するために、@media @ルール、メディア・タイプ、およびtrueまたはfalseに評価される式が使用されます。メディア・クエリーによって、Oracle JETのレスポンシブ・クラスの基礎が形成されます。
<style>
@media media_types (expression){
/* media-specific rules */
}
</style>
CSS3仕様ではいくつかのメディア・タイプが定義されていますが、特定のブラウザですべてのメディア・タイプが実装されていない場合があります。メディア・タイプはオプションで、指定しない場合はすべてのタイプに適用されます。次のメディア・クエリーでは、画面幅が767ピクセルより広い場合にのみサイドバーが表示されます。
@media (max-width: 767px){
.facet_sidebar {
display: none;
}
}
Oracle JETでは、Oracle JETに付属するテーマの画面の幅を定義するための、CSS3メディア・クエリーおよびスタイル・クラスのカスタム・プロパティが定義されています。
| 幅およびカスタム・プロパティ名 | Redwoodテーマ: デフォルト範囲(ピクセル単位) | デバイスの例 |
|---|---|---|
|
小
|
0-599 |
電話 |
|
中
|
600-1023 |
タブレット縦 |
|
大
|
1024-1439 |
タブレット横、デスクトップ |
|
特大
|
1440以上 |
大きいデスクトップ |
印刷の場合、Oracle JETでは、ランドスケープ・モードでの印刷には大画面のレイアウト、ポートレート・モードでの印刷には中画面のレイアウトが使用されます。
Oracle JETのサイズのデフォルトおよびメディア・クエリーは、site_root/scss/oj/17.1.0/common/_oj.common.variables.scssに含まれているSass変数で定義され、グリッド、フォームおよびレスポンシブ・ヘルパー・スタイルのクラスで使用されます。次のコード・サンプルは、レスポンシブ画面幅変数、およびレスポンシブ・メディア・クエリーのサブセットを示しています。ほとんどの場合デフォルトで十分ですが、必要な場合は、アプリケーションの変数の変更方法を示す追加のコメントについて、必ずファイルを確認してください。
// responsive screen widths
$screenSmallRange: 0, 767px !default;
$screenMediumRange: 768px, 1023px !default;
$screenLargeRange: 1024px, 1280px !default;
$screenXlargeRange: 1281px, null !default;
// responsive media queries
$responsiveQuerySmallUp: "print, screen" !default;
$responsiveQuerySmallOnly: "screen and (max-width: #{upper-bound($screenSmallRange)})" !default;
$responsiveQueryMediumUp: "print, screen and (min-width: #{lower-bound($screenMediumRange)})" !default;
$responsiveQueryMediumOnly: "print and (orientation: portrait), screen and (min-width: #{lower-bound($screenMediumRange)}) and (max-width: #{upper-bound($screenMediumRange)})" !default;
$responsiveQueryMediumDown: "print and (orientation: portrait), screen and (max-width: #{upper-bound($screenMediumRange)})" !default;
$responsiveQueryLargeUp: "print and (orientation: landscape), screen and (min-width: #{lower-bound($screenLargeRange)})" !default;
$responsiveQueryLargeOnly: "print and (orientation: landscape), screen and (min-width: #{lower-bound($screenLargeRange)}) and (max-width: #{upper-bound($screenLargeRange)})" !default;
$responsiveQueryLargeDown: "print and (orientation: landscape), screen and (max-width: #{upper-bound($screenLargeRange)})" !default;
$responsiveQueryXlargeUp: "screen and (min-width: #{lower-bound($screenXlargeRange)})" !default;
$responsiveQueryXlargeOnly: null !default;
$responsiveQueryXlargeDown: null !default;
$responsiveQueryXXlargeUp: null !default;
$responsiveQueryPrint: null !default;レスポンシブ・メディア・クエリーは、$screen{size}Range変数および範囲修飾子に定義されている画面幅に基づいています。たとえば:
-
$responsiveQuerySmallUpは$screenSmallRange以上の幅があるすべての画面に適用されます。 -
$responsiveQuerySmallOnlyは$screenSmallRangeの画面のみに適用されます。 -
$responsiveQueryXlargeDownは$screenXlargeRange以下の幅のすべての画面に適用されます。
Oracle JETによるSassおよびテーマ適用の使用方法の詳細は、「Oracle JETアプリケーションでのCSSおよびテーマの使用」を参照してください。
CSS3メディア・クエリーの詳細は、https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queriesおよびhttp://www.w3.org/TR/css3-mediaqueriesを参照してください。
Oracle JETのフレックス、グリッド、フォームおよびレスポンシブ・ヘルパー・クラスの命名規則
Oracle JETのフレックス、フォーム、グリッドおよびレスポンシブ・スタイルのクラスでは同じ命名規則が使用されます。これは、そのクラスが表すスタイル・サイズ、機能および列数の識別に役立ちます。
各クラスは、次に示す同じ形式に従います。
oj-size-function-[1-12]columns
サイズは、sm、md、lg、xlおよびprintのいずれかで、メディア・クエリーで説明されているメディア・クエリーに基づいています。Oracle JETでは、functionがonlyと定義されていないかぎり、スタイルは、指定したサイズとそれより大きいサイズに適用されます。たとえば:
-
oj-lg-hideでは、大画面および特大画面でコンテンツが非表示になります。 -
oj-md-only-hideでは、中画面でコンテンツが非表示になります。スタイルは他の画面サイズには効果がありません。
Oracle JETでのレスポンシブ・デザインに使用可能なクラスのサマリーは、Oracle® JavaScript Extension Toolkit (JET)スタイル参照にあります。
Oracle JETのフレックス・レイアウト
Oracle JETのoj-flexおよびoj-flex-itemクラスを使用して、CSSフレキシブル・ボックス・レイアウト・モデルに基づいたフレキシブル・ボックス・レイアウトを作成します。
フレックス・レイアウト・モデルで、任意の方向または順序でレイアウトできる子を含むフレックス・コンテナを作成します。使用可能な未使用領域が拡大または縮小すると、子は、未使用領域を埋めるために拡大するか、または親がオーバーフローしないように縮小します。
基本的なフレックス・レイアウトを作成するには、oj-flexクラスをコンテナ要素(たとえば HTML div)に追加した後、oj-flex-itemクラスをコンテナの各子に追加します。
次の図は、Oracle JETフレックス・ボックス・スタイルを使用したデフォルト・フレックス・レイアウトの例を示しています。サンプルには、2つのフレックス・コンテナが含まれ、それぞれに3つの子が含まれています。画面サイズが広がると、フレックス・コンテナでは、各子に未使用領域が割り当てられます。画面サイズがいずれかのフレックス・アイテムの幅より狭くなると、フレックス・コンテナでは、最大表示幅より広くならないように、必要に応じてそのアイテムのコンテンツが折り返されます。この例では、結果としてFの子が次の行に折り返されます。
次に、このフレックス・レイアウトのマークアップを、フレックス・レイアウト・クラスを太字で強調表示して示します。demo-flex-displayクラスでは、色、フォントの太さ、高さおよびレイアウト内の各フレックス・アイテムを囲む枠線が設定されます。
<div id="container">
<div class="demo-flex-display">
<div class="oj-flex">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
</div>
<div class="oj-flex">
<div class="oj-flex-item">D</div>
<div class="oj-flex-item">E</div>
<div class="oj-flex-item">F - This child has more text to show the effect of unequal content.</div>
</div>
</div>
</div>フレックス・レイアウト・スタイル設定および次に説明するスタイルを使用して、フレックス・レイアウトをカスタマイズできます。
flexプロパティの変更について
Oracle JETには、レスポンシブ・レイアウトのプロパティの変更に使用するレイアウト・クラスが用意されています。
Oracle JETレイアウト・クラスは、CSSフレキシブル・ボックス・レイアウト・モジュールに基づいており、このモジュールでは、フレックス・アイテムのサイズ設定に対するCSSフレックスの一般値が定義されています。デフォルトでは、Oracle JETのフレックス・レイアウトはauto CSSフレックス・プロパティに設定され、レスポンシブ・レイアウトのために必要に応じてフレックス・アイテムを縮小または拡大できます。ただし、CSSモデルでは、デフォルトのflexプロパティがinitialに設定され、フレックス・アイテムを縮小できますが拡大はできません。
同じ結果を得るには、oj-sm-flex-items-initialクラスをフレックス・コンテナに追加して、すべての子フレックス・アイテムのフレックス・プロパティをinitialに設定するか、またはoj-sm-flex-initialクラスを個々のフレックス・アイテムに追加して、そのプロパティをinitialに設定します。次の図は結果を示しています。
次のコード・サンプルは、マークアップを示しています。この例では、oj-flex-items-padクラスを親コンテナで使用して、コンテンツにパディングも追加されます。
<div id="container">
<div class="demo-flex-display oj-flex-items-pad">
<div class="oj-flex oj-sm-flex-items-initial">
<div class="oj-flex-item">A</div>
<div class="oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
</div>
<div class="oj-flex">
<div class="oj-flex-item">A</div>
<div class="oj-sm-flex-initial oj-flex-item">B</div>
<div class="oj-flex-item">C</div>
</div>
</div>
</div>また、フレックス・コンテナでoj-size-flex-items-1クラスを使用することによって、デフォルトのautoフレックス・プロパティをオーバーライドすることもできます。このクラスでは、flexプロパティが1に設定され、画面サイズがsize以上のフレックス・コンテナのすべてのフレックス・アイテムの幅が、アイテムのコンテンツに関係なく同じになります。
個々のフレックス・アイテムでフレックス・プロパティを1に設定するには、そのフレックス・アイテムにoj-sm-flex-1を追加します。Oracle JETクックブックのフレックス・レイアウトの項には、この項で使用されている例が含まれており、フレックス・レイアウトのレスポンシブ動作を観察するために使用および変更できます。
フレックス・レイアウトでのコンテンツの折返しについて
oj-sm-flex-nowrapをoj-flexコンテナに追加すると、flex-wrapプロパティをnowrapに設定できます。
デフォルトでは、Oracle JETではCSS flex-wrapプロパティがwrapに設定され、フレックス・コンテナは複数行に設定されます。画面幅がフレックス・アイテムのコンテンツの幅より狭くなると、子フレックス・アイテムではコンテンツが追加の行に折り返されます。ただし、CSSモデルではflex-wrapプロパティはnowrapに設定され、フレックス・コンテナは単一行に設定されます。子アイテムのコンテンツの幅が広すぎて画面に収まらない場合、コンテンツは子内で折り返されます。
次の図は、flex-wrapプロパティをnowrapに変更した結果を示しています。
フレックス・レイアウトのカスタマイズについて
適切なスタイルをフレックス・コンテナまたは子に追加すると、Oracle JETフレックス・レイアウトをカスタマイズできます。フレックス・レイアウト・クラスでは、よく使用されるいくつかの値がサポートされています。
-
flex-direction -
align-items -
align-self -
justify-content -
order
Oracle JETクックブックのフレックス・レイアウトに、フレックス・レイアウトをカスタマイズするための例があります。
Oracle JETのグリッド
Oracle JETのグリッド・クラスをフレックス・レイアウトとともに使用して、ユーザーの画面の幅に基づいて列の数と幅が変化するグリッドを作成します。
Oracle JETクックブックのレスポンシブ・グリッドの項では、Oracle JETのグリッド・システムを使用するための例とレシピがいくつか提供されており、グリッド・システムに慣れるためにこれらを確認してください。
グリッド・システムについて
Oracle JETには、レスポンシブ・デザインに使用できる、12列レスポンシブ・モバイル・ファースト・グリッド・システムが用意されています。グリッドはOracle JETのフレックス・レイアウト上に構築され、小、中、大および特大の各画面用のサイズ設定クラスを使用して、各フレックス・アイテムの幅を指定できます。
たとえば、グリッド・クラスを使用すると、画面サイズが変わった場合に、フレックス・レイアウトの自動の例のデフォルト表示を、フレックス・アイテムごとに異なる幅を使用するように変更できます。次の図に示すように、フレックス・レイアウトでは、デフォルトで、画面サイズに関係なく未使用領域が3つのフレックス・アイテムに均等に割り当てられます。
グリッド・クラスは、Oracle JETのフレックス、グリッド、フォームおよびレスポンシブ・ヘルパー・クラスの命名規則に従います。oj-size-numberofcolumnsを使用して、画面が指定したsize以上の場合に、指定したnumberofcolumnsに幅を設定します。たとえば:
-
oj-sm-6は、すべての画面サイズで機能し、幅が6列に設定されます。 -
oj-lg-3は、大画面および特大画面で幅が3列に設定されます。 -
同じフレックス・アイテムで
oj-sm-6とoj-lg-3を指定すると、小画面と中画面で幅が6列の幅に設定され、大画面と特大画面で3列の幅に設定されます。
最小画面サイズ用を最初に設計した後で、必要に応じて、より大きい画面用にカスタマイズします。さらに、いずれかのグリッド・コンビニエンス・クラスを追加するか、または「レスポンシブ・ヘルパー・クラスの使用」で説明されているいずれかのレスポンシブ・ヘルパー・クラスを使用すると、グリッドをさらにカスタマイズできます。
次のコード・サンプルは、中、大および特大の各画面用のグリッド・クラスを定義した、変更済フレックス自動レイアウト表示のマークアップを示しています。
<div class="oj-flex">
<div class="oj-md-6 oj-lg-2 oj-xl-8 oj-flex-item">A</div>
<div class="oj-md-3 oj-lg-4 oj-xl-2 oj-flex-item">B</div>
<div class="oj-md-3 oj-lg-6 oj-xl-2 oj-flex-item">C</div>
</div>
画面サイズが小の場合は、フレックス・レイアウトのデフォルト・スタイルが使用され、各アイテムで同じ量の領域が使用されます。画面サイズが中の場合は、Aのフレックス・アイテムで6列、BおよびCのフレックス・アイテムでそれぞれ3列が使用されます。画面サイズが大の場合は、Aのフレックス・アイテムで2列、Bのフレックス・アイテムで4列、Cのフレックス・アイテムで6列が使用されます。最後に、画面サイズが特大の場合は、Aのフレックス・アイテムで8列、BおよびCのフレックス・アイテムでそれぞれ2列が使用されます。
グリッド・システムの使用方法を示す完全な例は、レスポンシブ・グリッドを参照してください。
グリッド・システムおよび印刷
Oracle JETグリッド・システムでは、ランドスケープ・モードの印刷には大のスタイル、ポートレート・モードの印刷には中のスタイルが適用されます(これらが定義されている場合)。デフォルトを使用するか、印刷スタイルのクラスを使用して印刷をカスタマイズできます。
次のグリッドの例では、行2と行4にoj-md-*スタイル・クラスが含まれています。行3および行4には、行内のすべての列に対してoj-lg-4スタイルが含まれています。
<div class="demo-grid-sizes demo-flex-display">
<div class="oj-flex oj-flex-items-pad">
<div class="oj-sm-9 oj-flex-item"></div>
<div class="oj-sm-3 oj-flex-item"></div>
</div>
<div class="oj-flex oj-flex-items-pad">
<div class="oj-sm-6 oj-md-9 oj-flex-item"></div>
<div class="oj-sm-6 oj-md-3 oj-flex-item"></div>
</div>
<div class="oj-flex oj-flex-items-pad">
<div class="oj-sm-6 oj-lg-4 oj-flex-item"></div>
<div class="oj-sm-4 oj-lg-4 oj-flex-item"></div>
<div class="oj-sm-2 oj-lg-4 oj-flex-item"></div>
</div>
<div class="oj-flex oj-flex-items-pad ">
<div class="oj-sm-8 oj-md-6 oj-lg-4 oj-xl-2 oj-flex-item"></div>
<div class="oj-sm-2 oj-md-3 oj-lg-4 oj-xl-8 oj-flex-item"></div>
<div class="oj-sm-2 oj-md-3 oj-lg-4 oj-xl-2 oj-flex-item"></div>
</div>
</div>
次の印刷プレビューで示されているように、このグリッドをランドスケープ・モードで印刷する場合は、行3と行4にoj-lg-4スタイル・クラスが適用されます。グリッドをポートレート・モードで印刷する場合は、行2と行4にoj-md-*スタイル・クラスが適用されます。
印刷のデフォルトを変更する場合は、カスタム設定ファイルでSass $responsiveQueryPrint変数をprintに設定できます。印刷クラスを有効にした後で、oj-print-numberofcolumnsスタイル・クラスを列の定義に追加できます。この結果、印刷目的の場合にのみ列サイズが変更されます。次の例で、行1には、行の各列に対してoj-print-6クラスが含まれています。
<div class="oj-flex oj-flex-items-pad"> <div class="oj-sm-9oj-print-6oj-flex-item"></div> <div class="oj-sm-3oj-print-6oj-flex-item"></div> </div>
標準モードでは、行1には2列が含まれ、画面サイズに関係なく、1列はサイズ9でもう1列はサイズ3です、しかし、印刷プレビューを実行すると、行1は、ポートレート・モードとランドスケープ・モードで、2つの列が両方ともサイズ6で印刷されます。
グリッド・コンビニエンス・クラス
Oracle JETのグリッド・システムには、指定した幅での2列および4列のレイアウトの作成を容易にするコンビニエンス・クラスが含まれています。
-
oj-size-odd-cols-numberofcolumns: 2列レイアウトで使用します。サイズ設定クラスをすべての列に設定するかわりに、フレックスの親に単一のクラスを設定できます。列数によって、12列の中で奇数番号の列で使用できる数が指定されます。2列レイアウトでは、偶数番号列で残りの列数が使用されます。たとえば、フレックスの親に
oj-md-odd-cols-4を設定すると、中サイズ以上の画面でグリッドのすべての行に対して、奇数列(col1)の幅は4に設定され、偶数列(col2)の幅は8に設定されます。次のコード・サンプルは、図のレンダリングに使用されるグリッド構成を示しています。例では、小画面で奇数列の幅が12に設定され、
col2が新しい行に表示されるoj-sm-odd-cols-12も設定されています。<div class="oj-md-odd-cols-4 oj-flex-items-pad"> <div class="oj-flex"> <div class="oj-flex-item">col 1</div> <div class="oj-flex-item">col 2</div> </div> <div class="oj-flex"> <div class="oj-flex-item">col 1</div> <div class="oj-flex-item">col 2</div> </div> <div class="oj-flex"> <div class="oj-flex-item">col 1</div> <div class="oj-flex-item">col 2</div> </div> </div>各フレックス・アイテムで最初の列の幅に対して
oj-md-4を定義し、2番目の列の幅に対してoj-md-8を定義すると、同じ結果を得ることができます。<div class="oj-flex-items-pad" <div class="oj-flex"> <div class="oj-sm-12 oj-md-4 oj-flex-item">col 1</div> <div class="oj-sm-12 oj-md-8 oj-flex-item">col 2</div> </div> <div class="oj-flex"> <div class="oj-sm-12 oj-md-4 oj-flex-item">col 1</div> <div class="oj-sm-12 oj-md-8 oj-flex-item">col 2</div> </div> <div class="oj-flex"> <div class="oj-sm-12 oj-md-4 oj-flex-item">col 1</div> <div class="oj-sm-12 oj-md-8 oj-flex-item">col 2</div> </div> </div>oj-size-even-cols-numberofcolumns: 4列レイアウトで使用します。このレイアウトでは、奇数番号列の幅を制御するodd-colsクラスと、偶数列の幅を制御するeven-colsクラスの両方を使用する必要があります。たとえば、フレックスの親に
oj-md-odd-cols-2とoj-md-even-cols-4を設定すると、1番目と3番目の列幅が2に設定され、2番目と4番目の列幅が4に設定されます。次のコード・サンプルは、図のレンダリングに使用されるグリッド構成を示しています。
<div class="oj-sm-odd-cols-12 oj-md-odd-cols-2 oj-md-even-cols-4 oj-flex-items-pad"> <div class="oj-flex"> <div class="oj-flex-item">col 1</div> <div class="oj-flex-item">col 2</div> <div class="oj-flex-item">col 3</div> <div class="oj-flex-item">col 4</div> </div> <div class="oj-flex"> <div class="oj-flex-item">col 1</div> <div class="oj-flex-item">col 2</div> <div class="oj-flex-item">col 3</div> <div class="oj-flex-item">col 4</div> </div> </div>
コンビニエンス・クラスを使用しない場合は、次に示すように、すべての行のすべての列にサイズ・クラスを定義する必要があります。
<div class="oj-flex-items-pad"> <div class="oj-flex"> <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 1</div> <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 2</div> <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 3</div> <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 4</div> </div> <div class="oj-flex"> <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 1</div> <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 2</div> <div class="oj-sm-odd-cols-12 oj-md-2 oj-flex-item">col 3</div> <div class="oj-sm-odd-cols-12 oj-md-4 oj-flex-item">col 4</div> </div> </div>
レスポンシブ・フォーム・レイアウト
Oracle JETには、ユーザーの画面のサイズに適応するフォーム・レイアウトの作成に使用できるoj-form-layoutコンポーネントが用意されています。oj-form-layoutコンポーネント内のoj-input-textおよびoj-text-areaカスタム要素を使用して、編成済レイアウトを作成します。
oj-form-layoutコンポーネントの詳細は、「フォーム・レイアウト」を参照してください。
アプリケーションへのレスポンシブ・デザインの追加
Oracle JETを使用してレスポンシブ・アプリケーションを作成するには、最初に最小デバイス用に設計し、その後で必要に応じて大きいデバイス用にカスタマイズします。適用可能なアプリケーション、フレックス、グリッド、フォームおよびレスポンシブ・クラスを追加して、デザインを実装します。
Oracle JETクラスを使用してレスポンシブ・アプリケーションを設計するには:
レスポンシブ・デザイン・クラスのリストは、Oracle® JavaScript Extension Toolkit (JET)スタイル参照に記載されているResponsive*クラスのリストを参照してください。
レスポンシブ・デザインを実装するOracle JETクックブックの例は、次を参照してください。
レスポンシブJavaScriptの使用
Oracle JETには、ResponsiveUtilsおよびResponsiveKnockoutUtilsユーティリティ・クラスが含まれており、これらのクラスでは、メディア・クエリーを利用して、ユーザーの画面サイズまたはデバイス・タイプに基づいてコンポーネントのvalueオプションを変更したり、コンテンツおよびイメージをロードします。
レスポンシブJavaScriptのクラス
ResponsiveUtilsおよびResponsiveKnockoutUtilsレスポンシブJavaScriptクラスには複数のメソッドが用意されており、これらをアプリケーションのJavaScriptで使用すると、現在の画面サイズを取得し、結果を使用してその画面サイズに基づいて処理を実行できます。さらに、ResponsiveUtilsには、2つの画面サイズの比較に使用できるメソッドもあり、画面サイズが変わった場合の処理の実行に役立ちます。
| JavaScriptのクラス | メソッド | 説明 |
|---|---|---|
|
|
|
2つの画面サイズ定数を比較します。第1引数が第2引数より小さい場合は負の整数、2つが等しい場合はゼロ、第1引数が第2引数より大きい場合は正の整数を返します。 画面サイズ定数によって、画面サイズ範囲メディア・クエリーが識別されます。たとえば、 |
|
|
|
フレームワーク問合せキー・パラメータに使用するメディア・クエリーを返します。 フレームワーク問合せキー定数は、Sassのレスポンシブ問合せ変数に対応します。たとえば、 |
|
|
|
メディア・クエリー文字列に基づいてtrueまたはfalseを返すKnockoutのobservableを作成します。たとえば、次のコードは、画面サイズの幅が400ピクセル以上の場合にtrueを返します。 var customQuery =
ResponsiveKnockoutUtils.createMediaQueryObservable(
'(min-width: 400px)'); |
|
|
|
その値が たとえば、小画面(0 - 767ピクセル)では、次のコードによって、 self.screenRange = ResponsiveKnockoutUtils.createScreenRangeObservable(); |
responsiveUtilsの詳細は、ResponsiveUtils APIドキュメントを参照してください。responsiveKnockoutUtilsの詳細は、ResponsiveKnockoutUtilsを参照してください。
画面サイズに基づいたカスタム要素の属性の変更
レスポンシブJavaScriptクラスを使用して、画面サイズに基づいてカスタム要素の属性の値を設定できます。たとえば、oj-button要素のdisplay属性を使用して、画面サイズが大きくなった場合にボタン・ラベルにテキストを追加できます。
この例では、oj-button要素のdisplay属性がアイコンに対して定義されています。次のコード・サンプルは、ボタンのマークアップを示しています。
<div id="optioncontainer">
<oj-button display="[[large() ? 'all' : 'icons']]">
<span slot='startIcon' class="oj-fwk-icon oj-fwk-icon-calendar"></span>
calendar
</oj-button>
</div>また、コード・サンプルでは、oj-button表示属性がallに設定され、large()メソッドがtrueを返した場合はラベルとアイコンの両方が表示され、large()メソッドがfalseを返した場合はアイコンのみが表示されます。
次のコード・サンプルは、large()の値を設定して、knockoutバインディングを完了するコードを示しています。この例では、lgQueryは、画面サイズが大以上の場合に適用されるLG_UPフレームワーク問合せキーに設定されます。this.largeは、ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery)のコールの結果として、最初はtrueに設定されます。画面が小さいサイズに変更されると、self.large値がfalseに変更され、display属性の値はiconsになります。
require(['knockout', 'ojs/ojbootstrap', 'ojs/ojresponsiveutils', 'ojs/ojresponsiveknockoututils', 'ojs/ojknockout', 'ojs/ojbutton'],
function(ko, Bootstrap, ResponsiveUtils, ResponsiveKnockoutUtils)
{
function MyModel(){
// observable for large screens
var lgQuery = ResponsiveUtils.getFrameworkQuery(
ResponsiveUtils.FRAMEWORK_QUERY_KEY.LG_UP);
this.large = ResponsiveKnockoutUtils.createMediaQueryObservable(lgQuery);
}
Bootstrap.whenDocumentReady().then(
function ()
{
ko.applyBindings(new MyModel(), document.getElementById('optioncontainer'));
}
);
});
Oracle JETクックブックには、この例の完全なコードが含まれており、その中には、画面サイズに応じたボタン・ラベルのテキストの変更に使用されるcomputed observableを示すデモが含まれています。また、カスタム・メディア・クエリーおよびKnockoutのcomputed observableの使用方法を示す例もあります。詳細は、レスポンシブJavaScriptフレームワーク問合せを参照してください。
画面サイズに基づいたコンテンツの条件に応じたロード
レスポンシブJavaScriptのクラスを使用すると、画面サイズに基づいてHTMLコンテンツを変更できます。たとえば、画面サイズが大の場合に、大きいフォントや異なる背景色を使用する場合があります。
この例では、HTMLコンテンツはKnockoutテンプレートで定義されています。マークアップでは、Knockoutのdata-bindユーティリティを使用して、large()コールで返される値に応じた名前のテンプレートが表示されます。画面が小または中の場合は、sm_md_templateが使用されます。画面が大以上の場合は、lg_xl_templateが使用されます。
<div id="sample_container">
<!-- large template -->
<script type="text/html" id="lg_xl_template">
<div id="lg_xl"
style="background-color:lavenderblush;
padding: 10px; font-size: 22px" >
This is the content in the <strong>lg/xl</strong> template.
</div>
</script>
<!-- small template -->
<script type="text/html" id="sm_md_template">
<div id="sm_md"
style="background-color:lightcyan;
padding: 10px; font-size: 10px" >
This is the content in the <strong>sm/md</strong> template.
</div>
</script>
<!-- display template -->
<div data-bind="template: {name: large() ? 'lg_xl_template' :
'sm_md_template'}"></div>
</div>
large()の値を設定するコードは、コンポーネント・オプションの変更を設定するために使用したコードと同じです。詳細は、「画面サイズに基づいたカスタム要素の属性の変更」を参照してください。
この例で使用されている完全なコードは、Oracle JETクックブックのJavaScriptを使用したレスポンシブのロードのデモを参照してください。
レスポンシブ・イメージの作成
レスポンシブJavaScriptクラスを使用すると、画面サイズが変更された場合に異なるイメージをロードできます。たとえば、画面サイズが小および中から大以上に変更された場合に、より大きいイメージをロードする場合があります。
この例では、イメージはHTMLのimg要素で定義されます。マークアップでは、 Oracle JETの属性バインディングを使用して、large()コールでtrueが返された場合に、より大きいイメージが表示されます。
<div id="container">
<p>current width:
<strong>
<span>
<oj-bind-text value="[[large() ? 'large' : 'not large']]"></oj-bind-text>
</span>
</strong>
</p>
<img alt="puzzle" id="puzzle"
:src="[[large() ? 'images/responsive/puzzle.png' : 'images/responsive/puzzle_small.png']]"
/>
</div>large()の値を設定するコードは、コンポーネント・オプションの変更を設定するために使用したコードと同じです。詳細は、「画面サイズに基づいたカスタム要素の属性の変更」を参照してください。
ノート:
イメージのロードは、JavaScriptがロードされるまで開始されません。これは、接続がより低速なデバイスで問題となる可能性があります。パフォーマンスが問題の場合は、「レスポンシブCSSイメージの作成」の説明に従ってレスポンシブCSSを使用できます。また、CSSまたはJavaScriptなしでレスポンシブ・イメージをサポートする、HTMLのpicture要素を使用することもできます。ただし、ブラウザ・サポートが限定されているため、使用中の環境で選択できない場合があります。
この例で使用されている完全なコードは、Oracle JETクックブックのレスポンシブ・イメージのデモを参照してください。
レスポンシブ・ヘルパー・クラスの使用
Oracle JETの汎用レスポンシブ・ユーティリティ・クラスを使用して、グリッドでのコンテンツの非表示、テキストの終端揃えおよびフロートの設定を実行します。
-
oj-size-hide: 指定したsizeでコンテンツを非表示にします。 -
oj-size-text-align-end: 左から右に記載する言語では、text-alignは右に設定されます。右から左に記載する言語では、text-alignは左に設定されます。 -
oj-size-float-end: 左から右に記載する言語では、floatは右に設定されます。右から左に記載する言語では、floatは左に設定されます。 -
oj-size-float-start: 左から右に記載する言語では、floatは左に設定されます。右から左に記載する言語では、floatは右に設定されます。
レスポンシブ・ヘルパー・クラスを実装する例を確認するには、Oracle JETクックブックのレスポンシブ・ヘルパーを参照してください。
レスポンシブCSSイメージの作成
Sassメディア・クエリー変数およびレスポンシブ・クエリーから生成されるCSSを使用して、画面の幅が小から大に変わった場合に、別の大きいイメージを使用します。
次のコードは、イメージを定義するマークアップを示しています。この例では、bulletlistは、Sassレスポンシブ変数およびメディア・クエリーから生成されたCSSクラスです。
<div role="img" class="oj-icon bulletlist" title="bulleted list image"></div>
次の図は、bulletlist CSSクラスを示しています。画面が小サイズまたは中サイズの場合、icon_small.pngイメージがロードされます。画面が大以上になるか、または印刷する場合は、かわりにicon.pngがロードされます。
Oracle JETクックブックには、bulletlist CSSクラスの生成に使用されるSass変数および問合せが含まれています。また、CSSの生成を簡単にするSassミックスインもありますが、レスポンシブCSSイメージを作成するためにSCSSを使用する必要はありません。
さらに、Oracle JETクックブックには、高解像度イメージ、スプライト、ボタン・イメージなどを表示する例が含まれています。詳細は、レスポンシブCSSイメージを参照してください。
ノート:
レスポンシブJavaScriptを使用すると、画面サイズに基づいてイメージを変更することもできます。詳細は、「レスポンシブ・イメージの作成」を参照してください。
デフォルト・フォント・サイズの変更
デフォルトでは、Oracle JETにはJETリリース9.0.0以降、ルート(html)要素にデフォルト・フォント・サイズ1em (16px)を設定するRedwoodテーマが含まれています。このフォント・サイズは、モバイル・デバイスでの視認性およびタッチ操作性に対して最適化されますが、アプリケーションの必要に応じてサイズをカスタマイズできます。
CSSのサイズおよび生成の制御
使用されないクラスまたは特定のタイプのクラスが圧縮、削除または除外されるか、生成されないようにすることにより、Oracle JETによって自動的に生成されるCSSコンテンツのサイズを変更できます。
レスポンシブ・フレームワーク・クラスを使用する場合、Oracle JETでは、必要のない可能性がある多数のクラスが生成されます。ここでは、CSSのサイズおよび生成を制御するために実行できる方法をいくつかのステップを示します。
-
圧縮の使用。
レスポンシブ・クラスは繰返しが多いため、圧縮率が高くなります。CSSの圧縮方法の詳細は、「Oracle JETアプリケーションのパフォーマンスの最適化」を参照してください。
-
未使用クラスの削除。
デフォルトで、Oracle JETでは、レスポンシブ・クラス小、中、大および特大の画面が生成されます。これらのクラスの一部をアプリケーションで使用しないことがわかっている場合は、関連付けられた
$responsiveQuery*変数をnoneに設定できます。// If you don't want xlarge classes, you could set: $screenXlargeRange: none; $responsiveQueryLargeOnly: none; $responsiveQueryXlargeUp: none;
-
アプリケーション・レイアウト、フレックス、グリッド、フォーム・レイアウトおよびレスポンシブ・ヘルパー・グループからの未使用クラスの除外。
次の変数を使用すると、これらのグループからクラスを完全に除外できます。
-
$includeAppLayoutClasses -
$includeAppLayoutWebClasses -
$includeFlexClasses -
$includeGridClasses -
$includeFormLayoutClasses -
$includeResponsiveHelperClasses
-
-
特定のレスポンシブ・ヘルパー・クラスの生成の停止。
詳細な制御のために、特定タイプのクラスの生成に対して
falseに設定できる追加の変数があります。変数 説明 $responsiveGenerateHide.oj-md-hideなどの非表示クラスを生成します。$responsiveGenerateTextAlignEnd.oj-md-text-align-endなどのテキストの終端揃えクラスを生成します。$responsiveGenerateFloatStart.oj-md-float-startなどのフロート開始クラスを生成します。$responsiveGenerateFloatEnd.oj-md-float-endなどのフロート終了クラスを生成します。