連載一覧searchだら@Crieit開発者2019-04-15に投稿nendの広告を表示するVueコンポーネントVue.jsnendの広告をVueコンポーネントとして作成し、Nuxt.js上で表示してみました。AdSenseの審査が通らない間使っていたのですが、通ったので必要なくなりました。そのためせっかくなので晒しておきます。nend広告の貼り付けタグは癖があるので結構めちゃくちゃなことをやっています。場合によっては怒られる可能性もあるのでご注意を。そもそもSPAでは使えないnend広告の貼り付けタグはそもそもSPAでは使えません。scriptタグで構成されている全てscriptタグで構成されています。src="メインスクリプト"></script>Vueコンポーネント上にscriptタグを貼っても基本的に無視されてしまいますので動きません。JavaScriptのcreateElementでスクリプトタグを作って配置することで動作させる事は可能ですので今回もそのようにしました。具体的にはこんな感じです。container.appendChild(script)nend_paramsが無いと怒られるそう、見れば分かるのですがnend_paramsがグローバルに配置されています。そのため、Vueコンポーネント内に隠蔽ができません...。入れ、その直後にscriptタグを配置する、という連動するのかどうかも良くわからない流れでやらなければいけなくなっています。document.writeできないと怒られるそう、一番の問題はこれでした。document.writeを使っているのですが、Vueコンポーネントはdocumentとは全く関係ない場所で動いているので、そもそもdocument.writeが不可能です。nend広告はSPAを完全に切っていて時代錯誤すぎます。仕方ないのでdocument.writeを一旦置き換え、終わったらもとに戻す、という方法をとりました。container.appendChild(script)ここまでしてようやく表示することができました。この時点で正式な方法で貼っているとは思えない状態です。ひとつしか配置できない前述の方法で表示できるようにはなったのですが、そもそもscriptタグの配置で実行しているので、いつ処理が完了しているのか誰にも分かりません。そのため、1ページに二つ以上広告を配置すると1つ目の処理が終わってない状態で二つ目の処理が動いてしまい、どこのinnerHTMLに値が追加されていくのか全くわからないカオスな状態となります。キューを使ったとにかく、ひとつずつ処理をしなければならないのでキュー方式で動かすことにしました。他のキューがあったら待つ配置する読み込みが完了するまで待つという流れです。コールバックは当然無いので、containerの中にimgタグが現れるまで待つ、という手法を取りました。setTimeoutしてるのでどんな感じで処理が積まれていっているのか謎です。同じ広告を配置できない同じ広告を配置できないことが分かりました。本番であればまあ広告枠を作ればいいので問題ないのですが、テスト広告も同じものを配置できないため、1ページ内に複数の広告枠がある場合は仕方がないので大きさも無視して別のものを表示していかなければなりません。1ページ内にたくさん広告がある場合はテスト表示できません。下記が全容になります。ぐちゃぐちゃですので参考にはしないでください。}}</script>waitForはこんなのです。})}まとめこんな感じでとりあえず表示することはできましたが常時心配で仕方がないです。ページ切り替えの際に問題が出るパターンなどもありそうですし。(まあ広告なのでそんな厳密に動かなくても良いのですが)とりあえずはやく設置タグを変えたほうがいいように思いますね。関数呼び出し方式にしてくれないと厳しい...。ツイッターでシェアみんなに共有、忘れないようにメモマシュマロでメッセージか投げ銭?だら@Crieit開発者Crieitの開発者です。LAMPで開発しているWebエンジニアです(在宅)。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。Vue等色々https://torima.appllis.net/users/dala00Crieitは個人で開発中です。どんな軽い内容でも嬉しいです。