【ツール】Googleの ノートブックが 狭いなら 広げてみせよう なめらかモンキー

Greasemonkeyをなめらかモンキーと書くとやわらか戦車みたいでいいですね。
一応ぐぐってみましたけど、まだ無いみたいです、なめらかモンキー。登録商標をとるなら今ですよ！

さて。本題に入ります。
普段から大活躍している私のGoogleノートブックの中身が汚くなっていたので、久しぶりに大掃除をしていらないメモを捨て、メモの分類をやり直したり、ラベルをつけ直したりしてみました。
ラベルをつけ直しているとラベルの量がどんどん増えてくるのですが、そこで気になったのが・・・



この左下のコピーライトが書いてある領域。

そのとき、ふと私の頭にこんな考えが浮かびました。
「ここを消せばあと2個ラベルが余分に表示できる」

ようし、なら消してしまえ！近頃こういう新しいチャレンジがなくてめっきり頭が鈍っていたところです。こんなおもしろい話を逃すものかと、さっそくGreasemonkeyのスクリプトを書いてコピーライトを消してしまおうと思い立ちました。JavascriptでDOMを使う勉強にもなります。
JavascriptのDOMを使う上で、今回参考にしたサイトはこちら。
http://www.javascriptkit.com/domref/elementmethods.shtml
http://youmos.com/news/getelementsby
http://www.openspc2.org/JavaScript/JavaScript_DOM/

肝心のGreasemonkeyスクリプトの書き方はこちらを参考にいたしました。
http://www.google.com/notebook/public/18412722587928953882/BDSaYIgoQyaWT1b4h

まずはコピーライト部のソースをチェック。

---

<div class="rh" id="gn0_4">～中略～</div>

---

このようになっています（詳しくはご自身でソースをご確認ください・・・）。ということは、このid="gn0_4"の要素を削除してやれば、コピーライト部全体が消えて無くなるはずです。早速スクリプトを書いてみましょう。
完成品がこちら。→googlenotebookcustomizer.user.js
といっても別段妙なことはしていません。Greasemonkeyスクリプトのお約束通り、匿名関数を定義して、その中でイベントリスナーを作成し、DOMで要素を取得＆削除する関数を定義しているだけです。

早速、動かしてみました。消えてくれるかな！？



やった！消えた！！
・・・ってあれ？ラベル欄が広がりません。なぜ？

不審に思ってラベル欄のソースを見てみました。すると・・・

---

    <div class="we kd">
        <div style="height: 176px;" tabindex="0" class="na" id="gn2_0">
            <div id="gn2_1">
                <div id="gn6" class="aa x" tabindex="-1">
                    Blog (1)
                </div>
                <div id="gn7" class="aa x" tabindex="-1">
                    Eclipse (4)
                </div>
                <div id="gn8" class="aa x" tabindex="-1">
                    Java (5)
                </div>
            </div>
        </div>
    </div>

---

なんだかheightの数値がべた書きです。
どうもこのソース、javascriptで動的に生成されているみたいなんです。
ですからこの高さを生成するロジックに手をつけるわけにはいきません。しかも、ウィンドウのサイズが変わり次第、毎回高さが変わりますから・・・

1. ウィンドウサイズが変わったときに呼び出されるイベントリスナーを新規作成する。
2. そのイベントリスナーの中で、gn2_0要素を取得して、取得した要素のstyle属性の値を書き換える。

という処理を行ってやる必要がありそうです。こいつは困った・・・出直してきます。

こうして私のGreasemonkey初体験はなめらかな結果に終わったのでした・・・