暇人の英語雑記ブログ

AMP対応の AmazonJS拡張プラグインを作成!

2019.05.072018.09.05WordPress
ty-amazonjs-reviewer

AmazonJS という便利なプラグインがあります。

日本人の間では人気のあるアドオンなので知っている人も多いと思います。

このサイトのブックレビューで利用したくてカスタマイズを考えたのですが、少し調べてみると AMP仕様にして欲しいという要望が多かったので対応しておきました。

その名も AmazonJS Reviewer。

ちなみに AMP そのものがカスタマイズの目的ではありません。

AMP に対応していないテーマを使用している人も一度使ってみてください。

以下が実際のものです。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
  • 著者 : 宮内 隆行, 西川 伸一, 岡本 渉, 三好 隆之
  • Kindle版:435 ページ
  • 出版日 : 2014/07/18
  • 出版社 : SBクリエイティブ
カスタマーレビューを見る

「AmazonJS は重い」などという評判が一部にありますが、AmazonJS Reviewer にはキャッシュの仕組みもあり、かなり高速に表示可能です。

使い方

こちらからダウンロードしてください。

ただしパスワードが必要です・・!

PayPal を通して600円で取得可能です。以下から購入できます。

手続きが完了すると PayPal に登録しているメールアドレスに、パスワードを記載したメッセージが自動で送信されます。

一度取得したパスワードで、何度でもダウンロード可能です。

注意
パスワードは外部に漏らさないようお願いします。

600円は高額でしょうか・・?

今まではタダで配布していました。

しかしサラリーマン生活であまり時間が取れない上に、開発には一定のコストがかかります。本当に申し訳ありませんが、お許しください。。

ちなみにこの PayPalプラグインも私の個人利用目的で作成したものですが、欲しい人はいますでしょうか?

購入者に対してパスワードを送信するといったような用途しかありませんが・・。

話が少しそれましたが、使用方法はインストールして有効にするだけです。基本それだけです。

