高見知英のかいはつにっし(β)

高見知英のアプリケーション開発日誌 のほか、地域活動などの活動報告ブログ。

昔のツールバー

はてなの編集画面のツールバーが変わってしまってからしばらくが経ちます。成果物なしにしばらくなんちゃらやってるのも何なので、昔のツールバーに近づけるGreasemonkeyスクリプトを作りました。

// ==UserScript==
// @name           Hatena Old Style Toolbars
// @namespace      http://Onpu.jpn.ch/
// @author         TakamiChie<chie@tamago.soup.jp>
// @description    The toolbar of the diary edit screen is made a logical emphasis. 
// @include        http://d.hatena.ne.jp/*
// @include        http://*.g.hatena.ne.jp/*
// ==/UserScript==

(function () {
  var toolbar = document.evaluate(
    'preceding-sibling::table[1]/tbody/tr/td[1]',
    document.getElementById('textarea-edit'), null, XPathResult.ORDERED_NODE_ITERATOR_TYPE,
    null ).iterateNext();
  if(!toolbar) return;

  var init = function(){
    // clear old toolbuttons
    var buttons = toolbar.childNodes;
    for(var i = buttons.length - 1; i >= 0; i--)
    {
      if(buttons[i].tagName != undefined && 
        (buttons[i].tagName == 'IMG' || buttons[i].tagName == 'SELECT' || buttons[i].tagName == 'OPTION'))
        toolbar.removeChild(buttons[i]);
    }
    var b;
    toolbar.appendChild(createButton('<em>em</em>', '\u5F37\u8ABF', 
      'tag', 'em'));
    toolbar.appendChild(createButton('<strong>strong</strong>', '\u5F37\u3044\u5F37\u8ABF', 
      'tag', 'strong'));
    toolbar.appendChild(createButton('<ins>ins</ins>', '\u633F\u5165\u90E8', 
      'tag', 'ins'));
    toolbar.appendChild(createButton('<del>del</del>', '\u524A\u9664\u90E8', 
      'tag', 'del'));
    toolbar.appendChild(createButton('q', '\u77ed\u3044\u5F15\u7528', 
      'tag', 'q'));
    toolbar.appendChild(createButton('bq', '\u5F15\u7528', 
      'markupQuote()'));
    toolbar.appendChild(b = createButton('[[link]]', '\u30EA\u30F3\u30AF', 
      'markupURL()'));

    b.style.marginRight = '1ex';    
  }
  // add New Buttons
  var createButton = function(label, title, opType) {
    var btn = document.createElement( 'span' );
  	with(btn.style) {
  	    color = "black";
    		verticalAlign = "12px";  			
  	    fontSize = "8pt";
  	    fontWeight = "normal";
  	    fontFamily = "sans-serif";
  	    backgroundColor = "#D0DCF4";
  	    borderColor = "#D0DCF4";
  	    borderWidth = "1px";
        minWidth = "4ex";
  	    padding = "3px 5px 3px 5px";
  	    cursor = "pointer";
        borderStyle = "outset";
  	}
    btn.setAttribute('onmousedown', 'this.style.borderStyle = "inset";');
    btn.setAttribute('onmouseup', 'this.style.borderStyle = "outset";');
    var code = "";
    if(opType == 'tag')
      code = 'markupHtml("'+ arguments[3] + '")';
    if(code == "")
      code = opType;
    btn.setAttribute('onclick', code + '; $("textarea-edit").focus(); return false;');
    btn.innerHTML = label;
    /*
    btn.addEventListener( 'click', function(e){
      e.preventDefault(); e.stopPropagation();
           
      textInputSelection.getText();
      var textSelection = new TextInputSelection(document.edit.body);
      var text = textSelection.getText();
      textSelection.setText(tagStart + text + tagEnd);
      textSelection.select();
    } , false );
    */
    if( title ) btn.title = title;
    return btn;    
  }
  init();
})();

上を使えば、現在のツールバーが消滅し、かわりにシンプルな論理強調ツールバーが表示されるようになります。
箇条書きを示す-や+は、挿入ボタンを作らなくても手入力した方が早いと思うのでナシ。とりあえず使えるものだけをピックアップしました。まあ、前のものよりちょっとは使いやすいかもしれませんね。

マークアップの挿入については、はてなに元から使われているスクリプトを使わせてもらいました。ほんとはコメントアウトされている方のコードを使ってみたかったですが、なぜか動かないようで… こんな感じで断念。
nazokingさんのNicelinkなどと一緒に使うときは、こっちを先にツールバーに登録するようにすると良いかもしれません。いったんNiceLinkをアンインストールするか、(失敗すると危険ですが)GM_scriptsディレクトリのXMLファイルを直接いじって優先度を変えるか ですね。


ところで、AccessKeyを仕込みたかったんですが、どうもうまく動きませんでしたねえ、どうしたものでしょうか?