ブログ

レスポンシブWebデザインで画像関係のスクリプトを使うときにチェックすべき点

レスポンシブWebデザインで画像関係のスクリプトなどを使うときにチェックすべき点をまとめてみました。

すべてに共通して注意する事項

すべてに共通して注意する事項としては、次の通りとなります。

  • 更新するときに簡単かどうか。
  • .htaccessを利用した場合は、サーバーでアップしたあとでしかテストできないので、同じようなテスト環境を用意しないといけない。
  • HTML側でdeta属性などを利用して記述するスクリプト等なのかどうか。deta属性などを利用して記述しないスクリプトの場合は、簡単に理解できるか。
  • すべての、画像を差し替える部分で記載しなくても動作するか。
    画像を差し替える部分が複数あり、そのすべてを対象にしたコードを記載しないと行けない場合、無駄なコードが多くなります。また、画像を差し替える部分で、記載しないと画像がない状態になるようなスクリプトは使うべきではありません。
  • iOSなどのLetina Displayも対象にしたいスクリプトなどの場合だと、実機でしか確認できないことを、工数などの考慮に入れているか。
  • 後述の、Firefoxでの問題をどこまで対応するのか。

本来は、スクリプト等をつかわなくてもいいように、コンテンツ構成を見直しするのがいちばんです。しかし、スマートテレビなど、大きな画面に対応したコンテンツが必要、画像を重視するコンテンツなので、どのデバイスでも奇麗に画像を表示させたい、などの事情で、どうしても画像関係のスクリプトなどを使う場面が出てくると思います。

Firefoxでの問題

ある案件の関連で、Firefox & media query breakpoints WTF?!という記事を読みました。そこには、次のように書かれていました。

The issue continues further if you are using any JavaScript breakpoints to serve up ‘adaptive’ content - Firefox will return a different viewport width in JS than that recognised by the media queries.

「Firefoxでは、メディアクエリとは別に、Javascriptで別のビューポートの幅を返します。(意訳)」と書かれています。Firefoxでは、CSS(メディアクエリ)とJavaScriptはブレイクポイントのサイズが違っているのです。

つまり、Firefoxでは、JavaScriptでコンテンツを、メディアクエリに応じて差し替えるスクリプトを使っている場合、画像(もしくはコンテンツ)が他のブラウザより15px大きいサイズで入れ替わってしまうということになります。

つまり、600pxで画像を入れ替えしたいときに、他のブラウザでは600pxで画像が入れ替わるけど、Firefoxだと、615pxで入れ替わるということになります。

ただし、すべてのスクリプトでなるわけではないようです。これはテストが必要で、現在出ているもの、これから出てくるものを確認しなけれはいけません。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。