Greasemonkeyをもっと気軽に使っていこう

色んなエントリを読んでいて「なんで横3段なんだ、横が狭いと縦長になってみづらいだろ」とか思う事がとても多い。たとえば次のような例。(InfoQさま、ごめんなさい。でもマジ見づらいんです。) 右がわのサイドバーが邪魔。たまに役に立つことも歩けど、大概の状況では使わないし、邪魔。自分なんて普段は130%くらいのズームで見なきゃ文字が見えないから、130%とか150%に拡大してブラウジングしていることが多いが、そうなると本文が下へ下へ伸びてしまう。(眼鏡を買えよ、と言われれば確かにその通りだが、すぐに無くなっちゃうし＞＜そんな俺がコンタクトとか考えられませんし。だって、眼鏡ならなくなっても害は無いけどコンタクトが目の中で行方不明とか怖いし。) 今まではこれを我慢して使ってたけど、積極的に自分用にカスタマイズしていくことにした。ストレスでまた心臓がワロクなってしまいそぅだし。これにはFirebugとGreasemonkeyを使えば超簡単だった。

1. まずは対象のページを表示して、ブラウザのステータスバーに常駐しているGreasemonkeyのアイコン（猿のアイコン）を右Clickし、「New user script」を選択する。
2. 「Name」に今回作成するScirptの適当な名称をつける。今回ならInfoQViewerとか適当に。
3. 「Namespace」に適当な値を入れておく。自分ならhttp://shin1o.blogspot.com/とか入れておいた。
4. 「Includes」には、このScirptを適用するURLのパターンを入力する。デフォルトで表示されているページのURLが表示されているが、今回だとたとえば「http://www.infoq.com/jp/*」のように入力して、すべての記事に対してScriptが有効になるように考える。
5. OKを押すとScriptの編集用のエディタが起動するので、いよいよにっくきサイドバーを撤去するScriptを書くことにする。
6. まずはヘッダとなるコメント数行の下に「(function (){})();」とだけ記述する。処理はこの内側に書く。
7. Firebugの「Inspect」で右側のサイドバーの要素の取得方法を調査する。このページの場合は「rightbar」というidが振られていた。
8. つまり、document.getElementById('rightbar')で取得できる。なので、以下の記述で撤去できる。 document.getElementById("rightbar").style.display = 'none';
9. ただし、これで右側のサイドバーが非表示にはなるものの、真ん中の領域が広がってくれない。そこで、Firebugで真ん中の領域を調査すると、「content」というidで「widht70%;」が指定されていることがわかる。
10. つまり、document.getElementById('content').style.width = '100%'とすればいい。
11. これで保存してから、対象ページを再度読み込みなおせばOKOK！みやすくなった。

ソースは以下のような小さいもの。エラーチェックとかしていないけど、そんなの必要ない。必要になればまた修正すればOK。また作り直しても良いし。

// ==UserScript==
// @name           InfoQView
// @namespace      http://shin1o.blogspot.com/
// @include        http://www.infoq.com/jp
// ==/UserScript==
(function (){
  document.getElementById("rightbar").style.display = 'none';
  document.getElementById("content").style.width = '100%';
})();