第二回 ワンソースマルチユースを斬る！
デバイス別振り分けの考察
ワンソースマルチユースの思想でコンテンツ実装をする場合、どのように振り分ければいいのでしょうか。
振り分け対象としては、PCブラウザ、スマートフォン、フィーチャーフォンなどのデバイスが考えられますが、最近ではタブレット型デバイスが加えられます。
最初に言っておかなくてはいけないのは、それぞれのデバイスに対して"全て""完全に"対応を試みようとはしない方が最善策だということです。
"フィーチャーフォンとそれ以外のデバイス"という、２極の大雑把な分け目を最初の目安として、そのほかをどのように細分化していくのかを考えながら、細かく落とし込みすぎないようにある程度で折り合いをつけましょう。
振り分けの種類
振り分け方法としてはJavaScript、PHP、MediaQueriesの３通りがありますが、その中でもJavaScript、PHPを使用する場合には、UserAgentで判別をした上でCSSを振り分けます。
ただし、JavaScriptで実装する場合には"JavaScriptを有効"にしている場合でなければ意味がありません。しかし、JavaScriptを使えばUserAgent、ウィンドウサイズ、デバイス解像度など複数の方法でデバイスを判別させることができるため"JavaScriptが有効な環境下"ではそれなりに有効な振り分け方法です。
PHPではサーバーサイドで処理をするためユーザー環境に依存されません。ただし、サーバー仕様に依存するため、知識とサーバー管理権限を必要とするため、少し敷居が高いやり方になります。
MediaQueriesはCSS3の機能で、ウィンドウのサイズもしくはデバイスの画面解像度を読み取り、サイズによって最適なCSSを出し分けることができます。
このMediaQueriesは新しい機能として昨今話題になっていますが、いったいどんな特長を持った機能なのでしょうか。もう少し具体的に触れていきましょう。
MediaQueriesってどんなもの？
設定はいたって簡単で、CSSを指定するリンク要素に対してウィンドウサイズもしくはデバイス解像度を指定する数値を入れれば出来ます。（設定の詳細は文末のサンプルソースをご覧下さい。）
対応に際しての気をつけなければいけない点はCSS3の環境下である必要があるということ、つまり、InternetExplorer8ではHTML5、CSS3に対応していないブラウザのため機能しないということになります。ただし、InternetExplorer9がもっと普及してくれば状況は変わることでしょう。
ウィンドウサイズ指定では、PC上でウィンドウサイズを縮小した場合でも、スマートフォン版に切り替わってしまいます。これはMediaQueriesの機能を知らない人に対して『どのような機能かを説明する手法』としてはいいのですが、スマートフォンでは縦横に画面を動かしても反応してしまうため、エンドユーザーに対しての使いやすさを考慮すると、MediaQueries対応の適切な対応としてはウィンドウサイズではなく画面解像度で設定することが実用的な対応だと考えられるでしょう。
画面解像度とウィンドウサイズの設定値の違い
MediaQueriesの設定には画面解像度を基準にする場合とウィンドウサイズを基準にする場合があることは前述しましたが、ユーザビリティとは別の観点から考えた際にはどのような設定が望ましいでしょうか。
PCブラウザ、フィーチャーフォンでは画面解像度＝ウィンドウサイズと考えられるため、スマートフォンとタブレットの場合、それは必ずしも同じではないということが発生いたします。
具体的に言えば、device-widthの指定で解像度、widthで指定すればウィンドウサイズを基準にCSSを切り替えるられますが、スマートフォンの場合、デバイスのスペックとして発表されている画面解像度とウィンドウサイズではサイズが違います。
例えばXperiaシリーズの解像度は854×480pxなのに対し、ウィンドウサイズは569×320pxという数値が返ってきます。
実際に現在販売されている各スマートフォンとタブレットの解像度とウィンドウサイズの比較すると、GALAXY TabやIS01、LYNX SH-10Bなどの特殊な端末はスマートフォンサイズの範囲内やタブレットサイズの範囲内など様々なサイズが出てきてしまい、～px以上、～px以下などと単純に切り分けることが難しい状況になってきているのが現状です。
MediaQueriesを実装する際には"デバイス区切りをどのサイズで行うか、切り捨てる端末をどうするか、縦横サイズにより該当するデバイス以外のCSSが読まれる場合を許容するか"などのテーマを設計段階で確認しましょう。
MediaQueriesの使いどころに注意
MediaQueriesはマークアップエンジニアのみで設定でき、少ない作業工数で対応できる非常に魅力的な機能です。ですのでクライアントにとっても制作者にとっても一度は試してみたいと思わせますが、前述のように画面解像度やウィンドウサイズにバラつきがあるため、全てのデバイスを包括してマルチに対応できる機能ではありません。
MediaQueriesの使用を検討している方は『PCとスマートフォン』『スマートフォンとタブレット』など限定的に使ってみたり、UserAgent振り分けと併用して、有効範囲を限定して使っていければ便利に使うことができるでしょう。
サンプルソース
タブレットとスマートフォンでのMediaQueries実装例
タブレットとスマートフォンでの実装の場合、「横幅768px以下：縦長画面」「横幅1024px以下：横長画面」をタブレット用CSSに、それ以外のデフォルト値は全てスマートフォン用CSSを読みにいくように設定しています。こちらのパターンではGalaxy Tabはスマートフォン用CSSを読ませるような決め事で実装しました。
まとめ
MediaQueriesは発表されて間もない機能であるし、世の中に出ているブラウザが全てHTML5、CSS3に対応していないこと、ユーザーが最新ブラウザを全て使っていないこと、ディスプレイを作るハード側はW3CやWHATWGの事情を考慮しているわけではないし逆も然りである、などの様々な事情を鑑みると、この先も前途多難であることが伺えます。
『MediaQueries"だけを"使ってのマルチデバイス対応』ではなく『MediaQueriesと"JavaScriptやPHPも"使ってのマルチデバイス対応』を考えていくことが今後とも必要になってきますので、各振り分け方法については、おさえておく必要があるでしょう。
次回の内容
ということで「第二回 ワンソースマルチユースを斬る！」のコラムはいかがでしたか。次回の内容では「レイアウトの考え方」について触れていきたいと思います。
次回もお楽しみに。
ワンソースマルチユースを斬るシリーズ
- 第一回 ワンソースマルチユースを斬る！
- 第二回 ワンソースマルチユースを斬る！
- 第三回 ワンソースマルチユースを斬る！
- 第四回 ワンソースマルチユースを斬る！
マルチデバイスLab.の研究内容について、ご意見、ご質問などありましたら、
「マルチデバイスLab.」までお気軽にお問い合わせください。
※株式会社アイ･エム・ジェイのお問い合わせフォームに移動します。
サービスに関するお問い合わせ
