Vim Advent Calendar 2012 に"はてブ数"を表示させるグリモンとブックマークレットを作ったよ!
Vim Advent Calendar 2012 の197日目の記事です。
前回(196日目)の記事は @supermomonga さんの homebrewを使ってちょっと新しめのMacVim KaoriYaを使おう - かなりすごいブログ でした。
まえおき
ついに中間発表を終え、後半戦へと突入したVim Advent Calendar 2012
参加者も90人を越え、200日目も目前となって参りました。
しかし!!
あまりにも記事が多すぎて、「どれから読めばいいんだ!」とか「もしかし見逃してるんじゃ?」とか「やだ、私のVim力低すぎ…」などと不安になっている方もいるのではないでしょうか。
そこで、そんな不安を吹き飛ばすため、
Advent Calendar のページにはてなブックマーク数を表示する Greasemonkey (グリースモンキー) と ブックマークレット を作ってみました。
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は自動更新が行えません。この縛りは結構つらいです。
幸いGreasemonkeyをChrome拡張に変更するのは非常に簡単なので、今回のGreasemonkeyも、もし需要があるようならChrome拡張版を用意しようかと思います。
ブックマークレット版は、あらかじめGreasmonkey版を作り、動作確認を行なっておくことで、スムーズに作成することができます。
サーバ読み込みバージョンは、サーバ上のGreasemonkeyを読み込んでいるだけです。
非サーバ読み込みバージョンは、GreasemonkeyをUglifyJSを使ってMinify(圧縮)しただけです。
簡単ですね。
Vimは関係ありませんが、思いついたちょっとしたアイディアをすぐに形にできるよう、
みなさんも Greasemonkey と ブックマークレット のひな形を用意してはいかがでしょうか。
以上、
Vim Advent Calendar 2012 197日目の記事でした。
(Vim script が1行も出てこなくてごめんなさい。)
明日 198日目は、 @deris0126 さんです。
Chrome拡張 "ニコ生アリーナ" を作った。
春アニメの放送開始、GWのアニメ一挙など、来るべき戦いに敗北しないために作ったのが、今回のChrome拡張 "ニコ生アリーナ" です。
ニコニコ生放送を少しでも見ている方なら便利に使って頂けるのではないでしょうか。
主な機能は以下
- ニコ生自動入場
- ニコ生自動枠移動
- 参加中のコミュニティ/チャンネルの放送番組の一覧表示
- タイムシフト予約中の番組一覧表示
- 公式放送番組の一覧表示
- 一覧表示上に番組の状態(開場前/開場中/放送中)を表示
- 番組の状態に応じた番組数をバッジ表示
- デスクトップ通知
- 自動タブオープン
- ニコ生閲覧履歴
オススメの使い方
見たい番組をタイムシフト予約しておくと良いでしょう。
これでブラブザを開いてさえいれば、開場前に自動的にタブが開き、さらに開場と同時に自動的に入場してくれるようになります。
ユーザ生放送の場合は、コミュニティに入っておくと良いでしょう。
また自動的に次枠へ移動してくれるので、面倒な次枠チェックを行わなくてもすみます。
不具合報告など
不具合などありましたら、Chrome ウェブストア - ニコ生アリーナ の 詳細タブ の 「フィードバックを送信」から送って頂けるか、Twitter(@yuyuchu3333) などで教えて頂けると助かります。
お願いします。m(_ _)m
技術的な話も少し
開発期間は約1週間半、Chrome拡張を作ること自体ははじめてではりませんが、公開するのは今回がはじめてです。
ニコニコAPIが思ったより貧弱で時間がかかってしまった感じです。
Javascript は CoffeeScript で、CSSはLESSで書きました。
依存ライブラリは、今のところjQueryのみで、Bowerを使って導入しています。
ビルドツールには、Gruntを使用しています。
Chrome拡張本体には、CoffeeScriptやその他もろもろは含まれていませんので、コードを見たい方は以下を参照下さい。
不安要素が1つ。
実は今自宅にWindowsがないので、そこの動作確認がとれていません。
同じChromeだから大きな差はないと信じたい。(((( ;゚Д゚)))ガクガクブルブル
(しかも苦情がきても確認できないので直せない… pull requestとかくれると泣いて喜びます)
公開したばかりで、まだまだユーザ数は少ないですが、良ければ使ってみて下さい。
ブコメ返し
id:bowie2013 さん
報告ありがとうございます。
ver.0.2.3 にて修正しました。
まだ直っていないようでしたら、また教えてください。
gruntのzsh補完を書いた。
bashの補完は公式で提供されていたが、gruntのzsh補完がなかったので作った。
私が存在を知らないだけかもしれないので、知ってる方がいたら教えてください。
(zsh-completions と oh-my-zsh にはなかった。1つだけgithubにあったけど微妙だった。)
ちなみに公式のbash補完は、以下の設定を .bashrc などに記述すれば使用出来ます。
eval "$(grunt --completion=bash)"
zsh補完イメージ
インストール方法
Githubに置いてあるのでとってきて下さい。
$ git clone git://github.com/yonchu/grunt-zsh-completion.git or $ wget https://github.com/yonchu/grunt-zsh-completion/raw/master/_grunt
とってきたファイル (_grant)を fpath の通っているディレクトリに置いて、zshを再起動して下さい。
$ cd grunt-zsh-completion $ cp _grunt /usr/local/share/zsh/site-functions/ $ exec zsh
fpath が通ったディレクトリがどこか分からない方は以下コマンドで調べて下さい。
$ echo "$fpath" | tr " " "\n"
以上。
動作確認は grunt-cli v0.1.7, grunt v0.4.1 で行いました。