AmazonJS (WordPress Plugin)

概要

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

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

実行例

D・N・A

導入記事

説明の足りないところなど導入記事で補足していただいています。

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

1. ダウンロード

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

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

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

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

3. プラグインの有効化

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

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

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

使い方

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		ローディングメッセージに使用

テンプレート

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

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

ショートコードにテンプレートの指定があればそれを使う
- 例えば以下のショートコードはtmpl属性にSmallが指定されているので amazonjsSmallTpl を使用
  [amazonjs asin="B00005ED8E" locale="JP" tmpl="Small" title="D・N・A"]
ショートコードにテンプレートの指定が無いか、見つからない場合
1. amazonjsBookTpl など商品グループ名を使ったテンプレートを使用
2. 商品グループ名はSearch Index Nameを参照
3. それでもテンプレートが見つからない場合、amazonjsSmallTpl を使う(現在はBook,Musicのテンプレートのみなのでそれ以外は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プラグインには用意していない商品カテゴリのテンプレートを追加しています。

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

以下の例はショートコードとの組み合わせです

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	価格

ほぼ余談

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

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

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

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

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

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

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

29 Comments

Amazonプラグイン | Room 205 2011年6月21日

[...] AmazonJS [...]
AmazonJSプラグインを使ってみる | graphite.log 2012年3月25日

[...] AmazonJS http://blog.makotokw.com/portfolio/wordpress/amazonjs/ [...]
あとる 2012年4月4日

はじめまして！最近AmazonJSを使用させていただいている「あとる」と申します。

非常に使い勝手のいいツールで重宝させていただいています(´∀｀)
本当に感謝感謝です。

コメントさせていただいたのは、記事にamazonの商品を表示させたのはいいものの、
Amazonのクッキーが有効にならなくて困っています。

どこかでケアミスをしているとは思うのですが…現状をお伝えいたしますと、

・アクセスキーID 入力済み
・秘密アクセスキー入力済み
・アソシエイトタグの設定入力済み

といった状態です。
お手数ですがご教授頂けないでしょうか。
どうぞよろしくお願いいたします。

返信
- makoto_kw 2012年4月4日
  
  あとるさん。ご利用ありがとうございます！
  
  Amazonのクッキーが有効にならない件ですが、具体的にはどのようなことでお困りですか？
  ちなみにAmazonJS内のAmazon Product Advertising APIとのやりとりはWordPress側で行なっていますので
  この通信部分に関してはお使いのブラウザのクッキーとは別で動いてしまいます。
  
  返信
あとる 2012年4月4日

makoto_kw さん
ご連絡ありがとうございます！

>>Amazonのクッキーが有効にならない件ですが、具体的にはどのようなことでお困りですか？
具体的にですよね…。
AmazonJSを使用させていただいて記事でアマゾン商品の設定を行ったところ、記事に表示はされているのですが、Amazonの紹介レポートを確認したところ商品のクリックがカウントされていない状態です（その後、Amazonで提供されているHTMLコードを記事に張り付けた場合は、商品のクリックがカウントされていることは確認済みです）。

説明がわかりにくくて申し訳ないです。

返信
- makoto_kw 2012年4月4日
  
  AmazonJSとAmazonで提供されているHTMLコードのURLでクリックしたときの挙動が違うということですね。
  ちょっと気になるのでURLや動作について調べてみます。
  
  返信
あとる 2012年4月4日

すみません。どうぞよろしくお願いします！

返信
WordPress 3.X スタートアップガイド « 鏡花水月 2012年6月9日

[...] ということでKWLOGさんのAmazonJSを使わせていただきました。まずは基本的な使い方と言う事で、「アップロード/挿入」ボタンの横に出る「a」ボタンをクリックするとリンクの作成用ポップアップが開きます。そこでキーワードやASINなどで検索。あとは貼り付けたいスタイルを選択して挿入ボタンを押すだけ。簡単にAmazonへのリンクが作れるのでうれしいですね。ちゃんと画像が出たのも高得点^^;。AmazonJSにはさらに高度な使い方もあるようなので、おいおい利用していきたいと思います。 [...]
2ちゃんちゃん 2012年7月6日

お世話になります、
使えそうな、プラグインありがとうございます。
早速使わせていただいています。

テンプレートの拡張をしているのですが、
四苦八苦してます。
修正点がありました。

amazonjs.js
の位置ですが、
有効テンプレート/amazonjs.js
でした。

画像（中）mediumlImageに
余計な文字が混入しています。
mediumImage
で動きました。

最後に画像（大）で苦戦してます。
表示されませんｗ

何気に、ヨサゲなプラグインだけに、残念です。
調査の方、お願いできますか？

返信
2ちゃんちゃん 2012年7月6日

自己解決しました

プラグインファイルの
amazonjs.js
81行目
largeImageTemplate
になっていたので
largeImage
にしたところ、表示できました
これで、使えそうです。
お騒がせしました。

返信
- makoto_kw 2012年7月7日
  
  報告ありがとうございます！
  確認して次のバージョンで修正するようにします！
  
  返信
wordpressでamazonアフィリエイト（amazon アソシエイト)に挑戦！ | 独立遊軍プログラマーtaiyop 2012年8月16日

