楽天モーションウィジェットを使おうと思い、サイトにソースコードを埋め込んだところ、ウィジェットが全く表示されないという事態に陥りました。
また、問題解決のために作業を進めていたところWARN:01というエラーが出てしまいこれまた表示されませんでした。
今回はもしもアフィリエイトで配信されている「楽天モーションウィジェット」でしたが、おそらく楽天アフィリエイトの場合でも同じ問題が起こり得ます。
原因は楽天モーションウィジェットのソースコードの遅延読み込みでした。
この記事の目次
楽天モーションウィジェットが表示されない
ご存じの通り、楽天モーションウィジェットはサイト訪問者におすすめの商品を自動で表示してくれるアフィリエイト用のサービスです。
ウェジェットは本家の楽天アフィリエイトだけではなく、もしもアフィリエイトからも配信されており、楽天市場と提携していれば使うことができます。
ここまでは良いのですが、もしもアフィリエイトから楽天モーションウィジェットのコードを取得し、サイトに埋め込んでみたところ、ウィジェットが全く表示されないという事態に陥りました。
症状としては以下のような感じです。
今回は取得したソースコードをサイドバーウィジェットにコピペしました。
WordPressにログイン中は問題なく表示される
当サイトはWordPressで運営しており、自分がWordPressの管理画面にログインしている状態では、楽天モーションウィジェットは問題なく表示されていました。
予想通り簡単に表示でき、よしよしと思っていたのですが…
WordPressからログアウトすると表示されない
ふとWordPressからログアウトして見てみると、楽天モーションウィジェットが表示されていないことに気が付きました。えー…
早速Chromeのデベロッパーツールでエラーを確認してみると見慣れないエラーが！
~/rakuten/widget.jsにエラーが出る
Chromeで確認したところ以下のようなエラーが出ていました。
楽天モーションウィジェット用のjsプログラムにエラーが出ている…
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
こちらをGoogle翻訳機能にかけると以下のような内容です。
「ドキュメント」で「書き込み」を実行できませんでした：明示的に開かれていない限り、非同期でロードされた外部スクリプトからドキュメントに書き込むことはできません。
エラーが出ている~/widget.jsにマウスオンしてみると、
https://image.moshimo.com/static/publish/af/rakuten/widget.js
という外部リソースの195行目にwriteが使われており、これが原因のようです。
コードを確認したところ、翻訳が言う「ドキュメント」はHTMLDocument。
そして「書き込み」はdocument.write()メソッドでした。
これはJavaScriptに関するエラーです。ここを書きだすと長くなるので割愛します。
楽天モーションウィジェットが表示されないのはjsの遅延読み込みが原因
色々調べたところ、楽天モーションウィジェットで読み込み、使用されるプログラムである「widget.js」内に使われているdocument.write()メソッドはソースコードを遅延読み込していると実行できないようです。
~/widget.jsの読み込みがdeferで遅延されている
ということで読み込みしているコードをChromeデベロッパーツールで確認します。
すると<script>タグ内に「defer」があり、widget.jsが遅延読み込みされていることが分かりました。これが楽天モーションウィジェットが表示されなかった原因です。
JavaScriptの話になるので少し難しくなりますが、とにかくwidget.jsを読み込んでるコードの<script>内に「defer」や「async」があるとダメです。
遅延されてから、つまり画面が読み込まれた後で楽天モーションウィジェットを表示するためにwrite（画面に書き込み）することは出来ませんというエラーです。
コードを実行するタイミングが遅すぎて無理です！という内容です。
解決策：widget.jsを遅延読み込みしない
解決策としては「~/rakuten/widget.js」を読み込んでいる<script>タグ内のdeferやasyncを取り除いてあげればOK！
そもそも楽天モーションウィジェットを取得＆コピペした元のソースコードにはそんなもの始めから付いていないのですが…確認すると使用中の「LiteSpeed Cache」というキャッシュプラグインが自動的に「defer」を付与していました。
WordPressでキャッシュプラグインなどのサイト高速化プラグインを使っていると、外部リソース（.js等）にdeferやasyncが自動付与されることがあります。
そして楽天モーションウィジェットの.jsが遅延読み込みされると表示されません！
LiteSpeed Cacheの設定画面で「rakuten/widget.js」を遅延除外した
という事でプラグインの設定で「widget.js」を遅延読み込みから除外しました。
冒頭の症状で紹介した、楽天モーションウィジェットがWordpressにログインしてる時だけ表示されていたのは、ログイン中はキャッシュが効かないからでした。
ポイント
分からない人はとりあえずキャッシュプラグインを無効にしてみて下さい！無事に楽天モーションウィジェットが表示されればそのプラグインが原因です。
楽天モーションウィジェットを表示できませんでした。ソースを再取得し貼付しなおしてください。(WARN:01)が出る！
楽天モーションウィジェット用の外部リソースである「~/rakuten/widget.js」をjs遅延読み込みから除外した後、再度ログアウトしてモーションウィジェットが表示されているか確認します。
すると、やっと無事に表示されて…ない！
また別のエラーが出ている…。
楽天モーションウィジットを表示できませんでした。ソースを再取得し貼付しなおしてください。(WARN:01)
全く表示されないよりはマシになりましたが、別のエラーが出ました。
言われるがままソースを再取得して貼付し直したのですが、もちろん治りません。
そもそもさっきコピーして取得してきたところのコードですからねぇ…
楽天モーションウィジェットのjsは遅延しない
原因が分からず詰まったのですが、ソースを見ていると気になる部分がありました。
もしもアフィリエイトから楽天モーションウィジェットを取得した時、ソースコードは以下のようになっていました。
（見やすいようにこちらで一部省略、改行を入れています。）
<!-- MAF Rakuten Widget FROM HERE -->
<script type="text/javascript">MafRakutenWidgetParam=function() { return{ ～省略～};};</script>
<script type="text/javascript" src="//image.moshimo.com/static/publish/af/rakuten/widget.js"></script>
<!-- MAF Rakuten Widget TO HERE -->「widget.js」を読み込んでいる２つめの「<script>」の部分は、先ほどプラグインの設定でdeferが自動挿入されないように設定したのですが…
楽天モーションウィジェットの１つめのコードにもdeferが…
１つめの「<script>」にまだdeferが入っています。
ここは関数を読み込むところなので、この部分も遅延されているとまずそう！
ということで、１つめの「<script>」からもdeferを除去します。
今回使用中だったキャッシュプラグイン「LiteSpeed Cache」の場合は、HTMLコードで属性値に「data-no-defer="1"」 が含まれるものはjsの遅延から除外することができるという使い方があるので、これを<script>の間に入れます。
<script type="text/javascript" data-no-defer="1">～省略～</script>
こんな感じです。
ポイント
遅延読み込みを適用しないためのHTML属性は、プラグインによって異なるのでプラグインの設定画面などからご確認下さい。
これで楽天モーションウィジェットに使用されるjsコードの<script>内からdefer（async）という非同期読み込みのコードが全て削除できたことになります。
ウィジェットが表示されるか確認する
サイトのキャッシュをクリアし、Chromeのスーパーリロード（Ctrl+F5）でページを読み込んで楽天モーションウィジェットが表示されるかどうか確認します。
やっと楽天モーションウィジェットが表示された！
Wordpressからログアウトした状態でも無事に楽天モーションウィジェットが表示されるようになりました！
いやはや…思ったより時間がかかりました…
コピペで一瞬で使えると思ったらなかなか使えませんでした( ;∀;)
まとめ
楽天モーションウィジェットが表示されない、または“楽天モーションウィジェットを表示できませんでした。ソースを再取得し貼付しなおしてください。(WARN:01)”というエラーが出て表示されない時は、ウィジェットに使用する.jsファイルの読み込みが遅延読み込みされるような設定になっていないか確認して下さい！
特にWordPressを使っている方は、プラグインが自動付与する「defer」や「async」の非同期読み込みコードに注意しましょう。また、JS圧縮・結合などを自動で行っている場合はこれも原因になるかもしれません。
JavaScriptに関する問題なので、知識がない方は解決に手間取るはずです。
初心者の方にも解決してもらえるように書いたつもりなのですが…難しいね。
楽天モーションウィジェットは賛否両論ありますが、使いたい方のお役に立てれば幸いです。ではではこのへんで・ｗ・
