フリーのココログに各種 SBM のブックマーク ボタンをつける JavaScript 改良版

無駄に長いタイトルになってしまった。けどいまさら変更してもわかりずらいし。ということで「フリーのココログに各種 SBM のブックマーク ボタンをつける JavaScript」の続き。前回は、HTML コードの文字列を生成して innerHTML に流し込むってなゴリゴリなつくりになっていたので、今回はもうちょっとちゃんと DOM る。あと忘れていた URI エンコードもちゃんと実装。

/**
 * name: smb4clg.js
 * version: 0.1
 * creator: igeta
 */

/**
 * クラス名からエレメントを取得
 */
function getElementsByClassName(className, tagName, root) {
  tagName = tagName || "*";
  root = root || document;
  
  var classes = [];
  var tags = root.getElementsByTagName("*");
  for (var i=0; i<tags.length; i++) {
    var clsNames = tags[i].className.split(/\s+/);
    for (var j=0; j<clsNames.length; j++) {
      if (clsNames[j] == className) {
          classes.push(tags[i]);
          break;
      }
    }
  }
  return classes;
};

/**
 * 継承関数
 */
function inherit(subClass, superClass) {
  function inheritance() {}
  inheritance.prototype = superClass.prototype;
  subClass.prototype = new inheritance();
  subClass.prototype.constructor = subClass;
};

/**
 * ココログ用 SBM ボタン・カウンタを追加
 */
function SbmLink4Cocolog(sbms) {
  this.sbmLink4Cocolog(sbms);
}
SbmLink4Cocolog.prototype = {
  sbmLink4Cocolog: function(sbms) {
    this.services = sbms || []; //Array of SbmService
    this.blogName = encodeURIComponent(
      document.getElementsByTagName("h1")[0]
              .getElementsByTagName("a")[0]
              .innerHTML);
    this.entrys = getElementsByClassName("entry", "div");
  },
  getPosted: function(entry) {
    return getElementsByClassName(
             "posted", "p", entry)[0];
  },
  getEntryTitle: function(entry) {
    var h3 = entry.getElementsByTagName("h3")[0];
    var a  = h3.getElementsByTagName("a")[0];
    var mbTitle = a ? a.innerHTML : h3.innerHTML;
    return encodeURIComponent(mbTitle);
  },
  getPermalink: function(posted) {
    return getElementsByClassName(
             "permalink", "a", posted)[0]
             .href.replace('#', '%23');
  },
  createSbmSeparator: function() {
    var elm = document.createElement("span");
    elm.setAttribute("class", "separator");
    elm.innerHTML = "|";
    return elm;
  },
  createPostedSeparator: function() {
    return document.createElement("br");
  },
  append: function() {
    for (var i=0; i<this.entrys.length; i++) {
      var elm = this.getPosted(this.entrys[i]);
      elm.appendChild(this.createPostedSeparator());
      
      var permalink  = this.getPermalink(elm);
      var entryTitle = this.getEntryTitle(this.entrys[i]);
      elm.appendChild(this.services[0].createNode(
        permalink, entryTitle, this.blogName));
      
      for (var j=1; j<this.services.length; j++) {
        elm.appendChild(document.createTextNode(" "));
        elm.appendChild(this.createSbmSeparator());
        elm.appendChild(document.createTextNode(" "));
        
        elm.appendChild(this.services[j].createNode(
          permalink, entryTitle, this.blogName));
      }
    }
  }
};

/**
 * SBM リンク
 *
 * src: ボタン画像の URL
 * w  : ボタン画像の width
 * h  : ボタン画像の height
 */
function SbmService(src, w, h) {
  this.SbmService(src, w, h);
}
SbmService.prototype = {
  anchorTitle: "",
  imageAlt: "",
  buttonClass: "sbmButton",
  counterClass: "sbmCounter",
  SbmService: function(src, w, h) {
    this.button = new Image();
    this.button.src = src;
    if (typeof(w) != 'undefined'
        && typeof(h) != 'undefined') {
      this.button.width = w;
      this.button.height = h;
    }
  },
  getAnchorHref: function(permalink, entryTitle, blogName) {
    //Override me!
  },
  getCounter: function(permalink) {
    //Override me!
  },
  createButton: function() {
    var elm = document.createElement("img");
    elm.setAttribute("src", this.button.src);
    if (this.button.width > 0 && this.button.height > 0) {
      elm.setAttribute("width", this.button.width);
      elm.setAttribute("height", this.button.height);
    }
    elm.setAttribute("alt", this.imageAlt);
    elm.className = this.buttonClass; //IE のバグ回避
    return elm;
  },
  createCounter: function(permalink) {
    var img = this.getCounter(permalink);
    var elm = document.createElement("img");
    elm.setAttribute("src", img.src);
    elm.setAttribute("alt", this.imageAlt);
    elm.className = this.counterClass; //IE のバグ回避
    return elm;
  },
  createNode: function(permalink, entryTitle, blogName) {
    var a = document.createElement("a");
    a.setAttribute("href", this.getAnchorHref(
      permalink, entryTitle, blogName));
    a.setAttribute("title", this.anchorTitle);
    a.appendChild(this.createButton());
    a.appendChild(this.createCounter(permalink));
    return a;
  }
};

/**
 * はてなブックマーク
 */
function Hatebu(src, w, h) {
  this.SbmService(src, w, h);
  this.anchorTitle = "このエントリーを含むはてなブックマーク";
  this.imageAlt = "このエントリーを含むはてなブックマーク";
} inherit (Hatebu, SbmService);
Hatebu.prototype.getAnchorHref = function(permalink) {
  return 'http://b.hatena.ne.jp/entry/' + permalink;
}
Hatebu.prototype.getCounter = function(permalink) {
  var cnt = new Image();
  cnt.src = 'http://b.hatena.ne.jp/entry/image/' + permalink;
  return cnt;
};

/**
 * Buzzurl
 */
function Buzzurl(src, w, h) {
  this.SbmService(src, w, h);
  this.anchorTitle = "Buzzurlにブックマーク";
  this.imageAlt = "Buzzurlにブックマーク";
} inherit (Buzzurl, SbmService);
Buzzurl.prototype.getAnchorHref = function(permalink) {
  return 'http://buzzurl.jp/entry/' + permalink;
}
Buzzurl.prototype.getCounter = function(permalink) {
  var cnt = new Image();
  cnt.src = 'http://api.buzzurl.jp/api/counter/' + permalink;
  return cnt;
};

/**
 * livedoor clip
 */
function LivedoorClip(src, w, h) {
  this.SbmService(src, w, h);
  this.anchorTitle = "この記事をクリップ！";
  this.imageAlt = "この記事をクリップ！";
} inherit (LivedoorClip, SbmService);
LivedoorClip.prototype.getAnchorHref = function(
  permalink, entryTitle, blogName) {
  return 'http://clip.livedoor.com/redirect?link='
       + permalink + '&title='
       + entryTitle + '%20-%20' + blogName
       + '&ie=euc';
}
LivedoorClip.prototype.getCounter = function(permalink) {
  var cnt = new Image();
  cnt.src = 'http://image.clip.livedoor.com/counter/' + permalink;
  return cnt;
};

/**
 * window onload 時のイベント ハンドラ
 */
function window_onload() {
  var sbmlink = new SbmLink4Cocolog([
    new Hatebu(/* はてブボタンの URL */,
      16, 12),
    new Buzzurl("http://buzzurl.jp/static/image/api/icon/add_icon_mini_10.gif"
      ),
    new LivedoorClip("http://parts.blog.livedoor.jp/img/cmn/clip_16_12_w.gif",
      16, 12)
  ]);
  sbmlink.append();
};

/* エントリ ポイント */
if (window.addEventListener) {
  window.addEventListener("load", window_onload, false);
}
else if (window.attachEvent) {
  window.attachEvent("onload", window_onload);
}

関連記事

• sbm4clg.js version 0.2 (2007/05/04)
• sbm4clg.js version 0.3 (2007/09/21)