[...] あとはwordpressのplugin「amazonJS」を入れるだけ。（ココを参考にしてね！けっこう面倒いかもだけど頑張って！＾＾） [...]
あばら 2012年11月6日

wp-config.php に

define(‘WP_CONTENT_DIR’, ABSPATH . ‘hogehoge’); // wp-content Directory
define(‘WP_CONTENT_URL’, ‘http://foo.com/hogehoge’); // wp-content URL

などと定義してあっても、固定で wp-content/cache/amazonjs を要求されるのですが、
この仕様は変更可能でしょうか。考慮いただければと思います。

返信
- makoto_kw 2012年11月6日
  
  すいません！考慮します。
  
  返信
- makoto_kw 2012年11月11日
  
  修正版のbeta3cをアップしました
  
  返信
あばら 2012年11月11日

WP_CONTENT_DIR の件、意見を汲んで対応くださってありがとうございます。
大変感謝しております、今後もありがたく使用させていただきますね！

返信
[Wordpress]Amazonリンクがオシャレかつ感動的に簡単に貼れるプラグイン | ブーヴィルの中心でノンと叫ぶ 2012年12月20日

[...] どんな手のこんだことをするかというと、「AmazonJS」というプラグインをいれるだけです。 [...]
AmazonJSプラグインが動かない（解決済み） | ほんとも！〜学校図書館おたすけサイト〜 2013年1月9日

[...] kwLog「AmazonJSプラグイン」（製作者：makoto_kwさん） [...]
kimata 2013年4月1日

初めまして．

beta4 の動作を改善するパッチを作成してみました．
http://green-rabbit.sakura.ne.jp/note/2013/04/01/212/

取り込んでいただけるとありがたいです．

返信
- makoto_kw 2013年4月3日
  
  kimataさん。パッチ提供ありがとうございます！
  beta5に組み込みました。
  
  返信
naoki_numata 2013年4月3日

お世話になります。naoki_numata と申します。
AmazonJS 素晴らしいですね。便利に使わせて頂いています。
そこでご相談なのですが、使用にあたり１点困っていることがあり、
知恵をお貸しいただけないでしょうか。

今、トップページで最近の投稿5件をサムネイル表示する設定にしています。
しかし、AmazonJS を使用して作成したページのサムネイル表示ができません。
どうにかトップページからリンク写真の画像をサムネイル表示させることはできないでしょうか。
⇒実際に起こっていることは以下のサイトでご覧いただけます。
　naokinumata.com

上記問題の原因は以下だと考えています。
　・トップページのサムネイル表示は投稿ページの画像を引っ張ってきているだけである。
　・一方、AmazonJS で作成したリンクは「画像」ではなく「リンク」である。
　・その結果、トップページでは画像が表示されない。

そして、対策として考えられるのは以下２点かなあと考えております。
※申し訳ありません。実際にできるかどうかについては技術力不足のため度外視しています・・・

・トップページのサムネイル表示部分を以下のように変更する
　画像がある場合は画像をサムネイル表示
　AmazonJS がある場合はそのリンク先にある画像を認識して表示させる？
　画像も AmazonJS も無い場合は何も表示しない
　
・AmazonJS 側でリンクが「画像」と見えるように編集する？

しかし、実際にどうしてよいものやらと考えあぐねています。
もしこの件に関して解決策をお持ちでしたらご教示いただけないでしょうか。
(基本的なことでしたらスミマセン・・・)

何卒よろしくお願い致します。

返信
- makoto_kw 2013年4月6日
  
  naoki_numataさんリクエストありがとうございます！アイキャッチ画像についての検討記事を書いてみました、一筋縄にはいかなさそうです。
  
  返信
naoki_numata 2013年4月7日

makoto_kw　さん
お世話になっております。naoki_numata です。
検討記事の内容、拝見しました。詳しく調査いただきありがとうございます！

AmazonJS からメディアライブラリに画像ファイルを入れるのは技術的にもポリシー(Product Advertising API)的にも難しいということを理解しました。

私のやりたいことに関しては手動でメディアライブラリへ画像を登録するしかなさそうですね。
そちらについてどうするかは検討したいと思います。

AmazonJS は今後も愛用させて頂きます。
ありがとうございました。

返信
metaladvance666 2013年4月11日

すいません、つい先日まで動いていたのですが、どうやらVersionUPしたら動作しなくなってしまいました。
具体的には投稿画面でAmazonアイコンを押すとインジケータが出ます。前はその後検索画面に遷移していたのですが、今はインジケータが表示されっぱなしでいくら待っても（5分ぐらい)インジケータが消えません。投稿画面を押すと元の編集画面に戻ってしまいます。
PC再起動してみたり、ブラウザ（Chrome)のキャッシュを削除したりしたのですが、ダメでした。
アクセスキーID、秘密アクセスキーの設定も誤っておりません。

