よんちゅBlog

― このブログは自分用のメモや日々の問題などを共有するためのものです ―

20121005185841 お知らせ:  2013/07/17 ブログデザインをリニューアルしました。

Vim Advent Calendar 2012 に"はてブ数"を表示させるグリモンとブックマークレットを作ったよ!

Vim Advent Calendar 2012 の197日目の記事です。

前回(196日目)の記事は @supermomonga さんの homebrewを使ってちょっと新しめのMacVim KaoriYaを使おう - かなりすごいブログ でした。

まえおき

ついに中間発表を終え、後半戦へと突入したVim Advent Calendar 2012

参加者も90人を越え、200日目も目前となって参りました。

しかし!!
あまりにも記事が多すぎて、「どれから読めばいいんだ!」とか「もしかし見逃してるんじゃ?」とか「やだ、私のVim力低すぎ…」などと不安になっている方もいるのではないでしょうか。

そこで、そんな不安を吹き飛ばすため、
Advent Calendar のページにはてなブックマークを表示する Greasemonkey (グリースモンキー) と ブックマークレット を作ってみました。

f:id:yonchu:20130614193818p:plain

Greasemonkey版とブックマークレット版の2種類がありますが、ランキング表示が行えるのはGreasemonkey版のみです

Greasemonkey版のインストール方法

まずスクリプトを以下からダウンロードして下さい。
(Chromeの場合ユーザスクリプトをダウンロードすると警告が出ますが気にしないでください)

続いて各ブラウザにスクリプトをインストールします。

Chromeの場合

ダウンロードしたスクリプトを拡張機能の管理ページ(chrome://extensions/)にドラッグ&ドロップして下さい。
(関係ないけど、拡張機能の管理ページをブックマークバーに追加しておくとすぐにアクセスできるのでおすすめです。)

FireFoxの場合

FireFoxの場合は、Greasemonkeyを使用するために以下のAdd-On が必要になります。
インストールしていない方はまずそちらをインストールしてください。

それから、ダウンロードしたスクリプトをFireFoxへドラッグ&ドロップし、Greasemonkeyの管理画面で有効化を行います。

ブックマークレット版のインストール方法

以下のリンクをブックマークに追加してください。
もしくは、コードをコピーして手動で新しいブックマークを作成して下さい。

javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="https://github.com/yonchu/atnd-hatena-bookmarks/raw/master/atnd-hatebu-min.user.js";document.body.appendChild(s)})();


スクリプトをサーバから読み込まないバージョンも用意しました。

javascript:(function(){var t,e,n,r,a,i,o,d,l,c,u,m,f,h,p,s,y;try{if(top!==self){throw 0}}catch(b){i=b;return}t=function(t){var e,n;if(typeof GM_addStyle!=="undefined"&&GM_addStyle!==null){GM_addStyle(t);return}n=document.createElement("style");n.setAttribute("type","text/css");n.setAttribute("media","screen");n.appendChild(document.createTextNode(t));e=document.getElementsByTagName("head")[0];return e.appendChild(n)};r=function(){var t,e;t="http://b.st-hatena.com/entry/image/";e=document.createElement("img");e.className="hatebu";return function(n){var r;r=e.cloneNode();r.setAttribute("src",t+n);return r}}();a=".hatebu{padding-bottom: 2px !important; margin-left: 5px !important;}";t(a);u=document.querySelectorAll("#post-body table tr");for(f=0,p=u.length;f<p;f++){c=u[f];e=null;y=c.children;for(h=0,s=y.length;h<s;h++){l=y[h];n=l.firstChild;if(!n){continue}d=n.tagName;if(!(d&&d==="a"||d==="A")){continue}e=n;break}if(!e){continue}m=e.href;if(!m){continue}o=r(m);l.appendChild(o)}})();


インストール作業はこれだけです。

あとは Vim Advent Calendar 2012 のページを開き、
Greasemonkey版なら何もしなてくも、ブックマークレット版ならブックマークレットを実行すれば、ブックマーク数が表示されます。
ランキング表示は若干時間がかかります。
(ランキングの同一順位を考慮してないのでそこは多めに見てほしい。)

ちなみに、ATNDの他のイベントページでも Vim Advent Calendar と同じようなテーブルレイアウトを使用している場合はブックマーク数を表示することができます。
Vimmer以外の方もインストールしておけば幸せになれるかもしれません。

※ 動作確認は、Chrome/FireFox/Safari にて行いました。IEは知りません。

注意

ブックマークレット版では、一部の記事でブクマ数が正常に表示されません。

記事執筆後に "はてなダイヤリー" から "はてなブログ" へ移行したが、VACのURLがはてなダイヤリーのままになっているためと思われます。はてなブックマークAPIはリダイレクトに対応していないようです。

Greasemonkey版ではリダイレクトの解決を自身で行うよう対応しています。
インストールが面倒でなければGreasemonkey版をお使い下さい。

技術的な話

ソースコードは以下にて公開しています。
不具合報告などありましたらよろしくお願いします。

制作時間は、ブックマークレット版が 約15分。
Greasemonkey版は3時間ぐらい。(リダイレクト関連で結構悩みました)
JavaScript は CoffeeScript で書いています。

Greasemonkeyはひな形を用意しておくことで、比較的短時間で作成することができます。
Chrome Extension なんかより簡単に作れるのでおすすめです。

しかし、欠点としてGreasemonkeyは自動更新が行えません。この縛りは結構つらいです。
幸いGreasemonkeyChrome拡張に変更するのは非常に簡単なので、今回のGreasemonkeyも、もし需要があるようならChrome拡張版を用意しようかと思います。

ブックマークレット版は、あらかじめGreasmonkey版を作り、動作確認を行なっておくことで、スムーズに作成することができます。
サーバ読み込みバージョンは、サーバ上のGreasemonkeyを読み込んでいるだけです。
非サーバ読み込みバージョンは、GreasemonkeyUglifyJSを使ってMinify(圧縮)しただけです。
簡単ですね。

Vimは関係ありませんが、思いついたちょっとしたアイディアをすぐに形にできるよう、
みなさんも Greasemonkeyブックマークレット のひな形を用意してはいかがでしょうか。


以上、
Vim Advent Calendar 2012 197日目の記事でした。
(Vim script が1行も出てこなくてごめんなさい。)

明日 198日目は、 @deris0126 さんです。