2013-08-24 / programing

やれることをやってみる AmazonJS 0.4リリース

何故か毎週リリースしていますが、WordPressプラグインであるAmazonJS 0.4を今週、先ほど0.4.1をリリースしました。

イキってAmazonJSを久しぶりに更新したらいろいろな方が紹介してくださったりして使う人が増えて、なんとなくリスクがありそうだけどまぁ大丈夫だろうと思っていたことが他のテーマやプラグインとの組み合わせで問題が引き起こされるという事態に。

原因はどうであれユーザさんから見れば「AmazonJSで商品が表示されない」という問題には違いなく、一人ひとりにJavascriptのエラーを調べてもらうのは効率が悪いのでなんとかしようと思いました。

AmazonJS 0.4(.1)での主な変更

jQuery 1.4.2以上なら表示されるようにした
- カスタマーレビューの表示をオプションにした
document.writeでの出力をオプションにした

方針立て直し

結局のところ自分のために作っているわけなので、調子に乗って変なことをするもんじゃないなとつくづく思いました。なので基本的な方針としてデフォルトはミニマムかつもっとも動作するであろうという状態にして、自分のほしいものはオプションにして有効にしていくことにしました。

これは特にWordPressに限ったことではなく、環境によって動かなくなるリスクがある機能はオプションにしてデフォルト無効にした方が安全です。

jQuery 1.4.2以上なら表示されるように

WordPress 3.6からどうかはわかりませんが、WordPressはjQueryのonメソッドをよく使っているようです。僕が確認できただけでもthickbox.js, admin-bar.min.js, Twenty Thirteenのfunction.jsが使っていました。そして1.4系のjQueryに置き換えてくるテーマやプラグインがあるということを報告からわかっていてその環境下ではエラーが発生します。(jQueryが古い場合にAmazonJSが動かない件について)

まずthickbox.jsを使うカスタマーレビューの表示をオプションにしてデフォルトをオフにしました。さらに表示の実行につかうスクリプトの出力のプライオリティを１つあげてフッターに出力されるjavascriptよりも先に実行するようにしました。これでadmin-bar.min.jsやTwenty Thirteenがエラーになる前に処理を登録して切り抜けます。

もちろんヘッダー付近のscriptでエラーがでたらどうしようもないので全てケースで有効な回避策ではないですが、報告を受けて原因がわかっているものについては対応できていると思います。

ちなみにadmin-bar.min.jsはWordPressにログインする画面上部に追加される管理バーで使われるjavascriptファイルです。古いjQueryを差し替えられるとadmin-bar.min.jsでエラーが出る、つまり ログインするとAmazonJSの商品表示が動かなくなる のです。気付いたときはマジで勘弁してくれと思いましたが、今はなんとか動きます。

document.writeでの出力をオプションにした

Javascriptが無効であっても動くようにしたのですが、WordPressにはいろいろありますね。記事コンテンツ内のリンクを置き換えるプラグインがあってdocument.write内のhtmlをエスケープなしで置き換えてくるとかね。本当に余計なことはするもんじゃないですね。

ということでこちらもオプションにしてデフォルトをオフにしました。

最後に

これで問題が全て解決するとは思っていません。そもそもJavascriptで表示を更新するという手法そのものがWordPressではリスクであるとよく思い知らされました。

昔Amazonプラグインの世界がカオスということは書きましたが（WordPressのAmazonプラグインはカオスで定番がないらしい）WordPressは Javascript の世界もカオスのようです。

AmazonJSで起きた問題は単純に見た目が目立つということに過ぎません。Javascriptにエラーが発生していて必要な処理が動いていないという問題が、一見、見た目は表示されているということで気が付かれていないのかもしれません。

11 Comments

長　邦年 2013-08-27

日頃は、変わるものがないので便利に使わせて頂いております。

わー、アップデートしたら今までの分も全部レイアウトが崩れるようになってしまいました。
慌ててバックアップしている分に戻しているが、AmazonJSを戻しただけではレイアウトがもとに戻らなかった。
CSSもいじったんですかね？

まあ、もともと何故かちゃんと動作していなかったので、Chromeの「要素の検証」でHTMLをコピーして貼りこんで使っていました。それが悪かったのかと思うのですが、ちゃんと動作させる方法がわかっていなかったので、新しいバージョンが出たら治るかなと期待したのですが、やっぱりそのままでは動作しない。

