Drupal 7 Views 小ネタ集 Part 1

この記事は Drupal Advent Calendar 2015 15日目の記事です。

こんにちは。プログラマーの山中です。

今回は Views 関連の小さなネタを集めた記事となっております。

Drupal を使い始めたばかりの方対象としておりますので、Drupal の Views をある程度使用した経験のある方にとってはご存知の知識ばかりかもしれませんが、よろしければお付き合いいただけますと幸いです。

環境・前提条件

この記事では以下のような環境で構築した Drupal を使用しています。

• Mac OSX Yosemite + Apache 2.4 + MySQL

また、以下のような前提条件で進めています。

• この記事での 「ビュー」 は 「 Views で出力されたコンテンツ 」を指します。
• Views モジュールを表記する際には英語の「 Views 」を使用します。
• Drupal を通常インストールした状態です 。
• l10n_update モジュールで日本語化済みです。
• あらかじめ article のコンテンツタイプのコンテンツを数十件ほど投稿しています。
• 特記がない限り ビューは ページ , コンテンツタイプ: article , 表示件数: 20件 , その他デフォルトの状態 の設定で作成したビューを使用しています。
• ブラウザは Google Chrome 使用しています。

さて、早速1つめのネタから紹介していきましょう。

1. フォーマット: テーブル

Views には初期状態で計 5つ のフォーマットが用意されています。 (リスト、グリッド、ジャンプメニュー、テーブル、フォーマットされていないリスト( <div> を中心としたフォーマット ) )

その中でも テーブル は環境設定で設定できる項目が多いうえ、 CSSでスタイル調整しなくてもある程度見栄えが良いなど優秀なフォーマットです。 (CSSでのスタイル調整が前提のビューの場合は フォーマットされていないリスト が便利です。)

環境設定の中でも特に私が便利だと思う3つの設定項目を紹介しましょう。

1. ビュー上でクリックで並び替えできる
2. コンテンツが一切ない列は隠すことができる
3. 縦に長いテーブルのヘッダーを固定して表示することができる「 Sticky.js 」 が使える

表示項目が 投稿日, タイトル, 画像, タグ, 編集リンク のビューのテーブルの環境設定で以下のような設定を行います。

• 投稿日フィールド
  • 並び替え可能: チェックを入れる
  • デフォルトの並び順: Ascending(昇順)
  • デフォルトの並び順: チェックを入れる
• タイトルフィールド
  • 並び替え可能: チェックを入れる
• タグフィールド
  • 空の列を隠す: チェックを入れる
• Drupalスタイルの「固定」テーブルヘッダーを有効化 (Javascript): チェックを入れる

「適用」ボタンをクリックしてビューの保存ボタンを押して、ビューを実際に見てみると以下のスクリーンショットのようなビューが表示されるはずです。 並び替えや sticky.js の動作は実際に設定して確認してみてください。

2. ビューのSQL文を出力

View 全体の環境設定ページで設定を行うとビューの編集ページのプレビュー画面で SQL クエリを表示することができます。SQL の勉強にもってこいです！

設定方法についてはまず以下のページに移動します。

ホーム » 管理 » サイト構築 » ビュー » 環境設定
パス: admin/structure/views/settings

ライブプレビューの設定 のセクションの SQLクエリーを表示 にチェックを入れて保存します。設定はこれだけ。

あとは作成済のビューの編集ページに移動して、下の方にある「プレビューの更新」ボタンをクリックするとSQLクエリが表示されます。 以下のスクリーンショットでは 1.フォーマット: テーブル の設定のビューのSQL文を表示しています。

3. ビューのインポート/エクスポート機能

開発時のサーバと本番サイト用のサーバが切り分けられていることってよくあることですよね。 開発サーバで作成したビューを本番サイトに反映するとき、もう一度同じビューの設定をマウスで行うのは面倒です。 そこでビューのエクスポート機能とインポート機能を使用すると便利ですよ！ ではエクスポートから紹介していきます。

エクスポート

エクスポート画面へは ① 管理画面のビューの一覧ページ (パス: admin/structure/views)か、 ② ビューの編集画面 から移動することができます。

エクスポート画面にはPHPのコードがテキストフィールドに表示されますが、 インポートに使用したい場合は何も考えずにそのままテキストエリア内をコピーすればOKです。

インポート

インポート画面は管理画面のビューの一覧ページの上部にリンクがあるのでそこから移動します。

ビューのコードを貼り付けてください のテキストエリアにエクスポート画面からコピーしたコードを貼り付けます。

新しくビューを作成する場合はこのまま「インポート」ボタンをクリックすれば良いのですが、 既存のビューを上書きしたい場合は必ず 「 Replace an existing view if one exists with the same name 」の項目にチェックを入れて から「インポート」ボタンをクリックしてください。

するとビューの編集画面に移動しますので、一通り設定を確認して問題がなければ「保存」ボタンをクリックしてインポートは完了です。 既存のビューを上書きすることができるというのは良い点なのですが、「保存」ボタンを押してしまうともとのビューには戻せませんのでご注意ください。

最後に

小ネタ集と言っておきながら思いの外記事が長くなってしまったので3つまでしか紹介できませんでした。 まだまだネタはありますのでこれからも継続してご紹介していければと思います。