レスポンシブ・レイアウトの新しいソリューション - フュージョン・レスポンシブ・デザイン

この記事の知識

• レスポンシブデザインとアダプティブデザインの関連性と違い
• フュージョン・レスポンシブのコンセプト、実装のアイデア、ソースコードの例
• CCtalkでのレスポンシブデザインの実践

コンセプト：レスポンシブデザインの導入

JavaScriptとCSSを使ったメディアクエリは、レスポンシブデザインとアダプティブデザインの組み合わせで、ここではフュージョンレスポンシブデザインというキャッチーな名前をつけました。

技術的原則：

• JavaScript できるだけ判断しないでください
• CSSメディアクエリもブレークポイントをできるだけ少なくします。

UI効果

• ラップトップ、タブレット、スマートフォンで適切なUI効果を表示
• PC UI：ラップトップやその他のデバイスで見るための大画面効果
• モバイルUI：スマートフォン向け小画面エフェクト

しかし、ここではまだタブレットへの影響に漏れがあります。

以前であれば、iPad AirやiPad MiniはスマートフォンのMobile UIに分類されましたが、この2年間の新しいiPad Proの側面は、単にPC UIやMobile UIを表示するには理想的ではありませんでした。

• 中央に768pxのコンテンツしかないモバイルサイトのコンテンツを表示するiPad Pro
• PCサイトのコンテンツを表示するiPad Mini、右側は傍受されやすい

まず、UserAgentをベースとして使用できない理由から説明しましょう。

iPadにはiOSが搭載されており、そのUserAgentにはiPadという単語が含まれています。

Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/ (KHTML, like Gecko) Version/11.0 Mobile/f Safari/604.1 

iPad ProにはiPad OSが搭載されており、そのUserAgentは次のとおりです。

Mozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/ (KHTML, like Gecko) Version/ Safari/ 

MacBook ProのSafariブラウザのUserAgentは

Mozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/ (KHTML, like Gecko) Version/ Safari/ 

もちろん、今後も新しいデバイスが増えるでしょうから、UserAgentでデバイスを区別できるとは限りません。

• インチiPad Pro
• インチiPad Pro
• インチiPad Pro
• インチiPad Pro
• iPad
• iPad mini
• iPad Air
• ...

デバイスの横画面と縦画面、幅と高さの特性に応じて

主な判断基準

• デバイスが水平/垂直画面切り替えをサポートしているかどうか
• 最初にページに入ったときのデバイスの幅と高さ
• 横画面と縦画面を切り替えた後のデバイスの幅と高さ

次に、一般的な機器の表示は以下の通り：

• 一般的なノートパソコンは、最小アスペクト比1280x800で、PC UIを表示します。
• 一般的なスマートフォンの最大画面はiPhone 11 pro maxで、ウェブページの横幅と縦幅は414x896、現実は横向きでも縦向きでもMobile UIです。

上の表にあるように、タブレットは水平方向と垂直方向の切り替えをサポートしており、垂直方向の範囲は768、834、1024、水平方向の範囲は1024、1194、1366です。

最大の難関は、1024の幅でモバイルUIを表示するのか、PC UIを表示するのか、ということです。

ここでは、判定のブレークポイントを1040pxに変更することにしました。これは、最大幅が1024pxのデバイスがモバイルUIとみなされることを意味します。

レンダリング

モバイルUIとPC UIを区別するための完全な判定ロジックは以下の通りです：

1. 縦画面と横画面の両方でonorientation changeをサポートしていないノートパソコンは、PCとみなされます。

   • onRisizeを使用してページの幅と高さをリッスンしないでください。
   • また、ブラウザのドラッグが小さい場合、左右のスクロールをサポートします。

2. Mozilla/5.0 (Macintosh; Intel Mac OS X ) AppleWebKit/ (KHTML, like Gecko) Version/ Safari/ ページに入る際、縦画面では小さい方の値、横画面では大きい方の値で判断し、横幅が1040px以上の場合はPC、1040px未満の場合はモバイルと判別します。

3. 縦画面と横画面を切り替える場合は、手順2の判定を繰り返します。

