第9回　PCとスマートフォンで画像を切り替える

PCとスマートフォンなどのモバイル端末で、レイアウトを最適化させるための手法のひとつに、レスポンシブレイアウトが使われるようになっていますが、同じソースコードやCSSなどでレイアウトを変更させるため、何もしない場合は画像が双方で使用されてしまい、グラフィックを多用するWebサイトでは、レイアウトを最適化してもデータ量は同じになってしまうことがあります。そこで、今回はデバイスによって使用する画像を切替えるよう、スマートフォンでは軽量な画像を自動的に振り分けるテクニックを紹介します。

前回は、ソーシャルボタンをまとめて設置ができるプラグイン「jQuery.socialbutton」を使用しましたが、今回はレスポンシブレイアウトなどで使用する画像をふりわけるプラグインを使用して画像の切り替えを行います。

■今回作成したサンプル

●ブラウザの表示領域の大きさによって、表示する画像を切替えるプラグイン「breakpoint.js」

今回サンプルで導入する「breakpoint.js」は、ブラウザの表示領域（※以下、スクリーンサイズ）によって、img要素に読み込む画像を差し替えるもので、もともとは回線速度の状況によって読み込む画像を差し替える「hisrc.js」に込みこまれていたものが分離され同梱されているものです。同様の仕組みでスタイル（CSS）を差し替えるメディアクエリー（mediaqueries）と利用方法は似ています。

また（正確にはこちらはbreakpointsと複数形だが）、同名のプラグインで「breakpoints.js」があり、こちらもスクリーンサイズをブレイクポイント（※切り替えポイント）として処理を分ける考え方は一緒ですが、ブレイクポイントの設定やブレイクポイント時の処理もJavascript上で記述する必要があるため、機能的ではあるが多少Javascriptの理解が必要になるります。

一方、サンプルで利用している「breakpoint.js」は、基本的にはimg要素に独自data属性を記述することで設定が可能になるので、メンテナンス性には欠けますが、直感的で使いやすいのが特徴です。

Github内のhisrc.jsのページ（リポジトジ）。ここに同梱されているbreakpoint.jsを利用する

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/breakpoint.js"></script>
<script src="js/script.js"></script>

●デバイスによっての画像切り替え方法

デバイスによって画像を軽量化させる際に考えられるものとして、今回は2つの方法でサンプルを作成してみます。ひとつは「画像サイズを変更させてファイルを軽量化させる方法」と、「同じ画像サイズで圧縮率を変更してファイルを軽量化させる方法」という2つを用意してみました。

今回作成する画像サイズの軽量化

●HTMLソースコード

「breakpoint.js」の利用方法として、まず対象となるimg要素のsrc属性には一番軽量サイズの画像のリンクを記述し、スクリーンサイズごとに差し替える指示はHTML5のカスタムdata属性を記述していくことになります。記述方法はメディアクエリーの書き方に似ており、スクリーンサイズが最大幅が320ピクセルの場合は、「data-maxwidth320px=”【読み込みたい画像のパス】”」のように記述します。このdata属性は一つのimg要素にいくらでも追加することができるので、さまざまなスクリーンサイズに対応した画像を指定することも可能です。

なお、img要素にwidthもheightも指定していないので、画像は基本的に縦横比を保ったまま幅（width）100%の状態で表示されることになります。ブレイクポイント以外のスクリーンサイズ時には、画像が元サイズよりも拡大や縮小されて表示されるので注意してください。

画像が適宜拡大縮小されるのを避けたい場合は、CSSのメディアクエリと「breakpoint.js」のブレイクポイントを一緒にして、各ポイント時にimg要素に任意の固定幅を持たせれば、そのブレイクポイント以外では拡大縮小されないようにすることも可能です。

<p><img class="resImg" src="img/01_s.jpg" data-minwidth321px="img/01_l.jpg"  alt=""></p>
<p><img class="resImg" src="img/02_s.jpg" data-minwidth321px="img/02_l.jpg"  alt=""></p>

(function(d,$){
  $(function(){
    $('.resImg').breakpoint();
  });
}(document, jQuery));

振り分けに使用した画像

●レスポンシブウェブデザインにおける「ピクセル密度（density）に基づいた解像度」の概念について

今回の「breakpoint.js」の利用方法は、レスポンシブウェブデザインには必須なviewportについて、ある程度理解しておく必要があるでしょう。それぞれの解説や推奨設定などは関連書籍やネット上で紹介されていることが多いので、ここでは詳しくは述べませんが、「breakpoint.js」の指定方法にも関連している「ピクセル密度（density）に基づいた解像度」の概念について簡単にまとめてみたいと思います。

さまざまなスクリーンサイズを持ったデバイスが存在する昨今、制作者側として提供するサイズをどのサイズに設定するかが悩ましいところでしょう。かつて、デスクトップPCを前提で作られていたころは、Webサイトのコンテンツを960ピクセル幅で作成することがデファクトとなっていましたが、現在は何も設定しないで、そのようなWebサイトをiPhone5S（640×1136）で閲覧すると、幅640ピクセルの画面にサイト全体を表示できるようにコンテンツが約66％自動的に縮小され表示されてしまいます。

そこでコンテンツが自動縮小されないように、コンテンツの幅をピクセル固定にせずに相対的な単位（％など）にして作成したときに、CSSのwidth:100％の実質的なピクセル値の基準を、そのデバイスが持つ「ピクセル密度（density）に基づいた解像度」の幅とする設定が、viewportで設定する「width=device-width」になります。これはデバイスの向きによる変化にも柔軟に対応し、iPhone5Sでの縦の場合はwidth:100%の実質値は320ピクセルに、横の場合は568ピクセルになります。

iPhone5Sの縦は、デバイスの持つスクリーンサイズが本来幅640ピクセルのはずなのに、なぜwidth:100%が320ピクセル相当になるのかというと、viewportの「width=device-width」と指定することで、CSSのwidthやheightなどに指定されるピクセルの数値や計算は、例外を除いて、すべて「ピクセル密度（density）に基づいた解像度」を元に計算されることになるからです。iphone5Sはretinaディスプレイでdensityの値は2に設定されていため、「ピクセル密度（density）に基づいた解像度」における幅100％は、640（ピクセル）÷2（density）=320（ピクセル）となります。

上記のように、viewportを「width=device-width」としたときは、寸法などの数値指定はすべて「ピクセル密度（density）に基づいた解像度」によって計算が行われるため、制作側は本来なら解像度の異なるiphoneのRetinaディスプレイと、非Retinaディスプレイに関して、それぞれサイズの異なるスタイルを作成しなくても良いということになります。

今回のbreakpoint.jsの数値の指定方法も「ピクセル密度（density）に基づいた解像度」によって行われるため、maxwidth=320pxと指定すれば、Retina、非RetinaそれぞれのiPhoneに適用されるということになります。

●最後に

レスポンシブウェブの便利さとして、1ソースコードでPCとスマホを最適化させるということが挙げられますが、ここまでするならば、元の画像の圧縮率などを調整して、使用する画像を一枚にした方が簡単であったり、サーバー側でPCとスマホに振り分けて、それぞれ最適化されたサイトを作ったほうが良いだろうと思う方もいらっしゃるかと思います。

ただ、そういった手法だけでなく、jQueryでもこういったテクニックを使うことで、PCとスマートフォンで画像を切り替えることができる例をここでは紹介しました。今回はjQueryで再現するサンプルのひとつとして見ていただければと思います。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

2014/12/18

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！