有須子は少しずつインターネットを浸食してきました。
コナミコマンドにも...。
UbiquityにもMinibufferにも...。
AutoPagerizeにまで...。
そしてとうとうTwitterを浸食しはじめました。
インストールするとTwitterのユーザが有須子になります。
適応前
適応後
更に拡大した有須子の世界をご堪能下さい。
技術解説
実は今回と同様の効果を望むだけであるならmainを次のようにしておくだけでいい。
var main=function(doc){
var o=doc.getelementsbyclassname("tweet-url profile-pic url");
for(var i=0;i<o.length;i++){
var image=document.createelement("img");
image.setattribute("style","position:absolute;top:0px;left:0px;");
image.setattribute("src",image_uri_usuko_frame);
o[i].appendchild(image);
}
}
var o=doc.getelementsbyclassname("tweet-url profile-pic url");
for(var i=0;i<o.length;i++){
var image=document.createelement("img");
image.setattribute("style","position:absolute;top:0px;left:0px;");
image.setattribute("src",image_uri_usuko_frame);
o[i].appendchild(image);
}
}
しかし、今回は敢えて複雑になっている。
その理由は、単に画像を重ねて表示して表示するのではなく、画像そのものを合成したかったからである。
Usutotter実行後の画像を調べてみるとわかるが、img要素を重ねて表示しているのではなく画像が置き換わっている。
これはユーザアイコンをCanvasに描画し、その上に有須子のフレームを重ねて描画することで実現している。
有須子フレームはアルファチャンネル付きのPNGをBase64化したものを使用しており、フレーム内部も薄暗くなるようになっている。
しかし、TwitterのユーザアイコンのURLは「twitter.com」とは別ホストのため、そのままではCanvasに読み込めない。
このため、ユーザアイコンはSame Origin Policyの制限がないGreasemonkeyのXmlHttpRequestを経由でBase64化したものを取得し使用した。
このあたりの制限については以前書いたので興味があれば次のリンクを参照。
その理由は、単に画像を重ねて表示して表示するのではなく、画像そのものを合成したかったからである。
Usutotter実行後の画像を調べてみるとわかるが、img要素を重ねて表示しているのではなく画像が置き換わっている。
これはユーザアイコンをCanvasに描画し、その上に有須子のフレームを重ねて描画することで実現している。
有須子フレームはアルファチャンネル付きのPNGをBase64化したものを使用しており、フレーム内部も薄暗くなるようになっている。
しかし、TwitterのユーザアイコンのURLは「twitter.com」とは別ホストのため、そのままではCanvasに読み込めない。
このため、ユーザアイコンはSame Origin Policyの制限がないGreasemonkeyのXmlHttpRequestを経由でBase64化したものを取得し使用した。
このあたりの制限については以前書いたので興味があれば次のリンクを参照。
理想を言えば画像の端を有須子のフレームの形にしたいのだけど、Canvasは合成時にはアルファチャンネルに対応していても、Canvas上で直接アルファチャンネルを操作する事はできないようだ。
このためプロファイル部分の画像がこのようになってしまう。
このためプロファイル部分の画像がこのようになってしまう。
ブロファイルのアイコン
clipメドッドを使えば描画領域を決められるが、一度描画してしまった位置を透過にはできない模様。
また、今回の場合はパスではなく画像を使ったマスクの方が適しているのだが、それにも対応していない。
また、今回の場合はパスではなく画像を使ったマスクの方が適しているのだが、それにも対応していない。