![第10回 Drupal 8 の標準クエリービルダ Viewsの使い方](/sites/default/files/styles/annai_magazine_eyecatch/public/2021-03/Beginner10.png.webp?itok=czAfGaXY)
CMS を使った Web サイトの構築では、管理しているコンテンツの中から特定の条件に一致するものを抽出し、適切な形式で表示する機能が必要になります。一般にこうした処理は、サイト固有の要件に基づいて個別に作り込む必要がありますが、これをプログラミングなしで、管理画面から行えるようにする仕組みが Views です。今回は、この Views の機能を紹介します。
CMSとクエリー
CMS を利用したサイト構築においては、管理しているコンテンツの中から場面に応じて必要なものを選択し、適切な形で表示する必要があります。たとえば、弊社のトップページにある ANNAI マガジンの新着一覧は、記事の中から作成日時が新しいものを順に3件抽出し、日付、アイキャッチ画像、タイトル、作成者、記事リンク等を適切なスタイルで並べた形になっています。記事は日々更新され追加されていきますから、常に最新の一覧を表示するには、記事コンテンツのクエリーを発行し、動的な結果を表示する必要があります。
![image0](/sites/default/files/inline-images/Image_0_6.png)
コンテンツのクエリーに基づく動的な表示の例
![image1](/sites/default/files/inline-images/Image_1_9.png)
Drupal でこうした機能を担うものが Views です。一般に、データベースへの問い合わせには SQL(構造化クエリー言語)が使われますが、Views を利用すれば、このクエリーを管理画面の UI 上で定義することができます。また Views には、コンテンツを抽出する機能だけでなく、その結果を加工する機能(後述します)も含まれています。コンテンツの抽出条件を加工処理をまとめて1つの設定(ビュー)として保存しておき、必要に応じて繰り返し呼び出すことができるのです。
Views の使用例
ここでは、Views の概要を知っていただくため、最も基本的な次の設定項目について簡単な使用例を紹介します。
フォーマット | クエリーの結果を表示する形式を指定する。 |
---|---|
フィールド | 表示される個々のデータ項目です。 |
フィルター | 結果を抽出するための条件です。 |
並べ替え基準 | Views の結果として表示される項目の表示順を決定します。 |
例として「自動車」というコンテンツタイプを用意しました。標準で用意されるタイトルと本文に加えて、車種(タクソノミー)、色、定員、写真といったフィールドを定義してあります。この 「自動車」 コンテンツのサンプルが10件登録されているという想定で、Views の定義(ビュー)を作ってコンテンツを抽出する例を見ていくことにしましょう。
まず、新しいビューを1つ定義します。ビューを作成するときには、対象とするコンテンツタイプを指定することができます。ここでは当然 「自動車」を指定しておきます。
![image2](/sites/default/files/inline-images/Image_2_4.png)
ビューの新規作成
他の設定は初期値のまま先へ進むと、次のような構成で新しいビューが作成されます。
![image3](/sites/default/files/inline-images/Image_3_5.png)
初期状態のビュー管理画面
Views の管理画面にはプレビュー機能があり、各種パラメータを変更しながらビューの出力結果を確認できます。いま作成したビューでは、サンプルコンテンツの一覧が次のようにプレビュー表示されます。
![image4](/sites/default/files/inline-images/Image_4_4.png)
作成したビューのプレビュー出力
以下、設定を変えながらプレビューの変化を見ていきましょう。
フォーマット
まず、タイトルの下にある「フォーマット」から見ていきましょう。これは、抽出したコンテンツの出力形式を決める設定です。初期状態では「フォーマットなしの一覧」と「フィールド」という設定値になっています。前者は結果として出力される一覧のマークアップを指定するもので、具体的には div 要素として出力されることを意味しています。たとえば、この設定を「HTMLリスト」に変えると、div ではなく ul 配下の li 要素に変わり、プレビューを見るとリスト形式になるのがわかります。
![image5](/sites/default/files/inline-images/Image_5_3.png)
フォーマットを「HTMLリスト」にした場合
あるいは、「テーブル」 に変えると、表形式に変わります。
![image6](/sites/default/files/inline-images/Image_6_3.png)
フォーマットを「テーブル」にした場合
出力のマークアップが簡単に変えられることがわかりますね。なお「フォーマット」 の下にある「表示」という項目は各行の中身を指定する設定で、初期値の「フィールド」を指定した場合、Views 側で出力行のフィールド(要素)を制御できるようになります。次に、このフィールドを操作してみましょう。
フィールド
初期状態で設定されたフィールドはタイトルだけでした。これに本文、定員、色、車種、写真といった「自動車」コンテンツタイプのフィールドを追加してみましょう。フォーマットはテーブルのままなので、各フィールドは表の列として追加されます。
![image7](/sites/default/files/inline-images/Image_7_1.png)
フィールドを追加した結果
うーん、写真がやや大きすぎて他の列が窮屈ですね。こういう場合は、画像の出力スタイルを変更すると良いでしょう。Drupal 8 では「サムネイル」 (100 x 100 ピクセル)という画像スタイルが標準で用意されているので、フィールド設定でこれを指定してみます。
![image8](/sites/default/files/inline-images/Image_8_0.png)
フィールドの画像スタイルを設定する
画像が小さくなり、表全体のバランスが改善されました。
![image9](/sites/default/files/inline-images/Image_9_0.png)
画像スタイルを調整した後
このように、Views では各フィールドの出力を加工できます。上記は画像スタイルの変更でしたが、他にも、各行の出力を別のマークアップで置き換える、その中で別フィールドの値を参照して埋め込む、出力テキストを一定の文字数で切り落とす、等々さまざまなオプションが用意されています。
フィルタ
次にフィルタを追加してみましょう。フィルタとはコンテンツの抽出条件を指定するもので、特定の条件に一致するものだけを表示することができます。たとえば、「車種」フィールドをフィルタの条件に追加し、その値が「トラック」と「重機」のいずれかであるものだけを抽出してみましょう。
![image10](/sites/default/files/inline-images/Image_10.png)
フィルタ条件で「車種」を重機とトラックのいずれかに指定する
そうすると、指定した結果に出力される自動車は重機とトラックだけになり、他のバスや乗用車、バイク等は表示されなくなります。
![image11](/sites/default/files/inline-images/Image_11.png)
「車種」を重機とトラックのいずれかに指定した結果
また、フィルタの指定は固定的に設定するだけでなく、ユーザーに選択肢を提示し、条件を直接選択してもらうことも可能です。
![exposed filter による対話的な条件指定](/sites/default/files/inline-images/Image_12.png)
exposed filter による対話的な条件指定
この機能は "exposed filter(外部設置フィルター)" と呼ばれています。これを利用すれば、数回のクリックで簡単なコンテンツ検索画面を作ることができます。
並び替え基準
最後に一覧の表示順序を設定しておきましょう。初期設定ではコンテンツの投稿日時の降順になっています。たとえば、これを乗車定員の降順に変えてみます。
![並び替え基準に「定員」フィールドの降順を追加する](/sites/default/files/inline-images/Image_13.png)
並び替え基準に「定員」フィールドの降順を追加する
フィルタと同様、並び替え基準も複数指定できます。基準が複数ある場合は、上位の項目が優先的に適用されるので、乗車定員を最上位に設定することで定員順の表示に変わります。
![並び替え基準に定員フィールドを追加した結果](/sites/default/files/inline-images/Image_14.png)
並び替え基準に定員フィールドを追加した結果
人が多く乗れる順に、自動車コンテンツを一覧表示することができました。このように、コンテンツの属性を自由に指定して表示順序を制御することも簡単です。
ディスプレイ
以上、Views の基本機能として、コンテンツのクエリーと出力の加工をプログラミングなしで行う例をご覧いただきました。ところで、こうして定義したビューの出力は、実際にどのような形で利用するのでしょう。この利用形態を指定するものが「ディスプレイ」です。具体的には、ページ、ブロック、フィードなどのディスプレイがあり、同じビューをそれぞれの異なる形で出力させることができます。
![ディスプレイの設定](/sites/default/files/inline-images/Image_15.png)
ディスプレイの設定
たとえば、「ページ」ディスプレイを設定すると、固有のURLを持つページとして結果が出力されます。同じビューに「ブロック」ディスプレイを追加すると、任意のリージョンに埋め込めるブロックとして結果を出力することも可能です。Drupal 8では、この他にも、添付、エンベッド、エンティティ参照といったディスプレイが用意されており、用途に応じた形でビューの出力を利用できるようになっています。
実際にやってみよう
Views の強力な機能がわかると、実際に使ってみたくなりませんか?
具体的な操作方法を含めた使い方は、Think IT の連載記事で詳しく解説しています。ビューの新規作成から、各種設定、ディスプレイの追加、検索機能の実装など、各手順をステップバイステップ方式で実習できますので、記事を見ながら、ぜひ実際に操作して、Views のパワーに触れてみてください。
- 【Drupal 8入門】Viewsによるコンテンツ一覧ページの作成(前編)―Viewsの概念と基本的な使い方
- 【Drupal 8入門】Viewsによるコンテンツ一覧ページの作成(後編)―AJAXページャーや検索機能の実装
まとめ
今回は、Drupal のクエリービルダである Views の機能を紹介しました。プログラムコードを利用したクエリーに比べて次のような利点を挙げることができます。
- コーディングがいらない: SQL やプログラム言語を知らない人でもコンテンツのクエリーを実装できる。
- 安全性: 脆弱性の検証が行われているモジュールのコードで出力が生成される。
- 複数の利用形態: 一つのビューをページ、ブロック、フィードなど複数の形態で利用できる。
- 検索機能: exposed filter を利用して検索フォームを簡単に実装できる
これ以外にも、他のモジュールとの連携でフォーマット、フィールド、フィルタ等を拡張できることや、コンテキストフィルタと呼ばれる URL パラメータによる制御、リレーションを利用した高度なクエリーを実現できること等も大きな強みです。こうした機能を活用することで、サイトの構築やメンテナンスをより効率的に行うことができるでしょう。
最初は少し難しく見えるかもしれませんが、上で紹介した基本を押さえてしまえば、後は少しずつ探求していけると思います。ぜひご自分の手を動かして体験してみてください。
次回は、Views 以外の方法でコンテンツのクエリーを行う方法について、他の CMS の例とも比較しながら考察してみたいと思います。
関連コンテンツ
- 第16回 Drupalをもっと知りたい方に向けた各種情報
- 第15回 Drupal 8 の拡張モジュールの選定と使い方
- 第14回 Drupal 8 のテーマシステムについて
- 第13回 Drupal 8 の権限設定とWordPressやMovable Typeとの比較
- 第12回 Drupal 8の多言語機能と他のCMSやサービスとの比較
- 第11回 Drupal 8 と他のCMSのクエリビルダー機能を比較
- 第9回 Drupal 8のブロックシステム
- 第8回 コンテンツ管理におけるDrupal 8 と他のCMSとの比較
- 第7回 Drupal 8 のボキャブラリとタクソノミーの使い方
- 第6回 Drupal 8 にコンテンツを投稿してみる
Drupal 8初心者講座バックナンバー
Drupal 8初心者講座について
第1回 歴史に見るDrupalのDNA
第2回 Drupalはフレームワークか?CMSか?他のCMSとの比較
第3回 Drupalの特徴
第4回 Drupal 8のインストール (1)
第5回 Drupal 8のインストール(2)
第6回 Drupalにコンテンツを投稿してみる
第7回 Drupalのボキャブラリとタクソノミーの使い方
第8回 コンテンツ管理におけるDrupalと他のCMSとの比較
第9回 Drupal 8のブロックシステム
第10回 Drupalの標準クエリービルダ Viewsの使い方
第11回 Drupalと他のCMSのクエリビルダー機能を比較
第12回 Drupal 8の多言語機能と他のCMSやサービスとの比較
第13回 Drupalの権限設定とWordPressやMovable Typeとの比較
第14回 Drupalのテーマシステムについて
第15回 Drupalの拡張モジュールの選定と使い方
第16回 Drupalをもっと知りたい方に向けた各種情報