walnuts.jp は、アメリカン・カジュアル専門のインポート・セレクトショップを恵比寿、岐阜大垣、戸越銀座に展開するショップ「Walnuts」のスタッフブログのサイトです。今は主にお店のスタッフの皆様が商品の紹介やこだわりを発信していくサイトです。今日はこのサイトを使ったケーススタディ - Drupal でどうやって、制作・実現していくかを数回に分けて説明していきたいと思います。

基本的なアプローチ

• ブログのコンテンツタイプを拡張
• Lightbox2やjCalouselを組み合わせて商品画像のギャラリー化
• キーワードやカテゴリ
• アーカイブ、コメント機能

ブログの形式にこだわらない

まず、ブログというと散文的な文章があって、小さな画像が１，２枚というのが定番です。サイドバーにカレンダーやアーカイブ、キーワード、ブログパーツなどが並ぶといったところがです。本当に、ダイアリー的な内容のものが殆どですが、Walnutsスタッフブログについては別の要望がありました。文章は、スタッフのダイアリー的な内容で、さらに商品の画像を多く紹介できるようにしたいという要望でした。

この要望を実現するために、今回は直接文章中に画像を貼り付けるのではなく、デフォルトのコンテンツタイプ「ブログ」をCCK、FileFIeldとImageFieldを使って拡張する手法を使いました。直接文章に画像を貼り付ける手法は、表現が自由で良いのですが、逆に高度なレイアウトや画像編集といったことをエディタに要求してしまい、普段お店の仕事で忙しいスタッフが制作するには向かないという判断でそういう形にしました。このCCKモジュールは、Drupal を使う上で、Viewsモジュールと同じく欠かせない機能の一つです（※Drupal 7からはコアモジュールになるようです）。これで通常のコンテンツタイプ「ブログ」に複数の画像ファイルをアップロードできるようになります。

しかし、これだけでは「複数枚の画像が付いたブログ」にしかなりません。そこでアップロードした画像をギャラリー風に表示することにしました。色々とモジュールを検討した結果、ギャラリー表示には、Galleriaモジュールを使いました。このモジュールを選択した理由は、jCarousel とlightbox2にも対応している点と後で説明する ImageCache のサポートもされてたからです。

複数画像をつけるには、もう一つ問題がありました。ギャラリー表示するためのサムネイル画像と実寸サイズの画像、ブログリストに使う画像の三種類の画像をどうやって作るかという問題です。画像サイズを細かくきめて、ブログ制作担当者が事前にサムネイル画像やリサイズや切り抜きといったことをPhotoShopを使ってアップロード前にやってもらうよう手順書を書く・・・となるのですが、そこはImageCacheを使って解決できます。このモジュールは、アップロードした1枚の画像を使用用途によって縮小・回転・切り抜きを自由に、自動で行ってくれるようにしてくれます。つまり、ブログ制作担当者はある決まった大きさの画像をアップロードするだけで、決まった大きさのサムネイルや縮小・切り抜きをやってくれるのです。

最終的に、これらのモジュールを組み合わせてブログを下のようにしました。最近のディスプレイはワイドなものが多いので、文章と画像を横並びにしました。サムネイル画像にはあえて、商品画像を小さく正方形にカットするのではなく、商品の一部をアップしたかのような効果を狙って、縮小せずに中央部分をクローズアップするような見せ方にしています。

下のサムネイル画像をクリックすると、中くらいの大きさの商品画像が変わります。Galleriaモジュールの効果を使っています。サムネイルの左右にあるブルーの矢印は左右にサムネイル画像がスクロールして変わるようになっています。こちらはjCarouselの機能です。

最後に上部の画像をクリックすると、商品画像の拡大表示が可能になっています。これは、lightbox2の機能ですね。

このように単純なブログでなく、「商品の紹介を可能にしたブログ」を実現しました。

ImageCacheを使って拡張しやすいギャラリー

今回はGalleriaモジュールを使いましたが、他の手法として、thickbox を使ったFlash画像ギャラリーの利用やスライドショー機能というものが考えられます。しかし、それらの実現も基本となる画像が一枚あれば、ImageCacheと組み合わせることでいくらでも表現ができるのです。さらに Viewsに対応しているので、一つのコンテンツを多方面から表現して見せることができるのも大きな強みです。

まだまだある Drupal の使用方法

Drupal 単体は非常に小さなCMSだと思います。使い勝手も他のWordPressとかJoomlaと比べてもあまり洗練されているとは言えません。しかし、サードパーティモジュールの量とその開発のし易さが群を抜いていると思います。次回は、もう少し細かい部分に焦点を当てて紹介したいと思います。