livedoor Reader から直接はてなフォトライフに投票するブックマークレット

はてなフォトライフデスクトップのさらなる活用のためには手軽な投票インターフェースが必要と思い、作ってみました。

フォトライフの各記事に投票のための入力フォームを追加します (この手法に関しては『livedoor Readerをはてブと合体』を参考にさせて頂きました)。

以前 Bloglines からはてなダイアリーに直接コメントするブックマークレットを作った時と同じ手口、即ち外部スクリプトを利用する方式です。

ブックマークレット:
javascript:(function(d,s,t,i,u){s=d.getElementsByTagName(t);for(;i<s.length;i++)if(s[i].src==u){alert('Already loaded!');return};s=d.createElement(t);s.type='text/javascript';s.src=u;d.body.appendChild(s)})(document,0,'SCRIPT',0,'file:///path/to/script.js')
(自分では確認したことが無いんですが、textarea って RSS リーダーでちゃんと表示されてるでしょうか？)

スクリプト本体:
(function(){ if (!Filter) return; function add_hook() { var _ = Filter.created_on; Filter.created_on = function (v, k, tmpl) { var link = tmpl.get_param('link'); return (link.match(/f.hatena.ne.jp/) ? "<form class=vote_hatena_fotolife " + "onsubmit='Filter.vote_hatena_fotolife(event);return false;'>" + '<input type="text" name="comment" size=40>' + '<input type="hidden" name="link" value="'+link+'">' + '<input type="submit" value="vote">' + "</form><br>" : "") + _(v, k, tmpl); }; Filter.vote_hatena_fotolife = function (e) { (new Vote(e.srcElement)).vote(); }; } // causes error on IE6 function add_style() { var style = document.createElement("STYLE"); style.type = "text/css"; style.innerHTML = "form.vote_hatena_fotolife input {border:none;}"; document.getElementsByTagName("HEAD")[0].appendChild(style); } var Vote = function () { this.initialize.apply(this, arguments); }; Vote.prototype = { initialize: function (form) { this.form = form; this.fields = form.childNodes; this.comment = this.get_param("comment"); this.link = this.get_param("link"); }, vote: function () { //if (!this.comment) return; this.fetch_form(this.do_vote); }, do_vote: function () { var query = this.serialize(); //alert(query);return; if (!query) return this.finalize(); (new XMLHTTP).post(this.link.replace(/\d+$/, 'vote'), query, this.finalize.bind(this)); }, fetch_form: function (callback) { (new XMLHTTP).get(this.link, function (res) { this.parse(res); callback.call(this); }.bind(this)); }, parse: function (res) { try { var dom = document.createElement('BODY'); dom.innerHTML = res.responseText.split(/<\/?body[^>]*>/ig)[1]; this.fields = dom.getElementsByTagName('FORM')[0].childNodes; } catch (e) { //alert(e.description); this.fields = <span data-unlink>; } }, get_param: function (param) { for (var i = 0; i < this.fields.length; i++) if (this.fields[i].name == param) return this.fields[i].value; return null; }, serialize: function () { var query = </span>; for (var i = 0; i < this.fields.length; i++) { var key = this.fields[i].name; var val = this.fields[i].value; if (!key || key == "vote") continue; query.push([key, this[key]||val].map(encodeURIComponent).join("=")); } return query.length ? ["submit=vote"].concat(query).join("&") : null; }, finalize: function (res) { if (1 || !res.responseText.match(/<form/i)) this.form.removeNode(true); } }; var XMLHTTP = function () { this.initialize.apply(this, arguments); }; XMLHTTP.prototype = { initialize: function () { this.req = null; this.callback = null; }, get: function (url, callback) { this.req = new _XMLHttpRequest; this.callback = callback || Function.empty; this.__start__('GET', url); }, post: function (url, data, callback) { this.req = new _XMLHttpRequest; this.callback = callback || Function.empty; this.__start__('POST', url, data); }, __start__: function (deed, url, data) { this.req.open(deed, url, true); this.req.onload = function () { this.callback(this.req); this.req = null; this.callback = null; }.bind(this); this.req.send(data||null); } }; add_hook(); //add_style(); })() // vim:ts=8:sw=2:sts=2:

下のスクリプトを適当な名前で保存 (ローカルでもリモートでも構いません) し、上のブックマークレットの最後の部分をそのパス名に書き換えてください。

手間を最小限にするため、キーボード・ショートカットのカスタマイズ等、必要なブックマークレットを下のスクリプトに放り込んで一括実行する、という利用方法がお勧めです。Greasemonkey の LDR 用スクリプトを移植するのも良いでしょう。

注意事項:

1. IE で「書き込みできません」等のエラーが出る場合はセキュリティーの設定が厳しいと考えられます
2. 投票が成功したかどうかの確認はいたしません
3. 投票が反映されるまでには数秒の遅れが出る場合があります
4. IE の場合、右上のロゴが回りっぱなしになるかも知れませんが、気にしないで下さい

どうぞご利用ください。