AmazonJS 0.8

ひさしぶりにAmazonJSを更新した。またも普通に使えている人に嬉しい修正はしていない。

  • キャッシュをファイルキャッシュからTransients APIに変更
  • テーマや他プラグインの巻き添え対策

Transients API

WordPressにTransients APIというキャッシュ用のAPIがある。セットアップにてキャッシュディレクトリを作らせたり、ファイルで保存するのがいい加減古い臭いと思ったのでそれに切り替えた。これで0.8からはセットアップでキャッシュディレクトリを作成しなくて良い。Transients APIはDBに書き込んでいるのでDBの接続が遅いと重くなる恐れがあるけどしょうがない。そもそもDBが重い環境ではページキャッシュしないとやっていけないだろうし。

競合対策

競合対策ではAutoptimizeを併用しても動くようにしてみた。ただAutoptimizeを使うとテーマや他のプラグインからの巻き添えを受けやすくなるので難しい。デフォルトではAutoptimizeはテーマやプラグインのスクリプトを全て一つにまとめるので先に読み込まれたテーマや他のプラグインのJavascriptのコードがコケると以降のプラグインのJavascriptコードが実行されなくなる。Javascriptのコードが実行されなくても大きな問題が起きないプラグインが多いと思うがAmazonJSの場合はくるくるローディングしたまま書き換える処理が実行されない問題が起きて被害が大きい。

今回とあるテーマで巻き添え被害を食らう状態が再現できたので対策を試みた。そもそもAutoptimizeなどの高速化型プラグインを使わない場合、なぜテーマや他のプラグインがコケると被害を受けるのか。一つの要因として 誰かがjQuery関連のコードを失敗すると$(document).ready()で追加したコールバックが呼び出されない という現象があることがわかった。

とりあえずなぜ$(document).ready()のコールバックが呼ばれないのかは置いておいて、$(window).load()は行けるのかとか、直接DOMContentLoadeddocument.addEventListenerしたら行けるのかを調べたら手元ではそちらは呼びだされた。というわけで$(document).ready()がダメでも$(window).load()DOMContentLoadedが発火したら描画するようにしてみた。これで被害は避けられるだろうか。

0.8になって動かなくなった人はテーマを変えたりや他のプラグインを無効にしたりして競合するものがわかればお知らせください。原因が不明な場合は古いバージョンを以下からダウンロードしてダウングレードできます。
https://github.com/makotokw/wp-amazonjs/releases

正直バージョン1.0にするタイミングを完全に逸している。

AmazonJSのSHA256署名対応

いや、何もすることがなかった。

先般Google社やMicrosoft社といったブラウザベンダや業界団体(Certificate Authorities)が、
SSL/TLS認証時のSHA1のサポートを停止することを発表いたしました。
これに伴い、Product Advertising APIはSSL/TLS通信時に用いる署名アルゴリズムで、
SHA1を利用することを2015年10月09日をもって終了し、
SHA256による署名アルゴリズムに変更いたします。

コード確認したけどSHA-256ですでに署名していたし、そもそも

  1. http://〜から始まるURLで APIをコールしています。何か対応は必要ですか?
    対応は不要です。

で終了。

というわけで10/9になっても問題なく動いていそうだけど、そもそもURLをhttpsスキーマにしなくて良いのかは不明。

検証環境つくってAmazonJS 0.7.2をリリース

AmazonJS 0.7.1でPHP5.4以上でショートタグの設定にかぎらず常に使えるようになった<?=をうっかり使ってしまった問題を修正したものをリリース。

<?=<?php echoに置換すれば済む問題だったけど、テスト環境がないことが問題だと思って、Dockerの勉強に数時間、Dockerの構築に数時間、方針変更してVagrant環境の構築に数時間、修正は10分みたいなすごい遠回りした。でも環境作ったので次からはこういう問題を事前に気付けるはず。作ったVagrant環境はあとでGitHubにあげる。

Vagrant

