AeroReader 向けに、はてブコメントを表示したりするカスタムスクリプトをつくってみた。

今回のリリースから、カスタムスクリプトを利用できるようになりました。

AeroReader 2.2 リリース - Psychs's blog

とのことなので、はてブコメントを表示する＋αなカスタムスクリプトを作ってみた。

AeroReader用CustomScriptを設定する。 - JP::HSJ::Junknews::HatenaSide で公開されているものを参考に作成。そちらのベースは http://masuidrive.jp/aeroreader/js.php とのことなので、どんどん変化して良く感じが実にインターネッツですね。

公開。

初期状態で画像非表示。 show Image をクリックすることで画像を表示します。
?B Comment をクリックではてなブックマークのコメントを表示。たぶん不具合あり。
サーバーは各自用意してください。

document.addEventListener("DOMContentLoaded", function(){ 
  Array.prototype.forEach.call(document.querySelectorAll(".article"), function(el) {
    var url = el.querySelector(".titlebar .metabar a").href;
    var metabar = el.querySelector(".titlebar .metabar");
    
    // はてブコメント
    var elmA = document.createElement('a');
    elmA.href="#"
    elmA.innerHTML = '?B Comment';
    elmA.onclick = function () {
      var target = el.querySelector(".titlebar");
      __hatebu_comment(url, target);
      
      this.parentNode.removeChild(this);
      return false;
    };
    metabar.appendChild(elmA);
    
    // 画像非表示/表示
    var removeImgs = [];
    Array.prototype.forEach.call(el.querySelectorAll("img"), function(el) {
      if (el.src.indexOf('http') == 0) {
        el._src = el.src;
        //  el.src = 'http://www.google.co.jp/gwt/x/i?u=' + el.src;
        //el.style.display  = 'none';
        removeImgs.push(el);
      }
    });
    window.stop();
    
    var elmA = document.createElement('a');
    elmA.href="#"
    elmA.innerHTML = 'show Image';
    elmA.style.marginLeft = '10px';
    elmA.onclick = function () {
      Array.prototype.forEach.call(removeImgs, function(el) {
        el.src = el._src;
        //el.style.display  = '';
      });
      
      this.parentNode.removeChild(this);
      return false;
    };
    
    metabar.appendChild(elmA);
    
  });
  
  /*
  var a = [];
  for(var aa in window) {
    if (typeof window[aa] == 'function') a.push(aa);
  }
  document.body.innerHTML = a.join('<br>');
  alert(onScroll);
  */
  
  alert(document.location);

}, false);


__hatebu_comment_buffer = [];
function __hatebu_comment(url, elm) {
  __hatebu_comment_buffer.push(elm);
  
  var elmScript = document.createElement('script');
  elmScript.src = 'http://b.hatena.ne.jp/entry/jsonlite/?callback=__hatebu_comment_callback__&url=' + url;
  document.body.appendChild(elmScript);
}

function __hatebu_comment_callback__(json) {
  var elmUl = document.createElement('ul');
  elmUl.style.border = '1px solid #66C';
  elmUl.style.background = '#F0F6FF';
  elmUl.style.fontSize = '80%';
  
  if (json) {
    var elmLi = document.createElement('li');
    elmLi.style.marginBottom = "8px";
    elmLi.innerHTML = json.bookmarks.length + 'User';
    elmUl.appendChild(elmLi);
      
    json.bookmarks.forEach(function (data) {
      if (!data.comment) { return; }
      var elmLi = document.createElement('li');
      elmLi.style.marginBottom = "8px";
      elmLi.innerHTML ='<span style="color:blue;">' + data.user + '</span> ' + data.comment;
      elmUl.appendChild(elmLi);
    });
  } else {
    var elmLi = document.createElement('li');
    elmLi.innerHTML = 'No Bookmark...';
    elmUl.appendChild(elmLi);
  }
  
  __hatebu_comment_buffer.shift().appendChild(elmUl);
}