drupalでWeb Gallery 画像アップロードまで

はい。随分と間が空いてしまいましたが、色々とメモしたものが書き溜まっているので整理の意味も含め随時書いていこうかなと思います。

とりあえずは前回エントリで書いたdrupalで画像がアップロードできるとこまで説明したいと思います。

今回使うモジュールは以下

cck
views
imagefield
imageapi
imagecache

cck,viewsは前回説明した通りです。imagefieldはcckで画像アップロードフォームを追加するためのモジュール、imagecacheは画像をアップロードする際にリサイズを行うためのモジュールです。
imageapiはimagecacheを使うために必要となります。ということでまずは各モジュールをインストールします。まずはダウンロード



 $ wget http://ftp.drupal.org/files/projects/cck-5.x-1.10.tar.gz

 $ wget http://ftp.drupal.org/files/projects/views-5.x-1.6.tar.gz

 $ wget http://ftp.drupal.org/files/projects/imagefield-5.x-2.4.tar.gz

 $ wget http://ftp.drupal.org/files/projects/imageapi-5.x-1.4.tar.gz

 $ wget http://ftp.drupal.org/files/projects/imagecache-5.x-2.3.tar.gz

これらのファイルを展開して全てmodulesディレクトリの下に移動させます。
移動させたらUIより「サイトの構築」->「モジュール」でモジュールをインストールします

cck: 全て
views: 全て
imagecache:ImageCache 4 ImageとImageCache 以外全て

にチェックを入れてインストールをします。その後再度 ImageCacheにチェックを
いれてインストールをします。これで必要なもののインストールが完了です。

ついでに各モジュールも日本語ファイルがあるものはいれておきます
以下をダウンロードしてインポートします。

これでほぼ下ごしらえは終了です。次にWeb Gallaryを作るために画像をアップロードする機能を追加します。drupalにはコンテンツとコンテンツタイプという概念があります。コンテンツ->サイトの１ページ, コンテンツタイプ->ページの雛形(例えばblogとか)といったニュアンスです。今回はコンテンツタイプで画像アップロードの雛形を作り、１画像->１コンテンツとしてデータをアップロードします。このコンテンツタイプをより柔軟に作れるようにしてくれるのがcckモジュール。コンテンツを柔軟に表示できる様にしてくれるのがviewsモジュールとなります。

というわけでまずはコンテンツタイプの定義を行います。
「管理セクション」 ->「コンテンツの管理」-> 「コンテンツタイプ」->「コンテンツタイプの追加」を選びます。

名前: フォト
タイプ: photo
説明: 画像アプロード用のコンテンツタイプ

といれて作成しましょう。これでフォト用のコンテンツタイプの定義はできたのですが、まだ肝心のアップロード用のフォームがありませんので追加する必要があります。これを実現してくれるのがcck,imagefieldモジュールです。ではフォームの追加を行います。

「フォト」コンテンツタイプの編集を押し「フィールドの追加」を選び

名前: フォト
フィールドタイプ]: Image

としてください。次に進むとフォームの詳細設定画面になるので、

ラベル: フォト
Maximum resolution for Images: 1000x1000
Maximum filesize for Images: 2000
Maximum number of Images: 1
データ設定: 必須

画像のサイズ制限等々ですね。この辺は好みだと思いますが、phpはデフォルトで2Mまでのアップロードしかできなくなっていたと思いますので注意が必要です。変更したい場合はphp.iniで設定を変えれば良いはずです。これでアップロード用コンテンツタイプの作成は終了です。

では早速アップロード！と行きたい所ですが、その前にimagecacheの設定を行います。
今回はWeb Galleryを作ることが目的なので画像をアップロードした際に「サムネイル画像」と「元の画像」の２種類を用意する必要があります。これを実現してくれるのがimagecacheモジュールです。

まずはサムネイル用の設定から行います。

「管理セクション」->「サイトの構築」->「画像キャッシュ」->「プリセットを新しく追加」を選んでください。
ここで

プリセットの名前空間: thumbnail

入力して作成を行います。すると「新規アクション」というものを作成することができる画面が現れます。これを定義することによりアップロードした画像をどの用に処理するかが定義できるわけです。今回は「300x300に納まるサイズにリサイズ」した後「中心の100x100を切り出す」ことでサムネイルを作成します。
まあ、この辺りは好みで色々変えてくれればと思います。では手順を

「Scaleを追加」を選択

幅: 300
高さ: 300

「Cropを追加」を選択

幅: 100
高さ: 100
X軸オフセット: 100
Y軸オフセット: 100

プリセットの更新を押してサムネイル用の処理が終了です。
合わせて元画像表示用の処理を作っておくと良いかもしれません。
LightBox2などのモジュールもあるのでこの辺を利用するとWeb Galleryの見せ方に含みを持たせる事ができます。ちなみに私のサイトではmainという1000x1000にScaleするプリセットも定義してあります。

さてこれで画像を上げるとこまでの準備は完了です！「コンテンツの作成」で画像をアップロードしてみてください。アップロードできれば成功です(当たり前だけど)

これだけでも結構な手順になってしまいましたね。後はいくつか画像を上げてViewsモジュールで一覧表示すれば晴れてWeb Galleryの完成となります。

が、！

このViewsモジュールがあまり説明もなく複雑で結構鬼門です。 w
正直かなり苦戦しました。ので、少し使い方の説明も含め次回で説明したいと思います。