WordPressのDockerのイメージやVagrant環境はいろんな人が公開しているんだけど、今回使いたかったのは古いPHPのバージョンと古いWordPressの環境だったのでそれを探すのが難しくて結局自分でVagrant環境を作ってしまった。時間がなかったのでDebian 6 + PHP5.3でとりあえずチェックしたけど、WordPress 3.2からPHP5.2.4が最低環境になったのでPHP5.2の環境にしたいとは思ってる。

最初はDockerでいろんなPHPバージョン x WordPressのバージョンの環境をつくろうと考えていたけど自分の最新のWordPress以外では最低バージョンのWordPressとPHPの環境だけあれば大体okなのではと気づいてVagrantに方針変更した。

WP-CLI

VagrantでのプロビジョニングはChef Soloを使って、WordPressのインストールはWP-CLIを使った。PHP5.3.2以上が必要で、WordPress3.5.2以上じゃないと使えないコマンドがあったりするので、PHP5.2.4 + WordPress3.2を用意したいシナリオでは若干工夫が必要ではあるけど。

wp core download --locale=ja --version=3.1みたいにしてインストールできるので特定バージョンでテストしたい時すごく楽。データベースのexportやimportも出来るみたいなので手動でテストするならDockerよりもWP-CLIを駆使する方が便利だと思う。

WordPress 3.1で動かない

いざ環境できてやってみたらWordPress 3.1でAmazonJSが動かないという。wp_footerでスクリプトが出力されていない。3.2でもダメで3.3でようやく動いた。

http://wpdocs.sourceforge.jp/Version_3.3
Support for using wp_enqueue_script() and wp_enqueue_style() in the HTML body; all scripts and styles are added in the footer

AmazonJS 0.4.1くらいでスクリプトをフッタに移動し始めたんだけど、どうやらそれはWordPress 3.3以上じゃないと動かなかった模様。プラグインのWordPress必要最低バージョンを決めるときは使っているAPIのバージョンだけ気にしていたんだけどこういうこともあるということはやっぱりテストは必要。

WordPress 3.3も3年前のバージョンなので頑張って3.1に対応する必要ないかと思って必要最低バージョンを3.3に引き上げた。WordPress 3.2以下でAmazonJSを使いたい人はAmazonJS 0.4くらいだと動くかもしれません。

AmazonJS 0.7.1でやらかしてDockerを勉強

AmazonJS 0.7.1で問題が起きている模様。<?= $label ?>がそのまま表示される。やっちまったわ。

  • PHP5.3では<?が非推奨でデフォルトオフ←知ってた
  • でも<?php打つのめんどい
  • PHP5.4では<?のオンオフ関係なく<?=が使えるようになった←知ってた
  • 自分のWordPressテーマは自分しか使わないのでPHP5.5で<?=ガシガシ書いてた
  • WordPressの作業はまとめてやることが多いのでそのノリでAmazonJSも修正した←やらかした

というわけでPHP5.3以下でini.short-open-tagをオフにしている環境だと<?=が展開されない。

問題はPHP5.5でしか確認してないということだと思うし、いろんなバージョンで検証するならDocker使う場面キタコレとか思ってDockerについて調べて時間かかっている。WordPressプラグインのテストでなんか便利な方法ないのかな、PHPのバージョンだけじゃなく、WordPressのバージョンごとのテストも簡単にできるならしたい。

Dockerの勉強と構築に時間かかってるのでとりあえずphpbrewで5.3環境作ってテストした方が良さげ。もう少しお待ちを。

Microsoft CDNが遅いのでAmazonJS 0.7.1をリリース

WordPressプラグインのAmazonJSでなかなか商品が表示されないことがあった。

このプラグインではjquery.tmplを使ってJavascriptで表示を更新している。jquery.tmplはMicrosoftのCDNにあるもの( http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js )を使っていたんだけどajax.microsoft.comのレスポンスがなかなか返ってこずローディングしたまま表示が更新されないことがあった。

jquery.tmplは2011年ごろbeta版が登場したけど、その後更新されていないのでもう1.0正式版になることはないと思っている。今じゃunderscoreのテンプレートとかでJST使うとかだろうし。jquery.tmplから乗り換えたいけど互換性がなくなるし、面倒だしで使い続けているけどそのうち最新のjQueryと互換がなくなる恐れがあるので、そのときはjquery.tmplに手を加えないといけないんだろうなーとなんとなく思っていて、その2つの理由から今回のバージョン0.7.1からjquery.tmplをAmazonJS内に同梱することにしました。まぁさすがに他プラグインとjquery.tmplの利用が衝突することは無いだろう、多分。

