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

Presentation on theme: "一歩進んだ Views の使い方 スタジオ・ウミ 山中."— Presentation transcript:

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

2 自己紹介 - 山中 麻千子🍵 Drupal 歴5年 最近はテーマ作成などフロントエンド中心
趣味はアニメを見たりゲームをしたり ライブに行ったり楽器(クラリネット)を吹くこと

3 自己紹介 - スタジオ・ウミについて Drupal での開発経験は10年以上
Web サイト: Drupal Dawn: 国内の Drupal サイトを集めたギャラリーサイト

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

5 Views とは？ コンテンツの一覧などを作成できる機能を提供するモジュール
SQL の組み立てから表示までコードを一切書かずに行うことができる Drupal ８からコアに取り込まれた ほぼすべての Drupal サイトで使われる、Drupalの根幹となるモジュール <!-- Views を知らない人が 1/3 を超えるようであれば説明 -->

6 Views は一覧を作るためのモジュール？
ただ単純に一覧をつくるためだけのモジュールではない SQL の組み立てから表示までを行う ＝ 様々な条件に応じたコンテンツを表示することができる 一歩進んだ Views の使い方をご紹介します！ フィルター / リレーションシップ / コンテクスチュアルフィルター コントリビュートモジュールの追加で Views を拡張 Drupal 8 ・ブロックの使い方がある程度知っていることを前提 Views はコンテンツの一覧 を作成するためによく使われていますが、ただ単純に一覧をつくるためだけのモジュールではありません。 SQL の組み立てから表示までを行うため、様々な条件に応じたコンテンツを表示することができるのです。 今回は単純な一覧の表示だけではない、一歩進んだ Views の使い方を実例やデモなどを交えながらご紹介します。 触ったことのある方向けに言うと フィルター、コンテクスチュアルフィルター、リレーションシップの使い方とコントリビュートモジュールで拡張する Views の設定などについて紹介します。 また、 Drupal 8 の Views を前提としています。 Drupal 7 でも使えるものもあるかもしれませんが…その点ご了承ください。

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

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

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

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

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

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

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

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

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’ * 年11月現在では Drupal のセキュリティアドバイザリーポリシーの対象外のモジュールとなっているため、 セキュリティ面について十分にご考慮いただいた上でご利用ください。 *5 環境設定 » システム » Geofield Map settings のページの Gmap API Key で設定可能です。Google Map API は別途取得ください。

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

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