画像をリサイズする

画像をブラウザサイズの割合によって自動でリサイズ調整する機能は、
mobyletのコア機能の中でも強力なツールの一つです。
元画像へのアクセス方法は、ローカルパスを使ったアクセスと、HTTP経由でのアクセスの両方が利用できます。
また、一度リサイズした画像をキャッシュする機能も標準で搭載しています。

横幅割合指定

横幅割合を指定して、縦横比を保ちリサイズする

携帯ブラウザは端末毎にブラウザサイズが異なるため、
画像を指定個数横に並べる場合などに、綺麗に表示することは困難とされています。
しかしMobyletでは、アクセス端末のブラウザサイズを取得し、
ブラウザサイズとの比率により画像をリサイズすることで、この問題を解決しています。

まず、画像リサイズ機能を使用するために、画像リサイズ設定を参照して設定を行なってください。
次に、カスタムタグを使用するために、taglibの利用設定を参照して、JSPにpageディレクティブを記述してください。

横幅割合を指定する場合、カスタムタグを使用して以下のように記述します。
元画像を、端末のブラウザサイズの20%にリサイズして画面に表示します。

<m:img src="./images/resize.jpg" magniWidth="0.2">

リサイズ方式は
「FITWIDTH」
「INSQUARE」
「CLIPSQUARE」
の3つが用意されており、リサイズ方式を指定しない場合のデフォルトは「FITWIDTH」になります。
「INSQUARE」「CLIPSQUARE」についての詳細はその他のリサイズ方式をご覧ください。

それぞれのリサイズ形式で横長の画像をリサイズした場合、以下のように表示されます。

<m:img src="./images/resize.jpg" magniWidth="0.2">
<m:img src="./images/resize.jpg" magniWidth="0.2" scaleType="INSQUARE">
<m:img src="./images/resize.jpg" magniWidth="0.2" scaleType="CLIPSQUARE">
リサイズ横 FITWIDTH

FITWIDTH

リサイズ横 INSQUARE

INSQUARE

リサイズ横 CLIPSQUARE

CLIPSQUARE

縦長の画像をリサイズした場合、以下のように表示されます。

<m:img src="./images/resizeV.jpg" magniWidth="0.2">
<m:img src="./images/resizeV.jpg" magniWidth="0.2" scaleType="INSQUARE">
<m:img src="./images/resizeV.jpg" magniWidth="0.2" scaleType="CLIPSQUARE">
リサイズ縦 FITWIDTH

FITWIDTH

リサイズ縦 INSQUARE

INSQUARE

リサイズ縦 CLIPSQUARE

CLIPSQUARE

※端末のブラウザサイズが取得できない場合には、元画像がそのまま表示されます。
 その場合は、最新の端末情報を取得するを参照して、最新の端末情報を取得しているかを確認してください。

<制限事項>
Seasar2連携時、HotDeploy環境下ではHotdeployFilter内でデッドロックが発生するため、
同ホスト同アプリケーションへの画像パスを「http:」から始まる絶対パスでの指定はできません。
HotDeploy環境下での同ホスト同アプリケーション内への画像のパスは、
mobylet.image.propertiesでimage.local.base.dirに設定したディレクトリ以降の相対パスを記述してください。

画像処理エンジンを変える

画像処理エンジンにImageMagickを利用する

mobyletはデフォルトでAWTを利用して画像変換処理を行っていますが、
画質は必ずしも良いとは言えません。
より良い画質を求める場合は、画像処理エンジンをImageMagick等に変更することをオススメします。

画像処理エンジンをImageMagickに変更する方法はこちら

その他のリサイズ方式

領域を指定してリサイズする

領域を指定して画像をリサイズする場合は、以下のように記述します。
「INSQUARE」を指定すると、横幅を基準とした正方形に収まるサイズに画像全体を縮小します。

このリサイズ方式は、縦長の画像と横長の画像が混在するケースで、
画像全体を綺麗に並べて表示したい場合などに有効です。

<m:img src="./images/resize.jpg" magniWidth="0.2" scaleType="INSQUARE">

クリッピングしてリサイズする

画像をクリッピングして中抜き画像を表示する場合は、以下のように記述します。
「CLIPSQUARE」を指定すると、横幅を基準とした正方形に縮小し、はみ出る部分をくり抜いた画像に変換します。

このリサイズ方式は、縦長の画像と横長の画像が混在するケースで、
全ての画像を同じサイズで並べて表示したい場合などに有効です。

<m:img src="./images/resize.jpg" magniWidth="0.2" scaleType="CLIPSQUARE">

キャッシュ機能

リサイズした画像をキャッシュして利用する

画像のリサイズ処理をリクエスト毎に行う場合、特に画像が多いページでは
毎回画面の表示時間に時間がかかり、サーバーの負荷も高くなります。

一度リサイズした画像をキャッシュしておくことで、上述の問題を回避することが可能です。
キャッシュ機能を有効にするには、クラスパス配下の「mobylet.image.properties」に以下を記述します。
キャッシュファイルはファイル名、ファイル更新日時、横幅割合、端末のブラウザの横幅、リサイズ方法により一意になります。

image.cache.base.dir=キャッシュファイルを保存するディレクトリ

※GAEを使用する場合は、上記の設定を行なわなくても、デフォルトでmemcachedを使用したキャッシュが有効になります。

ページのTOPへ戻る