この連載が書籍になりました! Drupal 8初の日本語解説書『Drupal 8 スタートブック』好評発売中です。

【Drupal 8入門】Viewsによるコンテンツ一覧ページの作成(後編)―AJAXページャーや検索機能の実装

2016年9月1日(木)
ANNAI株式会社

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

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

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

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

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


横幅フルサイズ時

image alt text


横幅狭めた時

image alt text


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

image alt text


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

image alt text


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

image alt text


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

image alt text


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

image alt text


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

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

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

image alt text


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

image alt text


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

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

image alt text


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

image alt text


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

image alt text

今回のまとめ

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

image alt text

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

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

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

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

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

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

ANNAIは、2009年からDrupal専門のWebシステム開発会社として、世界規模で展開するグローバル企業や大学・自治体を中心に数多くのWebソリューションを提供。
CoreやModuleのコントリビューターなど、Drupalエキスパートが多数在籍。国内ユーザーコミュニティへも積極的にコミットし、定期的なセミナーの等の開催を通じて、オープンソース技術の普及や海外コミュニティとの緊密な連携を図っている。
Webシステムの企画・開発〜デザイン、クラウド運用までをワンストップで提供する他、Drupalのコーディングを評価する"Audit業務"や最適なモジュールの調査・選定等、幅広いコンサルティングを行っている。Drupalアソシエーション公式パートナー。
https://annai.co.jp

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています