DrupalのViewsでたった10分で画像スライドショーを作成する方法

こんにちは。
今年の滋賀県は梅雨らしい雨があまり降っていないので稲の成長に不安を覚えているプログラマーの山中です。
出勤時に自分の家の田んぼの横を通り過ぎると、苗は青々と順調に育っているように見えるのですがやっぱり不安です。みずかがみ(滋賀県で推進しているお米です。近江米！)ちゃんと育ってくれるといいなあ・・・

さて、今回の記事ではViewsでスライドショーを作っていきます。
スタイルシートでの調整を除けば管理画面だけでできるのでjavascriptにはノータッチで作れます。
ということは覚えちゃえば誰でも簡単に作れちゃうってことです！

まずは必要なものから紹介していきますね。 英語が読める方はこちらのチュートリアルをどうぞー！

必須条件

この記事では以下のモジュールがインストールされ、ライブラリが導入済みであることを前提としています。

モジュール

• Chaos tool suite (ctools)
• Views (views)
  • Views UI (views_ui)
• Views Slideshow (views_slideshow)
  • Views Slideshow: Cycle (views_slideshow_cycle)
• Libraries API (libraries)

ライブラリ

• jquery.cycle 直接ダウンロードはこちらから。
  ダウンロードしたファイルの名前がjquery.cycle.all.jsならjquery.cycle.all.min.jsに変更しておきます。

ライブラリの入れ方

1. librariesフォルダがなければsites/allの中に作ります。
2. librariesフォルダの中にjquery.cycleフォルダを作ります。
3. jquery.cycle.all.min.jsをjquery.cycleフォルダに入れます。

↓jsのライブラリファイルまでのパスはこうなるはずっ。

sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js

画像スライドショーを作成していく

さて！作っていきましょー！
ちなみに今回表示させる箇所はbartikテーマの「主な」リージョン(翻訳前の英語だと「Featured」)に配置します。

スライドショーの画像の幅をリージョンに合わせたいのでついでにここで幅を測っておきます。こんな時のChromeさんのインスペクターは超優秀ですね！幅は960pxでした。

専用のコンテンツタイプを作成する

この記事あたりを参考に作ってください。

作成したコンテンツタイプに画像フィールドを追加する

普通に設定して保存します。最大幅などは画像スタイルで指定したものを使いますのでここでは指定しません。
こちらも大体はこの記事にかかれていますので参考にしてください。

スライド用のノードコンテンツを作成する

記事やページを作成するのと同じようにコンテンツを追加します。Drupalの仕様上タイトルは絶対書かないといけないので（タイトルを無効にするモジュールもありますが・・・）、適当なタイトルの入力とスライド用画像の添付をしておきます。
画像は1ノードにつき1枚にしてください。

画像スタイルを設定する

「拡縮とトリミング」のエフェクトでさっき測った幅960x適当な高さ300を指定しておきます。画像スタイルについてはまた今度記事にさせていただきますね。

Viewsでビューを作成する（スライドショーブロックを作成する）

ビューの名前やらシステム内部名称などを入力し、ページを作成するのチェックをはずします。
代わりにCreate a blockにチェックを入れ、タイトルを好きにつけて表示形式をslideshowのフィールドにします。
ページ毎の表示件数は0にしておくとコンテンツタイプがslideshowのコンテンツが全部表示されます。ので、0に設定しておきます。
各項目が設定できたらContinue & editをクリックして次へ進みます！

フィールドやフィルターの設定

画像コンテンツを追加します。
フィールドの右にある追加をクリックしまして、

スライドショー用に作った画像フィールドを選択します。

ラベルをはずして画像のスタイルにさっき作成した画像スタイルを設定します。ついでにわかりやすくするために管理画面用のタイトルを入力して保存。

コンテンツ：タイトルの部分は必要ないので削除しちゃいましょう。

ここまできたら右上の保存ボタンをクリックしてビュー全体を保存します。
シンプルな画像だけのスライドショーならこれだけで完成です。
早速「主な」リージョンに配置して確認しましょう☆

補足：スライドショーの動きを変える

ビュー全体の設定画面のフォーマットがSlideshowになっている横の環境設定をクリックします。
その中のCYCLE OPTIONSの効果の選択ボックスからスライドショーの動きを変更できます。

スライドショーをリージョンに配置する

ホーム » 管理 » サイト構築 » ブロック でViewsで作成したスライドショーを配置して一番下にある保存ボタンをクリックします。

保存できたらトップページへ戻って確認しましょう！

どうでしょう、できてますか？私はこんな感じになりました！

（画像はぱくたそさんから）

最後に動かない時のトラブルシューティングのヒントを置いておきます。

スライドショーが動かないときの対処法（ヒント）

• キャッシュをクリアする
• パスや名前は合っているか確認する
  sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js
• スライドショー用の画像（ノード）が1つ以上投稿されていることを確認する