javascript

広告タグの一括管理とかで、scriptタグの中にscriptタグを書きまくる運用ってけっこうあるかもしれない

サイト運用をしてると、必ず必要になってくることがある。コンテンツとかサイト構造とかの話じゃなくて、タグの話。

「Googleのリターゲタグ貼っといて」「ヤフーのコンバージョンタグ、このページだけに貼っといて」「なんかよくわからんけどアドネットワークのタグ貼ってくれって代理店に言われてるから貼っといて」「とりあえずGAのタグ入れてよ」みたいな依頼って、よくある。

別に俺じゃなくても担当者が勝手に入れればいいんだけど、それだとカオスになるし、そもそもHTMLやJSをよくわかってない人たちはサイトのソースに手を入れることを嫌うから(大手サイトになるとそれすらできないので、運用が触っていいインクルードHTMLとJSとCSSが一個ずつあってそこだけ管理下にある状態といのもある)、引き受ける場合が多い。

小さいサイトやソースを直接さわれるところだと、フッターテンプレートにもらったタグをそのまま貼り付ければ完了。

でもそういかない場合って、けっこうある。まじで。

たとえば、大手サイトだったり、クライアントサイトだったり、タグ入れ依頼がバケツリレーになってる状態だったり。
そうなると、サイトに手を入れるのが怖い・または時間がないクライアント様にこのチンケなタグを入れてもらうために労力を割いていただくのが申し訳ないので、ソリューションとしてはワンタグ運用が現実的になってくる。

ワンタグとは、1つのスクリプトタグをサイトに入れてもらい、そのスクリプトの中身を一括で管理するやり方だ。これなら、クライアントサイトであっても一回だけタグを入れてもらえれば、タグの中身はこっちでできるので心配が少ないし、いざとなったらスグに書き換えできるので運用もやりやすい。
ただしワンタグ運用は2つの問題が起こる。
1.全ページに同じワンタグを貼る前提になること
2.各アドタグをすべてこのワンタグに入れ込む必要があること

HTML5時代のjquery.lazyloadは画像のdata-original属性を使う

jQuery.lazyloadという画像の遅延読み込みライブラリが一時期はやっていましたが、かつてのスクリプトでは最近のブラウザで正しく動いてくれないそうです。

古いブラウザでは、画像のsrc属性を指定した状態で、lazyloadプラグイン側がいったんそれをカラにしてからDOM構築後にリクエストしにいくことで遅延読み込みを実現してたんですが、最近のブラウザではsrc属性が指定されている時点で(DOM構築タイミングで)画像を読みに行くため、lazyloadが無駄になる、というより多重リクエストをかけるため逆にページが重くなる(最悪の場合ね)ことがありました。

ただ、最新版ではそこが改善されています。
具体的には、画像のsrcタグにダミー画像を指定し、data-original属性に本来読み込ませたい画像パスを指定するというもの。これによって、ページ表示直後はダミー画像(1x1pxの白い画像とかでOK)を表示し、順次リクエストをかけて正しい画像を読み込むという処理ができるようになりました。

HTML5のinput-typeをProgressive Enhancement的に使えるようにする

やりたかったのは、INPUT-TYPEを動的に変えること

HTML5でINPUT-TYPEが13種類も増えました。が、対応しているのはブラウザによって全然違います。「type=email」とか「type=url」なんて普通に使いたいのに、古いIEには対応していないので泣く泣く使わずにお茶を濁してしまうことって、よくあります。
そこで思いました。「input-typeを動的に変えればいいんじゃね?」
で、試してみました。が、IEではtype属性を動的に変えるとエラーが出ます。jQueryでも「attr(“type”,”hoge”)」なんてやると例外エラーが出ます。なので、やっぱりIEがアホなせいでダメじゃん、と思った矢先、「逆に使えるブラウザだけ使えばいい」と思い直しました。