PHPのImagickを使って携帯電話の機種に応じたサイズで画像を表示する

さっきインストールして使えるようにしたImagickにPHPのPEARライブラリ
（Net_UserAgent_Mobile）を組み合わせて、携帯の機種に応じた画像を
表示するっていうチュートリアルをやってみた。

PHPライブラリ「Imagick」で携帯の機種に応じた画像を表示する

まずPEARのライブラリ「Net_UserAgent_Mobile」をインストールする。
インストールするのはVMware Fusionにインストール済みのUbuntu Server。

このライブラリはまだベータ版らしいので「-f」オプションを追加。
あと、必要な最小限の関連パッケージも一緒にインストールするために
「-o」というオプションも追加した。

$ sudo pear install -f -o Net_UserAgent_Mobile

Net_UserAgent_Mobileでは、以下のような各種メソッドが利用できる。

// インスタンス生成
$agent = Net_UserAgent_Mobile::singleton();

// キャリア表示
echo $agent->getName();

// 機種名表示
echo $agent->getModel();

// 画面情報を取得
$display = $agent->getDisplay();

// 横サイズ表示
echo $display->_width;

// 縦サイズ表示
echo $display->_height;

でも、携帯電話の機種によってはこのライブラリだけでは取得できないものも
あるらしいので、そこを補うためにバリューエンジンで公開されている端末プロファイルを
利用させてもらう。（有償版と無償版があり、今回は無償版を使う）

Net_UserAgent_MobileのgetDisplay()で画面サイズを取得できない場合にこの
端末プロファイルを読み込んで画面サイズを返す端末サイズマネージャークラスを
作成する。コード内で二箇所、csvファイルを読み込んでいる箇所がある。この
csvファイルが、バリューエンジンからダウンロードした端末プロファイル。
（ダウンロードする日付によってファイル名が変わる模様）

DisplayInfo_2010-04-16.csv
UserAgent_2010-04-16.csv

端末プロファイルの詳細は
http://codezine.jp/article/detail/4401?p=2
で解説されている。

DeviceManager.class.php

<?php
require_once 'Net/UserAgent/Mobile.php';

// クラス宣言
class DeviceManager extends Net_UserAgent_Mobile{

	// オブジェクト定義
	var $agent;

	// コンストラクタ
	function DeviceManager(){
		$this->agent = & parent::singleton();
	}

	// モデル名取得
	function getModel(){
		return $this->agent->getModel();
	}

	function getDisplay(){
		// Net_UserAgent_Mobileでの画面情報取得
		$display = $this->agent->getDisplay();

		// 画面情報があれば返却
		if($display->_width){
			return $display;
		}

		// モデル名を取得
		$device_name = $this->getModel();

		$deviceArray = array();
		// UserAgent情報のCSVファイル読み込み
		$_file = 'UserAgent_2010-04-16.csv';
		$_array = explode("n",file_get_contents($_file));
		foreach($_array as $k=>$v){
			// キャリア、機種名、デバイス名、USER_AGENT、USER_AGENT_SCRAP、最終更新日の形式
			$_d = explode(',',$v);
			// モデル名をキーとして機種名をvalueにした配列を作成
			$deviceArray[$_d[2]] = $_d[1];
		}

		// 機種名を取得
		$model_name = $deviceArray[$device_name];

		// 端末ファイルにデータがない場合240でサイズを返却
		if(!$model_name){
			$display->_width = 240;
			$display->_height = 240;
			return $display;
		}

		$display_info = array();
		// 画面情報のCSVファイル読み込み
		$_file = 'DisplayInfo_2010-04-16.csv';
		$_array = explode("n", file_get_contents($_file));
		foreach($_array as $k=>$v){
			// キャリア、機種名、表示タイプ、横、縦、最終更新日の形式
			$_d = explode(',',$v);
			// 機種名が一致した場合
			if($model_name == $_d[1] && $_d[2] == 'ブラウザ画像サイズ'){
				$display_info = $_d;
				break;
			}
		}

		// 横、縦ともにサイズのデータがある場合
		if($display_info[3] && $display_info[4]){
			$display->_width = $display_info[3];
			$display->_height = $display_info[4];
		}
		// データがない場合
		else{
			$display->_width = 240;
			$display->_height = 240;
		}
		return $display;
	}
}

つぎに、アクセスしてきた携帯電話端末の画面幅を取得して
それぞれに合ったサイズに画像を変換するphpスクリプトを用意する。

次のようなパラメータを付与することで、オリジナル画像を携帯電話端末ごとに
合ったサイズに変換して表示できるようになる。サイズ変換された画像は同ディレクトリ
に作成しておく「images」内に「横サイズ＋ファイル名」という名前で保存される。

file.php?file=画像ファイル名

変換後の画像がこうして保存されることで、次回以降には変換は実行されず
このimagesディレクトリにある既存のものが表示されるようになる。
（画像変換前にファイルの存在を確認し、存在すれば変換を行わずにそれを表示）

file.php

<?php
require_once 'DeviceManager.class.php';

// ファイル名取得
$image_file = $_GET['file'];

// 拡張子取得
$data = pathinfo($image_file);
$ext = $data['extension'];

// 画像ファイルサイズを取得
list($file_width, $file_height, $file_type, $file_attr) = getimagesize($image_file);

// 画像ファイルmime_type取得
$file_inf = getimagesize($image_file);
$file_mime = $file_info['mime'];

// DeviceManagerクラス
$dm = & new DeviceManager();
// 携帯画面の幅サイズを取得
$width = $dm->getDisplay()->_width;

// 画像ファイルの横のサイズが携帯画面の幅サイズより大きな場合にサイズ変更を行う
if($file_width > $width){
	// サイズ変換後の画像ファイルが既に存在する場合
	$file_name = $width.'_'.$image_file;
	$file_path = 'images/'.$file_name;
	if(file_exists($file_path)){
		header('Content-type: '.$file_mime);
		echo readfile($file_path);
		exit;
	}
	// 縦を0にして縦横比同じ割合でサイズ変換
	$height = 0;
	// Imagickを利用
	$image = new Imagick();
	// サイズ変換前の画像ファイルを読み込み
	$image->readImageBlob(file_get_contents($image_file));
	// 画像種別を指定
	$image->setImageFormat($ext);
	// サイズを変換
	$image->thumbnailImage($width, $height);
	// 圧縮品質設定
	$image->setCompressionQuality(80);
	// サイズ変換した画像をimagesフォルダに保存
	$image->writeImage($file_path);
	// mime_type指定
	header('Content-type: '.$file_mime);
	echo $image;
}else{
	header('Content-type: '.$file_mime);
	echo readfile($image_file);
}

ここまでに作成したファイルやディレクトリの構成は

images/
DeviceManager.class.php
file.php
DisplayInfo_2010-04-16.csv
UserAgent_2010-04-16.csv

で、ここに変換サンプル用画像としてsample.jpgを追加しておく。

なお、images/ディレクトリへの書き込みが可能なように
パーミッションの設定をしておくことが必要。でないとエラーになる。

この状態で

http://今回作成したファイルのあるディレクトリパス/file.php?file=sample.jpg

にブラウザで（FirefoxのUser Agent SwitcherとかでUAを偽装して）アクセスして
確認してみる。

User Agent Switcherに携帯電話端末のプロファイルをあんまり登録してないから
いくつかしか確認できなかったけど、端末ごとの画面サイズに合わせて異なる
サイズの画像が表示されることを確認できた。