はてなダイアリーの注釈をその場に展開するブックマークレット

注釈*1が多い記事は、ページを上下に行ったり来たりしなければならなくて面倒*2 *3なので、注釈のリンクを注釈の内容に置き換える*4ブックマークレットを作った。

前のはいまいちな気がしたので書き直し。まだ納得いかないけどとりあえず。もう少し汎用的にしたい。

javascript:
(function () {
  var linkPath = './descendant::span[@class="footnote"]/a';
  var textPathFromAnchor = './following-sibling::node()';

  var links = document.evaluate(linkPath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  if(links.snapshotLength == 0) return;

  function expandFootnote(link) {
    var id = link.hash.slice(1);
    var anchor = document.getElementById(id) || document.getElementsByName(id)[0];
    if(!anchor) return;
    var container = link.parentNode;
    var texts = document.evaluate(textPathFromAnchor, anchor, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    container.removeChild(container.firstChild);
    container.appendChild(document.createTextNode('（'));
    for(var i=0, len=texts.snapshotLength; i<len; ++i) {
      if(i == 0)
        texts.snapshotItem(i).nodeValue = texts.snapshotItem(i).nodeValue.slice(1);
      container.appendChild(texts.snapshotItem(i));
    }
    container.appendChild(document.createTextNode('）'));
  }
  
  for(var i=0, len=links.snapshotLength; i<len; ++i) {
    expandFootnote(links.snapshotItem(i));
  }
})();

javascript:
(function(doc) {
  var ps = doc.querySelectorAll('p.footnote'),
      spans = doc.querySelectorAll('span.footnote'),
      notes = {};
  for(var i=0, l=ps.length; i<l; ++i) {
    var p = ps.item(i);
    notes[p.firstChild.name] = p;
  }
  for(var i=0, l=spans.length; i<l; ++i) {
    var span = spans.item(i),
        oldNote = notes[span.firstChild.hash.slice(1)],
        note = doc.createElement('span');
    note.className = 'expandFootnote';
    oldNote.removeChild(oldNote.firstChild);
    oldNote.firstChild.nodeValue = oldNote.firstChild.nodeValue.slice(1);
    while(oldNote.firstChild) {
      note.appendChild(oldNote.firstChild);
    }
    oldNote.parentNode.removeChild(oldNote);
    span.parentNode.insertBefore(note, span.nextSibling);
    span.parentNode.removeChild(span);
  }
  var st = doc.createElement('style');
  st.type = 'text/css';
  st.textContent = [
    '.expandFootnote { margin: 0 0.2em }',
    '.expandFootnote:before { content: "(("; }',
    '.expandFootnote:after { content: "))"; }'
  ].join('');
  doc.getElementsByTagName('head').item(0).appendChild(st);
})(document);

*1:これのこと

*2:注釈のリンクにポインタを合わせていればツールチップに内容が表示されるけど、注釈の内容にリンクがあったりすると困る

*3:と言うかポインタを合わせるのが面倒

*4:最初はマウスオーバーで吹き出しを出すつもりだったんだけど...