AmazonJS (WordPress Plugin)

http://wordpress.org/extend/plugins/amazonjs/


概要

AmazonJSはjavascriptでAmazonの商品を表示するWordPressプラグインです。

  • WordPress 2.8以上、PHP5以上で動作します
  • 商品データのキャッシュでデータベースは使いません、 代わりにファイルキャッシュを使います
  • Amazon Product Advertising APIのアカウントが必要です
  • ブログの編集画面からAmazon商品を検索して、投稿へ追加できます
  • 投稿へ追加する時にjavascriptを使って動的に表示するのか、javascriptを使わずにWP-Amazon互換の簡単なリンクを表示するか選択できます
  • jQuery templateを使った表示の拡張ができます(javascriptおよびjQuery templateの知識が必要です)
  • RSSフィードでやjavascriptがオフの場合はサーバー側でシンプルなリンクを追加します
  • 作者が自分で使うために開発したため導入については初心者向きではありません
AmazonJSが動作しない場合はトラブルシューティングをご覧ください

実行例


導入記事

説明の足りないところなど導入記事で補足していただいています。皆様ありがとうございます。


プラグインのインストール

1. ダウンロード

プラグインをここからダウンロードしてwp-content/plugins/amazonjsに配置します。
または、WorSpressの管理ページのプラグイン > 新規追加 より AmazonJSを検索してインストールすることも可能です。

2. キャッシュディレクトリの作成

wp-content/cache/amazonjsディレクトリを作成して、権限を0777にします。
FTPソフトなどをお使いください。

