2019.12.13
アソシエイトを実装したい
もーーーーうカクテルDBに関しては手を加えないぞ！って言いつつも結局いろいろ実装忘れとかあって実装するハメになってるわけですが、だいぶハマってるので愚痴を書きます。
いま何を実装しているのかというとアフィリエイト部分ですね。
実際、仕様上検索流入をしなくなってるし、対策もめんどくさそうなのでおとなしくSSRに作り変えることで対策にするつもりなんですが、DB自体へのアクセスは僕の頑張り次第みたいなとこあるし、実際SSRで実装し直す時も大半のコードは流用可能なので(NuxtはVueを使ったフレームワークなので)、実装はし得かなと思ってサクサクっとやる予定でした。(いつものパターン)
その手始めとしてこれの移植をやりたいわけです。
言うてスクリプトタグを埋め込むだけなら簡単･･････と思ったのですが、VueはScriptタグをパースできないということが判明しました。
まぁね･･････Vue自体がjavascriptなんで、javascriptの中にjavascriptが書き込めないというのはわかります。でもどうにかしないといけません。
まず、解決策の1つとしてVueScript2ってのがありました。使い方は簡単で、scriptをscript2タグに置き換えるだけで動作する、っていうスグレモノです。
で、試しにやってみたら動いたんですよ！！すげーーーー！！！！
ただ、ひとつ問題があって･･････
なんでそこに生えてくるの･･････。
DOMツリーを見ても、Vueコンポーネントの兄弟要素になっちゃってます。amazonの埋め込みタグがどういう挙動をしているのかわかりませんが、さすがにこれはブサイクすぎます。
解決策としてはフッターを消してしまうことなんですけど、拡張性ゼロなのでやめときます。
CSSの力により無理矢理座標指定することも考えたんですが、DOMツリーにおける位置自体がおかしいのでpositionで指定できません。
よってこのアイデアは使えない、ということになりますね。
次に考えるのは、ページの一番下に何故かappendされてしまう、ということであればそのページ自体を別のページに切り分けてしまえばいい、つまりiframe化できないか、って考えるわけですね。
別ページに埋め込むんならそんな問題発生し得ないだろう、と。なんか重くなりそうですけど、Laravelのビューで無理矢理作ってみましょうかね。さすがにgetの直埋め込みはXXS発生しそうで怖いし(笑)
ということで、雑にやってみたら案外うまく行きました。良かった･･････。
ただ、この方法はわりと最初の方から思いついてたんですけど、1時間ぐらい悩んだ末にようやっと実装したんですよね。
っていうのも、iframe使ったデザインってめっちゃ書きづらそうとしか思えないんですよね･･････笑
ってなわけで、アフィリエイトも結局実装しちゃいました。なんかカクテル巡ってて、面白そうな項目見つけたらポチってもらえたらなぁって思ってます。大した利益にはなんないですけど、皆さんと謎リキュールの出会いの助けになったらなぁとか思ってます。
とりあえずしばらくはこのカクテルDBのデータ埋めに勤しもうと思ってますが、それと並行して、週末から動画も撮り始めようかなぁって思ってます。
今までと動画の構成を変える･･････具体的にはカクテルではなくリキュールをメインにって方針に変わるのは確定しているんですが、とりあえずほそぼそと続けていこうかなぁと思います。
え、もうこれで開発終われるよねこれで･･････