AMP対応の AmazonJS拡張プラグインを作成！
AmazonJS という便利なプラグインがあります。
日本人の間では人気のあるアドオンなので知っている人も多いと思います。
このサイトのブックレビューで利用したくてカスタマイズを考えたのですが、少し調べてみると AMP仕様にして欲しいという要望が多かったので対応しておきました。
その名も AmazonJS Reviewer。
ちなみに AMP そのものがカスタマイズの目的ではありません。
AMP に対応していないテーマを使用している人も一度使ってみてください。
以下が実際のものです。
アマゾン商品データの取得に失敗しました
「AmazonJS は重い」などという評判が一部にありますが、AmazonJS Reviewer にはキャッシュの仕組みもあり、かなり高速に表示可能です。
当プラグインは PHP7 が必須です。5系のサーバで使用するとサイトが停止します。
注意してください。
Contents
使い方
こちらからダウンロードしてください。
ただしパスワードが必要です・・！
PayPal を通して600円で取得可能です。以下から購入できます。
手続きが完了すると PayPal に登録しているメールアドレスに、パスワードを記載したメッセージが自動で送信されます。
一度取得したパスワードで、何度でもダウンロード可能です。
パスワードは外部に漏らさないようお願いします。
600円は高額でしょうか・・？
今まではタダで配布していました。
しかしサラリーマン生活であまり時間が取れない上に、開発には一定のコストがかかります。本当に申し訳ありませんが、お許しください。。
購入者に対してパスワードを送信するといったような用途しかありませんが・・。
話が少しそれましたが、使用方法はインストールして有効にするだけです。基本それだけです。
[amazonjs] というショートコードをオーバーライド（上書き）するので、既存の記事の内容を変更しなくても利用できます。
無効にすると通常の AmazonJS に戻ります。
AmazonJS 設定画面
AmazonJS の設定画面でいくらか変更しているところがあるので、それらを簡単に説明していきます。
これら設定は AmazonJS Reviewer をアンインストールしてもデータベースからは削除されません。ただし AmazonJS 本体をアンインストールすると削除されます。
リンクに nofollow を付加する
リンクに rel=”nofollow” を付加します。
nofollow は本来胡散臭いサイトを参照する際に付けるものなので、Amazon に対しては特に付加する必要はないかもしれません。
ただし SEO の観点から必要だと考える人たちが一定数いるようなので、オプションとして設けておきました。
AMP 対応を常に有効にする
LIQUID AMP のようにデバイスの種類に関係なく常に AMP を有効にしているようなテーマを使用している際にはチェックを入れるようにしてください。
AMP に関しての注意点
本来はエンドポイントで AMP が有効になっているかを動的に判断できれば以上のようなチェックボックスも必要ありませんが、サーバサイドではなかなか判断が難しいのが現状です。
デスクトップ上でアドレスバーに?amp=1などと打ち込んで擬似的に AMP を有効にすると AmazonJS Reviewer のデザインが崩れる可能性があります。
AMP 有効時の挙動を確認したい場合は、AMPプラグインをインストールし有効にした後、URL に/amp/を付加してみてください。
AMP仕様のテーマでモバイル上でデザインが崩れた際は教えてください。
画像の横幅（パソコン用）
商品画像の横幅をセットする項目です。
モバイルではデザインの都合上、常に70pxです。
キャッシュ
商品情報をキャッシュとして一定時間保持できます。
保存されている場合は Amazon API に問い合わせる必要がないのでページの表示が高速になりますが、その間は情報に更新があっても反映されません。
セットされているキャッシュを削除したい場合は、AmazonJS の設定画面の下にある「キャッシュを削除」をクリックしてください。AmazonJS Reviewer のデータも同様に削除されます。
削除した設定
以下の設定は削除しています。
- ブラウザのJavascriptが無効の時にオフィシャルウィジェットを表示する
- フェードインアニメーションを使用する
- テーマのスタイルを上書きする
AmazonJS Reviewer では表示に JavaScript を使用していないので無効でも表示自体は可能です。ただし以下が機能しなくなります。
- カスタマーレビューのモーダル表示
- Google Analytics のトラッキング機能
JavaScript が OFF の場合は、カスタマーレビューは新規タブで表示されるようになります。
また AMP有効時も以上は使用できなくなります。まぁ多くの要望があった場合は Google Analytics のクリックトラッキングには対応するかもです。。
フェードインアニメーションもありません。必要性を感じません。
テーマスタイルの上書きは!importantを使用しますが、AMP 対応のため利用を控えています。よって設定そのものも削除しておきました。
AmazonJSショートコードとの違い
AmazonJS Reviewer のショートコードでは以下のパラメータを使用します。
- asin
- title
- star
- comment
asin は AmazonJS のものと同じです。必須要素です。これがないと何も表示されません。
title が存在する場合は、こちらがタイトルとして優先されます。以下が例です。
アマゾン商品データの取得に失敗しました
これは商品名が長いときに、好きなように省略できるので便利です。
star には 1-5 までの半角数字を書き込むことで星を表示できます。以下が例です。
アマゾン商品データの取得に失敗しました
1-5 以外、またはこのパラメータそのものが存在しないときには何も表示されません。
また comment に簡単なコメントを付加することもできます。以下が実際のものです。
アマゾン商品データの取得に失敗しました
私はこのサイトのブックレビューでこのコメント機能を利用したかっただけです（笑）
エラー表示
AmazonJS Reviewer では商品情報の取得でなんらかの問題が発生した場合にエラーを表示するようにしています。
サイトの管理者には実際のエラーの内容が表示され、一般の訪問者には単純に「アマゾン商品データの取得に失敗しました」とだけ表示されるようになっています。
更新情報 0.2
バージョンを01から02に更新しました。
01を使用している人は「有効な URL ではありません」というようなエラーが発生しているはずです。
このページより最新のものをダウンロードし、再度インストールするようお願いします。
AmazonJS 本体が久しぶりにバージョンアップをし、内部で使用されていた Amazon URL が http から https に変更されました。
AmazonJS Reviewer では http を自動で https に変換するようにしていたのですが、本体の URL が https になったことにより、Amazon API に投げる URL が httpss となってしまっていたことが原因です。
更新情報 0.3
バージョンを02から03に更新しました。
以下のような場合にエラーが発生していました。
- 製品が「映画」の場合
- 画像が存在しない場合
映画に関しては表示される情報をいくらか追加しておきました。
また画像が存在しない場合は、オリジナルのイメージを表示するようにしています。
報告してくれたユーザの方に感謝します！
更新情報 0.4
バージョンを03から04に更新しました。
以下のようなスポーツ関連商品が正しく出力されていなかった問題を解消しました。
アマゾン商品データの取得に失敗しました
再度ダウンロードをし、旧バージョンと入れ替えるようお願いします。
更新情報 0.5
バージョンを04から05に更新しました。
以下のようなテレビシリーズ関連商品が正しく表示されていませんでした。
アマゾン商品データの取得に失敗しました
修正済みです。
報告してくれたユーザの方に感謝します！
またスポーツ関連商品の「特徴」という項目には複数の紹介文が記載されていますが、その説明が極端に長くなる傾向があったので、初めの一文だけを表示するようにしました。
以下が例です。
アマゾン商品データの取得に失敗しました
更新情報 0.6
バージョンを05から06に更新しました。
著者の記載がない書籍が存在したので、そのような場合は表示しないようにしました。
以下が例です。
アマゾン商品データの取得に失敗しました
更新情報 0.7
バージョンを06から07に更新しました。
Amazon Product Advertising API が4.0から5.0に更新されたことへの対応です。
AmazonJS 本体のほうではバージョン 0.10にて Support Product Advertising API 5.0 と対応済みですが、当拡張プラグインでは未対応のままでした。
AmazonJS 本体でそのまま利用できる API 5.0用のファンクションが用意されていたので、それをそのまま借用しています。
また今までは複数の AmazonJS ショートコードがコンテンツ内に存在し、かつキャッシュが存在しない場合は個別に Amazon に問い合わせていましたが、効率が悪いので一度の APIコールで全てのデータを取得するよう修正しました。
最後に：利用者のみなさんへ
AmazonJS のコードはある程度拡張性を意識して書かれているので、わりと簡単にオーバーライドすることができました。
ただし全体を見た感じ、プログラムのところどころに未完成の部分があります。
おそらく作成者の方がこのプラグインの開発に飽きてしまったのではないかと思われます（笑）
あるあるですね。
プラグインに関してなにか要望がある場合は下のコメント欄からお願いします。
また私の Twitterアカウントに直接を連絡くれてもOKです。
ただしあまりに緊急の要件には対応しかねます。普通にサラリーマンやってるので。
