<img>タグ

概要

<img>タグには下記の拡張属性があります。

<img nolink>

概要

nolink属性 を使用する前提として、contentsRuleDefault.xmlの<Attribute name="appendImgLink">でtrueが指定されている必要があります。この場合、コンテンツ内の全ての<img>タグには自動的にその画像ファイルへのリンクが生成されます。

このとき、一部の画像のみ画像リンクを生成しないようにしたい場合は、その<img>タグに対して nolink という属性を記述することで画像リンクを生成しないようにすることが可能です。

形式

<img src="sample.jpg" nolink>

例えば以下のような元コンテンツを表示させます。

元コンテンツ

<html>
<body>
<img src="sample1.jpg">
<br>
<img src="sample2.jpg" nolink>
</body>
</html>

変換後コンテンツ

<html>
<a href="sample1_xpimg_jpg.jpg?_xpxi=KHHjddG9pck4EGnJ52k0.0.pesFm-0.g"><img src="sample1_xpimg_jpg.jpg?_xpxi=KHHjddG9pck4EGnJ52k0.0.pesFm-0.g"></a>
<br>
<img src="sample2_xpimg_jpg.jpg?_xpxi=KHHjddG9pck4EGnJ52k0.0.pesFm-0.g">
</body>
</html>

端末での表示を見ると、sample1.jpgの画像にはリンクが生成され、そのリンクをクリックすると端末に画像のみが表示されます。
しかし、nolinkを指定したsample2.jpgの画像にはリンクが生成されません。

注意

  • 全ての画像に対して画像リンクが不要なのであれば、contentsRuleDefault.xmlの<Attribute name="appendImgLink">を false に設定してください。

<img useoriginal>

概要

x-Servletは<img>タグのsrc属性を出力する際には、画像変換画像拡張子変更を行ないます。
意図して画像変換や画像拡張子変更させたくない場合は、<img>タグに useoriginal属性 を指定してください。
この場合x-Servletはsrc属性で指定されたファイルを変換せず、そのまま端末に出力します。
ただし、セッション文字列は付加されます。

形式

<img src="sample.jpg" useoriginal>

例えば以下のような元コンテンツを表示させます。

元コンテンツ

<html>
<body>
<img src="sample1.jpg">
<br>
<img src="sample2.jpg" useoriginal>
</body>
</html>

変換後コンテンツ

<html>
<body>
<a href="sample1_xpimg_jpg.gif?_xpxi=KHHjddG9pck4EGnJ52k0.0.pesFm-0.g"><img src="sample1_xpimg_jpg.gif?_xpxi=KHHjddG9pck4EGnJ52k0.0.pesFm-0.g"></a>
<br>
<img src="sample2.jpg?_xpxi=KHHjddG9pck4EGnJ52k0.0.1TMVH-0.G">
</body>
</html>

画像変換機能を使用する設定で、gifとjpgに対応しているdocomo端末でアクセスすると、sample1.jpgの画像は優先度の高いgif画像に変換され、「sample1_jpg.gif + セッション文字列」に拡張子変更されます。
しかし、useoriginalを指定したsample2.jpgでは、拡張子変更が行われず、「sample2.jpg + セッション文字列」の形で出力されます。

注意

  • useoriginal属性を指定した場合、画像リンクは出力されません。useoriginal属性と同時にnolink属性を指定してもnolink属性は無視されます。

imgタグの画像変換指定

概要

