技術 tsukarooohi

【KUSANAGI】WordPressプラグインAmazonJSが正しく動作しない原因

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

今回かな〜〜〜りハマりました。

このブログでもレビューを書いた記事には、対象書籍のAmazonリンクを貼っているのですが、普通のAmazonアフィリエイトのリンクはデザイン自体が古臭いのでなんだかなと思っていました。

そのためAmazonリンクをある程度デザインした状態のコードを出してくれるサービス「ヨメレバ」を利用していましたが、Wordpressの事なので誰かしらプラグインを作ってくれているだろうと検索すると案の定、結構人気でWordpressでAmazonアフィリエイトをやるなら定番的なプラグイン「AmazonJS」が見つかりました。

AmazonJSの導入要点のみ

AmazonJSの導入記事などでは、Wordpress管理画面のプラグインから検索してインストールの手順になっていますが、現在は検索に出てきません。

なのでWordpress公式のプラグインページからソースをダウンロード

Amazon JS — WordPress プラグイン

後は解凍したAmazonJSをpluginsディレクトリに保存してサーバにアップロードすればWordpress管理画面のプラグインに表示されますので、有効化して設定。

詳細な設定方法は省きますが、Amazonアフィリエイトのアカウントと、Amazon Product Advertising APIアカウントが必要になります。

AmazonJSプラグインがうまく機能しない

設定も完了したので、いざリンクを作ろうと商品検索を行ったのですが検索結果が下記のようにRank項目しか表示されていない！

ですがAmazonJSを使うのが初めてなので「よしよし動いた動いた」と思い商品を選択。

テンプレートはデフォルト設定が選択されているのにプレビューには何も表示されていない。

おかしいなと思い「少ない情報」や「画像（小）」、「画像（中）」に切り替えると、何とか画像のみ表示されました。

これはいよいよおかしいと他の方の記事のスクショなどを確認するとやはりプレビューにはしっかりと情報が表示されたリングが表示されています。

また商品検索結果の表示からすでに情報量が違います。

AmazonJSの説明には「WordPress 3.3 以上が必要」とあり、現在使っているWordpressのバージョンは4.8と余裕です。

さてはプラグインの開発が止まってて、最近のWordpressのバージョンでは互換性がなくて使えないのかと思い検索しても、それらしい記事は出てきません。

何個かAmazonJSが上手く動作しない時の対処法という記事は見つかりますが、内容は商品検索の国を「日本」か確認しろ的なもの。

デフォルトで日本になっているので話になりません。

一応これでもエンジニアなのでこうゆう場合はすぐにChromeのデベロッパーツールでJSの挙動を確認します。

すると下記のようなエラーが

Uncaught TypeError: Cannot read property 'replace' of undefined

replaceが定義されてない？

ナンノコッチャと引き続き調べます。

簡単に述べるとreplace対象のテキストが取得されていないのに、そのオブジェクトからreplace関数を使おうとすると出るエラーっぽい。

今度はAmazonJSのコードを解析し下記コードが怪しい。

selectedItem.Title.replace(/\[|\]/g, '');

結果AmazonJSの表示内容と上記コードがエラーになっていることから、商品画像以外のデータ（商品名、料金、その他）が取得されていないためエラーになり、プレビューには画像以外表示されないようだ。

取り敢えずAmazonJSの説明を熟読すると気になる記載がありました。

In first, AmazonJS converts tag from amazonjs short code in server side. Second, in window.load, amazonjs.js (it is added by plugin) will replace tag with formatted html to display Amazon Product by using jQuery template.

Google翻訳結果
最初に、AmazonJSタグはサーバ側でamazonjsショートコードから変換します。第二に、window.loadでamazonjs.jsは（それがプラグインによって追加された）jQueryのテンプレートを使って、アマゾンの製品を表示するには、HTMLタグでフォーマット置き換えます。

またAmazonJSの日本語説明記事には「WordPress 2.8以上、PHP5以上で動作します」とあります。

AmazonJS (WordPress Plugin)

サーバ側で変換？PHP5以上？？

AmazonJSがうまく機能しない原因と解決策

このブログは「KUSANAGI for さくらのVPS」上でHHVMを利用しWordpressを実行しています。

ですがAmazonJSの説明にもある通り、サーバ側（PHP）でAmazon情報を取得し変換しているため、HHVMでアプリケーションを実行しているとうまく取得・変換が行われないようです。

解決法としては下記コマンドでHHVMからPHP7に切り替えてあげると無事AmazonJSが利用できるようになりました。

