CakePHPでサムネイル画像を作る

CakePHPでサムネイル画像を手軽に作れるコンポーネントを作ってみました。コンポーネントにする必要はあまりないのですが（Verndorを利用するとか）、CakePHP上で手軽に使える…という点を優先してコンポーネント化しました。

先日、紹介したCakePHPでメールを送信すると一緒に、CakePHPの初期セットとしておけば、サイト開発がさらに楽になるかと思います。

簡単な仕様としては

• GD / ImageMagick どちらかがあれば動作可能
• CakePHP1.1.x / CakePHP1.2.x に対応
• 縦横サイズ指定 / 横サイズ指定で縦サイズはなりゆき / 縦サイズ指定で横サイズはなりゆき の3パターン
• URLに画像ファイル名やサイズを指定してサムネイルを作成

って感じで、特に目新しい機能はないですが、公開しておきます。

インストール方法

インストールは非常に簡単。以下の、thumbmake.php を保存してコンポーネントディレクトリに配置するだけです。

• thumbmake.php ダウンロード先（右クリックで保存などで）

拡張子が .phps になっていますが、 .php に変更して 配置してください。

配置ディレクトリ

/app/controllers/components/thumbmake.php

使い方

サムネイルコントローラ（今回は thumb_controller.php とします）から Thumbmake を読み込みます。

class ThumbController extends AppController {
    var $name = 'Thumb';
    var $uses = null; //modelを使わない
    var $autoRender = false; //layoutを使わない
    var $components = array ('Thumbmake');
    var $pageTitle = 'サムネイル';

    function index(){
    
        //サムネイルの画像サイズを指定
        $width = 100;
        $height = 100;
        
        //元画像のファイルパスと保存先をセット
        $this->Thumbmake->setImage(WWW_ROOT . 'files' . DS . 'src.jpg',
                                   WWW_ROOT . 'files' . DS . 'thumb' . DS . 'dst.jpg');

        //リサイズ(どちらかに合わせてリサイズした上で、指定の大きさに切り抜く)
        if($this->Thumbmake->resizeCrop($width,$height)){
            //リサイズしたサムネイル画像を表示する
            $this->Thumbmake->disp();
        }else{
            $this->cakeError('error404',array(array('url'=>'Error')));
        }
        
    }
}

ソースとなる元画像のファイルパスと、サムネイルの保存先のファイルパスを setImage() で指定し、width と height を決めて、 resizeCrop() でリサイズして、 disp() で画像を表示しています。disp() は単にサムネイル画像を読み込んで表示しているだけなので、viewに画像のパスをセットすれば、普通に view を使うことができます。

        if($this->Thumbmake->resizeCrop($width,$height)){
            $this->set('image', 'files' . DS . 'thumb' . DS . 'dst.jpg'); //view へセット
        }else{
            $this->cakeError('error404',array(array('url'=>'Error')));
        }

リサイズ方法には3つの方法があります。

resizeCrop($width,$height)

横と縦のサイズを固定で、リサイズします。縦横比は維持したままなので、左右天地どちらかが切り抜かれることがあります。

width($width)

横を固定のサイズで、縦はなりゆきでリサイズします。切り抜かれたくない場合は、こちらを利用してください。

height($height)

縦を固定のサイズで、横はなりゆきでリサイズします。切り抜かれたくない場合は、こちらを利用してください。

この Thumbmake はキャッシュなどはしないので、常にサムネイル画像を生成して上書き保存しますので気をつけてください。

URLにパラメータを指定してサムネイル画像を生成する方法

最近よくある、URLにパラメータを指定してサムネイル画像を生成する方法を利用することもできます。例えば以下のような感じです。

• <img src="http://example.com/thumb/urlImage/100x80/list/files/src.jpg" alt="thumbnail" />

これだけだと意味が分かりませんね。

CakePHPは、URLをスラッシュ区切り（環境によって違いますが）にして、パラメータを受け取っているので、それを利用して、thumbコントローラの urlImage() というメソッドに /100x80/list/files/src.jpg というパラメータを受け渡しています。

• /[width]x[height]/サムネイル画像のファイル名に追加するワード/元画像のファイルパス

となっています。

上記の例だと、 /files/src.jpg という画像を /files/src_100x80_list.jpg というサムネイル画像で保存します。こちらの方法は、基本的に元画像と同じディレクトリに保存されます。変更したい場合は、 thumbmake.php を直接いじってください。

urlImage() メソッドは以下のようになります。

    function urlImage(){
    
        $this->autoRender = false;
        
        //URLのパラメータを取得
        list($width,$height) = $this->Thumbmake->getParam($this->params);
        
        //リサイズ
        if($this->Thumbmake->resizeCrop($width,$height)){
            $this->Thumbmake->disp();
        }else{
            $this->cakeError('error404',array(array('url'=>'Error')));
        }
        
    }

普通のサムネイル化と変わりませんが、URLからパラメータを受け取るために getParam() というのを使っています。これが、setImage() の代わりになります。その後は、resizeCrop() / width() / height() と好きなのを選んでリサイズしてください。

ただ、こちらの方法もキャッシュはしないので、アクセスされるたびにサムネイル画像を生成して、サーバによろしくありません。というか、実験した所、専用サーバでも簡単にCPUが100%になってしまいました。そこで、CakePHPも積極的に利用している mod_rewrite を使って回避してみます。

mod_rewriteを使う

サムネイル画像がすでに生成されていた場合は、普通に画像へのアクセスにし、生成されていなかった場合は、urlImage()メソッドに渡して生成してあげる…といった感じです。

• /app/webroot/.htaccess

を開いて、以下のように記述してください。

<IfModule mod_rewrite.c>
    RewriteEngine On

    #It passes to the controller who resizes it when there is no image of the object, and it generates it. 
    RewriteCond %{REQUEST_FILENAME} files/[a-z0-9_]+_list¥.jpg$
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^files/([a-z0-9_]+)_([0-9]+x[0-9]+)_list¥.jpg$ /thumb/urlImage/$2/list/files/$1.jpg
    
    #↓元からあったやつ
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>

環境に合わせて適宜変更してください。正規表現など強力な記述ができるので、色々な活用方法があると思います。

ただ、この方法は元画像に変更があったとしてもサムネイル画像を変更しないので、1日に1回サムネイル画像を全て削除する cron を動かすなど工夫が必要になります。

さいごに

thumbmake.php を覗いてもらえれば分かりますが、非常に単純なスクリプトなので、欲しいなーという機能があれば自前で実装しちゃってください。もし、要望等あれば zaru@tofu-kun.org かコメントなどでお願いします。