});毎回参加していますが、今回はいつもにまして海外からのGoogle社員ゲストが多く、熱気がありました。Irish)の2つです。これに加えて、懇親会とLTがいくつか。順番に概要を紹介していきます。カジュアルにまとめていますので、詳細についてはそれぞれ元スライドをご覧ください。Smus)モバイルのユーザー数は大体2014年にはデスクトップユーザー数を超えそうな見通しです。従って、どんどんモバイルに対応した開発の重要性が上がっていくと考えられます。「あー、モバイル大事ね」といっているだけではうまくいかないことは明白ですが、では具体的にどんなポイントに気を付けるべきなのでしょうか。ここでは3つ(+α)のポイントが挙げられました。ピクセル密度いろいろ画面の形状いろいろ入力方法いろいろ補足:テストについてピクセル密度いろいろデバイスはどんどん進化しています。普通に作ったコンテンツは、画面解像度が上がると、どんどん表示が粗くなったり、小さくなったりしますよね。それも、全部が一律に上がっていくならまだしも、広ーいデスクトップ画面、手のひらサイズのモバイル、中間サイズタブレットとそれぞればらばらに変化していくわけで......大変です!私たちが表現するコンテンツには拡大可能なものと、不可能なものがあることに注意しましょう。拡大可能なものとしては、プレーンテキスト、CSS、SVGなどがあります。これらは拡大に強いですね。反対に拡大不可能なものとしては、bitmapとかjpgなどが挙げられます。拡大するほどどんどん見た目が粗くなっていきます。常に拡大可能な形式のものだけでコンテンツを作れれば楽なのですが、そんなことはいってられませんよね。世の中のデバイスが足並みをそろえて進化してくれるのなら楽なのですが、もちろん、そんなわけにはいきません。世の中にあるさまざまな解像度のデバイスに同時に対応する必要があります。おおまかには2種類のアプローチがありますが、まずは両者に共通する画像加工について。原則として画像はより高解像度なデバイスを基準に作成します。無限に大きなファイルにするわけにはいかないのでサイズ調整をするわけですが、このとき、画像サイズを落とすのではなく、圧縮率を上げる方が良い結果を得られることが多いとのこと。この辺りの調整は手動で行う方が結果は良くなるので、可能なら手動で調整しましょう。1つ目に紹介されたアプローチですが、1つは1枚の画像を並べる方法です。このやり方ならピクセル密度が上がっても並べる枚数が増えるだけで済みます。背景なんかには使いやすい方法でしょう。1つは、同じ内容の画像でも画面別に複数用意して、その時々で最適なものを選ぶ方法です。これらの中にもいくつかの実現方法があります。選択されるかもしれない画像をすべて読み込んで、クライアントサイドで出し分けるやり方。これを実現するためのjavascriptライブラリはたくさんあります!目的に合わせて使い分けましょう。この方法は先読み(Lookahead)方式で構文解析する場合は十分に機能しませんし、回線速度が遅い場合には不利になります。Lookaheadについてはこちらなどを参照してください。)上記の問題点を避け、そもそもサーバサイドで必要な画像だけ読み込ませる対応をする場合は、さらに2つ(+α)の実現方法が考えられます。mediaクエリーで出し分けCSSのメディアクエリーを利用します。表示用画面と印刷用画面でCSSを切り替えるときに使うアレです。ここでデバイスピクセル比を指定して、CSSを切り替えます。具体的な記述はスライドをどうぞ。(※なおデバイスピクセル比に関してはこの辺りが分かりやすいと思います。)image-setで出し分け画像セットを指定して、ブラウザに選択してもらいます。これを使うと画面環境だけでなく回線スピードなども考慮して画像を選択してくれるので便利なのですが、今のところChromeとSafariでしか対応していません。上記2つはCSS対応なので、背景やアイコン、ロゴなどには使えますがコンテンツとしての画像に使うのは難しそうです。/>の様な指定ができればいいのですが、CSS4の段階ではまだ実装されていません。いうわけでBoris(講演者)がこんなスクリプトを書いてくれました。ありがたく使わせていただきましょう!画面の形状いろいろデバイスはたくさんあります。それぞればらばらな縦横比なわけで......。画像が小さ過ぎたり、動かない場合がどうしても出てきますよね。無限の労力を注ぎ込めるならいいですが、担当者には殴られてしまいそうです......。いうわけで、間を取って「レスポンシブデザイン」を採用しましょう!(こんな感じを目指したいですね。)基本はCSSでメディアクエリーを指定することになりますが、CSSだけだと厳しいのでJavaScriptも併用していくのがよさそうです。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。