その他AmazonJS 0.7.1では細々とした修正をしています。

Amazon Product Advertising APIで使うシークレットアクセスキーを取得する

2014/4/21よりAWS(Amazon Web Service)の仕様が変わりルートアカウントのシークレットキーが表示されなくなりました。AmazonJS(Amazon Product Advertising API)では以前としてルートアカウントのアクセスキーとシークレットアクセスキーが必要なようなので取得方法を調べました。

この記事はAmazon Product Advertising API(AWS)のアカウントをとったがシークレットアクセスキーの取得方法がわからないという人向けです。この問題にぶち当たるまでの道は他のサイトを見てたどり着いてください。。。

では、AWSのコンソールに移動して取得したAWSアカウント・パスワードを入力してください。

コンソールの右上の自分の名前のプルダウンして出てくるメニューからSecurity Credentialsという項目をクリックします。

aws-acount-for-product-advertising-api-01.png

IAM Userを始めるか聞かれるのですが、今は不要なので閉じます。

aws-acount-for-product-advertising-api-02.png

右側の上から3つ目くらいのAccess Keys (Access Key ID and Secret Access Key) を開いて、Create New Access Key ボタンを押します。(2つまでしか作成できないようなので、既に2つ作成している場合はどちらかを諦めて削除してください)

aws-acount-for-product-advertising-api-03.png

作成すると Access Key IDとSecret Access Keyが表示される のでコピーして保管します。(Secret Access Keyは作成時しか表示されないので紛失した場合は再度作りなおすことになります)

aws-acount-for-product-advertising-api-04.png

上記の二つの値をAmazonJSの設定画面で設定してください。

IAM UserはProduct Advertising APIに対応していない?

そもそも仕様変更の意図としてAWSアカウントの元でユーザ(IAM User)が作成でき、「個別のユーザに適切な権限を与えよ」と理解していたのでその通りに試したのですが、何故かIAM UserでProduct Advertising APIは使えませんでした。

まずProduct Advertising APIに対する権限ポリシーが存在しない。Administration Policyを渡してみたけどそのユーザのアクセスキーを使うとコード AWS.InvalidAccount のエラーになって

お客様の AccessKey Id は Product Advertising API に登録されていません。https://affiliate-program.amazon.com/gp/flex/advertising/api/sign-in-jp.html で登録後に得られる AccessKey ID をご使用ください。

とか怒られる。

ちょっと焦ってForumなどを検索して見つかったから助かった。
Your AccessKey Id is not registered for Product Advertising API.
https://forums.aws.amazon.com/thread.jspa?threadID=151500

でもそのうち解決されるかもしれないのでそれまでの繋ぎということで。

WordPress 3.9がリリースされたのでAmazonJS 0.7をリリース

テーマのスタイルの上書きをオプションに

それでいいのかAmazonJS 0.6.1

やっぱり それでいいわけないだろ ということで、この修正はオプション(デフォルトオフ)にしました。テーマのスタイルを上書きする にチェックすると !important を使ったcssを読み込むようになります。

テーマのスタイルによって商品表示のデザイン、レイアウトが崩れる場合の対応は二つあります。このオプションを有効にするか、カスタムCSSを使用するを有効にしてカスタマイズするかです。

両方のオプションを有効にすると !important 地獄への連鎖が始まるので推奨しません。

Google Analyticsでトラッキング

AmazonJSで商品クリックをイベントトラッキングに書いた機能をオプション(デフォルトオフ)で追加しました。

Google Analyticsでトラッキングしたい人は Google Analyticsを使って商品リンクのクリックをトラッキングする にチェックをいれてください。

なおAmazonJSはGoogle Analyticsのスクリプトやトラッキングコードは追加しません。Google Analytics for WordPressなどを使ってください。

リファクタリングと対応バージョンをWordPress 3.1に

