今開いているページの URL を QR コードに変換したものを
そのページ内に画像として挿入するブックマークレットを作成しました。
挿入時のアニメーションに CSS3 を使っています。
chrome 14.0.835.186, firefox 6.0.2, safari 5.1 で動作確認。
ブックマークバーなんかに登録して使うと使いやすいかと思います。
QR! <- これをブックマークに登録
(function(){
var size=150;
var t0=50;
var t1=32;
var img=document.createElement('img');
img.src='http://chart.apis.google.com/chart?cht=qr&chs='+size+'x'+size+'&choe=UTF-8&chld=H&chl='+encodeURIComponent(location.href);
var s=img.style;
s.opacity=0;
s.position='absolute';
s.top=''+(pageYOffset+t1)+'px';
s.left=''+(-t0)+'px';
s.zIndex=9999;
s.boxShadow='1px 1px 5px black';
s.borderRadius='0 15px 15px 0';
s.webkitTransition='0.3s linear';
s.MozTransition='0.3s linear';
img.onclick=function(){
s.opacity=0;
s.left=''+(-t0)+'px';
setTimeout(function(){
document.body.removeChild(img);
},1000);
};
document.body.appendChild(img);
setTimeout(function(){
s.left='0px';
s.opacity=0.9;
},30);
})();
やっている事としては、<img /> タグの dom を作って、
src に google chart api の
QR の api のアドレスを代入して、まず画像を作ります。
それのスタイルをいろいろ設定した後、
body に appendChild します。
body に append した後で、left と opacity を再度代入する事で、
CSS3 transition が効くので animation して img が出現します。
img の onclick に逆のスタイル変更を設定しおけば、消えるときは逆の
アニメーションで消えていきます。
アニメーションで消えた後、ちょっと間をおいて、
body から removeChild する事で、GC 対象になるように
しています。
size とか t1 変数の値を変更する事で、見た目のサイズとか、出現位置を変更できます。
size = QRコードのサイズ
t1 = 画像の出現位置、画面の上からの距離 (px単位)
