当サイトで生成している RSS（野良feed）：

dtpwiki.jpで提供しているサービス：

DTPWiki（DTP・印刷関連ドキュメント共有）
Planet DTP@jp（DTP・印刷従事者 blog最新投稿一覧）
Planet Inddscript（InDesign Script関連最新投稿一覧）
印刷会社はてなブックマークランキング（印刷企業番付）
印刷会社Twitterフォロワー数ランキング（印刷企業番付）
Windows JIS90/JIS2004確認Webアプリ
ドット絵メーカー（source）
EDGE Now!の覆面の中の人暴露（Source）
はてな牧場（説明）

« CGI::Application::Plugin::Authenticationが入らない | トップページ | InDesign Conference開催後におけるネットでの情報 »

2007.09.14

はてなお気に入りAPIを使ってブログパーツ作例

機能変更、お知らせなど - はてなの日記 - はてなのお気に入りユーザーの情報を取得できる「お気に入りAPI」（Favorites API）を公開しました [hatena.g.hatena.ne.jp]

本日、はてな内のお気に入りのユーザー情報を取得できる「お気に入りAPI」（Favorites API）を公開しました。

ということで、

はてなお気に入りAPIを使ってブログパーツ？を作ってみたけれども、僕の作り方が悪いので、jsのファイル名が固定なのです。ｗ

filename: hatena_fav.js （UTF-8で保存してね）

/* --------------------------------------------------------------
   hatena_fav.js : hatenaお気に入り画像表示ブログパーツ
   (要prototype.js)
   (c)CL 2007.9.13
   ----------------------------------------------------------- */
 
 
// hatenaFav: はてなお気に入りアイコン表示オブジェクト
 
var hatenaFav ={
  
  replaceId: 'hatena_fav',
  
  onLoad: function() {
    hatenaFav.showHtml ();
    hatenaFav.addScript();
  },
  
  showHtml: function () { // scriptタグの位置特定、callback差込用HTMLを挿入
    var objElement = document.createElement('span'); 
    objElement.innerHTML=''
    + '<div id="' 
    + this.replaceId
    + '"></div>'
    + '';
    var scripts = document.getElementsByTagName('script');
    var objScript = scripts[ scripts.length - 1 ];
    for (var i = 0; i < scripts.length; i++) {
      if ( (scripts[i].getAttribute('src') ) &&
           (scripts[i].getAttribute('src').match(/hatena_fav.js$/) ) ){
        objScript = scripts[i]
      }
    }
    objScript.parentNode.insertBefore(objElement, objScript);
  },
  addScript: function() { // JSONPをサーバにリクエスト
    var msec = (new Date()).getTime();
    var script = document.createElement('script'); 
    script.id = 'http://s.hatena.ne.jp/'
              + hatenaUser
              + '/favorites.json?callback=hatenaFav.showList';
    //        + '&cache=' + msec ;
    script.charset = 'UTF-8';
    script.src     = script.id; 
    document.lastChild.appendChild(script);
  },
  
  showList: function(json) { // JSONPコールバック実行部
    if (json == null) return;
    var loop = json.favorites;
    var html = '';
    for (var i = 0; i < loop.length; i++) {
      var hatenaId = loop[i]['name'];
      html += '<a href="http://d.hatena.ne.jp/'
            + hatenaId
            + '/" target="_blank">'
            + '<img src="http://www.hatena.ne.jp/users/'
            + hatenaId.slice(0, 2)
            + '/'
            + hatenaId
            + '/profile_s.gif" width="16" height="16"'
            + ' border="0" title="id:'
            + hatenaId 
            + '" alt="'
            + hatenaId 
            + '" /></a>';
    }
    if ( $(this.replaceId) ) {
      Element.update( $(this.replaceId), html );
    }
  }
}
 
// onLoadイベントハンドラに追加（prototype.js）
 
Event.observe(window, 'load', hatenaFav.onLoad, false);

貼るときは、

  <div class="counter" id="hatena_fav_wrapper"
    style="text-align:left;" align="left">
    <div style="background-color:#ddd; padding:1px; font-size:12px;text-align:center;"><a
    href="http://blog.dtpwiki.jp/dtp/2007/09/api_60ed.html">はてなお気に入りAPI</a></div>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
       hatenaUser = 'C_L';
    </script>
    <script type="text/javascript" charset="utf-8"
      src="hatena_fav.js"></script>
  </div>

貼ってみると、