備考

• window.innerWidth, window.innerHeight AndroidとiOSでは横画面と縦画面の切り替えに矛盾があるため、最大または最小で行う方が正確です。

ソースコードの例

import React from 'react' 
// JavaScript メディアお照会
const mqlMedia = window.matchMedia('(orientation: portrait)') 
function onMatchMediaChange(mql = window.matchMedia('(orientation: portrait)')) { 
 if (mql.matches) { 
 // 
 return 'portrait' 
 } else { 
 // 
 return 'horizontal' 
 } 
} 
// 現在のスクリーンモードを出力する
const getUiMode = (uiMode = '', mql) => { 
 if (uiMode) return uiMode 
 if (!('onorientationchange' in window)) return 'pc' 
 let status = onMatchMediaChange(mql) 
 let width = status === 'portrait' ? Math.min(window.innerWidth, window.innerHeight) : Math.max(window.innerWidth, window.innerHeight) 
 if (width > 1040) return 'pc' 
 return 'mobile' 
} 
const getIsPcMode = (uiMode) => uiMode === 'pc' 
/** 
 * UI パターン、判断ロジック
 * @export 
 * @param {*} Cmp 
 * @returns 
 */ 
export function withUiMode(Cmp, options = {}) { 
 return class WithUIRem extends React.Component { 
 constructor(props) { 
 super(props) 
 let uiMode = getUiMode() 
 let isPCMode = getIsPcMode(uiMode) 
 this.state = { 
 uiMode: uiMode, 
 isPCMode: isPCMode, 
 } 
 } 
 // 横画面と縦画面のリスニングを切り替える
 componentDidMount() { 
 mqlMedia.addListener(this.changeUiMode) 
 } 
 componentWillUnmount() { 
 mqlMedia.removeListener(this.changeUiMode) 
 } 
 changeUiMode = (mql) => { 
 let newUiMode = getUiMode('', mql) 
 if (newUiMode !== this.state.uiMode) { 
 this.setState({ 
 isPCMode: getIsPcMode(newUiMode), 
 uiMode: newUiMode 
 }) 
 } 
 } 
 render() { 
 return <Cmp {...this.state} {...this.props} /> 
 } 
 } 
} 
export default (options) => { 
 return (Cmp) => withUiMode(Cmp, options) 
} 

呼び出し方法

// デコレーター・アプローチ
@withUiMode() 
export default class Video extends React.Component { 
 render() { 
 const { isPCMode, uiMode } = this.props 
 return ( 
 <Page isPCMode={isPCMode}></Page> 
 ) 
 } 
} 

デザイナーのニーズを満たすディテール

PC UIとモバイルUIの判定設定を区別した上で、iPadの横長画面や縦長画面、大画面モニターなど、一般的なデバイスでの表示効果も気にする必要があります。

Mobile UI 最適化の効果

モバイルUIモードでは、iPad Miniは以下のように表示されます：

• 縦画面は768pxで、タイル状に引き伸ばした効果を表示しています。

• 横画面は1024pxで、タイル状に引き伸ばした効果を表示しています。

そのため、モバイルUIではCSSの最大幅を以下のように設定しています：

// Mobile モードでの最大ページ幅
$max-body-width = 768px 
// Mobile モードのコンテンツ幅
$max-body-width-center = $max-body-width - 40px 

PC UI 最適化の効果

上記のPC UIの判定では、判定間隔が1040pxとなっていますが、この幅では、デザイン幅を960pxとし、左右に40pxの余白を持たせることで、ページ全体の息づかいを感じることができます。

さて、市場に出回っているデバイスの大半は、実際には1280pxより大きいものです。この場合、1220pxを大きな画面でのメディアクエリのブレークポイントとして選択することができます。つまり、ここではレスポンシブデザインでCSSメディアクエリを使っているのです。

なぜ1400pxを使わないかというと、CCtalkの講師や生徒が使う主流のデバイスは、まだ1280px、1366px、1440pxの範囲だからです。

そこで、PC UIのCSS最大幅を以下のように設定しました：

