物件リストページの作成

物件リストのページを作成します。まずは「賃貸物件」ディレクトリのトップページ('/forrent')です。このページは公開の設定で登録されている、すべての賃貸物件を新着順に表示します。「駅からの徒歩分」、「家賃」、「専有面積」、「築年月」で ソート(並べ替え)ができます。

ページの作成には Views モジュールを使います。Views は様々なコンテンツのリスト(一覧)を作成するモジュールです。例えば、記事の一覧をアクセスの多い順に表示したり、ユーザーをコメント投稿の多い順に表示したりすることができます。リストを作成するために様々な条件を設定したり、表示する件数や、ページャー(ページナビゲーションリンク)の設定なども出来ます。Views モジュールをまだインストールされていない方は、モジュールのインストールを参考に、インストールしてください。

ビューの作成

「管理」 > 「サイト構築」 > 「Views」にアクセスしてください。

新規ビューを作成します。左上の「Add new view」をクリック。

View name に「賃貸物件リスト」、システム内部名称には「forrent_bukken_list」と入力します。「表示」に「コンテンツ」、タイプは「賃貸物件」、ソートは「Newest first」(新着順)を選択、「Create a page」にチェックを入れ、ページのタイトルに「賃貸物件」、パスは「forrent/front」と入力してください。Display format は「テーブル」を選択します。あとはデフォルトのまま、「Save & exit」ボタンをクリックしてください。

これは今作成したページです。表示されているのは物件リストのテーブルです。デフォルトではコンテンツにリンクするタイトルのセルが1つ設定されています。パスは、'forrent/front' となっているはずです。これはあとで賃貸物件トップページ('/forrent')のデフォルトメニュータブに設定します(※ デフォルトメニュータブについては、のちほど説明します)。

フィールドの追加

図3で、タイトルの右側にマウスをかざすとコンテキストメニューが現れるので、「Edit view」をクリックしてください。

ビューの設定画面です。左側の FIELDS というところの設定から始めることにします。ここでは表示するフィールドを設定できます。デフォルトでは「コンテンツ: タイトル」という項目がひとつ入っていますが、これは先程ページに表示されていたセルです。ここの項目を、これからいくつか追加していきます。FIELDS ブロック右側の「追加」ボタンをクリックしてください。

左上の「For」のところは、「All displays」を選択、フィルタには「コンテンツ」を選択してください。

「コンテンツ: 外観写真」の項目を探してチェックを入れ、「Apply (all displays)」ボタンをクリックします。

「外観写真」フィールドの設定ダイアログが開きます。少しスクロールして、「画像のスタイル」に「thumbnail」、画像へのリンクに「コンテンツ」を選択します。

「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

FIELDS のところに、「コンテンツ: 外観写真」が追加されました。ここでちょっと、表示する順番をアレンジしてみます。FIELDS の追加ボタンの右側部分をクリックして、「rearrange」をクリックしてください。

フィールドのアレンジ画面です。移動をアイコンをドラッグして、「外観写真」をタイトルの前に持ってきます。その状態で「Apply (all displays)」ボタンをクリック。

ビューの設定画面に戻ったら、画面右上の「保存」ボタンをクリックして、設定を保存してください。

テーブルにセルが1つ追加されて2つになりました。左から順に「外観写真」と「タイトル」が表示されています。これは先程アレンジした順番です。外観写真は設定どおり、「thumbnail」の画像スタイルで、コンテンツのページ('forrent/content/{ノード ID}')にリンクしています。ソースを見ると、'div' でマークアップされているはずです。この2つのセルについては、あとで1つのセルに統合しますが、とりあえずこんな要領で、表示するフィールドを追加していきます。主な設定は以下の通りです。

ノード: Edit link

(※ 図5 の「フィルター」セレクトボックスでは、「ノード」を選択してください。)

Text to display に「編集」と入力、「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 市区町村

Formatter に「物件用カスタムリンク」(※1)を選択、「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 家賃

Formatter に「カスタム円」(※2)を選択、千の位の印に「スペース」、小数点記号に「小数点」、「位取り」に「万」、尺度に「1」を選択、「接頭語と接尾語を表示します。」にチェックを入れ、接尾語に「 万円/月」と入力します。「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 共益費/管理費

Formatter に「デフォルト」、「千の位の印」に「コンマ」を選択、「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 敷金

