2011年12月3日

Yii Framework: 画像アップロードビヘイビアを作る

※ 2012-10-15に更新しました

画像アップロードビヘイビアを作るにあたり、エクステンションの cfile と image を内部で使用しています。使い方はそれぞれのリンクを参考にしてください。

準備

データベースにテーブルを作成します。画像データは特定のディレクトリに保存し、データベースにはファイル名を保存する形をとっています。以下はテーブルの例。

CREATE TABLE `item` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(32) NOT NULL,
  `image` varchar(64)  NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

あと、あらかじめいくつかのディレクトリ, ファイルを作成します。
  • webroot/images/empty.jpg
  • webroot/images/tmp/thumb/
  • webroot/images/hoge/thumb/

hoge 部分はビヘイビアを使用したいモデルのテーブル名、empty.jpg は画像フィールドが必須でない場合などに使われる画像です。必須の場合は特に必要ありません。tmp は画像確認の際に一時的に画像ファイルが保管されるディレクトリです。 cfile, image エクステンションを使えるように protected/config/main.php に以下を追加。 あと、cfile には OS の違いによって挙動が変わってくる箇所を発見したので、以下のメソッドのコード部分をコメントアウトします。
あらかじめ作っておいた ImageUploadBehavior.php を protected/components下 に置く。
ImageUploadBehaviorの機能としては以下。
  • モデルのイベントを利用して、画像のアップロードが自動で行われる (確認画面等にも対応)
  • サムネイル画像を作成できる
  • また、サムネイル画像のサイズ、画質などを任意に指定できる

では ImageUploadBehavior を使いたいモデルに以下を追加します (今回は例として Item モデルで使う場合) 。
rules() については CFileValidator を参考にしてみてください。フレームワークのバージョン 1.1.11, 1.1.12 などで追加されたメソッド、プロパティなどがいくつかあります。とりあえず 1.1.12 を使用している場合 'safe' => true にしないと確認画面等に対応できないことがわかったりしました。あと 'on' => 'insert,change' で、シナリオが insert, change 時のみ、画像に関するバリデーションを実行するように設定しています。

behaviors() には、使いたいビヘイビアのファイル名、クラスのパスを書きます。また、オプションでパラメータの値を指定できます。これはビヘイビアファイルの public なプロパティを上書きする形になり、上記のコードの場合、デフォルトである createThumb = false; を true に上書きしています。


コントローラの例。 actionCreate(), actionUpdate(), actionChange() など、それぞれのコードが似ているので commonEditAction() にまとめています ($this->loadModel() は特定の ID のデータを1件取得していると思ってください) 。

一応のルールとしては、以下のようになっています。
  • actionUpdate() では画像カラム以外のカラムの更新を行う
  • actionChange() では画像カラムのみの更新を行う
  • actionChange() ではシナリオを 'change' にセットする
  • シナリオが 'update' ではない場合、バリデーション後に $_POST['Item']['image'] に $item->image を代入する


最後にビューです。
_form.php: _formConfirm.php: create, update, change アクションをすべて _form.php , _formConfirm.php にまとめていて、モデルのシナリオによって、表示する箇所などを指定しています。結果ビューが見にくくなる場合がありますので、その場合は個別にビューファイルを作ってください。

jamband/yii-image-upload-behavior
https://github.com/jamband/yii-image-upload-behavior


参考リンク

0 件のコメント:

コメントを投稿