設定関連のAPIで screen_icon() がWordPress 3.8から非推奨になっていて、それ以外の設定関連のAPIの使い方を見なおしたところ設定の保存で使っていた submit_button がWordPress 3.1からのAPIでした。コードの履歴を見たところv0.4から使っていたのでv0.4からは設定の変更がWordPress 3.1以上でないとできなくなっています。さすがにセキュリティ的にも古いWordPressの利用は推奨されないと思うのでコードは直さず最低バージョンを3.1に設定しました。

WordPress 3.1未満でどうしても使いたい人は過去バージョンからv0.3をお使いください。

またWordPress 2.xを切れたことで設定周りの実装を今後の修正のためにもシンプルに書きなおしました。設定関連で問題が起きた場合はお知らせください。

AmazonJSで商品クリックをイベントトラッキング

WordPressプラグインであるAmazonJSの話。以前にも質問を受けたことがあるんだけど、AmazonJSというかProduct Advertising APIから取得したURLからのAmazonアフィリエイトレポートの集計方法は謎である。要するにわからんとしか回答できない。

集計の謎

AmazonアフィリエイトのURLを作る場合 http://amazon.jp/o/ASIN/{ASIN}/{アソシエイトタグ} というURLを使うんだけど Product Advertising API から返ってくるURLはもう少し複雑なものになっていて集計が分けられているのか謎。

Amazonから集計方法は公開されていないと思うので、Product Advertising APIからのクリックはすべて直接リンク以外でカウントされるなどのいろいろな情報(予測?)があってはっきりしない。

僕もアフィリエイトを始めたばかりのころはAmazonのレポートを良くチェックしていが、わからないものをいくらチェックしても仕方がないので最近はまったく見なくなった。

じゃぁ、http://amazon.jp/o/ASIN/{ASIN}/{アソシエイトタグ} に書き換えればいいのでは?と思って返ってくるURLをそのまま使えという規約がないことを確認しようとしたところ・・・

https://affiliate.amazon.co.jp/gp/advertising/api/detail/main.html
また、各アカウントに利用限度の追加が認められるかどうかを確認するため、アマゾンへのリンクバック時にはProduct Advertising APIのレスポンスにより返される URLを改変なしに使用しなければならず 、使用されるアソシエイトタグは、Product Advertising APIアカウント所有者のEメールアドレスと同一のEメールアドレスのもとに設定されたものでなければなりません。登録アドレスが一致しない場合、上記利用コントロールが正しく適用されない恐れがありますので、ご注意ください。

URLは改変できません\(^o^)/オワタ

Google Analyticsを使おう

Amazonの集計方法がどうなっていようと契約している以上それを受け入れるしか無い。Amazonの集計方法についても知りたいけど、そもそもは単純に自分のサイトの訪問者がどのような商品に興味を持っているかを知りたい。

AmazonJSはJavascriptで商品を表示している。
AmazonJSはJavascriptで商品を表示している。
(大事なことなので2回言いました)

Javascriptが使えるということは、Google Analyticsのイベントトラッキングを使ってクリックを集計すればいい!

というわけで以下のようなコードを入れてテスト中。イベントカテゴリが AmazonJS、イベントアクションがClick、イベントラベルが{ASIN} {タイトル}になるようにしている。

if ($.isFunction(ga)) {
  ga('send', 'event', 'AmazonJS', 'Click', data.asin + ' ' + title);
} else if (_gaq) {
  _gaq.push(['_trackEvent', 'AmazonJS', 'Click', data.asin + ' ' + title]);
}

AmazonJSが表示したURLのクリックを集計するだけなので、Amazonサイトに移動したあと購入されたかどうかまでは追跡できない。そこはAmazonの集計レポートと合わせてみる必要がある。

実際イベントトラッキングがとれているか確認してみた。ちなみにユニバーサル アナリティクスが正式版になったということで本ブログのトラッキングコードはユニバーサル アナリティクスのものに置き換えてみた。

Google Analytcsから 行動 > イベント > サマリーなどから レポート全体を見る をクリックする。ユニバーサル アナリティクスの力なのかわからないが当日の集計もすぐに見れるようになっているみたい。

