暇人の英語雑記ブログ

AMP対応の AmazonJS拡張プラグインを作成!現在無料配布中

2018.09.132018.09.05WordPress
ty-amazonjs-reviewer

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

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

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

その名も AmazonJS Reviewer。

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

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

以下が実際のものです。

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

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

使い方

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

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

[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 では商品情報の取得でなんらかの問題が発生した場合にエラーを表示するようにしています。

ただしこれらエラーはサイトの管理者のみが見れるようになっています。一般の訪問者には何も表示されません。ご安心を。

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

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

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

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

あるあるですね。

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

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

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

AmazonJS Reviewer のみならず他のプラグインでも不具合依頼等はいつでも受け付けています。

相談だけなら無料です。簡単な要望であれば対応自体もタダです★

author

Post image for Facebook Like