ティーエスフォートブログ

Response.js【便利なJavaScriptのご紹介]

これまでスライダー(カルーセル)パンくずリストの生成とご紹介して来たJavaScriptライブラリのお話の3回目です。

さて、今回は「Response.js」について書きたいと思います。

配布元 : http://responsejs.com/

このライブラリも目立たないながら多くのサイトで活躍しているライブラリの一つだと思います。

名前からも想像出来るように、こちらは主にレスポンシブサイトで使われるもので、
「ウィンドウ幅によって画像を切り替える」という処理を行ってくれます。
MITライセンスなのがうれしいですね。

MITライセンスとは(ウィキペディア)http://ja.wikipedia.org/wiki/MIT_License

例えば、横に長い画像をレスポンシブサイトに使用した場合、画面の横幅が狭いスマートフォンなどで見た場合とても小さく表示されてしまいます。また、PCで見た場合はきれいなのに、スマートフォンで見るとなんだか画像がぼやけてしまうというケースも意外と多くあります。こういった状況を回避する為にスマートフォンで見た場合はそのウインドウ幅に最適化された画像に差し替える処理を行ってくれるのがRespnse.jsです。

検索すると丁寧に使用方法を解説されているページがたくさん見つかりますが、(備忘録も兼ねて)以下簡単に使用方法を書きます。

配布元からjsファイルを保存して、ディレクトリにアップロード。使用したいページのヘッダにリンクを記述します
(ちなみにjQuery本体のアップと読み込みも忘れずに。意外と忘れがちで一瞬焦ります^^;)

<script src=”js/jquery1.7.2.min.js”></script>
<script src=”js/response.min.js”></script>

というような形で<head>〜</head>内に記述します。

今回はmarkupモードという記述方法の説明をします。

<body data-responsejs='{
“create”: [
{ “breakpoints”: [0,420], “mode”: “markup”, “prefix”: “r” }
]}’>

という感じで、まずbodyに設定を記述します。 “breakpoints”: [0,420]は画像が切り替わる
ウインドウ幅の指定です。この場合420pxを境に画像が切り替わる設定になります。

そして、imgの記述です。

と、その前に、PC向けの画像スマートフォン用の画像といった形で最適化した画像を作って、ディレクトリにアップしておきましょう。

さて、imgの記述は以下のようになります

<span data-r0='<img src=”画像のパス” alt=””>’ data-r420='<img src=”画像のパス” alt=””>’>default</span>

このように書だけで、指定したウィンドウ幅で2枚の画像が切り替わるようになります!

以前は、PC用の画像をモバイルで読み込むのは読み込みが遅くなるので、小さい画像を読み込ませていましたがRetinaなど高解像度のディスプレイが採用されるようになり、むしろスマートフォンの方が高品位な画像を必要としてきている場合もあります。回線も高速化していますし、今後はPC版に小さいサイズの画像を設定してスマートフォンは倍サイズの画像にといった指定の仕方も増えるかもしれません(ただ、単にモニタ解像度で差し換えならcssでも可能ですね)。
どちらにしても、簡単に差し替え可能なのでResponse.jsは今後も使われ続けるライブラリだと思います。

投稿日:2014.06.05
ページ先頭へ