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

【Drupal 8入門】Viewsによるコンテンツ一覧ページの作成(前編)―Viewsの概念と基本的な使い方

2016年8月25日(木)
ANNAI株式会社

コンテンツの「ビューモード」を編集する

Drupalでは1つのコンテンツをさまざまな形で表示できます。それぞれの表示形式を「ビューモード」と呼びます。Drupalには標準で「Default(標準)」と「Teaser(概要)」の2つのビューモードがあります。また、独自のビューモードを作成することも可能です。実際にサンプルサイトで2つのビューモードの違いを確認してみましょう。

image alt text

「Default(標準)」も「Teaser(概要)」も新着情報の同じコンテンツを表示しています。「Default(標準)」では上から順番に「タイトル」「本文」「タクソノミー」の3つのフィールドが表示されており、「Teaser(概要)」では、「タイトル」「概要分」「コンテンツへのリンク」が表示されています。 このようにDrupalにおいては、同じコンテンツをさまざまな見せ方(ビューモード)で表示できます。この機能を利用して、新着情報コンテンツの一覧ページを作成します。


1.管理者メニューの「サイト構築」をクリックして、「コンテンツ管理」画面から、「新着情報」にある「フィールドの管理」クリックします。

image alt text


2.「フィールドの管理」画面で、「表示管理」タブをクリックします。

image alt text


3.「表示管理」画面で、「Teaser」をクリックします。

image alt text


4.「Teaser(概要)」のビューモードの設定画面です。このページで表示したいフィールドを選択し、順番に並び替えることでコンテンツの表示方式を変更できます。

image alt text


フィールドの並び順を以下のように「本文」と「リンク」を入れ替えて、本文を一番上に変更して「保存」ボタンをクリックします。

image alt text


5./newsページを確認します。「Teaser(概要)」の下に「コンテンツへのリンク(続きを見る)」が表示されているのが確認できます。これで新着情報ページが作成できました。

image alt text


6.次に「/newsページ」をメインナビゲーションメニューに登録します。 管理者メニューの「サイト構築」をクリックし、「サイト構築」画面から「メニュー」をクリックします。「メニュー」画面が表示されますので、「メインナビゲーション」の「メニューの編集」をクリックし、「メインナビゲーションの編集」の編集画面から「+リンクの追加」より「新着情報」という名前でメニューを登録していきます。 これでメインメニューに「新着情報」ページへのリンクが作成されました。

image alt text

image alt text


実験的にビューモードの設定を変更して、コンテンツがどのように見えるのかを確かめてみましょう。
先ほどの「Teaser」の表示管理ページで「本文」フィールドのフォーマットを「デフォルト」に設定し、/newsページの表示を確認してみてください。

image alt text


以下の通り、「概要文」だけが表示された状態から、本文全体が表示されるようになりました。
このように、フィールドの設定をビューモードごとに変えることで、1つのコンテンツをさまざまな形式で表示することが可能です。

image alt text

今回は「新着情報」ページを、Viewsを使ってコンテンツの「Teaser(概要)」ビューモードを並べることで作成しました。もちろん、最初に作成したブロックと同様にフィールドを追加して作成することも可能です。フィールドとして表示するか、コンテンツとして表示するかは、時と場合に応じて使い分ける必要があります。

Display suite」モジュール(拡張機能)を導入すると、フィールドの詳細なレイアウト配置やclassの追加など、ビューモードのページで詳細な設定も可能になります。

今回のまとめ

今回はDrupalの目玉機能「Views」を使って「新着情報」の一覧を表示するブロックとページを作成しました。 Viewsを使うとコードを書かずにかなりのことができるというのを実感して頂けたのではなでしょうか。今回使用した機能は、Viewsの機能のほんの一部に過ぎません。

サンプルサイトの「製品紹介ページ」をご覧ください。製品の検索機能とページャー機能が実装されています。どちらもAjaxにより、ページ遷移なしで製品を表示する機能を備えています。Viewsを使うとこれらの機能も簡単に実装できます。次回はこれらの機能をViewsを使って実装していきます。

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

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会員サービスの概要とメリットをチェック

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