もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代になって1,2年が経ちました。
「プログレッシブエンハンスメント」や「グレイスフルデグラデーション」、「メディアクエリ」、「CSSスプライト」、「モバイルファースト」というキーワードも聞かれるようになりました。
あ、最大のキーワードは「html5」。これは広義にも狭義にも使われてますね。
このような流れを受けてか、ビジュアルデザインは大きく、フォントも大きくなったサイトを見かけることが多くなった気がします。
結果見やすく、アクセシビリティにも良い印象。個人的にも素材を大きくダイナミックな表現は好みなので見てて楽しいです。
っとデザインの話しではなく、クロスブラウザ、マルチデバイスにどう対応するか。
そのコンテンツのユーザーは誰か？をデバイスごとに考える
「そのコンテンツのユーザーは誰か？」だけではなく、これからは、この問いを「デバイスごとに」しっかり考えたい。
ここができなければ、そもそもあえてマルチデバイス対応する必要は「絶対ない」と思う。そんなコンテンツは制作者のスキルアップ以外、ただのリソースの無駄だ。資源は大切にしたい。
ここを踏まえた上で、マルチデバイス対応を考えたときに、その手法は大きく分けて2つ。
- デバイス別にマークアップ（each device）
- 1ソースマルチデバイス（one for all）
デバイス別にマークアップ（each device）
デバイス別に表現したい内容が異なる場合や表現方法自体異なる場合に最適。
運用負荷は高くなってしまうが、カスタマイズする自由度は高い。
1ソースマルチデバイス（one for all）
PCサイトとスマートフォンサイトで見せたい内容はほぼ同じ場合に最適。
htmlソースはひとつで、端末別に読み込むCSSを変えてデザインを変更するのが基本。
運用中、あるデバイス用にhtmlの骨格自体を修正する必要が出た場合、管理がカオスになる危険があるが、通常の運用負荷は低い。
useragentを使わずにデバイス別、クロスブラウザ別対応する
ぼくはCSSハックが大嫌い（大概のことはhtmlとcssを見直せばハックの必要がない）。クロスブラウザ対応と言ってユーザーエージェント使ってブラウザ別にCSSを組むなんてあり得ない（大概のことはhtmlとcssを見直せばハックの必要がない！）。
そんなタイプなので、デバイス判別にユーザーエージェントは使わずに対応したい。これはその後のメンテも必要ないのでハッピー。
と、スーパー前置きが長くなりました。いきなり本題です。
- html（CSSメディアクエリ）
-
<link rel="stylesheet" href="smartphone.css" media="screen and (max-width: 480px)" type="text/css" />
<link rel="stylesheet" href="smartphone.css" media="screen and (max-height: 480px)" type="text/css" /> - javascript
-
if ("object" == typeof document.documentElement.ontouchend) {
// 【type A】これはスマートフォンかタブレット端末です。
}if ("undefined" == typeof document.documentElement.style.maxHeight) {
// 【type B】これはレガシーブラウザです。
}
この組み合わせで、クロスブラウザ対応、マルチデバイス対応を実現できます。
| CSSメディアクエリ | JS | |
|---|---|---|
| スマートフォン | ○ | ○【type A】 |
| タブレット | × | ○【type A】 |
| レガシーブラウザ | △（ウィンドウサイズによる） | ○【type B】 |
| モダンブラウザ | △（ウィンドウサイズによる） | × |
下記は、bodyタグのid名にデバイス別に値をセットするサンプルJavaScriptです。
var type_device = ‘normal’;
if ("object" == typeof document.documentElement.ontouchend) {
// これはスマートフォンかタブレット端末です。
type_device = ‘smartphoneOrTablet’;
} else if ("undefined" == typeof document.documentElement.style.maxHeight) {
// これはレガシーブラウザです。
type_device = ‘legacy’;
}
document.getElementsByTagName(‘body’)[0].setAttribute(‘id’, type_device);
}
Windows PhoneなどWebkit以外のスマホが普及してきたら、IEかどうかの判別が必要になるかもですね。
ちなみにIEかどうかの判別もuseragentを使わずに簡単にできます。
JavaScriptでIEかどうかの判別
さいごに
スマートフォン普及の原動力、iPhone。そのAppleのサイトはスマートフォンで見るとどうなるんだろう？と思って見て、その選択に妙に納得。ピンチイン・ピンチアウトは重要なUX。運用管理の面でも最強です。