Formatter に「カスタム円」(※2)を選択、千の位の印に「スペース」、小数点記号に「小数点」、「位取り」に「万」、尺度に「1」を選択、「接頭語と接尾語を表示します。」にチェックを入れ、接尾語に「 万円」、「値が 0 のときの表示」に「無し」と入力します。「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 礼金

Formatter に「カスタム円」(※2)を選択、千の位の印に「スペース」、小数点記号に「小数点」、「位取り」に「万」、尺度に「1」を選択、「接頭語と接尾語を表示します。」にチェックを入れ、接尾語に「 万円」、「値が 0 のときの表示」に「無し」と入力します。「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 間取り

「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 専有面積

「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 向き

「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 物件タイプ

「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

コンテンツ: 築年月

Formatter に「日付と時刻」を選択、「Choose how users view dates and times」に「年月(~年~月)」(※3)を選択します。「STYLE SETTINGS」のフィールドセットを開き、「Customize field HTML」にチェックを入れ、HTML element に「DIV」を選択します。あとはデフォルトのまま「Apply (all displays)」ボタンをクリックします。

ここまで追加したところで、View の設定を保存し、出来上がったページを見てみましょう。

フィールドを追加した分だけ、セルが追加されました。

テーブルフォーマットの設定

いくつかのフィールドは、同じテーブルセルにまとめて表示するよう、テーブルフォーマットの設定をします。「賃貸物件リスト - エリアから探す」ビューの編集画面(「管理」 > 「サイト構築」 > 「Views」 > 「賃貸物件リスト - エリアから探す」)にアクセスしてください。

「フォーマット」のところの「環境設定」をクリック。

テーブルフォーマットの設定画面です。「コンテンツ: タイトル」と「Edit link」は「外観写真」のセルにまとめます。「コンテンツ: タイトル」の「COLUMN」セレクトボックスに「外観写真」を選択します。「Edit link」も同様に選択してください。

「家賃」と「共益費/管理費」は「家賃」のセルにまとめます。「共益費/管理費」の「COLUMN」セレクトボックスに「家賃」を選択します。

同様に「敷金」と「礼金」は「敷金」のセルに、「間取り」と「専有面積」は「専有面積」のセルに、「物件タイプ」と「築年月」は「築年月」のセルにまとめてください。(※ この際、ソート(並べ替え)操作の対象となるようなフィールドにまとめるようにします。)

その状態で「Apply (all displays)」ボタンをクリックします。ビューの編集画面の右上の「保存」ボタンをクリックして、設定を保存してください。

ビューのページ('/forrent/front')にアクセスすると、それぞれ設定したセルに、フィールドがまとめられました。

セルの表示は、中央寄りにした方がいいかもしれません。タイトルの右側にマウスをかざし、コンテキストメニューの「Edit view」をクリックして、もう一度ビューの編集画面に入ります。

フォーマットの「環境設定」をクリックして、さきほどのテーブルフォーマットの設定画面に入ってください。

ALIGN のセレクトボックスを、すべて「中央」に設定します。この状態でビューの設定を保存します。

セルがすべて中央寄りに表示されました。

次に、テーブルソートの設定をします。Drupal におけるテーブルソートとは、テーブルのヘッダー部分のラベルをクリックすると、その列の値の昇順/降順でソート(並べ替え)する機能です。この設定をする前に、並べ替えの動作を確認するため、賃貸物件のノードをあといくつか、適当なデータで登録しておいてください。

もう一度テーブルフォーマットの設定画面に戻り、「家賃」フィールドの「SORTABLE」のところにチェックを入れます。「デフォルトの並び順」のセレクトボックスが出現するので、「Ascending」(昇順)を選択します。

同様に、「専有面積」、「築年月」も SORTABLE に設定してください。デフォルトの並び順は、専有面積、築年月ともに「Descending」(降順)とします。この設定でビューを保存してください。

テーブルソートを設定したフィールドのヘッダーラベルをクリックすると、その列の昇順/降順にソートするようになりました。


※1 「物件用カスタムリンク」は「市区町村」フィールドの作成のところで作成した、カスタムフォーマットです。

※2 「カスタム円」は物件ノードページの作成 > その他の表示設定のところで作成した、カスタムフォーマットです。

※3 「年月」は物件ノードページの作成 > その他の表示設定のところで設定したフォーマットオプションです。