x-Servletの画像変換機能をreduceColorsMethod=quantizeの設定で行っている場合には、<img>タグに以下の画像変換指定が可能です。

  • jpegQuality=NN(NN=0~100)
    JPEG画像出力時の画像の品質を指定します。携帯端末で見ることを考えた場合あまり大きな値を指定しても差異が出ないことが考えられますので高くても90前後に設定することを推奨します。デフォルト値はimageConvertConcreteParametersのjpegQualityで指定できます。
  • maxColor=NN(NN=2~256)
    GIF及びPNG画像を出力する際の減色色数を指定します。デフォルト値はimageConvertConcreteParametersのquantizeMaxColorで指定できます。
  • x_size=NN(NNは1以上) 
    画像の横幅が指定されたpixel数で固定出力されます。端末の横幅を越える値を指定した場合の表示は、端末側の動作に依存しますので表示されない可能性があります。縦幅はアスペクト比を維持するように自動的に決定されます。
  • frameRatio=NN(NN=1~100)  
    画像の横幅を端末の横幅のNN%という形式で指定します。端末の横幅のNN%より画像の横幅が大きい場合はNN%に縮小されます。縦幅はアスペクト比を維持するように自動的に決定されます。
  • qualityFix(値無し)  
    品質を固定し縦横幅を変動させることで、端末のキャッシュサイズに収まるようなbyte数の画像を出力します。アスペクト比は一定に保たれます。
  • sizeFix(値無し)  
    縦横幅を固定し品質を変動させることで、端末のキャッシュサイズに収まるようなbyte数の画像を出力します。
  • adaptive(値無し)  
    品質及び縦横幅を変動させることで端末のキャッシュサイズに収まるようなbyte数の画像を出力します。
    ※ adaptive と frameRatio を併用した場合
    frameRatio で指定した大きさから画像変換を始め画像サイズ、品質の両方を調整し端末のキャッシュサイズに収まるように調整します。
    (frameRaito→adaptiveの順に処理する)
    ※使用例は「画像と説明文の間で分割したくない」を参照ください。
  • copyright(値無し)
    docomo、au、EMOBILE端末と SoftBank端末で HTTP通信を行っている場合に対して画像の転送ができないようにします。
    ※詳細は「画像の転送をさせたくない」を参照ください。
    ※EMOBILE用XHTML Basic にも copyright属性が存在しますが、値無しの属性が指定された場合は x-Servlet の属性と判断し、copyright="no" に変換されます。EMOBILE端末への出力はEMOBILE用XHTML Basicの記述が優先されます。
  • resizeMethod [Version2.10.0以上]
    画像が縮小される場合の縮小方法を指定します。
    デフォルト値はimageConvertConcreteParametersのresizeMethodで指定できます。
  • quantizationAlgorithm [Version2.10.0以上]
    量子化のアルゴリズムを指定します。
    デフォルト値はimageConvertConcreteParametersのquantizationAlgorithmで指定できます。
  • enableSharpen [Version2.10.0以上]
    画像が縮小される場合において、縮小後にシャープネス処理を行うかどうかを指定します。
    デフォルト値はimageConvertConcreteParametersのenableSharpenで指定できます。
  • pngColorType [Version2.10.0以上]
    画像をPNG形式で出力する場合、対応している端末に対して24ビットフルカラーで出力するかどうかを選択します。
    デフォルト値はimageConvertConcreteParametersのpngColorTypeで指定できます。

以下に、記述例を示します。

<html>
<body>
<img src="sample1.jpg" adaptive><!--品質及び縦横幅を変動させてキャッシュサイズに収まるような画像を出力します-->
</body>
</html>
<html>
<body>
<img src="sample1.jpg" sizeFix><!--品質を変動させてキャッシュサイズに収まるような画像を出力します-->
</body>
</html>
<html>
<body>
<img src="sample1.jpg" qualityFix><!--縦横幅を変動させてキャッシュサイズに収まるような画像を出力します-->
</body>
</html>
<html>
<body>
<img src="sample1.jpg" copyright><!--画像の転送ができないようにします-->
<img src="sample2.jpg" jpegQuality="85"><!--JPEG画像出力時の画像の品質を指定します-->
<img src="sample3.jpg" maxColor="64"><!--GIF及びPNG画像を出力する際の減色色数を指定します-->
<img src="sample4.jpg" x_size="100"><!--画像の横幅をpixel数で指定します-->
<img src="sample5.jpg" frameRatio="50"><!--画像の横幅を端末の横幅のNN%という形式で指定します-->
<img src="sample6.jpg" resizeMethod ="average"><!--平均画素法を用いて縮小を行います-->
<img src="sample7.jpg" quantizationAlgorithm ="neuquant"><!--NeuQuant法を用いて量子化減色を行います-->
<img src="sample8.jpg" enableSharpen="true"><!-- 画像を縮小後、鮮鋭化処理を行います-->
<img src="sample9.jpg" pngColorType="full_24"><!--端末が対応している場合には、24ビットフルカラーで出力します-->
</body>
</html>

注意

  • x_size と frameRatio を同じ<img>タグに使用する事はできません。
  • qualityFix、sizeFix、adaptive を指定する場合は、そのページに他の<img>タグを記述することは出来ません。複数の<img>タグを使用した場合のページの動作は保証できません。あらかじめご了承ください。
  • 通常はqualityFix、sizeFix、adaptiveを使用した<img>タグと、そのタグに続くコンテンツとの間にはページ分割は発生しません。
    逆に、qualityFix、sizeFix、adaptiveを使用しない場合、contentsRule.xmlのseparationWithImageSizeの設定がtrueの場合には画像サイズを考慮してページ分割位置を決定するので、この画像の直後でページ分割が発生する可能性が高まります。
  • 2011年6月30日に、SoftBankのSSL/TLS通信方式がGW中継からEnd-to-Endに仕様変更された影響で SoftBank端末で copyright属性が効かない場合があります。
TOP