amazonjs-click-traking-1.png

レポート全体からイベントラベルをクリックすると、ラベルごとの集計が見れるのでユニークイベント数を見れば何人がクリックしたかが知れる。

amazonjs-click-traking-2.png

個人的にはどのページからどの商品に興味が持たれているかを知るだけで十分だし、Amazonの集計レポートは見なくていいや。にしても俺の紹介する本は無視されている。もっと頑張って読んだ本を薦めよう。

最近AmazonJSではWordPressがバージョンアップしたらリリースする縛りをしているのでWordPress 3.9がリリースされたらこの機能を搭載したバージョンを公開する予定です。

それでいいのかAmazonJS 0.6.1

WordPressプラグインであるAmazonJSのバグフィックス版をリリース。

biz-vektorテーマでうまく表示されないという報告を受けて調べてみたらそのテーマでこんなことされていた。

#content img { margin: 0; max-width:100% !important;height:auto !important; }

なんで・・・ max-width:100% !important; 画像幅が強制的に100%にされていたのでテキストが回り込まない。

最悪プラグインで !important を使うのは仕方ないにせよ、テーマ側で使うのはcssの設計が悪いのではないか?他にも!importantが沢山使われていた、本当にこんな解決でいいのだろうかと思いつつもどうしようもないので amazonjs.css で後勝ち !important を使うことに。

野良テーマでこんな設計のテーマは使いたくないなぁ。

WordPress 3.9が未だ先なのでAmazonJS 0.6をリリース

WordPressがリリースされたタイミングでプラグインを更新するということをしていたが3.9がなかなかリリースされないので調べた所4/Mでまだ2ヶ月先だったのでいろいろな要望を反映したバージョンをとっとと出しておこうと思った。

変更点

  • レスポンシブデザイン対応でスマホ対応
  • ショートコードで画像のサイズ指定に対応
  • フェードインアニメーションをオプションに

レスポンシブデザイン対応でスマホ対応

スマホでみた時のデザインがいまいちだったのでちゃんと実装することに。画面幅が480以下の場合に画像幅を60に縮小してレイアウトを調整しました。

ショートコードで画像のサイズ指定に対応

Product Advertising APIからは3種類のサイズの商品画像が取得できます。デフォルトのテンプレートでは小画像を使っていますがサイズは商品によってまちまちのため商品カテゴリによっては内容が確認できないくらい小さいことがあります。

そのため動的テンプレートで任意の画像サイズを使えるように imgsize というショートコードのプロパティを追加しました。 small, medium, large が指定できます。

例)

[amazonjs asin="B00005ED8E" locale="JP" title="D・N・A" imgsize="large"]

フェードインアニメーションをオプションに

Amazon Publisher StudioなるものがAmazonより公開されています。

ツールバーを道入したところまだβ版であるため

サイト閲覧ユーザーが利用するブラウザの種類や設定によっては、「Publisher Studio が正しく機能しない」「ページコンテンツの表示遅延」などの障害が発生する可能性があります。

という不具合にAmazonJSが巻き込まれます。

自分でも違和感なく使っていたのですが、AmazonJSではカッコつけて遅延でフェードインを掛けて表示を更新しています。そういえば最初のバージョンを作った時に気持ち良いアニメーションになるように無駄にタイミングにこだわった覚えがあります。

しかしこの遅延処理がPublisher Studio導入時に動作しなくなります。試したところPublisher Studioのツールバーが表示されるとjQueryの表示関数が使えなくなり、デバッグするのもだるいので遅延表示アニメーションをオプションにしました。デフォルトは オフ なので従来通りのアニメーションをしたい場合はオプションでチェックを入れてください。

まとめ

今回はバグ修正というよりは機能拡張がメインとなっています。特に画像サイズ指定はいろいろ応用ができそうです。

ニッチ向けプラグインのつもりだったのですが去年あたりからAmazonJSのユーザが増えてきたのかいろいろなサイトで導入記事を目にするようになりました。もうやることはないかなと思いつつも何かしらバージョンアップしているので何か改善案などありましたらお知らせください。