Chrome Tech Talk Night #4に行ってきたよ！：UXClip（15）（1/3 ページ）

Chrome Tech Talk Night #4に行ってきました！

[西谷 太郎，＠IT]

　毎回参加していますが、今回はいつもにまして海外からのGoogle社員ゲストが多く、熱気がありました。海外からのスピーカーが話したテーマは、

• モバイルアプリの最新動向―High DPIとマルチタッチ（ From High-DPI to multi-touch: cutting edge mobile web ）（講演者:Boris Smus）
• Webアプリケーション開発のワークフローとYeoman（ Webapp Workflow & Yeoman ）（講演者:Paul Irish）

　の2つです。

　これに加えて、懇親会とLTがいくつか。順番に概要を紹介していきます。とってもカジュアルにまとめていますので、詳細についてはそれぞれ元スライドをご覧ください。

• モバイルアプリの最新動向―High DPI とマルチタッチ（ From High-DPI to multi-touch: cutting edge mobile web ）（講演者:Boris Smus）

　モバイルのユーザー数は大体2014年にはデスクトップユーザー数を超えそうな見通しです。従って、どんどんモバイルに対応した開発の重要性が上がっていくと考えられます。「あー、モバイル大事ね」といっているだけではうまくいかないことは明白ですが、では具体的にどんなポイントに気を付けるべきなのでしょうか。ここでは3つ（＋α）のポイントが挙げられました。

• ピクセル密度いろいろ
• 画面の形状いろいろ
• 入力方法いろいろ
• 補足：テストについて
• ピクセル密度いろいろ

　デバイスはどんどん進化しています。普通に作ったコンテンツは、画面解像度が上がると、どんどん表示が粗くなったり、小さくなったりしますよね。それも、全部が一律に上がっていくならまだしも、広ーいデスクトップ画面、手のひらサイズのモバイル、中間サイズタブレットとそれぞればらばらに変化していくわけで……大変です！

　私たちが表現するコンテンツには拡大可能なものと、不可能なものがあることに注意しましょう。拡大可能なものとしては、プレーンテキスト、CSS、SVGなどがあります。これらは拡大に強いですね。反対に拡大不可能なものとしては、bitmapとかjpgなどが挙げられます。拡大するほどどんどん見た目が粗くなっていきます。

　常に拡大可能な形式のものだけでコンテンツを作れれば楽なのですが、そんなことはいってられませんよね。さらに、世の中のデバイスが足並みをそろえて進化してくれるのなら楽なのですが、もちろん、そんなわけにはいきません。世の中にあるさまざまな解像度のデバイスに同時に対応する必要があります。

　ではどうするか。

　おおまかには2種類のアプローチがありますが、まずは両者に共通する画像加工について。

　原則として画像はより高解像度なデバイスを基準に作成します。また、無限に大きなファイルにするわけにはいかないのでサイズ調整をするわけですが、このとき、画像サイズを落とすのではなく、圧縮率を上げる方が良い結果を得られることが多いとのこと。またこの辺りの調整は手動で行う方が結果は良くなるので、可能なら手動で調整しましょう。

　ではまず1つ目に紹介されたアプローチですが、1つは1枚の画像を並べる方法です。このやり方ならピクセル密度が上がっても並べる枚数が増えるだけで済みます。背景なんかには使いやすい方法でしょう。

　もう1つは、同じ内容の画像でも画面別に複数用意して、その時々で最適なものを選ぶ方法です。これらの中にもいくつかの実現方法があります。

　まずは選択されるかもしれない画像をすべて読み込んで、クライアントサイドで出し分けるやり方。これを実現するためのjavascriptライブラリはたくさんあります！目的に合わせて使い分けましょう。

　ただしこの方法は先読み（Lookahead）方式で構文解析する場合は十分に機能しませんし、回線速度が遅い場合には不利になります。　（※　Lookaheadについてはこちらなどを参照してください。）

　上記の問題点を避け、そもそもサーバサイドで必要な画像だけ読み込ませる対応をする場合は、さらに2つ（＋α）の実現方法が考えられます。

mediaクエリーで出し分け

　CSSのメディアクエリーを利用します。表示用画面と印刷用画面でCSSを切り替えるときに使うアレです。

　ここでデバイスピクセル比を指定して、CSSを切り替えます。具体的な記述はスライドをどうぞ。　（※なおデバイスピクセル比に関してはこの辺りが分かりやすいと思います。）

image-setで出し分け

　画像セットを指定して、ブラウザに選択してもらいます。これを使うと画面環境だけでなく回線スピードなども考慮して画像を選択してくれるので便利なのですが、今のところChromeとSafariでしか対応していません。

javascriptによる独自実装

　上記2つはCSS対応なので、背景やアイコン、ロゴなどには使えますがコンテンツとしての画像に使うのは難しそうです。

<img srcset="......" />

　の様な指定ができればいいのですが、CSS4の段階ではまだ実装されていません。というわけでBoris（講演者）がこんなスクリプトを書いてくれました。ありがたく使わせていただきましょう！

画面の形状いろいろ

　デバイスはたくさんあります。本当にたくさんたくさんあります！ それぞればらばらな縦横比なわけで……。私たちはどうしたらいいでしょうか？

　単一のデザインで全端末に対応してみますか？ 画像が小さ過ぎたり、動かない場合がどうしても出てきますよね。ではすべての端末に対して、それぞれ別々のデザインを当てますか？ 無限の労力を注ぎ込めるならいいですが、担当者には殴られてしまいそうです……。

　というわけで、間を取って「レスポンシブデザイン」を採用しましょう！（こんな感じを目指したいですね。）

　基本はCSSでメディアクエリーを指定することになりますが、CSSだけだと厳しいのでJavaScriptも併用していくのがよさそうです。

• 実装例