/wp-content
    /cache
        + /amazonjs (書き込み可能) 
    /plugins/amazonjs
        + /css/*
        + /images/*
        + /js/*
        + /languages/*
        + /lib/*
        - *.php

3. プラグインの有効化

管理ページ(/wp-admin)から プラグイン メニューを開き、AmazonJS プラグインを有効にします。

4. Amazon APIのアクセスキーIDの設定

管理ページ(/wp-admin)から 設定 > AmazonJS を開き、Product Advertising APIのアクセスキーIDと、秘密アクセスキーを設定します。必要に応じてアフィリエイトタグも設定します。

5. テーマの確認

AmazonJSは wp_print_footer_scripts を使って表示するためのスクリプトコードを出力します。テーマのほうで wp_footer を呼び出しているか確認してください。


使い方

amazon.jsがインストールされている場合、投稿画面にAmazonの無彩色なアイコンが表示されます。

アイコンをクリックすると、amazonの商品が検索できます。

紹介したい商品が見つかったら、選択ボタンを押して、表示方法を選びます。
選択した表示方法によって、htmlまたはショートコードが投稿画面に追加されます。


高度な使い方

スタイルの拡張

設定からカスタムCSSを使用するにチェックを入れると、使っているテーマフォルダの下のamazonjs.cssを読み込むようになります。お使いのテーマフォルダの下にamazonjs.cssを作成してスタイルをカスタマイズしてください。

@CHARSET "UTF-8";
.amazonjs_item {
  border:4px solid red;
}

javascriptで展開された部分は、HTMLのソースを見てもわかりませんが、Crome/Safariなら右クリック->要素の検証、FirefoxならFirebugsを入れて右クリック->要素の管理を選択するとDOM要素が見れるのでそれでどういったclassが指定されているかを参考にしてください。

<div class="amazonjs_info" style="margin-left:61px;">
    <h4>
        <a href="http://www.amazon.co.jp/D%E3%83%BBN%E3%83%BBA-%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%8C%E3%83%80%E3%83%AB%E3%82%AF/dp/B00005ED8E%3FSubscriptionId%3D0F49XFHPQYWX91XK4K82%26tag%3Dmakotokw-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB00005ED8E" title="D・N・A" target="_blank">D・N・A</a>
    </h4>
    <ul>
        <li>yasu,ka-yu,kiyo,秦野たけゆき,you,明石昌夫</li>
        <li>カッティング・エッジ</li>
        <li class="amazonjs_price" title="価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。商品の販売においては、購入の時点で [Amazon.co.jp または Javari.jp] に表示されている価格および発送可能時期の情報が適用されます。"> <b>参考価格</b>
            <span class="amazonjs_listprice">¥ 3,059</span>
            <br> <b>価格</b>
            ¥ 2,635
            <span>(2013/05/02 00:13時点)</span>
        </li>
        <li>
            <b>発売日</b>
            2000/03/08
        </li>
        <li>
            <b>商品ランキング</b>
            15,614位
        </li>
    </ul>
</div>

ショートコード

ショートコードは以下のようになっています。

[amazonjs asin="B00005ED8E" locale="JP" tmpl="Small" title="D・N・A"]

これらの情報を元にしてAmazonJSプラグインがAmazonから商品情報を取得します。商品情報を取得はjavascriptではなくサーバサイドのPHPで実行されます。このためWordPress側でページキャッシュを使っている場合にページキャッシュが更新されるまでAmazonの商品情報が更新されないことがあります。

属性 必須 説明
asin ASIN
locale Amazonの国指定 ( US, UK, DE, FR, JP, CA, CN, IT, ES のどれか )
tmpl テンプレート名
title ローディングメッセージに使用
imgsize 画像サイズの指定 ( small, medium, large のどれか ), 指定しない場合はテンプレートが決める

テンプレート

amazon.jsではjQuery templateの$.template()を呼び出して事前にいくつかのテンプレートを登録しておき、
$.tmpl(template, data)を呼び出して表示します。

jQuery templateで使うテンプレートは他とバッティングしないように amazonjsXXXTpl という名前で登録しています。適応するテンプレートは以下の順番で検索します。

  1. ショートコードの tmpl で指定されたもの検索し、見つかれば使用する
    • 例えば以下のショートコードはtmpl属性に Small が指定されているので amazonjsSmallTpl を使用
      [amazonjs asin="B00005ED8E" locale="JP" tmpl="Small" title="D・N・A"]
  2. amazonjsBookTpl など商品グループ名を使ったテンプレートを検索、見つかれば使用する
    1. 商品グループ名はSearch Index Nameを参照
    2. amazonjsSmallTpl を使う(現在はBook,eBooks(Kindle),Music,DVDのテンプレートのみなのでそれ以外はamazonjsSmallTplが使われる)

テンプレートエンジンに渡すデータには以下の基本情報があります。

パラメータ 内容
ASIN string ASIN
DetailPageURL string 商品URL(アソシエイトタグを含む)
SalesRank int 商品ランキング
IFrameReviewURL string iFrame用カスタマーレビューURL
SmallImage object 商品画像(小)
MediumImage object 商品画像(中)
LargeImage object 商品画像(大)
CountryCode string 国コード
UpdatedAt int 更新日時(UnixTimestamp)

さらに追加としてAmazon Product Advertising APIで取得したItemAttributesの情報があります。これらは商品カテゴリによって異なります。

テンプレートの拡張

設定からカスタムスクリプトを使用するにチェックを入れると、使っているテーマフォルダの下のamazonjs.jsを読み込むようになります。お使いのテーマフォルダの下にamazonjs.jsを作成してください。

以下のようなコードを書いてテンプレートを複数設定したobjectを返します。以下の書き方ではamazonjsプラグインが持っているテンプレートを上書きしています。

(function ($) {
  $.amazonjs.addTemplate(function(partial){
    return {
      Small:'<div class="amazonjs_item">Hello, ${Title}</div>',
      Book:'<div class="amazonjs_item">'+partial.smallImage+'${Title}'+partial.price+'</div>'
    };
  });
})(jQuery);

以下の例ではAmazonJSプラグインには用意していない商品カテゴリである DVD のテンプレートを追加しています。ちなみに商品カテゴリは ${ProductGroup} で展開させることが可能です。

(function ($) {
  $.amazonjs.addTemplate(function(partial){
    return {
      DVD:'<div class="amazonjs_item">'+partial.smallImage+'${Title}'+partial.price+'</div>'
    };
  });
})(jQuery);

以下の例はショートコードとの組み合わせです。テーマディレクトリに用意したamazonjs.jsで Janne テンプレートを追加して、ショートコードの tmpl 属性に指定しています。

shortcode

[amazonjs asin="B00005ED8E" locale="JP" tmpl="Janne" title="D・N・A"]

/theme/amazonjs.js

(function ($) {
  $.amazonjs.addTemplate(function(partial){
    return {
      Janne:'<div class="amazonjs_item">${Title}<br/>Janne Da Arc最高</div>'
    };
  });
})(jQuery);

$.amazonjs.addTemplate関数の引数のpartialは再利用可能な部品テンプレート集となっています。

属性 内容
partial.smallImage 画像(小)
partial.mediumImage 画像(中)
partial.largeImage 画像(大)
partial.price 価格


トラブルシューティング

ローディングが回ったまま表示されない

まず、他のテーマで問題が起きるか、他のプラグインを無効にしても問題が起きるかどうかを確認してください。お使いのテーマでのみ問題が起きる場合はテーマ内で wp_headwp_footer() が呼び出されているかをチェックしてください。

AmazonJSの処理の前にページ内でJavascriptのエラーが発生すると商品の表示処理が実行されません。Google Chromeではツール > Javascriptコンソールを開いてからページをリロードするとJavascriptのエラーが赤い文字で表示されます。Javascriptのエラーが発生していないか確認してください。

デフォルトのテーマや他のプラグインを無効にするとJavascriptのエラーが消える場合は、お使いのテーマか他のプラグイン、またはそれらの組みあわせによって問題が起きています。これらの問題を先に解決しない限りAmazonJSとの併用はできません。

必ずしもエラーの箇所が問題とは限らずテーマや他のプラグインの悪影響を受けていることがあります。例えばあるテーマやプラグインが古いjQueryを読み込むことで他の箇所がエラーになるというケースを報告により数件確認しています。こういったケースでは根本の原因を特定し、修正することが必要です。

相性問題の報告があるもの

  • W3 Total Cache 対策: 縮小化でamazonjs.jsを除外する
  • NextGEN Gallery v0.5で回避
  • WP Keyword Link
  • Amazon Publisher Studio (Beta)
    • ツールバーがBeta版のためjavascript,遅延表示に影響があると公表されている

Kindle本の価格が取得できない

Product Advertising APIの仕様です。 Product Advertising API Developer Guide (API Version 2011-08-01) > OfferSummary Response GroupによるとKindle本の価格が取得できません (2013/08時点)

Amazonの商品が検索できなくなった

Amazon Product Advertising API にはリクエスト制限があり、それを超過すると取得できなくなります。

Product Advertising APIへのアクセスのために使用される各アカウントは、1時間につき2,000リクエストまでの当初利用限度が認められます。その後は、各アカウントは、30日間に発生する出荷された商品の1時間あたりの収益100円ごとに、1時間につき500リクエスト(1時間につき最大25,000リクエストまで)が受けられます。

バージョンアップをしたら動作しなくなった

v0.3から古いバージョンをこちらから各バージョンをダウンロードできます。0.3以降の更新履歴は次の章を参考にしてください。


更新履歴

  • 0.6.1 2014/03/03
    • テーマのスタイルが優先されてレイアウトが崩れる問題に対応
  • 0.6 2014/02/24
    • dark系テーマで見えるようにリンク色を指定
    • ショートコードに imgsize オプションを追加
    • 同じASINを複数の国のAmazonで同時に表示できない不具合を焼成
    • スマホ用のデザイン調整
  • 0.5 2013/12/22
    • DVDテンプレート追加
    • WordPress 3.8向けにスタイル調整(管理ページ)
    • wp-ajax を使うように修正
    • css/jsの縮小化を止める
  • 0.4.2 2013/10/27
    • jQueryをfooterに移動しても動作するように修正
    • wp-config.phpの移動に対応
    • エラーメッセージの改善
  • 0.4.1
    • 必要なときだけページに amazonjs.js を追加するように修正
    • css/jsの縮小化
  • 0.4: 2013/08/24
    • カスタマーレビューの表示をオプションに、デフォルトはオフ
    • javascript無効時に公式ウィジェットを表示するオプションを追加

* 他のプラグインがjQueryでエラーを出す場合の対策

ほぼ余談

2010/12に書いたものです

Amazon WordPressプラグインはたくさんあってどれを使って良いのか分からなかったので(どうもWordPressのAmazonプラグインはカオスで定番がないらしい)、自分の要望に適したプラグインをつくろうとにしたのがきっかけ。

  1. ブログから簡単に追加できる
  2. 余計なことはしないで(独自実装を避けて)シンプルに実装する
  3. ブログのパフォーマンスをなるべく落とさない
  4. 開発時点のAmazonの規約を守る
  5. (他にも沢山Amazonプラグインがあるから)万人受けは狙わずに独自路線を進む

あたりがこのプラグインの基本ポリシーになっている。

これらのポリシーから見た目はcss3でちょっと洒落ていて、設計としては独自テンプレートエンジンには頼らずにjQuery templateを使うようにしている。サーバ側に負荷をかけないということから多くの処理をクライアントサイドであるjavascriptに持ってきおり、この設計思想からAmazonJSという名前にした。javascriptメインで動かしているAmazon WordPressプラグインは他にはあんまりないと思う。

逆にそのあたりの新しい技術を使っているだけに上級者向けのプラグインかもしれない。導入後の汎用性を重視していてあんまり導入障壁を下げるとか考えてない。ポリシー5にあるようにすでに沢山似たようなプラグインはあるし、もともと自分のために作り出したものなのでわざわざ他のプラグインを使っているユーザを奪い取る必要もないし、簡単に使えるものが他にあるならそれを使えばいいじゃない。というスタンス。あくまでメインターゲットを自分に設定している。

javascriptで表示するためにAmazonから取得した商品データはブログの最後にjsonデータをくっつけている。これはHTMLのソースを見たときにこれはスマートじゃないと思っているのだけれどこれを別に分けてしまうとサーバへのリクエスト数が増えてサーバのパフォーマンスに影響するため、ポリシー3を重視して今のところ妥協している。

Amazonの規約はいろいろ変わっているみたいで例えばAmazonの販売価格は常時変わっていくので価格を表示するときはいつの時点のデータかを合わせて表示することが求められている。WordPressプラグインに限らず守られていないものは多い、守られていないというか開発したあとに規約が変わっていてそのままになっているというのが現状だと思う。守らなくともペナルティがあるわけじゃないけど、規約を読んでしまったからには見てみぬふりをするわけにもいかず、開発時点の規約はちゃんと守るようにしている。そういう面は後発のメリットというか安心して使ってもらえるところだと思っている。