ブログ

response.jsについて書いてみる

レスポンシブウェブデザインの画像問題を解決する「Response JS」というJavaScriptライブラリがあります。ちょっと記載方法が変わっていたのでメモかてら書いてみます。

バージョン0.3以降を使うときの注意点

Response JSは、バージョン0.3から書き方が大幅に変わっています。

公式サイトでは、バージョン0.3より以前の記載方法が書かれています。つまり、現在のバージョン(2012年8月1日現在、バージョン0.6.0)で、公式サイトを見て、Webサイトなどに組み込んで動かそうとしても動作しません。

では、現在のバージョンで動かしたい場合はどうしたらいいでしょうか?

Response JSのGitHubページのページを参考にするといいでしょう。

Response JSのGitHubページのページのREADME.mdを読むと、body要素には以下のように記載しろと書かれています。

置換したい要素は、以下のように記載すれば大丈夫です。

Retina Displayへの対応方法

Retina Displayへの対応方法も記載されています。

いちおう、サンプル通りに書いたけど、どうも動きが微妙な気もします。

まとめ

Response JS」は、画像だけでなく、マークアップモードでコンテンツも入れ替えることもできるという、ある意味においてステキな(?)ライブラリです。しかし、コンテンツも入れ替えることは、ケースにも撚りますがコードのメンテナンス性が落ちます。

レスポンシブWebデザインにおいて、コンテンツを入れ替えることは、最小限にすべきです。

あと、ピクセルベースで画像やコンテンツを入れ替えていくため、レスポンシブWebデザインでブレイクポイントをピクセル以外に指定したときに問題がでてきます。そのため、現在はこのスクリプトをほとんど使っていません。

あと、ドキュメントが困ったちゃん的にいい加減なのは困ります。(マークアップモードでPHPも動くらしいけど怖いです。)

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