VGA端末の画像表示対応

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

[参考記事] VGA端末用に出力画像を拡大縮小する方法
[参考記事] すべての端末で画像表示を同じにする方法
[参考記事] iモードブラウザ2.0のQVGA/VGA切替え機能

そのためVGA端末用に別の画像を用意したり、画像変換処理を行って調整をしたりする手法があります。
しかしこのような方法では、画像容量が大きくなるため表示に時間がかかるうえパケット代も数倍になったりします。
(回線速度がハイスピードになったり、パケット定額制が普及したりしてますが、、)

そこで、<IMG>タグに指定されているwidthおよびheightを240に対する画面幅の比で、 widthやheightの値を指定しなおして拡大表示を実現する手法の説明です。

width=100%は画面横幅の値に指定します。(これは特に必要ない気もする)

処理結果の例
実現方法
Smartyに実装する方法
cakePHPに実装する方法

基本は横幅最大を240ピクセルで作るような感じになります。

画像タグにwidthやheightがなければ拡大されません。
またwidthおよびheightのいずれかのみがあったときには、画像がゆがんで表示されるわけではなく縦横等倍で表示されます。

出力される画像ファイル自体の拡大はしないので、閲覧者のパケット代や表示スピードにもやさしいです。

au(EZweb)端末対応のためにwidth、heightを指定してるなら実装は簡単です。
また1つのテンプレートで対応できるので楽チンです。
この方法はアニメーションGIFにも対応しています。

表示領域の解像度については、Softbank端末ではリクエストヘッダーの中に画面情報が送られるので、それを利用します。

HTTP_X_JPHONE_DISPLAYの値が、480*854のように送られてくるのですが、この値はSSL通信では送信されません。
SSLの場合には、HTTP_X_S_DISPLAY_INFOを利用します。この値は480*854/30*23/TBのような感じです。
これらのヘッダーはSoftbank以外は送信されないので、ほかのキャリアでは処理をスルーさせることもできます。

またSmartyで使用する場合にはoutputfilter(アウトプットフィルター)に、cakePHPで使用する場合にはafterFilter(アフターフィルター)に付けると便利です。

例 VGA 横幅480ピクセルの場合の処理結果

テンプレート
<img width="240" height="10" />

出力
<img width="480" height="20" />

テンプレート
<img width="240" />

出力
<img width="480" />

テンプレート
<img height="10" />

出力
<img height="20" />

テンプレート
<img width="100%" />

出力
<img width="480" />

実現方法

PHPでは、次のコードで実装し、出力される前に関数img_size_replace4mobilevga()を通します。

コード

<?php
/* ================================
 * img_size_replace4mobilevga
 *
 * @create  2009/05/29
 * @author  pentan
 * @url     http://pentan.info/
 *
 * Copyright (c) 2009 pentan.info All Rights Reserved.
 * 著作権表示部分の変更削除は禁止です
 * ================================
 */

function img_size_replace4mobilevga($buff) {
  $img_max_width=240;
  $display_min_width=400;

  $display_width=0;
  $display_height=0;
  if(isset($_SERVER["HTTP_X_JPHONE_DISPLAY"])){
    //x-jphone-display: 480*854
    list($display_width,$display_height)=explode("*", $_SERVER["HTTP_X_JPHONE_DISPLAY"]);
  }elseif(isset($_SERVER["HTTP_X_S_DISPLAY_INFO"])){
    //x-s-display-info: 480*854/30*23/TB
    if(preg_match("/^([0-9]+)\*([0-9]+)\//",$_SERVER["HTTP_X_S_DISPLAY_INFO"],$match)){
      $display_width = $match[1];
      $display_height = $match[2];
    }
  }
  
  if($display_width < $display_min_width){
    return $buff;
  }
  $display_width_dig=(float)$display_width/$img_max_width;
  $buff=preg_replace_callback(
        "/<img ([^>]+)>/i",
        create_function(
          '$matches',
          'return img_size_replace4mobilevgaSub(
                    $matches[0],
                    '.$display_width_dig.',
                    '.$display_width.'
                  );'
        ),
        $buff
      );

  return $buff;
}

function img_size_replace4mobilevgaSub($str,$dig=2,$width=240){
  $str = preg_replace_callback(
            "/(width|height)=(['\"])([0-9]+)(['\"])/i",
            create_function(
              '$matches',
              'return $matches[1]."=".$matches[2].round($matches[3]*'.$dig.').$matches[2];'
            ),
            $str
          );
  $str = str_replace("width=\"100%\"","width=\"".$width."\"",$str);
  $str = str_replace("width='100%'","width='".$width."'",$str);
  return $str;
}

実行部

<?php
if(!($fp = @fopen("index.html","r"))) {
  die;
}

$data="";
while (!feof($fp)) {
  $data.=fgets($fp, 4096);
}
fclose($fp);

$data = img_size_replace4mobilevga($data);

echo $data;

テンプレートファイル index.html

<img width="240" height="10" />

出力結果

<img width="480" height="20" />

Smartyに実装する方法

Smartyでは、アウトプットフィルターにこの関数を指定することで、出力がフィルタリングされます。

$smarty->register_outputfilter("img_size_replace4mobilevga");

cakePHPに実装する方法

cakePHPでは、afterFilter()にこの関数を指定することで、出力がフィルタリングされます。

cakePHP1.2

app/app_controller.php

<?php
class AppController extends Controller{
  function afterFilter(){
    …
    …
    $this->output = img_size_replace4mobilevga($this->output);
  }
}

cakePHP1.1

app/app_controller.php

<?php
class AppController extends Controller{
  function afterFilter(){
    …
    …
    $out = img_size_replace4mobilevga($out);
    ob_start();
    echo $out;
  }
}

スポンサーリンク

関連記事

スポンサーリンク

Wordpress

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

上に戻る