日: 2009年2月4日

【EC-CUBE】携帯サイトで、画像リサイズの問題を解決する

その1)

デザイン画像について。

EC-CUBEでは、携帯サイトに使用している画像は、容量圧縮のため、自動的に低解像度のJPGに変換され、アクセスごとにアクセスしてきた携帯端末の画面サイズに合わせてリサイズされ、/upoad/mobile_image/にたまっていく。

けれど、これをされると、最初から携帯サイト向けに最適化したデザイン画像まで全てJPGで圧縮されるため、画質がエラきたない;しかも、小さなサイズの画像も横幅が一旦画面いっぱいになるようにサイズ変更される。(なんで、GIFで容量も最適化してアップロードした携帯用画像までJPG変換するのか・・・)

これでは、どの端末で見ても携帯画面の横幅いっぱいに画像が表示されますよ、奥さん。以上の弊害が大きすぎるので、もう少しグレードアップして、本当にキレイに最適化されるまで、暫定的にこの自動リサイズ機能は使わないことにする。

auやドコモでは、横幅いっぱいにしたい画像は、横幅が大きければ端末のほうで自動的にリサイズして表示してくれるので、240px位で作っておけばいいのだ。

/data/require_base.php

のL72あたり(EC-CUBE Ver.2.3.3の場合)、

require_once(CLASS_PATH . “SC_MobileImage.php”);

をコメントアウト。

これで勝手にリサイズ&変換されなくなる。

ただし、これで、横幅自動変換機能はあくまで携帯端末の機能に頼ることになるので、ソフトバンクの高解像度携帯など、一部の携帯では、横幅が広いのに小さくしか画像が表示されず、レイアウトがちょいと見にくいなど、弊害もなくはないということは認識しておく必要アリ。

その2)

つぎに、商品画像について。

商品画像は、管理画面の商品登録で、大・中・小の3種類の大きさで保存される。(必須登録は中サイズで、中または大画像をアップロードすると、それより小さいサイズは登録時に自動的にリサイズされた画像が作成される)

これは、どのサイズもPCサイトではそれなりの大きさ及び画質で表示させたいので、携帯用に小さい画像にしてしまうのは、ちぃとな~。

ところが、携帯では、なぜかresize_imageが使用できない。。。

このままでは、携帯ページのコーディングで画像サイズを指定して小さく見せることはできるが、商品リストに画像も表示したいときなんかは、画像自体は元の容量だから、容量制限のキビシイ携帯サイトでは、やっぱりつらいのである。

ということで、require.phpを少し修正して、携帯サイトでも、resize_imageが使用できるようにする。これで容量エコになる♪

携帯サイトでresize_imageがうまく動作しないのは、リダイレクトが影響しているらしい。

/html/require.php のコード、一番下のほうに、

header(“Location: “. SC_Utils_Ex::sfRmDupSlash($url . $path));
exit;

というソースがあるので、これを、

/* resize_image.phpのときだけ、リダイレクト解除 */
if(!preg_match(“/resize_image.php/i”, $path)) {
header(“Location: “. SC_Utils_Ex::sfRmDupSlash($url . $path));
exit;
}

と変更。

表示させるほうのHTMLは、

<img src=”<!–{$smarty.const.SITE_URL}–>resize_image.php?image=<!–{$image_path|sfRmDupSlash}–>&amp;width=60&amp;height=60″>

などとすればOK。

参考サイト:http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=1838&forum=11