スマホによるネット利用の増加と Google 検索アルゴリズムの修正により、多くのサイトがレスポンシブ Web デザインに対応するようになりました。出来合いの HTML テンプレートや WordPress テーマはともかく、自分でレスポンシブルにしようとしたときにはテストをしなければなりません。
テスト方法にはいくつか選択肢がありますが、アップロードする手間を省くには Web ブラウザの検証ツールを使うのが手っ取り早いです。今回は私がローカルで Google Chrome を使ってテストをしたときに、つまずいたところと解決方法を紹介したいと思います。結論を先に述べると、「設定を見直せ」というだけなのですが、併せて関連しそうな話題にも触れてみたいと思います。
私が画像のレスポンシブ対応の勉強をしたばかりなので画像の処理に話題が偏っていますが、レスポンシブデザインにおけるトラブル解決の一助になれば幸いです。
単純に書く順番が間違っている
画像のレスポンシブ対応といえば、以前なら JavaScript や jQuery が主流であったと思います。これがスマホによるネット利用が増えてきたことにより、HTML の記述だけでレスポンシブ対応することが可能になりました。HTML5.1 から導入された picture 要素と srcset 属性ですね。次のように書けます。
1 2 3 4 | <img src="test_1024.jpg" srcset="test_480.jpg 480w, test_768.jpg 768w, test_1024.jpg 1024w"> |
picture と source を使うと次のとおりです。
1 2 3 4 5 6 | <picture> <source srcset="test_480.jpg 480w, test_768.jpg 768w, test_1024.jpg 1024w"> <img src="test_1024.jpg"> </picture> |
このようにも書けます。
1 2 3 4 5 6 | <picture> <source media="(max-width: 480px)" srcset="test_480.jpg"> <source media="(max-width: 768px)" srcset="test_768.jpg"> <source media="(max-width: 1024px)" srcset="test_1024.jpg"> <img src="test_1024.jpg"> </picture> |
最後についてですが、次のように記述するとうまく動作しません。ソースコートの意味を考えれば当たり前なのですが、寝不足でフラフラしていたりすると意外とやらかします。
1 2 3 4 5 6 | <picture> <source media="(max-width: 768px)" srcset="test_768.jpg"> <source media="(max-width: 480px)" srcset="test_480.jpg"> <source media="(max-width: 1024px)" srcset="test_1024.jpg"> <img src="test_1024.jpg"> </picture> |
まずブラウザは画面のサイズが 768px 以下であるかを判定します。例えば、このとき画面が 480px であった場合には当然画面サイズは 768px 以下であるため、max-width:480px までたどり着かずに最初の時点で判定を終了してしまいます。
ちなみに、srcset を使ってこのように書いた場合には動作してくれちゃいます。
1 2 3 4 5 6 | <picture> <source srcset="test_768.jpg 768w, test_480.jpg 480w, test_1024.jpg 1024w"> <img src="test_1024.jpg"> </picture> |
キャッシュを無効にする
今回はバージョン56でテストを行ったのですが、Google Chrome は srcset に記述がある画像を一度読み込んだ場合、キャッシュに保存してそれ以外のサイズの画像を再度読み込まないという動作をします。ウィンドウ幅を変化させてもキャッシュにある画像を使ってしまうのです。
解決方法自体は簡単です。更新ボタンの上で右クリックをし、「キャッシュの消去とハード再読み込み」を選ぶだけです。でも、毎回これをするのは面倒ですよね。
そこで、設定を変更します。検証ツールの右上のこの部分をクリックし、「Settings」を選択します。キーボードの F1 キーでもよいです。
「Settings」→「Preferences」→「Network」とたどってください。「Disable cache (while DevTools is open)」にチェックを入れると、検証ツールを開いている間はキャッシュが無効になります。
Retinaディスプレイ非対応の環境を作成する
Google Chrome にはスマホやタブレットでどのように表示されるのかを確認できるツールが用意されています。バージョン56ではあらかじめいくつかの機種が用意されており、これらを切り替えて動作確認を行ったりするはずです。
スマホに詳しい人はピンときたかもしれませんが、バージョン56にデフォルトで用意されているこれらの機種には、Retina ディスプレイをはじめとする高精細ディスプレイが採用されています。この高精細ディスプレイについてちゃんと考慮しておかないと、きちんと動作してくれないことがあるので注意です。
2010年6月に発売された iPhone4 に Apple 製品としてはじめて Retina ディスプレイが採用されましたが、これを皮切りにスマホの高精細化は進んできました。例えば iPhone4 の場合、物理的な液晶画面の横幅が 640px（ドットが640個）になり、従来の機種に比べて倍になりました。
ところが、ブラウザが表示に使う解像度の横幅は 320px に設定されたままです。これでなにが起こるかというと、横幅が 320px の画像は2倍に拡大されて横幅が 640 ドットの画像として表示されてしまいます（もちろん縦も2倍です）。
この倍率のことを Device Pixel Ratio と呼び、「デバイスピクセル比」などと訳されます。このデバイスピクセル比を考慮しないと、画像がボケたり画像に描画した文字が意図しない倍率で表示されたりします。
これらの対策としては、ブラウザ解像度の1.5倍や2倍の大きさの画像を用意し、picture や srcset を使って高精細ディスプレイの場合には画像を切り替えるといった方法が挙げられます。
例えば、次のようにレスポンシブ対応した画像を Google Chrome が最初から用意している iPhone 6 Plus でテストしたとします。
1 2 3 4 | <img src="test_1024.jpg" srcset="test_480.jpg 480w, test_768.jpg 768w, test_1024.jpg 1024w"> |
iPhone 6 Plus は Retina ディスプレイなのでデバイスピクセル比は2倍であり、ブレイクポイントは 480px や 768px ではなく、それぞれを2倍した 960px や 1536px で画像の大きさを判定してしまいます。つまり、この場合には常に横幅が 1024px の画像が選択されてしまうので、うまく画像が切り替わってくれないのです。
きちんと高精細ディスプレイにも対応した画像を用意すればいいだろうと言われてしまうかもしれませんが、簡単に動作確認をするには少し不便です。高精細ディスプレイに対応していない機種についてもテストが必要です。そこで、デバイスピクセル比が1倍のテスト環境を作成することにします。まずは「Edit…」をクリック。
「Add custom device…」をクリック。
「Device name」は好きにつけられるので、わかりやすい名前にしておいてください。横幅はブレイクポイントにしたい大きさに、今回は 480px にしました。縦は適当に。「Device pixel ratio」には1を入力して Add ボタンを押します。
機種の一覧に追加されているはずなので、選択すれば切り替わります。必要なブレイクポイントの分だけ追加してください。
記述の仕方によっては更新ボタンを押す必要があるかもしれません。ちゃんとできましたか？
まとめ
Firefox にもレスポンシブデザインビューというものがありまして、バージョン43.0.1で動作確認しましたが、こちらはこのような設定をしなくても手軽にテストを行うことができます。反面、高精細ディスプレイには対応していません。
この先、なんらかの対応がされる可能性は高いですが、現時点では高精細ディスプレイに対する動作確認には Google Chrome を使うか、レンタルサーバーにアップロードして公開されている Web サービスでテストをするようにしてください。
Comment