// PC モードの小さな画面のための幅のブレークポイント
$page-min-width = 1040px 
// スモールスクリーンモードでのコンテンツ幅
$page-min-width-center = $page-min-width - 80px 
// PC モードの大画面のための幅のブレークポイント
$page-max-width = 1220px // タッチスクリーンの最大幅
// 大画面モードでのコンテンツ幅
$page-max-width-content = $page-max-width - 60px 

デザイン仕様

フュージョンレスポンシブデザインを使用する場合、デザイナーがUIデザインに取り組む前に、デザイン仕様について話し合うようにする必要があります。

私は次の2点に留意する必要があると考えています：

1. モジュールの幅とマージンのみを変更します。
2. モジュール内のすべての詳細が、フォント、幅と高さ、スペーシングなど、モジュールの詳細コンテンツのUIを調整しないようにします。

モバイルUIとPC UIのディテールが大きく異なると、レスポンシブデザインにしろ、アダプティブデザインにしろ、私が考える収束レスポンシブデザインにしろ、Webページ制作のプロセスで行うのは非常に難しく、その後のメンテナンスコストも非常に高くなります。

要約

レスポンシブデザインを取り入れ、JavaScriptとCSSをメディアクエリに活用することで、レスポンシブデザインとアダプティブデザインを組み合わせたソリューションです。

• アダプティブデザイン：JavaScriptを使用して、デバイスの特性に応じてPC UIとモバイルUIを区別します。
• レスポンシブデザイン：より良いUIを調整する必要がある場合、CSSメディアクエリのブレークポイントを追加することができます。

CCtalkでのレスポンシブデザインの導入

ビジネスシナリオ

• 主にタッチスクリーンUI、PCのエフェクトと互換性あり
• ディスプレイタイプ、複雑でない相互作用、複雑でないジャンプの優位性が特徴

マルチプラットフォームのシナリオ

互換性の要件

• Quora - Responsive Design vs. Adaptive Design?

• IE9およびIE10との互換性はなくなりました。
• IE11でのフレックスレイアウトのCSSプロパティの互換性に注意してください。

レンダリング

CCtalkプログラムページ

CCtalk 新しいホームページ

完全版については、 www.cctalk.com。

コンセプトの追加

まずは、「フロントエンドの基礎の概要 - モバイル開発のための画面、イメージ、フォント、レイアウトの互換性」の記事からご覧ください。

段落のひとつを抜粋します：

定義上、RWDはすべての画面に対して1セットのコードです。一方、AWDは、複数のエンドに対応する複数のコードセットです。どちらも本質的には、異なるデバイスに適応し、ユーザー体験を向上させることだと思います。RWDもAWDも、異なるモバイルデバイスに適応し、ユーザー体験を向上させるために設計された技術です。核となる考え方は、小さなものから大きなものまで、異なる画面解像度にウェブページを適応させる技術を使うことです。RWDは一般的にAWDのサブセットと考えられています。

RWD: イーサン・マーコートの記事がRWDの起源とされています。彼の提案したRWDは、HTMLとCSSのメディアクエリ技術を流動的なレイアウトで使用するというものでした。 RWDは、コンテンツを大きく変更することなく、要素のルックアンドフィールを変更する傾向があります。 Jeffrey Zeldmanは、RWDを幅広い解像度とデバイスのパフォーマンスに対して視覚的な体験を最適化するために使用できるあらゆる技術であると定義しています。

AWD: Adaptive Design」は、Aaron Gustafson氏の本のタイトルです。 彼は、AWDは、RWDのCSSメディアクエリ技術と、JavascriptでHTMLを操作してモバイルデバイスに適応させる機能を含むべきであり、AWDは、潜在的にモバイルユーザーのためにコンテンツや機能を削減する可能性があり、AWDは、サーバー側で最適化し、エンドポイントに最適化されたコンテンツを配信することができると主張しています。

関連記事

• この本は「Progressive Enhancement: Cross-Platform User Experience Design（プログレッシブ・エンハンスメント：クロスプラットフォーム・ユーザー・エクスペリエンス・デザイン）」で、英語版の原著は あり、原著の第1章はPDFで試し読みもできます。