すごく気に入っていたプラグインなのでこれからも使いたいのでどうにか直したいです。
どうしたらよろしいでしょうか。

返信
- makoto_kw 2013年5月7日
  
  metaladvance666さん
  
  お返事遅くなりました。
  まだ問題が起きるようでしたら古いバージョンも用意できますがいかがでしょうか？
  
  返信
たら 2013年5月6日

AmazonJS 使わせて頂いております。
同じ様に、楽天用のリンクを作成する機能があれば複数のプラグインを併用することなく便利なんですが。
よろしくお願い致します。

返信
- makoto_kw 2013年5月7日
  
  たらさん
  
  コメントありがとうございます。僕も楽天用の欲しいかも。
  ただAmazonJSはwordpress.orgでも公開しており海外の方も使っているので
  同じ機能だったとしても別のプラグインとして作ることになると思います。
  
  返信
くろべえ 2013年5月12日

こんにちは。現在作成中のwebサイトで、こちらのプラグインを使わせていただこうと考えております。
ただ……上記のやり方通りに設定をしても、記事画面上で本来書籍情報が出るところに、プログレスサークルがくるくると表示されたままとなってしまいます。
（wordpress 3.5.1）。
同じくWPのプラグインで現在メンテナンスモードにして非公開状態にしているため、それが影響しているのかもしれませんが・・・・・。
お心当たりあれば教えて頂けると助かります。

よろしくお願い致します。

返信
- makoto_kw 2013年5月13日
  
  くろべえさん
  
  表示の更新はjavascriptで行なっているので、例えばChromeのツール > Javascriptコンソールなどでエラーを確認できるかもしれません。またjavascriptの動作がテーマや他のプラグインに影響を受けることもありますのでクリーンな状態で確認してもらうと問題の切り分けになることがあります。
  
  返信

kwLog

makoto_kwのひとりごと。

AmazonJS (WordPress Plugin)

概要

実行例

導入記事

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

1. ダウンロード

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

3. プラグインの有効化

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

使い方

高度な使い方

スタイルの拡張

ショートコード

テンプレート

テンプレートの拡張

shortcode

/theme/amazonjs.js

ほぼ余談

29 Comments

コメントを残すコメントをキャンセル

概要

実行例

導入記事

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

1. ダウンロード

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

3. プラグインの有効化

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

使い方

高度な使い方

スタイルの拡張

ショートコード

テンプレート

テンプレートの拡張

shortcode

/theme/amazonjs.js

ほぼ余談

29 Comments

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル