ブログの記事内やサイドバーなどでAmazonのリンクを挿入するとき、商品画像をつけたい場合があるとおもう。その際、そのまま全体を表示させるのではなく、トリミングして表示させたいことはないだろうか。これらはURLの指定で簡単に実現することができるので、以下、その解説と確認するためのUI実装

- advertisement -

- advertisement -

目次

概要

Amazonの商品画像はそれぞれサイズが異なり、例えば同じKindleの電子書籍同士であっても、作品が違うとびみょうに高さなどが違ったりして一覧表示をさせるとサイズがあわないことがある。

 

上記はどちらの画像も幅を100pxにしてみたのだが、高さが異なる。

こういったことを解決するためには自分で決めたサイズにトリミングして強制的にあわせるしか方法はないため、今回は自サーバに保存することなくトリミングした画像をブラウザで表示させる。また、それを容易に確認するためのUIを実装する。

実装

Amazonの商品画像をPA-APIで取得し、座標や範囲を指定してURLに変換。

STEP.1：商品コード（ASIN）とタグを入力して検索

ASIN参考：

コード： ※ASIN
　タグ：

STEP.2：商品画像のサイズ形式を選択

　指定：
サイズ：
幅／高：  ／
ＵＲＬ：

商品名：
発売日：
　価格：

STEP.3：商品画像の範囲を選択してプレビュー

Ｘ／Ｙ：  ／
幅／高：  ／
　全体：
　適用：

以下をサイトの任意の場所に貼り付ける。

解説

以下、Amazonの商品画像について簡単に説明。まず、URLは以下のようになっている。

https://m.media-amazon.com/images/I/51wHsAtDT3L._SL500_.jpg

拡張子（.jpg）前の「SL500」部分は、以下のように指定することが可能。

  • SL：長い方の辺サイズを指定。「SL500」とした場合、画像の幅（もしくは高さ）500pxを基準として高さ（もしくは幅）が決まる。
  • SX：横サイズを指定。「SX500」とした場合、画像の幅500pxを基準として高さが決まる。
  • SY：縦サイズを指定。「SY500」とした場合、画像の高さ500pxを基準として幅が決まる。
  • SS：正方形に整形した画像の縦横サイズを指定。不足分には余白が追加される。

そのうしろの「500」部分はサイズ（px）を指定。商品画像は大・中・小のサイズが用意されており、それぞれ幅と高さが設定されている。（例：Large：500px、Medium：160px、Small：75px）

次に「CR」部分を指定する。CRはクロップのことだそうで、そのCRのあとに［開始X座標］,［開始Y座標］,［幅］,［高さ］と設定。

https://m.media-amazon.com/images/I/51wHsAtDT3L._SL500_CR106,206,192,128.jpg

以下、先ほどの画像が指定座標から指定サイズ分だけ切り取られて表示されていることが確認できる。

なお、これらの指定をしない場合は大：Largeの画像と同じ状態で表示されるようだ。

まとめ

今回のUIを実装するにあたり、画像のトリミングなどができるJavaScriptライブラリ「Cropper.js」を使用させてもらった。Githubのページから一式をダウンロードして展開している。

今回の実装により、今後どのようなことが期待できるのか

  • Amazonの商品画像を加工してローカルに保存することなく好きにサイズ調整など可能（著作権の問題回避や画像を自サイトに保存しないため容量に負担をかけない）
  • 統一された画像サイズでAmazonのリンクを作成可能
  • 視覚的にサイズや位置の調整が可能（作業の効率化）

恥ずかしながら、これまでは手動でURLを叩いてサイズや位置の確認・調整をしていた。もっと便利なツールや方法が既にあったりするのかもしれないが、これで作業的にずいぶん楽になったことと、ある程度統一したAmazonのリンクをつくることができるようになったのではないかと思う。

関連記事：

関連リンク：