引用文とかソースコードを開閉するグリモン

ブログを見てると引用文とかソースコードをブロック(blockquoteやpreタグ)で囲んで載せているところありますよね。
こんな感じで。

特にソースコードは長くなりますよね。
僕は長いソースコードが貼り付けてある記事を読むときは、記事の概要だけをさっと読んで、ソースコードは後でじっくり読みます。でもソースコードが長いとスクロールするのが大変！！

Close Block

そんなわけで引用文やソースコードのブロックを閉じたり、開いたりできるGreasemonkey書いてみました。
http://userscripts.org/scripts/source/42430.user.js
インストールしたら、F5キーでリロードしてみてください。↓のソースコードが閉じられて
{{{ open by double click ... }}}
という1行に変わってるはず。

// ==UserScript==
// @name           Close Block
// @namespace      h13i32maru
// @include        http://d.hatena.ne.jp/*
// ==/UserScript==
(function(){
  //{{{init(tagname)
  function init(tagname){
    var maxHeight = 400;
    var blocks = document.getElementsByTagName(tagname).wrappedJSObject;
    for(var i = 0; i < blocks.length; i++){
      blocks[i].ondblclick = toggle;//toggle func is exchange buffer and innerHTML
      blocks[i].buffer = "{{{ open by double click ... }}}".bold();
      if(blocks[i].clientHeight > maxHeight) blocks[i].ondblclick();
    }
  }
  //}}}
  //{{{toggle(e)
  function toggle(e){
    if(e){
      //if click-Yposition and the block-Yposition are greatly diffrent , scroll up to the diffrent
      var scrolled = e.pageY - Math.round(this.getBoundingClientRect().top + window.scrollY);
      if(scrolled > 200) window.scrollBy(0 , -1 * scrolled);
    }
    var tmp = this.innerHTML;
    this.innerHTML = this.buffer;
    this.buffer = tmp;
  }
  //}}}

  init("blockquote");
  init("pre");
})()

使い方

使い方は簡単で、ブロックをダブルクリックすることで開閉できます。
ページを読み込んだときに長いブロックだけを自動的に閉じるようにしてます。短いブロックでもダブルクリックすることで開閉できます。
デフォルトでは実行するページをはてなダイアリーだけに設定してます。livedoorブログとのかURLも追加してみてください。

それと、長いブロックを閉じたときにウィンドウのスクロール位置が元の位置に近いところに戻るように自動的にスクロールします。でもあまり上手い方法が思いつかなかったので、微妙な位置にスクロールすることがあります＾＾；

XPCNativeWrapper

XPCNativeWrapperについてはエントリーを分けました。
グリモンを書いてるときにはまったところ - maru source