Viewsのマークアップを変更して、レスポンシブWebデザインに対応させる

Viewsのマークアップを変更して、レスポンシブWebデザインに対応させる

作成した「製品紹介」ブロックと「製品紹介」ページをレスポンシブに対応させる設定を行います。

今回使用している「Paxton」テーマはBootstrapをベースに作られているため、Viewsで出力された要素に適切なマークアップをすることで、レスポンシブ対応をさせることができます。

ここでは、Viewsの機能を利用して出力したHTMLにclassを付加することでレスポンシブ対応を行います。

画面の横幅を狭めて、「製品紹介」ブロックのレイアウトを確認します。横幅を狭めると、横に4つ並んでいるカラムの横幅が狭くなってしまいます。この問題を改善します。

横幅フルサイズ時

横幅狭めた時

1.管理者メニューの「サイト構築」画面の「ビューズ」リンクをクリックして、「製品紹介(コンテンツ)」画面の「フォーマット」セクションの「グリッド」リンクをクリックします。

2.「製品紹介ブロック(トップ): このビューのスタイル」ウィンドウの「対象」が「すべてのディスプレイ」、「グリッド」ラジオボックスにチェックが入っているのを確認します。この設定になっていない場合は、再度設定してください。今回はトップページの「製品紹介ブロック(トップ)」ブロックと、「製品紹介」ページの両方に同様の設定を行うので「対象」を「すべてのディスプレイ」に設定します。

3.「製品紹介(コンテンツ)」画面の「フォーマット」セクションの「設定」リンクをクリックします。

2.「製品紹介ブロック(トップ): スタイルのオプション」画面です。ここで、Viewsで出力されるHTMLのスタイルの変更や、classの追加をすることができます。現状では「カラム数」が「4」に設定されていて、「幅自動設定」チェックボックスにチェックが入っています。そのため、グリッドが4カラムで、画面の横幅に応じて各カラムの横幅が自動で変化する設定になっています。そのため、横幅を狭くした場合に、各カラムが細長くなってしまいます。

出力されるViewsのHTMLを確認してみましょう。「style="width:25%”」が各カラムに適用されています。これを変更して、Bootstrapのスタイルを適用させるためにclassを追加します。

3.「製品紹介ブロック(トップ): スタイルのオプション」画面で「カラム数」セクションの「幅自動設定」と「Default Column Classes」チェックボックスのチェックを外します。

「カスタムカラムクラス」セクションの入力欄に「col-xs-12 col-sm-6 col-md-3」とクラスを入力して、「デフォルトの行クラス」チェックボックスのチェックを外します。

「カスタム行クラス」セクションの入力欄に「row」とクラスを入力して、「デフォルトの行クラス」チェックボックスのチェックを外します。

4.トップページ戻り、再び出力されるHTMLを確認してみます。先ほど設定したスタイルが適用されているのが確認できます。

5.画面の横幅を変えて挙動を確認してみましょう。以下のように横幅に応じてレイアウトが変わり、レスポンシブ対応になっています。「製品紹介」ページも同様になっているはずです。

デスクトップ表示(横幅大):4カラム

タブレット表示(横幅中):2カラム

スマートフォン(横幅小):1カラム

今回のまとめ

今回はViewsを使って「製品紹介」の一覧を表示するブロックとページを作成しました。そして、AJAXページャー機能や検索機能を実装しました。これ以外にもViewsはコンテンツのURLクエリーやユーザーロール、コンテンツの持つ情報に応じて、動的に表示する内容を変える「コンテクスチュアルフィルター」や、データベース上の複数のテーブルを結合(JOIN)する「リレーションシップ」など、今回は紹介できなかった非常に優れた機能を備えています。

Viewsの基本的な操作に慣れた方はぜひ、挑戦してみてください。

Webアプリケーションの開発をしている方であれば、「普段コードを書いて実現しているような機能が、実はGUIから自動生成できるのでは？」と思われたかもしれません。

まさにその通りです。連載2回目で紹介したコンテンツタイプと今回登場したViewsの機能を使えば、標準的なCRUD(新規作成、表示、更新、削除)の機能はコードを一切書かずに作ることができます。

Viewsで扱うことのできるデータもDrupalのコンテンツ、ユーザー、タクソノミーなどのEntityだけではなく、外部リソースを操作することもできますし、出力ををjsonやXMLなどに変えれば簡易的なAPIサーバーとして動かすことも可能です。

次回は「ブロックレイアウト」と「コンタクトフォーム」の作成について説明します。ブロックについては、これまでにViewsで作成したブロックを配置するなど、すでに何度も利用してきました。次回はDrupalの「ブロックレイアウト」についてもう少し深く掘り下げます。

次回の配信予定日は9月8日です。ぜひ、次回もご期待ください。