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

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

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

前回はViewsを使って、新着情報を「ブロック」と「ページ」の2つの方法で表示しました。引き続き、Viewsを使って製品紹介の一覧を作成していきます。Viewsを使うとコンテンツのリストを作る以外にも、テーブルやグリッドのように表示形式を変更したり、ソートや検索などの機能追加も簡単に実装できます。今回はAJAXページャーや検索機能の実装を行っていきます。

サンプルサイト http://demo.drupal8-getting-started.annai.co.jp

素材集 http://demo.drupal8-getting-started.annai.co.jp/download

Viewsで「製品紹介」コンテンツを表示する

「Viewsブロック」でトップページの「製品紹介」の一覧を作成する

では、最初にトップページの「製品紹介」ブロックを作成していきます。まず、このViewsが何を表示しているのかを明確にしましょう。コンテンツタイプ「製品紹介」のコンテンツの「タイトル」と「概要文」を新しい順に4件表示して「ブロック」として出力しています。また、その下にはAJAXページャーが実装されて、クリックすると画面遷移なしでコンテンツが切り替わります。

image alt text

仕様を表にすると以下の通りになります。この仕様を満たすViewsを作成していきます。

コンテンツタイプ 表示形式 表示フィールド 表示件数 表示順 フォーマット
製品紹介 ブロック ・製品画像
・タイトル(リンク付)
・概要文
4件
AJAXページャー実装
投稿日時が新しい順 グリッド

Viewsの作成

1.管理者メニューの「サイト構築」から「ビューズ」をクリックします。

image alt text


2.「ビューズ」画面で「ビューを追加」ボタンをクリックします。

image alt text


3.「ビューの追加」ページに項目を入力します。 「ビューの名前」に「製品紹介」、「システム内部名称」に「product」、「説明」に「製品紹介の一覧を表示します。」と入力します。

image alt text


4.「ビューの設定」セクションでは「表示」に「コンテンツ」、「タイプ指定」に「製品紹介」、「並び順」に「新しい順」と入力します。

image alt text


5.「ページの設定」と「ブロックの設定」セクションです。 今回は「ブロック」を作成するので「ブロックを作成」チェックボックスにチェックを入れます。「ブロックのタイトル」には「製品紹介」、「表示形式」に「グリッド」「タイトル(リンク付き)」、「ブロックごとの項目」に「4」と入力した後「ページャーを使用する」にチェックを入れて「保存して編集」ボタンをクリックします。

image alt text


6.製品紹介のビューが保存され、ビューの設定画面が表示されます。

image alt text

image alt text


7.「表示名」の横にある「Block」をクリックします。

image alt text


8.「管理用名称」に「製品紹介ブロック(トップ)」、「管理用の説明」に「トップページに表示する製品紹介表示用ブロックです。」と入力し「適用」「保存」ボタンをクリックし、設定画面下のプレビューを確認します。

image alt text


9.プレビューの内容と、実際に作りたい「Viewsブロック」の内容を比べてみましょう。 プレビューには「タイトル」が横並びに4件並んでいます。また、その下にはページャーが表示されています。これに「製品画像」と「本文(概要)」を追加すると、目的とする「Viewsブロック」ができます。

image alt text

image alt text


10.設定画面の「フィールド」の項目を確認すると、「コンテンツ:タイトル」と表示されています。この項目に「製品画像」と「本文(概要)」を追加します。フィールド横の「を追加」ボタンをクリックします。

image alt text


13.「フィールドを追加」ウィンドウから「本文」と「製品画像」にチェックを入れ「フィールドを追加して設定」ボタンをクリックします。

image alt text


14.「本文」フィールドの設定ウィンドウが表示されます。「フォーマッター」で「概要か切り詰め」を選択し、「適用して続ける」ボタンをクリックします。

image alt text


15.続いて「製品画像」フィールドの設定ウィンドウが表示されます。「フォーマッター」に「画像」、「画像のスタイル」に「中(220×220)」、「画像へのリンク」に「コンテンツ」を選択して「適用」ボタンをクリックします。

image alt text


16.プレビュー画面を見ると、以下のように表示されています。目的とする表示にするためには、並び順を上から「製品画像」「タイトル」「本文」の順番に設定する必要があります。

image alt text


17.フィールドの「を追加」ボタンから「並び替え」をクリックします。

image alt text


18.「フィールドの並べ替え」ウィンドウで「製品画像」「タイトル」「本文」の順に並び替え「適用」「保存」をクリックします。

image alt text


19.プレビューで「製品画像」「タイトル」「本文」の順番にフィールドが並んでいるのを確認します。

この状態でブロックをトップページに配置してみます。

image alt text

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

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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

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

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。