読書メーターやゲームメーターなどはAmazon APIを利用して本やゲームの画像を利用しています。
で、画像利用の際に画像サイズの指定がいろいろあるのでそちらをちょっとまとめてみます。
基本的なAmazonの画像URL
サンプル画像として今読んでいるかなーり面白いパズル・パレスの画像を利用します。http://ecx.images-amazon.com/images/I/51-xLR6sCxL._SX150_.jpg
URLの「51-xLR6sCxL」がおそらく商品区別IDでその後に続く「SX150」というのが画像サイズを指定するものです。
横幅をそろえるSX
横幅をそろえる場合はSXを利用します。例えば横幅を150pxにしたい場合は
http://ecx.images-amazon.com/images/I/51-xLR6sCxL._SX150_.jpg
とします。横幅をそろえるSY
縦をそろえる場合はSYを利用します。例えば縦を150pxにしたい場合は
http://ecx.images-amazon.com/images/I/51-xLR6sCxL._SY150_.jpg
とします。この辺までは基本ですね。
画像を複数並べる時に使えるAA
商品画像はすべて同じサイズではありません。縦長の商品もあれば横長の商品もあります。それらを一緒に表示すると大きさがバラバラになって見た目が悪いですよね。例えば横を100pxに揃えて横に並べてみると
こんな感じになります。
また縦を100pxに揃えて横に並べてみると
こんな感じになります。
また、無理矢理画像のサイズを指定して大きさを整えると今度は画像自体が縦長になったり横長になったりしてこれまた見栄えが悪いですよね。
例えば横幅を100pxに指定した画像を縦も無理矢理100pxにすると
こんな感じになります。
このようにサイズが違う商品の画像もきっちりそろえたい場合は「AA」を使います。
例えば縦横を100pxにしたい場合は
http://ecx.images-amazon.com/images/I/51-xLR6sCxL._AA100_.jpg
としてそれぞれ並べると
こんな感じになります。
AAですと縦か横か長い方を基準とし余白を入れて調節する感じですね。
Amazon APIを使って何かサービスを作る場合はぜひご参考ください。
パズル・パレス 上 (角川文庫)
Leave a reply