[kusanagi@kusanagi71 ~]$ sudo kusanagi php7
php7 を使用します
Removed symlink /etc/systemd/system/multi-user.target.wants/hhvm.service.
Created symlink from /etc/systemd/system/multi-user.target.wants/php7-fpm.service to /usr/lib/systemd/system/php7-fpm.service.
完了しました。

KUSANAGIでHHVMとPHP7のパフォーマンス計測

この際なので簡単ですがHHVMとPHP7のパフォーマンスを計測したいと思います。

# PHP7に切り替え
[kusanagi@kusanagi71 ~]$ sudo kusanagi php7
php7 を使用します
Removed symlink /etc/systemd/system/multi-user.target.wants/hhvm.service.
Created symlink from /etc/systemd/system/multi-user.target.wants/php7-fpm.service to /usr/lib/systemd/system/php7-fpm.service.
完了しました。

# KUSANAGIキャッシュOFF
[kusanagi@kusanagi71 ~]$ sudo kusanagi bcache off
offにします。
完了しました。

ローカルPCからApacheBenchで計測

# PHP7の状態
ab -n 1000 -c 100 https://tsukarooohi.com/
This is ApacheBench, Version 2.3 <$Revision: 1706008 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking tsukarooohi.com (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Completed 600 requests
Completed 700 requests
Completed 800 requests
Completed 900 requests
Completed 1000 requests
Finished 1000 requests


Server Software:        nginx
Server Hostname:        tsukarooohi.com
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256

Document Path:          /
Document Length:        45558 bytes

Concurrency Level:      100
Time taken for tests:   13.823 seconds
Complete requests:      1000
Failed requests:        0
Total transferred:      45832000 bytes
HTML transferred:       45558000 bytes
Requests per second:    72.34 [#/sec] (mean)
Time per request:       1382.318 [ms] (mean)
Time per request:       13.823 [ms] (mean, across all concurrent requests)
Transfer rate:          3237.88 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:      118  524 414.8    367    6042
Processing:   180  770 500.4    596    3688
Waiting:       62  308 228.3    226    1752
Total:        325 1294 743.9   1080    6997

Percentage of the requests served within a certain time (ms)
  50%   1080
  66%   1340
  75%   1580
  80%   1736
  90%   2231
  95%   2857
  98%   3450
  99%   3973
 100%   6997 (longest request)

# HHVMの状態
ab -n 1000 -c 100 https://tsukarooohi.com/
This is ApacheBench, Version 2.3 <$Revision: 1706008 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking tsukarooohi.com (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Completed 600 requests
Completed 700 requests
Completed 800 requests
Completed 900 requests
Completed 1000 requests
Finished 1000 requests


Server Software:        nginx
Server Hostname:        tsukarooohi.com
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256

Document Path:          /
Document Length:        45558 bytes

Concurrency Level:      100
Time taken for tests:   13.937 seconds
Complete requests:      1000
Failed requests:        0
Total transferred:      45832000 bytes
HTML transferred:       45558000 bytes
Requests per second:    71.75 [#/sec] (mean)
Time per request:       1393.729 [ms] (mean)
Time per request:       13.937 [ms] (mean, across all concurrent requests)
Transfer rate:          3211.37 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:       62  495 439.5    347    6241
Processing:    97  789 583.6    614    5161
Waiting:       41  294 249.0    227    2593
Total:        223 1284 821.4   1024    7558

Percentage of the requests served within a certain time (ms)
  50%   1024
  66%   1326
  75%   1587
  80%   1737
  90%   2337
  95%   2956
  98%   3599
  99%   4131
 100%   7558 (longest request)

PHP7結果

Time taken for tests: 13.823 seconds
Requests per second: 72.34 [#/sec] (mean)

HHVM結果

Time taken for tests: 13.937 seconds
Requests per second: 71.75 [#/sec] (mean)

本当に些細ですがPHP7の方がパフォーマンスはいいようです。

PHP7とHHVMのパフォーマンスに関してはもっと詳しく計測してる方がたくさんいますので、気になる方は調べてみてもいいかもです。

取り敢えず私はこのままPHP7での運用をしたいと思います。

KUSANAGIでHHVMとPHP7についてまとめ

記事ではすんなり解決まで至ったように書いていますが、実際は一週間以上ハマり、途中AmazonJSプラグインを削除したりと心折れる寸前でした（笑

今回WordpressプラグインのAmazonJSがうまく実行されないことからHHVMからPHP7に切り替えましたが、AmazonJSを利用する（記事挿入時）時だけPHP7にし、その後の運用はHHVMで行っても問題なく運用できると思います。

新しいサービスを使う時はメリットも多いですが未知のバグに遭遇する機会も増えるのでいい勉強にもなりますね。



RECOMMENDこちらの記事も人気です。