DEN(Drupal Experience Network) Camp Japan 2018 にて使用したスライドです。 https://drupal-camp2018.den-japan.org/

1. 一歩進んだ Views の使い方
スタジオ・ウミ 山中

2. ● Drupal 歴5年
● 最近はテーマ作成などフロントエンド中心
● モジュール作成したり顧客対応したりDrupalの保守したりもします
● 趣味はアニメを見たりゲームをしたり
ライブに行ったり楽器(クラリネット)を吹くこと
自己紹介- 山中 麻千子 🍵
2

3. 自己紹介- スタジオ・ウミについて
● Drupal での開発経験は10年以上
● ディレクション、要件定義、デザイン、開発、
保守運用、Drupal導入サポート等
● Web サイト: https://www.studio-umi.jp/
● Drupal Dawn: https://drupaldawn.jp/
○ 国内の Drupal サイトを集めたギャラリーサイト
3

4. このセッションの
対象者
● Views をちょっとだけ
さわったことがある方
● コードをほとんど書かずに
Drupal で機能を構築したい方
● Drupal の凄さを知りたい方
4

5. Views とは？
● コンテンツの一覧などを作成できる機能を提供するモジュール
● SQL の組み立てから表示までコードを一切書かずに行うことができる
● Drupal ８からコアに取り込まれた
● ほぼすべての Drupal サイトで使われる、Drupalの根幹となるモジュール
5

6. ● ただ単純に一覧をつくるためだけのモジュールではない
● SQL の組み立てから表示までを行う
＝ 様々な条件に応じたコンテンツを表示することができる
● 一歩進んだ Views の使い方をご紹介します！
○ フィルター / リレーションシップ / コンテクスチュアルフィルター
○ コントリビュートモジュールの追加で Views を拡張
● Drupal 8 ・ブロックの使い方がある程度知っていることを前提
Views は一覧を作るためのモジュール？
6

7. Views だけでできること
＼ 一歩進んだ ／
弊社ブログを実験台に
デモをしながら3つご説明します
7

8. ● フィルターの条件を使用
● 検索フォームの項目として使いたい条件の設定で下記項目にチェック
このフィルターを訪問者へ表示し、変更できるようにする
● ちなみに、外部設置フォームをブロックで提供で
「はい」を選択すると検索フォームがブロックとして
使用可能
一覧ページに簡易的な検索フォームを追加
8

9. 一覧ページに詳しい投稿者情報を表示
● リレーションシップを使用
● コンテンツカテゴリーの
コンテンツの投稿者 を追加
● 追加したいユーザーの情報を
フィールドから追加
( ユーザーカテゴリーで絞り込むとちょっと
探しやすくなります)
9

10. ● コンテクスチュアルフィルターを使用
● コンテンツ カテゴリーの ID を追加し、
フィルター値が利用可能でない時の
デフォルトの値を指定 にチェックを入れタイプ を
URL から取得したコンテンツ ID に設定
今見ているページ*1
の情報を別ブロックに表示
*1
Node で作成されたページに限ります
10

11. ● CSV / JSON への書き出し
● スライドショー
● ポップアップフォトギャラリー
● Google Map との連携
※ 別途 Google Map API キーの登録が必要
以上の4つをご紹介
モジュールの
追加で
Views を拡張
＼ さらに Views を活用 ／
11

12. CSV / JSON への書き出し
● CSV Serialization をインストール
○ コアモジュールの Serialization, RESTful Web Services も必要
● Views 作成時に REST エクスポート設定 が追加されるので選択
○ 既存の ビューに設定する場合は フォーマットにシリアライザー が追加されるので選択
● フォーマット シリアライザーの設定で CSV か JSON を選択
● その他追加したいフィールドを追加
12

13. ● Slick Carousel, Blazy*3
, Slick views をそれぞれインストール
● モジュールに必要なライブラリを追加
○ Drupal ルートディレクトリ上に libraries ディレクトリを作成して追加
○ 詳しい追加方法は README ファイル を確認
● Views のフォーマットに
Slick Carousel が追加されるので選択
● その他スライドショーに関する設定を行う
スライドショー
*3
2018年11月現在では Drupal のセキュリティアドバイザリーポリシーの対象外のモジュールとなっているため、
セキュリティ面について十分にご考慮いただいた上でご利用ください。
13

14. ポップアップフォトギャラリー
● Colorbox をインストール
● モジュールに必要なライブラリを追加
○ drush が有効であれば drush で追加可能
○ 詳しい追加方法は README ファイル を確認
● Views の設定で対象の画像フィールドの
フォーマッターで Colorbox を選択
● サムネイル画像やグルーピングなどを設定
$ drush colorbox-plugin
14

15. Google Map との連携
● Geofield と Geofield Map*4
をインストール
○ Geofield モジュールは geoPHP ライブラリが必要なので Composer を使ってダウンロード
● Google Map API Key*5
を設定
● 地図のコンテンツタイプにフィールド Geofield を追加
○ フォームの表示設定でウィジェットを Geofield Map に設定
● Views でフィールドに作成した Geofield を追加後、フォーマットに
Geofield Google Map を選択して、マップに好きな設定をする。
$ composer require 'drupal/geofield’
*4
2018年11月現在では Drupal のセキュリティアドバイザリーポリシーの対象外のモジュールとなっているため、
セキュリティ面について十分にご考慮いただいた上でご利用ください。
*5
環境設定 » システム » Geofield Map settings のページの Gmap API Key で設定可能です。 Google Map API は別途取得ください。 15

16. このセッションで紹介した Views の使い方
全部プログラムコードを書いてません✌
（一部コンソールでの作業は必要ですが）
Views を使いこなせれば
できることが広がります！
16

17. ＼ ご清聴ありがとうございました ／