コンテンツ一覧ページの作成
店舗コンテンツの作成が完了すると、店舗一覧ページを作成します。このような、コンテンツのリストを表示する際にはDrupalのビューズ機能を使用します。
ビューズ機能とは
ビューズ機能はクエリービルダーとも呼ばれ、コンテンツ、ユーザーの一覧表示や絞り込みなど、本来であればSQL文でDBからコンテンツを抽出する作業を、GUI上で行うツールです。また、一覧表示はリスト、テーブル、グリッドなど、さまざまな形を選択できます。
ビューズ機能を使う
今回は、上記で作成した店舗情報を一覧で表示します。サイト構築＞ビューズ＞ビューを追加をクリックします。ビューの作成画面が表示されるので、以下の情報を入力します。
| ビューの名前 | 店舗一覧 |
| システム内部名称 | stores |
| ビューの設定：表示 | コンテンツ |
| ビューの設定：タイプ指定 | 店舗 |
| ページの設定：ページを作成する | チェック |
| ページの設定：パス | stores |
|
ページの設定：ページの表示設定：ディスプレイフォーマット |
テーブル |
入力後、「保存して編集」ボタンをクリックすると、店舗一覧ビューの設定画面に推移します。画面下部のプレビュー表示を見ると、店舗名しか表示されていないので、住所、電話番号のフィールドを表示させます。まず、フィールドの追加ボタンをクリックし、検索ボックスに「住所」と入力します。住所フィールドが一覧に表示されるので、チェックボックスをチェックし、「フィールドを追加して設定」ボタンをクリックします。
次の画面は全てデフォルトの設定で良いので「適用」ボタンをクリックします。
同じ要領で電話番号フィールドも追加します。完了すると、画面下部のプレビューにタイトル、住所、電話番号が表示されます。
問題なく表示されていることが確認できれば保存し、右上の「Pageを表示」をクリックします。フロント画面で店舗一覧が表示されていることが確認できました。
タクソノミー機能を使う
ビューズでコンテンツを一覧表示させることに成功しましたが、コンテンツの数が多くなると、条件に応じて絞り込み表示を行う必要があります。このようにコンテンツを分類する目的ではタクソノミー機能を利用できます。今回は、店舗コンテンツタイプに「店舗特徴」というタクソノミーのボキャブラリー（タクソノミーの種類）を追加し、店舗一覧ビューに絞り込み機能を付与します。
ボキャブラリーとタームの作成
サイト構築＞タクソノミーの順で遷移し、「ボキャブラリーを追加」ボタンをクリックします。次のボキャブラリー追加ページでは以下の情報を入力し、保存します。
| 名前 | 店舗特徴 |
| システム内部名称 | store_characteristic |
これで、店舗情報ボキャブラリーが作成されました。この中に、実際の分類項目となるタームを作成していきます。「タームを追加」ボタンをクリックします。
次のターム作成画面で必要な入力項目は「名前」だけです。まずは「テラス席あり」と入力して保存します。サイト構築＞タクソノミーへ遷移し、店舗特徴ボキャブラリーの「タームのリスト」ボタンをクリックし、入力内容がリストに入っていれば成功です。
同じ要領で、「駐車場あり」「限定商品あり」のタームも作成しておきます。
タクソノミーフィールドの追加
タクソノミーのボキャブラリーは作成しただけではまだ使えません。フィールドとして店舗コンテンツタイプに付与する必要があります。サイト構築＞コンテンツタイプから、店舗コンテンツタイプの「フィールドの管理」ボタンをクリックします。
店舗コンテンツタイプに付与されたフィールドの一覧が表示されるので、「フィールドの追加」ボタンをクリックし、以下の情報を入力して保存します。
| 新しいフィールドの追加 | タクソノミーターム |
| ラベル | 店舗特徴 |
| システム内部名称 | store_characteristics |
フィールドの設定画面では、許容する値の数を無制限に変更して「フィールド設定を保存」ボタンをクリックします。次の「店舗の店舗特徴設定」画面では、実際にどのボキャブラリーをフィールドで利用可能にするのかを設定します。「参照タイプ」の欄にある「店舗特徴」ボキャブラリーのチェックボックスにチェックを入れて、保存ボタンをクリックします。
これで、フィールドの追加は完了です。
タクソノミータームを追加
管理メニューのコンテンツページからコンテンツの一覧を表示し、上記で作成した3つの店舗に、以下のタームを追加する編集をします。コンテンツ編集画面の一番下に、タームを追加するフィールドが新しく表示されています。
| 渋谷本店 | テラス席あり、限定メニューあり |
| 新宿店 | 限定メニューあり |
| 北千住店 | テラス席あり、駐車場あり |
自動補完機能により、タームの一部の文字列を入力すると候補が表示されます。
ビューに絞り込み機能を追加する
各店舗コンテンツに付与したタクソノミータームに応じて、店舗一覧ビューの表示結果を絞り込む機能を実装します。サイト構築＞ビューズから、店舗一覧ビューの編集画面へ遷移します。フィルターの条件欄の「追加」ボタンをクリックし、「店舗特徴 （field_store_characteristics）」にチェックを入れて「フィルター条件を追加して設定」ボタンをクリックします。
次の「フィルター条件のコンテンツ: 店舗特徴 （field_store_characteristics）に関するその他の設定を行う」画面では、選択タイプを「ドロップダウン」に変更して進みます。
次の「設定 フィルター条件: コンテンツ: 店舗特徴 （field_store_characteristics）」画面では、「このフィルターを訪問者へ表示し、変更できるようにする」にチェックを入れ、ラベルに「店舗特徴」と入力し、「適用」ボタンをクリックします。プレビュー画面を見ると、店舗特徴フィルターが設置されています。
ビュー設定画面右側の「高度」設定で、Ajaxを利用を「はい」に変更します。これにより、フィルターの値を変えたときにページの更新なく表示結果が絞り込めるようになります。
最後に、店舗一覧ビュー設定画面の「保存」ボタンをクリックすれば完了です。この保存ボタンをクリックしなければ、これまでの変更は反映されないので注意してください。筆者は時間をかけてビューを設定した挙げ句に保存ボタンをクリックし忘れてやりなおしするのを何度も経験しています。
右上の「Pageを表示」ボタンをクリックし、フロント画面の店舗一覧ビューに絞り込みフィルターが追加されているのを確認します。値を変更して適用ボタンを押すと、ページの更新なく表示結果が変更されるはずです。
