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

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

» 2012年12月17日 15時05分公開

　毎回参加していますが、今回はいつもにまして海外からの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つ（＋α）の実現方法が考えられます。