【前編】CSSもJSも不要！DrupalのViewsで作るイメージギャラリーの作成方法

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

今回はコードを一切書かずに Views モジュールと Colorbox モジュールでイメージギャラリーを作成する方法を前後編に分けてご紹介いたします。

記事が長くなりましたので2分割にしています。 後編はこちらからどうぞ → 【後編】CSSもJSも不要！DrupalのViewsで作るイメージギャラリーの作成方法

今回の開発の前提条件

要件

• サムネイル画像を一覧表示しクリックすると大きな画像がオーバーレイで表示されるイメージギャラリーページ
• 管理者側は1ノードにつき1画像で投稿する形にする

完成イメージは以下のリンク先にあるようなギャラリーページです（いずれも弊社で過去にお作りしたものです）。

• 厄除 立木観音 | ギャラリー
• 日新住宅販売株式会社 | 施工事例一覧 - 外観

作業環境

• Drupal の管理画面は日本語化が済んでいる

使用モジュール

今回利用する寄与モジュールは以下のとおりです。

パッケージ	名前	バージョン
Chaos tool suite	Chaos tools (ctools)	7.x-1.7
Other	Colorbox (colorbox)	7.x-2.8
Other	Libraries (libraries)	7.x-2.2
Views	Views (views)	7.x-3.11
Views	Views UI (views_ui / Views 内包)	7.x-3.11

いずれもダウンロードし有効化された状態からスタートします。

使用ライブラリ

• jquery.colorbox-min.js ダウンロード

以下のパス構造となるように、 jquery.colorbox-min.js ファイルをダウンロードして設置してください。

sites/all/libraries/colorbox/jquery.colorbox-min.js

Colorbox モジュールが有効化されていて Drush コマンドが使える環境であれば以下のコマンドでダウンロードすることができます。

$ drush colorbox-plugin

Colorboxモジュールを有効化した後に上記コマンドを入力しても「そのコマンドが見つからなかった」というようなエラーメッセージが出力される場合は事前に drush cc drush コマンドを実行するとよいでしょう。

$ drush cc drush
$ drush colorbox-plugin

正しく設置すると次の図のような構成になります。

ここまでの環境が整ったら作成を開始していきましょう！

イメージギャラリーの作成

おおまかな手順は以下の4ステップとなります。

1. イメージギャラリー用のコンテンツタイプを作成
2. イメージギャラリーのコンテンツを作成
3. 画像スタイルを作成
4. 新しいViewsページを作成

今回は 1 と 2 について解説していきます。 3 と 4 については後編でご説明いたします。

イメージギャラリー専用のコンテンツタイプを作成する

まずは以下のページにアクセスします。

管理 » サイト構築 » コンテンツタイプ
(パス: admin/structure/types)

名前を「 image gallery 」などと適当に入力して「 保存しフィールドを追加 」をクリックします。 名前とシステム内部名称が入力されていればOKです(システム内部名称は名前の入力と同時に自動で入力され、自分で編集することも可能です)。

今回は以下のように設定しました。

• 名前: image gallery
• システム内部名称: image_gallery
• 説明: （なし）
• 掲載オプション
  • 掲載: チェックオン
  • フロントページへ掲載: チェックオフ
• 表示設定
  • 作成者と日付情報を表示。 : チェックオフ
• コメントの設定
  • 新しいコンテンツ作成時のデフォルトのコメント設定: 非表示

つづいて画像のためのフィールドを作成します。

フィールドタイプ で「画像」を選択しましょう。 その他の項目は適当に設定してください。

今回は以下のように設定しました。

• ラベル: ギャラリー画像
• システム内部名称: gallery
• フィールドタイプ: 画像
• ウィジェット: 画像 (フィールドタイプを設定すると自動的に選択されます)

設定ができたら「 保存 」をクリックします。

フィールドの設定という画面が出てきたら「 フィールド設定を保存 」をクリックします。

つづいて開くフィールドの編集のための画面では「 要求されるフィールド 」にチェックを入れてください。その他の部分は適当に設定してください。

今回は以下のように設定しました。

• 要求されるフィールド: チェックオン
• ファイルディレクトリー: gallery

設定ができたら「 設定の保存 」をクリックします。

「 ギャラリー画像 設定を保存しました。」 とメッセージが表示されたら完了です。

Body フィールドは削除してもしなくてもどちらでもかまいませんが、そのままだと実際にギャラリー画像を投稿する際に少し邪魔になるのでついでなのでここで削除してしまいましょう。

「 削除 」をクリックします。

「 フィールド Body は、コンテンツタイプ Image gallery から削除されました。 」とメッセージが表示されたら完了です。

コンテンツタイプの作成は以上です。つづいて、作成したコンテンツタイプの実際のコンテンツを作成していきます。

イメージギャラリーのコンテンツを作成

以下のページにアクセスします。

コンテンツ » コンテンツの追加 » Image galleryの作成
(パス: node/add/image-gallery)
※ add/ より後のパスはコンテンツタイプ作成時に入力した システム内部名称 となります。

「タイトル」を適当に入力し「ギャラリー画像」のところにイメージギャラリーに追加したい画像をアップロードします。 このとき「掲載オプション」の「掲載」にチェックが入っていることを確認してください。

画像のアップロードが完了したら「保存」をクリックします。

Image gallery *** が作成されました。 というメッセージが表示されたらコンテンツの追加は完了です。

ここで追加したコンテンツがイメージギャラリーのひとつの画像となりますので、異なる画像を使っていくつかのコンテンツを作成してみてください。後ほどギャラリーページになったとき、画像がある程度あった方が見栄えがよくなります。

ここまででイメージギャラリーに使用するデータの準備が整いました。

つづいて、ギャラリーに表示する画像のフォーマットを決めるための「画像スタイルの作成」と実際のギャラリーページを作るための「新しい Views ページの作成」を行えばギャラリーページが完成します。 この後のステップについては後編でご紹介いたします。