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を指定してるなら実装は簡単です。
また１つのテンプレートで対応できるので楽チンです。
この方法はアニメーション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;
}
}
関連記事
- 受信メールの＜続きあり＞とは
- 画像の保存やメール転送を制限する方法
- VGA端末用に出力画像を拡大縮小する方法
- Softbankの携帯で文字の色を白にするときは注意
- Softbankで絵文字を表示させる
- PHP
- phpMyAdminでログイン画面を出さずにデータベースに接続する方法
- memcachedを使用する(memcacheライブラリ)
- Mantisのユーザー管理テーブル(mantis_user_table)
- セッションの有効期間とか設定とか挙動とかを調べました
- Zend Serverとは
- SSL(HTTPS)でファイルのダウンロードができない場合
- failed: No space left on device
- simplexml_load_file()、simplexml_load_string()でparser error : Input is not proper UTF-8, indicate encoding !
- NetBeans6のインストール(JavaだけでなくRuby、PHP、C/C++に対応した統合開発環境)
- PDO_MYSQLをインストールする方法
- CakePHP、Symfony、Zend Frameworkの比較
- mail関数やmb_send_mail関数でReturn-Pathを設定する方法
- PHPをコマンドラインから使用する方法
- Deprecatedエラーを消す方法 (php.iniや.htaccess)
- Smarty2をPHP7に対応させる方法(The /e modifier is no longer supported Smarty_Compiler.class.php, line 270)
- ディレクトリが存在するにもかかわらず、『No such file or directory』エラーが出る
- Firefox、Chromeなどで文字化けを防ぐ方法 ヘッダー情報に文字コードを指定
- サブドメインにアンダーバーがあるとクッキーは使えない
- magic_quotes_gpc = On の対策
- Windows版PHPにPEAR・PECLをインストールする
- CakePHPのバージョンごとのシステム要件
- Composerをインストールする方法と使い方
- SELECTタグで色を選択する場合のサンプル
- PHPでのfacebookアプリの認証処理(APIを使うユーザー認証)
- facebook APIを使用する時にfacebook Appsでアプリを登録するまでの流れ
スポンサーリンク
