本日は Drupal （ドルーパル）のモジュールで「 Respond.js 」というモジュールをご紹介できればと思います。 Respond.js モジュールは同名の Respond.js という JavaScript のライブラリを Drupal サイトでかんたんに利用できる機能を提供してくれる素敵モジュールです。
スマートフォンやタブレットが広く一般化し、サイトによってはスマートフォンやタブレットからのアクセスが PC のアクセスを上回るほどにまでなりました。 今や CMS 業界でもレスポンシブ対応、スマートフォン対応が差別化ポイントとなった時代を過ぎて、レスポンシブ対応やスマートフォン対応が標準ともされる時代となりました（ただし、どの端末を優先してサイトを作るべきかというのはサイトのタイプやターゲットによるので、一概にスマートフォン対応すればよいという問題でもないということを申し添えておきます...）。
以下ではまずはじめに Respond.js とは何ぞやという説明をした後にこのモジュールの具体的な使い方をご説明していきます。
Respond.js とは
Respond.js とはレスポンシブデザインに対応していないブラウザをレスポンシブデザイン対応にしてくれるライブラリです。 具体的には、 Windows の Internet Explorer （以下 IE ） 6 7 8 などの CSS3 のメディアクエリに対応していないブラウザを擬似的にメディアクエリ対応にしてくれます。
公式の GitHub の Read me には次のように紹介されています。
> A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
> （意訳） 軽量で高速な CSS3 の min/max-width メディアクエリポリフィル（ IE 6-8 などに対応）
Respond.js モジュールとは
Drupal の Respond.js モジュールは上述の JavaScript ライブラリ Respond.js を Drupal でかんたんに利用できるようにしてくれるモジュールです。 他のモジュールが提供するスクリプトとの位置関係も考慮した上で適切なタイミングで Respond.js スクリプトが読み込まれるようにとの工夫がなされています。
Respond.js モジュールの使い方
では以下実際に Respond.js の使い方を見ていきましょう。 まずはインストールから。
インストール
インストールは他のモジュールと同じ一般的なモジュールインストール / 有効化の手続きを踏めば OK です。 ご存知でない方はこちらのページなどをご参考にしていただければと思います。
モジュールのマシン名は respondjs なので Drush でダウンロードするときは次のコマンドを使いましょう。
$ drush dl respondjsRespond.js モジュールが動作するためには Respond.js 本体が必要ですが、 Respond.js モジュールをダウンロードするとモジュールディレクトリ以下のパス lib/respond.min.js に Respond.js 本体がデフォルトで同梱された状態になっているかと思います。
万が一同梱されていない場合にはダウンロードして適切な位置に配置する方法として次の 2 つの方法があります。
- Drush を使う
- マニュアルで配置する
1 の Drush を使う方法の場合は次のコマンドを実行すれば OK です。
$ drush rjs-download2 の場合は Respond.js の GitHub リポジトリから本体を直接ダウンロードしてきて Drupal サイトのライブラリディレクトリ（ sites/all/libraries ）以下に respondjs ディレクトリを作ってその中に配置します。
ダウンロードがひと通り済んだら後はモジュールを有効化すればすぐにそのまま Respond.js の恩恵を受けることができます。 このモジュールが素晴らしいのは、古い IE のためだけにテーマを汚す必要が一切なくて、いずれ IE 8 対応をやめてしまうときにもモジュールを無効化するだけで対応できてしまうという点です。
使い方
使い方をちょっとだけ見てみましょう。 といっても Respond.js モジュールの設定画面はひとつだけで、そこに含まれる設定項目も 2 つのみです。
「 Where should respond.js be included? 」という項目は Respond.js の読み込みタグを HTML ページのどこに挿入するかという設定です。
デフォルトではヘッダになっていますが、フッタに変更することもできます。
もうひとつの「 Do not warn about CSS aggregation 」という項目は、 Drupal の CSS アグリゲーション（圧縮）が無効になっている場合の警告メッセージを表示するかどうかという設定です。
CSS アグリゲーションが有効になっていない場合は Respond.js が正常に動作しない場合があるとのことでデフォルトでは警告メッセージが表示されるようになっています。
特殊な状況でもないかぎり基本的にはデフォルトの設定でそのまま使うので問題ないかと思います。
以上です。
本来であれば Respond.js なんて使わなくてもよくなるのが理想の姿ですが、現状 IE にも一定のシェアが根強く残っているので、 HTML5 CSS3 対応を進めつつも Respond.js や html5shiv を使って IE 対応も同時に行っていく、というのが現実的な解決策といったところでしょうか。
ちなみに Drupal や CMS ににあまり馴染みのない方のために少し補足させていただくと CMS がレスポンシブ対応かどうか、というのはあまりポイントではありません。 というのは、ゼロベースでテーマを書ける自由度の高い CMS では（ Drupal もそのひとつです）、レスポンシブ対応させるかどうかはテーマ開発者次第、ひいては「サイトの要件」や「クライアントの要望」次第です。 ですので、「 CMS がレスポンシブ対応かどうか」というよりも、個別のテーマがレスポンシブ対応か、サイトがレスポンシブ対応か、というところが見るべきポイントになってきます。
ちなみに本原稿執筆時点で次期リリース予定の Drupal 8 ではデフォルトのユーザ向けテーマと管理用テーマの両方がレスポンシブデザインとして作られています。
募集しています
スタジオ・ウミは「Drupal」に特化したサービスを提供する Drupal のエキスパートチーム。
フルリモート＆フレックス制だから、働く場所を選ばず時間の使い方も自由です。
そんなワークライフバランスの整った環境で、当ブログに書かれているような
様々な技術を共に学びながら、Drupalサイト開発に携わってみたい方を募集しています。
まずはお話だけでも大歓迎！ぜひお気軽にご連絡ください。