残念。
いつか、ちゃんと動作するようになるのでしょうか？
良いプラグインなので使い続けたいんですよねぇ。
勝手ですが、頑張ってくださいね。
- makoto_kw 2013-08-27
  
  ご利用になられるサイトは austfuton.com でよろしいでしょうか？
  ページのソースを見る限りプラグインのcss,javascriptが何も読み込まれていないように見えますが、
  テーマ内でwp_headやwp_footerは呼び出されていますでしょうか？
  また問題の切り分けとしてデフォルトのテーマや他のプラグインを
  無効にして動作するかを確認してもらえると助かります。
  - 長　邦年 2013-08-27
    
    Backupにデータを戻した所、元のレイアウトに戻りました。
    ただ、ちょっと他のダミーサイトを作って動作チェックをやってみます。
    たぶん、こちら側のプログラムの問題だと思うのですが、現在はChromeで検証してもエラーが表示されないのでわかりません。
    
    ちなみに、このコメントを知らせるメールですが、文字化けを起こしておりました。
    以前のメールにもあったのですが、時間がなくてほっておりました。すみません。
    こちらの環境は、MacOSX v10.6.8 純正メールソフトです。
  - 長　邦年 2013-08-28
    
    追加補足です。
    前記したとおり、バックアップデータに戻した所、以前通りにレイアウトが崩れることなく表示されるようになりました。
    ところが、WindowsのIE８で表示すると、商品画像だけが１ポイント程のラインになっています。
    高さ情報が認識されていないようです。
    
    内の高さを【height=”auto”】としているのがいけないと思うので、数値に書き換えてみます。
    - makoto_kw 2013-08-29
      
      IE8の問題は0.2で修正でしていますがそもそもプラグインのjs/cssの出力がなくHTMLをテーマや記事内でコピーして使っているならプラグインの修正は享受できません。逆にその使い方だとレイアウトが崩れるのもプラグインに関係なく単にそちらの静的なHTMLの問題になるのでプラグインではフォローができないと思います。
      - 長　邦年 2013-08-29
        
        なるほど、HTMLのコピーはプラグインが動かなかったので仕方なくやっていたのですが、js/css、プラグイン、javascriptの動作をチェックしてみます。どうさしたときは、またこちらにご報告したいと思います。ありがとうございました。
        
        なお、やっぱり、ここに書き込んだコメントに対する返信がメールで送られてくると文字化けしています。
        ふつうのブログの更新については問題なく表示されています。
        ご報告まで。
      - 長　邦年 2013-09-18
        
        WPのjQueryを止めて、ajax.googleapis.comから読み込みするようにした所、問題なく動作するようになりました。やはり、この辺りの設定が間違っていたようです。ありがとうございました。
        
        あと、次は画像を大きくするようjs/cssをカスタマイズ仕様としているのですが、うまく行きません。もちろん、設定でカスタムを使用するにチェックを入れ、cssの方は枠が大きくなっているのですが、画像が大きくならないのです。amazonjs.jsを以下のように書いているのですが間違っているでしょうか？
        
        (function ($) {
        $.amazonjs.addTemplate(function(partial){
        return {
        All:”+partial.MediumImage+’${Title}’+partial.price+”
        };
        });
        })(jQuery);
        
        なお、この状態で利用しているのは、解決するまでの暫定として次のページで行っています。
        
        http://austfuton.com/?page_id=174
        
        よろしくお願いします。
      - makoto_kw 2013-09-18
        
        Allというのは自動的には選択されないのでショードコードの方で tmpl=”All” というものを指定しているかどうか確認してくみてください。またpartial.MediumImageはpartial.mediumImageに変更してみてください。
        
        ちなみに上記の商品だとグループはKitchenのようなのでいちいちtmpl=”All”を指定したくない場合はjavascriptの方をAllではなくKitchenで定義してみてください。例：
        
        [js]Kitchen:'<div class="amazonjs_item">’+partial.mediumImage+’${Title}’+partial.price+'</div>'[/js]
      - 長　邦年 2013-09-19
        
        ご指摘頂いたように修正してもダメで、スペルミスがあったかもと思い、書いていただいたものをコピペしてみましたが、ダメでした。
        ショートコードは、テンプレートの選択を「少ない情報」をクリックした場合が以下です。
        
        [amazonjs asin="B00EL9YUIE" locale="JP" tmpl="Small" title="羽毛布団　プレミアムビート　ダブルサイズ"]
        
        テンプレートを「デフォルト」の場合が以下です。
        [amazonjs asin="B00ESW8BJI" locale="JP" title="日本製　ムートンシーツ　シングル（ベージュ）"]
        
        amazonjs.jsは、現在は以下のようになっています。
        
        (function ($) {
        $.amazonjs.addTemplate(function(partial){
        return {
        Kitchen:”+partial.mediumImage+’${Title}’+partial.price+”
        };
        });
        })(jQuery);
      - makoto_kw 2013-09-19
        
        リンク先を拝見したところ
        
        “羽毛布団　プレミアムビート　ダブルサイズは” tmpl=”Small”によりSmallテンプレートが適応され画像は小さい。
        “日本製　ムートンシーツ　シングル（ベージュ）”は Kichenテンプレートが適応され画像は大きくなっている。
        
        と動いているように見えるのですが期待されている動作は何になりますか？
      - 長　邦年 2013-09-19
        
        ああっ！本当ですね。
        使っているChromeのキャッシュクリアをしたらちゃんと表示されました。
        ありがとうございます。
        希望どうりです。
        ほんとに、助かりました、重ねてお礼申し上げます。