VGA端末用に出力画像を拡大縮小する方法

ソフトバンクの端末で横幅480ピクセルまで表示される端末(VGA端末)は、それ以外の端末と同じ画像、HTMLでは表示したときに、かなり画像が小さくなります。

[参考記事] width、heightを指定する場合のVGA端末対応
[参考記事] すべての端末で画像表示を同じにする方法
[参考記事] iモードブラウザ2.0のQVGA/VGA切替え機能

出力される画像のサイズを変換して、画面表示サイズに調整する方法です。

PHPが使用できるサーバーであれば、すでに稼働中のサイトでもテンプレートの変更なく使える場合があります。

またこの方法であれば、PHPなどのプログラムが使用できないサーバーでも使用することができますので、ASPサービスでも使用できたりします。

最低条件

HTMLと同じサーバーでも別のサーバーでもいいので、PHPが使用できるサーバーが用意できること。
かつそのサーバーで、.htaccessとPHPのGD関数が使用できること。

実現方法

HTMLと同じサーバーで変換する場合

Step 1

次のコードを、ファイル名『img_resize4mobilevga.php』として、画像があるフォルダに置きます。

<?php
// 確認用プログラム
header("HTTP/1.1 200 OK");
echo "test";
Step 2

次のコードを、ファイル名『.htaccess』として、『img_resize4mobilevga.php』があるフォルダに置きます。

<Files .htaccess>
order allow,deny
deny from all
</Files>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.+)\.(jpeg|jpg|gif|png)$ img_resize4mobilevga.php?img=$1.$2 [QSA,L]
</IfModule>

これで画像にブラウザからアクセスして、『test』と表示されればmod_rewriteが使用できているのでOKですので、次のステップ[Step 3]は飛ばします。

Step 3

『test』と表示されなかった場合には、 次のコードを、ファイル名『.htaccess』として、先ほどの『.htaccess』と置き換えます。
/img/img_resize4mobilevgasub.phpの『/img/』部分は、 画像のURLがhttp://www.example.com/img/sample.jpgだったときの赤い部分です。

<Files .htaccess>
order allow,deny
deny from all
</Files>

<Files *.(jpeg|jpg|gif|png)>
order allow,deny
deny from all
</Files>

ErrorDocument 403 /img/img_resize4mobilevgasub.php

さらに次のコードを、ファイル名『img_resize4mobilevgasub.php』として、同じフォルダに置きます。

<?php
$url=isset($_SERVER["REQUEST_URI"])?$_SERVER["REQUEST_URI"]:"/";

$url=basename($url);
if(!preg_match("/^.+\.(jpeg|jpg|gif|png)$/",$url,$match)){
  header("HTTP/1.x 404 Not Found");
  exit;
}
$_GET["img"]=$url;

include(realpath(dirname(__FILE__))."/img_resize4mobilevga.php");

これで画像にブラウザからアクセスして、『test』と表示されればOKです。表示されなかったらあきらめてください。

Step 4

テストが完了したので、次のコードを、ファイル名『img_resize4mobilevga.php』として、テスト用の『img_resize4mobilevga.php』と置き換えます。

<?php
/* ================================
 * img_resize4mobilevga.php
 *
 * @create  2009/06/03
 * @author  pentan
 * @url     http://pentan.info/
 *
 * Copyright (c) 2009 pentan.info All Rights Reserved.
 * 著作権表示部分の変更削除は禁止です
 * ================================
 */
define("IMG_DIR",realpath(dirname(__FILE__)) . DIRECTORY_SEPARATOR);
define("IMG_MAX_WIDTH",240); // 画像横幅の基準サイズ
define("DISPLAY_NORMAL_WIDTH",240); // 拡大縮小を行わない画面横幅

$img_name=isset($_GET["img"])?$_GET["img"]:"";

$img_path=IMG_DIR.$img_name;

if(!$img_name || !is_file($img_path)){
  header("HTTP/1.x 404 Not Found");
  exit;
}

list($img_width,$img_height,$type)=getimagesize($img_path);
switch( $type ){
  case 1:
    $img_input_func ="imagecreatefromgif";
    $img_output_func="imagegif";
    $img_create_func="imagecreate";
    $img_resize_func="imagecopyresampled";
    $img_contenttype="image/gif";
    break;
  case 2:
    $img_input_func ="imagecreatefromjpeg";
    $img_output_func="imagejpeg";
    $img_create_func="imagecreatetruecolor";
    $img_resize_func="imagecopyresampled";
    $img_contenttype="image/jpeg";
    break;
  case 3:
    $img_input_func ="imagecreatefrompng";
    $img_output_func="imagepng";
    $img_create_func="imagecreatetruecolor";
    $img_resize_func="imagecopyresampled";
    $img_contenttype="image/png";
    break;
  default:
    header("HTTP/1.x 404 Not Found");
    exit;
    break;
}

$display_width=IMG_MAX_WIDTH;
if(isset($_SERVER["HTTP_X_JPHONE_DISPLAY"])){
  list($display_width)=explode("*", $_SERVER["HTTP_X_JPHONE_DISPLAY"]);
}elseif(isset($_SERVER["HTTP_X_S_DISPLAY_INFO"])){
  if(preg_match("/^([0-9]+)\*[0-9]+\//",$_SERVER["HTTP_X_S_DISPLAY_INFO"],$match)){
    $display_width = $match[1];
  }
}

header("HTTP/1.1 200 OK");
header("Content-Type: ".$img_contenttype);

if($display_width <=DISPLAY_NORMAL_WIDTH || !function_exists($img_input_func)){
  readfile($img_path);
  exit;
}


$src = $img_input_func($img_path);
$resize_width = round($img_width/IMG_MAX_WIDTH*$display_width);
$resize_height = round($img_height/IMG_MAX_WIDTH*$display_width);
$dst = $img_create_func($resize_width, $resize_height);
$img_resize_func($dst, $src, 0, 0, 0, 0, $resize_width, $resize_height, $img_width, $img_height);
$img_output_func($dst);

imagedestroy($dst);
imagedestroy($src);

これでブラウザから、画像のURLにアクセスして画像が表示できれば完了です。

変な文字がたくさん表示される場合は、いったんブラウザを閉じてから確認してみてください。

HTMLと違うサーバーで変換する場合

画像を別のサーバーから呼び出すように書き換えます。

例
<img src="/img/sample.jpg" />
       ↓
<img src="http://www.example.net/img/sample.jpg" />

その別のサーバーで、『HTMLと同じサーバーで変換する場合』と同じようにします。

このプログラムは、画像がすべて同じ階層にあることが必要です。
アニメーションGIFはたぶん対応していません。
JPEG、GIF、PNGが変換されます。

関連記事

スポンサーリンク

navigator.javaEnabled

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る