Safariでページを大回転したり歪めたりするブックマークレット
どうせだったらCSS Animationを使ったら良いのではないかと思ってやってみた．
大回転
javascript:document.body.style.webkitTransition='-webkit-transform 6s ease-in';document.body.style.webkitTransform='rotate(0deg)';setTimeout(function(){document.body.style.webkitTransform='rotate(360deg)';}, 0);歪める
javascript:document.body.style.webkitTransition='-webkit-transform 6s ease-in';document.body.style.webkitTransform='matrix(1,0,0,1,0,0)';setTimeout(function(){document.body.style.webkitTransform='matrix(1,1,0,1,1,0)';},0);何回も試してたら気持ち悪くなってきた．元記事のあるAjaxianではAjaxian » Using CSS transforms to Build a Coverflow Effectという記事も公開されてるので，がんばったらいろいろできそう．
2008/06/03 22:48 | JavaScript | トラックバック(0) | コメント(0)
livedoor IncSearchとかで各SBMのコメント表示するのを作った
del.icio.us IncSearch(1.6.0)、Hatebu IncSearch(1.5.0)、livedoor clip IncSearch(1.3.0) - Firefox Extension を更新しました - Enjoy*Studyにあるように，livedoorClip IncSearchとかでユーザスクリプトが使えるようになったので，SBM bookmarks APIの時差問題を解消(管理人日記) - むぅもぉ.jpにて提供されているYahoo! Pipesを利用させていただいて，同じサイトのLDC/はてブにブクマコメントを埋め込むGMスクリプトをOperaにも対応させる(管理人日記) - むぅもぉ.jpで配られているグリモンみたいに，livedoorClip IncSearchとかでも各SBMのコメントを表示するのを作った．
IncSearchのページにあるスクリプトと元のグリモンを最大限に参考にしながらも，E4Xって言いたいがためにE4X in Firefox 発表資料: Days on the Moonらへんを参考にE4Xを使ってみた．けど，ほとんどヒアドキュメントとしか使えていないorz．十分便利だったけどE4Xはもっといろいろできるっぽいので，もっとスマートに書けるのかもしれない．
インストール方法はIncSearchのページを見てもらうことにして，このスクリプトを入れると，各ブックマークのタイトルの後ろに，del.icio.us，はてブ，livedoor クリップ，Buzzurlの順でブックマーク件数が並んで，それらをクリックすると各SBMの該当ページに飛びます．さらにその後ろに「Comment...」と表示されるので，それをクリックするとコメントを読みにいって適当に表示します．
個人的には，これでだいぶ便利になった．便利な拡張機能やスクリプトなどを配布されている方々に感謝！
ダウンロード: user-extension.js
ソース
(function() {
// ブックマーク数カウントここから //////////////////////////////
// http://www.onicos.com/staff/iz/amuse/javascript/expert/md5.txt
var md5_hex=(function(){var MD5_T=[0x00000000,0xd76aa478,0xe8c7b756,0x242070db,0xc1bdceee,0xf57c0faf,0x4787c62a,0xa8304613,0xfd469501,0x698098d8,0x8b44f7af,0xffff5bb1,0x895cd7be,0x6b901122,0xfd987193,0xa679438e,0x49b40821,0xf61e2562,0xc040b340,0x265e5a51,0xe9b6c7aa,0xd62f105d,0x02441453,0xd8a1e681,0xe7d3fbc8,0x21e1cde6,0xc33707d6,0xf4d50d87,0x455a14ed,0xa9e3e905,0xfcefa3f8,0x676f02d9,0x8d2a4c8a,0xfffa3942,0x8771f681,0x6d9d6122,0xfde5380c,0xa4beea44,0x4bdecfa9,0xf6bb4b60,0xbebfbc70,0x289b7ec6,0xeaa127fa,0xd4ef3085,0x04881d05,0xd9d4d039,0xe6db99e5,0x1fa27cf8,0xc4ac5665,0xf4292244,0x432aff97,0xab9423a7,0xfc93a039,0x655b59c3,0x8f0ccc92,0xffeff47d,0x85845dd1,0x6fa87e4f,0xfe2ce6e0,0xa3014314,0x4e0811a1,0xf7537e82,0xbd3af235,0x2ad7d2bb,0xeb86d391];var MD5_round1=[[0,7,1],[1,12,2],[2,17,3],[3,22,4],[4,7,5],[5,12,6],[6,17,7],[7,22,8],[8,7,9],[9,12,10],[10,17,11],[11,22,12],[12,7,13],[13,12,14],[14,17,15],[15,22,16]];var MD5_round2=[[1,5,17],[6,9,18],[11,14,19],[0,20,20],[5,5,21],[10,9,22],[15,14,23],[4,20,24],[9,5,25],[14,9,26],[3,14,27],[8,20,28],[13,5,29],[2,9,30],[7,14,31],[12,20,32]];var MD5_round3=[[5,4,33],[8,11,34],[11,16,35],[14,23,36],[1,4,37],[4,11,38],[7,16,39],[10,23,40],[13,4,41],[0,11,42],[3,16,43],[6,23,44],[9,4,45],[12,11,46],[15,16,47],[2,23,48]];var MD5_round4=[[0,6,49],[7,10,50],[14,15,51],[5,21,52],[12,6,53],[3,10,54],[10,15,55],[1,21,56],[8,6,57],[15,10,58],[6,15,59],[13,21,60],[4,6,61],[11,10,62],[2,15,63],[9,21,64]];function MD5_F(x,y,z){return (x&y)|(~x&z)}function MD5_G(x,y,z){return (x&z)|(y&~z)}function MD5_H(x,y,z){return x^y^z}function MD5_I(x,y,z){return y^(x|~z)}var MD5_round=[[MD5_F,MD5_round1],[MD5_G,MD5_round2],[MD5_H,MD5_round3],[MD5_I,MD5_round4]];var CC=String.fromCharCode;function MD5_pack(n32){return CC(n32&0xff)+CC((n32>>>8)&0xff)+CC((n32>>>16)&0xff)+CC((n32>>>24)&0xff)}function MD5_unpack(s4){return s4.charCodeAt(0)|(s4.charCodeAt(1)<<8)|(s4.charCodeAt(2)<<16)|(s4.charCodeAt(3)<<24)}function MD5_number(n){while(n<0)n+=4294967296;while(n>4294967295)n-=4294967296;return n}function MD5_apply_round(x,s,f,abcd,r){var a,b,c,d,kk,ss,ii,t,u;a=abcd[0];b=abcd[1];c=abcd[2];d=abcd[3];kk=r[0];ss=r[1];ii=r[2];u=f(s[b],s[c],s[d]);t=s[a]+u+x[kk]+MD5_T[ii];t=MD5_number(t);t=((t<<ss)|(t>>>(32-ss)));t+=s[b];s[a]=MD5_number(t)}function MD5_hash(data){var abcd,x,state,s,len,index,padLen,f,r,i,j,k,tmp;state=[0x67452301,0xefcdab89,0x98badcfe,0x10325476];len=data.length;index=len&0x3f;padLen=(index<56)?(56-index):(120-index);if(padLen>0){data+="x80";for(i=0;i<padLen-1;i++)data+="x00"}data+=MD5_pack(len*8);data+=MD5_pack(0);len+=padLen+8;abcd=[0,1,2,3];x=new Array(16);s=new Array(4);for(k=0;k<len;k+=64){for(i=0,j=k;i<16;i++,j+=4){x[i]=data.charCodeAt(j)|(data.charCodeAt(j+1)<< 8)|(data.charCodeAt(j+2)<<16)|(data.charCodeAt(j+3)<<24)}for(i=0;i<4;i++)s[i]=state[i];for(i=0;i<4;i++){f=MD5_round[i][0];r=MD5_round[i][1];for(j=0;j<16;j++){MD5_apply_round(x,s,f,abcd,r[j]);tmp=abcd[0];abcd[0]=abcd[3];abcd[3]=abcd[2];abcd[2]=abcd[1];abcd[1]=tmp}}for(i=0;i<4;i++){state[i]+=s[i];state[i]=MD5_number(state[i])}}return MD5_pack(state[0])+MD5_pack(state[1])+MD5_pack(state[2])+MD5_pack(state[3])}function MD5_hexhash(data){var i,out,c;var bit128=MD5_hash(data);out="";for(i=0;i<16;i++){c=bit128.charCodeAt(i);out+="0123456789abcdef".charAt((c>>4)&0xf);out+="0123456789abcdef".charAt(c&0xf)}return out}return MD5_hexhash})();
var createDeliciousCount = function(bookmark) {
var md5 = md5_hex(bookmark.url);
return <a href={"http://del.icio.us/url/" + md5} target="_blank">
<img src={"http://del.icio.us/feeds/img/savedcount/" +md5 + "?aggregate"} />
</a>;
}
var createHatebuCount = function(bookmark) {
return <a href={"http://b.hatena.ne.jp/entry/" + bookmark.url} target="_blank">
<img src={"http://b.hatena.ne.jp/entry/image/" + bookmark.url} />
</a>;
}
var createLivedoorCount = function(bookmark) {
return <a href={"http://clip.livedoor.com/page/" + bookmark.url} taget="_blank">
<img src={"http://image.clip.livedoor.com/counter/" + bookmark.url} />
</a>;
}
var createBuzzurlCount = function(bookmark) {
return <a href={"http://buzzurl.jp/entry/" + bookmark.url} target="_blank">
<img src={"http://api.buzzurl.jp/api/counter/v1/image?url=" + bookmark.url} />
</a>;
}
// ブックマーク数カウントここまで //////////////////////////////
// コメント挿入ここから //////////////////////////////
// JSONPリクエストオブジェクト
var JSONPRequest = function(url, callback, callbackParam) {
this.url = url;
this.callback = callback;
this.callbackParam = callbackParam;
this.id = null;
this.load();
};
JSONPRequest._count = 0;
window.__JSONPRequestCallBacks = [];
JSONPRequest.prototype.load = function() {
if(this.id != null) return;
this.id = JSONPRequest._count++;
var url = this.url + '&'
+ this.callbackParam + '='
+ '__JSONPRequestCallBacks._' + this.id;
this.script = document.createElement('script');
this.script.type = 'text/javascript';
this.script.charset = 'utf-8';
this.script.src = url;
var headTag = document.getElementsByTagName('head')[0];
var self = this;
window.__JSONPRequestCallBacks['_' + this.id] = function(json) {
self.callback(json);
delete window.__JSONPRequestCallBacks['_' + self.id];
self.id = null;
headTag.removeChild(self.script);
};
headTag.appendChild(this.script);
};
function request(url, element) {
new JSONPRequest(url, function(json) { show(json, element); }, CALLBACK_NAME);
with(element.style) {
textDecoration = 'none';
color = '#000';
cursor = 'auto';
}
element.innerHTML = 'Loading...';
}
function show(json, element) {
if(json.value.items.length == 0) {
element.innerHTML = "コメントが無いかエラーが発生しました";
}
else {
var comments = json.value.items;
var ul = document.createElement('ul');
for(var i = 0, len = comments.length; i < len; ++i) {
var comment = comments[i];
/^([d]+)[(.+)]$/.test(comment.title);
var utime = RegExp.$1 + '000'; // sec -> msec
var date = new Date();
date.setTime(utime);
var time = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('/');
var sbm = RegExp.$2;
var img_url =
sbm == 'livedoor' ? 'http://clip.livedoor.com/favicon.ico':
sbm == 'hatena' ? 'http://b.hatena.ne.jp/favicon.ico' :
sbm == 'delicious' ? 'http://del.icio.us/favicon.ico' :
sbm == 'buzzurl' ? 'http://buzzurl.jp/favicon.ico' :
'';
var li = document.createElement('li');
li.innerHTML = <>
<a href={comment.link}>
<img width="16" alt={sbm} src={img_url} />
{comment.author}
</a>
{comment.description}
<em> - {time}</em>
</>.toString();
ul.appendChild(li);
}
element.innerHTML = '';
element.style.display = 'block';
element.appendChild(ul);
}
element.onclick = function(){};
}
var JSON_BASE_URI = 'http://pipes.yahoo.com/pipes/pipe.run?_id=3J_WV8j_2xGssdY4qWIyXQ&_render=json&_run=1&url=';
var CALLBACK_NAME = '_callback';
var count = 0;
window.__CommentInsertCallBacks = [];
// コメント挿入ここまで //////////////////////////////
IncSearch.prototype.addTitleText = function(bookmark, patternList) {
var page = encodeURIComponent(bookmark['url'].replace(/%23/, '#'));
var url = JSON_BASE_URI + page;
window.__CommentInsertCallBacks[count] = function(element) { request(url, element); };
return <>
{createDeliciousCount(bookmark)}
{createHatebuCount(bookmark)}
{createLivedoorCount(bookmark)}
{createBuzzurlCount(bookmark)}
<div class="comment_insert" onclick={"__CommentInsertCallBacks[" + count++ + "](this)"}>
Comment...
</div>
</>.toString();
}
function log(str) {
if(console) console.log(str)
}
// スタイルシート
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = <><![CDATA[
img {
border: none;
margin: 0;
}
.comment_insert {
display: inline;
cursor: pointer;
text-decoration: underline;
color: blue;
margin: 0;
}
.comment_insert li {
margin-left: 2em;
}
.comment_insert em {
color: #494;
}
]]></>.toString();
document.getElementsByTagName('head')[0].appendChild(style);
})();
2007/12/12 18:19 | JavaScript | トラックバック(0) | コメント(0)