[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 に問い合わせる必要がないのでページの表示が高速になりますが、その間は情報に更新があっても反映されません。

補足
「3時間」にセットされているキャッシュを「なし」に変更しても、その3時間のうち余りの時間はキャッシュが効いた状態になります。

削除した設定

amazonjs-removed-settings
クリックで画像が大きくなります

以下の設定は削除しています。

  • ブラウザのJavascriptが無効の時にオフィシャルウィジェットを表示する
  • フェードインアニメーションを使用する
  • テーマのスタイルを上書きする

AmazonJS Reviewer では表示に JavaScript を使用していないので無効でも表示自体は可能です。ただし以下が機能しなくなります。

  • カスタマーレビューのモーダル表示
  • Google Analytics のトラッキング機能

JavaScript が OFF の場合は、カスタマーレビューは新規タブで表示されるようになります。

また AMP有効時も以上は使用できなくなります。まぁ多くの要望があった場合は Google Analytics のクリックトラッキングには対応するかもです。。

フェードインアニメーションもありません。必要性を感じません。

テーマスタイルの上書きは!importantを使用しますが、AMP 対応のため利用を控えています。よって設定そのものも削除しておきました。

AmazonJS Reviewerプラグインを無効にすることで以上の設定は再び表示されるようになります

AmazonJSショートコードとの違い

AmazonJS Reviewer のショートコードでは以下のパラメータを使用します。

  • asin
  • title
  • star
  • comment
AmazonJS にはその他 locale と tmpl というものがありますが、AmazonJS Reviewer では使用しません

asin は AmazonJS のものと同じです。必須要素です。これがないと何も表示されません。

title が存在する場合は、こちらがタイトルとして優先されます。以下が例です。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
WordPressプラグイン開発のバイブル
  • 著者 : 宮内 隆行, 西川 伸一, 岡本 渉, 三好 隆之
  • Kindle版:435 ページ
  • 出版日 : 2014/07/18
  • 出版社 : SBクリエイティブ
カスタマーレビューを見る

これは商品名が長いときに、好きなように省略できるので便利です。

star には 1-5 までの半角数字を書き込むことで星を表示できます。以下が例です。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
  • 著者 : 宮内 隆行, 西川 伸一, 岡本 渉, 三好 隆之
  • Kindle版:435 ページ
  • 出版日 : 2014/07/18
  • 出版社 : SBクリエイティブ
カスタマーレビューを見る

1-5 以外、またはこのパラメータそのものが存在しないときには何も表示されません。

また comment に簡単なコメントを付加することもできます。以下が実際のものです。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル
  • 著者 : 宮内 隆行, 西川 伸一, 岡本 渉, 三好 隆之
  • Kindle版:435 ページ
  • 出版日 : 2014/07/18
  • 出版社 : SBクリエイティブ

自作プラグインの作成方法をはじめ公式ディレクトリに登録する手順や国際化への対応方法など、WordPress開発者には打ってつけの情報が盛りだくさんです。おすすめの一冊!

カスタマーレビューを見る

私はこのサイトのブックレビューでこのコメント機能を利用したかっただけです(笑)

エラー表示

ty-amazonjs-reviewer-error
エラーの例

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に更新しました。

以下のような場合にエラーが発生していました。

  1. 製品が「映画」の場合
  2. 画像が存在しない場合

映画に関しては表示される情報をいくらか追加しておきました。

また画像が存在しない場合は、オリジナルのイメージを表示するようにしています。

報告してくれたユーザの方に感謝します!

更新情報 0.4

バージョンを03から04に更新しました。

以下のようなスポーツ関連商品が正しく出力されていなかった問題を解消しました。

メジャークラフト ルアー メタルジグ ジグパラ ショート 40g #2 ピンク
メジャークラフト ルアー メタルジグ ジグパラ ショート 40g #2 ピンク
  • メーカー : Major Craft(メジャークラフト)
  • 参考価格 : ¥ 734
  • 価格 : ¥ 578
  • 特徴 : 【重量】40g
カスタマーレビューを見る

再度ダウンロードをし、旧バージョンと入れ替えるようお願いします。

更新情報 0.5

バージョンを04から05に更新しました。

以下のようなテレビシリーズ関連商品が正しく表示されていませんでした。

ミスター・ビーン、学校へ
ミスター・ビーン、学校へ
  • ジャンル : Comedy
  • 俳優 : Rowan Atkinson
  • 言語 : 日本語
  • 上映時間 : 24分
カスタマーレビューを見る

修正済みです。

報告してくれたユーザの方に感謝します!

またスポーツ関連商品の「特徴」という項目には複数の紹介文が記載されていますが、その説明が極端に長くなる傾向があったので、初めの一文だけを表示するようにしました。

以下が例です。

「日本正規販売店品」 ファットグリップズ アルティメット アームビルダー Fat Gripz Ultimate Arm Builder
「日本正規販売店品」 ファットグリップズ アルティメット アームビルダー
  • メーカー : Fat Gripz
  • 参考価格 : ¥ 4,329
  • 価格 : ¥ 2,980
  • 特徴 : 1年間の正規販売店保証付き。購入後一年以内に通常使用の範囲内で破損した場合は交換・返金対応いたします。
カスタマーレビューを見る

更新情報 0.6

バージョンを05から06に更新しました。

著者の記載がない書籍が存在したので、そのような場合は表示しないようにしました。

以下が例です。

情報処理2013年5月号別刷「《特集》DoS攻撃」
《特集》DoS攻撃
  • 価格 : ¥ 720
  • 単行本(ソフトカバー):74 ページ
  • 出版日 : 2013/04/15
  • 出版社 : 情報処理学会
カスタマーレビューを見る

最後に:利用者のみなさんへ

AmazonJS のコードはある程度拡張性を意識して書かれているので、わりと簡単にオーバーライドすることができました。

ただし全体を見た感じ、プログラムのところどころに未完成の部分があります。

おそらく作成者の方がこのプラグインの開発に飽きてしまったのではないかと思われます(笑)

あるあるですね。

プラグインに関してなにか要望がある場合は下のコメント欄からお願いします。

また私の Twitterアカウントに直接を連絡くれてもOKです。

ただしあまりに緊急の要件には対応しかねます。普通にサラリーマンやってるので。

author

Post image for Facebook Like