Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

WebService 開発実績

SBM Common API を作りました

投稿日:


たくさんあるSBM(ソーシャルブックマーク)サービスのユーザー数を簡単にブログに表示したり、各SBMのユーザー数をJSON(P)形式でまとめて取得できるAPIを作ってみました。
はてなブックマーク、del.icio.us、livedoorブックマーク、Yahoo!ブックマーク、Buzzurl、FC2ブックマーク、@niftyクリップ、POOKMARK Airlines、の8つのサービスに対応しています。
これを作るキッカケは、すで書いた事があります。

冒頭に書いた各SBMのバラバラなAPIを統一するサービス(リダイレクターというかプロキシというか)ができないかなぁと思ったわけで。

via: 各ソーシャルブックマークサービス(SBM)のブックマーク数画像表示APIを調べた ::: creazy photograph

各SBMごとに呼び出しのインターフェイスが統一されていなかったり、RSSやJSONなどのAPIが用意されていなかったりするので、「なるべく多くのSBMを表示してみよう」なんて思っても調べるのが大変だったりするのです。
そこで、なるべく同じインターフェースで被ブックマーク数を取得できるようなAPIが必要となってくるわけです。
目次

  1. 1)各SBMの被ブックマーク数を簡単に張り付けられるブログパーツ
  2. 2)各SBMの被ブックマーク数をまとめて取得できるJSON(P) API
  3. 3)各SBMのブックマーク表示画面のURLにリダイレクトするURL
  4. 4)各SBMのブックマーク追加画面のURLにリダイレクトするURL

1)各SBMの被ブックマーク数を簡単に張り付けられるブログパーツ

とりあえず、全部盛りで簡単にブログに設置しちゃいたい初心者向けのパーツです。
SBMブログパーツ設置例
こんな感じに表示できます。
使い方
表示させたい部分に下記scriptタグを貼り付けるだけです。

<script type="text/javascript" src="http://labs.creazy.net/sbm/counter/js"></script>

このスクリプトは張り付けられたページのURLをリファラーから判断して、そのURLに対する被ブックマーク数を表示します。
下記のようなコードを出力します。

document.open();
document.write(
'<a href="{ブクマ追加URL}" target="_blank" title="〜に追加"><img src="{アイコンURL}" alt="〜に追加" border="0" /></a><span>[<a href="{ブクマ確認URL}" target="_blank">{ブクマ数}</a>]</span> '
(各SBM分繰り返し)
);
document.close();

CSSでスタイルを付けたい場合は、

<p id="sbm_buttons"><script type="text/javascript" src="http://labs.creazy.net/sbm/counter/js"></script></p>

などど、id(かclass)付きのブロック要素で囲んでおいて、

#sbm_buttons {
margin: 0;
padding: 0;
}
#sbm_buttons img {
height: 16px;
vertical-align: middle;
}
#sbm_buttons span {
font: 12px/12px Verdana,sans-serif;
vertical-align: middle;
}

のようにしてやれば良さそう。
パフォーマンスを考慮した使い方
上の例では document.write で直接書き出していましたが、SBMやこのAPIで使っているレンサバの負荷によってはレスポンスが遅くなってしまうかもしれません。
表示を止めないために、body直前でscriptを呼び出す形式も作りました。

<p id="sbm_buttons"></p>
(snip)
<script type="text/javascript" src="http://labs.creazy.net/sbm/counter/js?target_id=sbm_buttons"></script>
</body>
</html>

target_idパラメータにHTMLを流し込みたい要素のIDを入れてやれば、document.getElementById'(‘id’).innerHTML で流し込みます。
出力されるHTMLは同じなので省略します。

2)各SBMの被ブックマーク数をまとめて取得できるJSON(P) API

やりたい事は名前の通りなのでインターフェイスだけ紹介します。
リクエスト

http://labs.creazy.net/sbm/counter/json?callback={コールバック関数名}&url={URL}

callbackにはJSONPで取得したい場合のコールバック関数を指定します。
urlには被ブックマーク数を調べたいURLをURLエンコードして渡します。
レスポンス

コールバック関数名(
{ "サービス識別子" :
{ "name" : "サービス名"
,"img" : "被ブックマーク数画像URL"
,"url" : "ブックマーク詳細URL"
,"count" : ブックマーク数
,"ico" : "サービス毎アイコンURL"
},
(ブックマークサービス分繰り返し)
}
);

実際に見た方が早いと思いますので、Yahoo!JapanのJSONをご覧下さい。
Yahoo!Japanのブックマーク数JSONP
サービス識別子には、下記8つがあります。

delicious,hatena,livedoor,yahoo,buzzurl,fc2,nifty,pookmark

というわけで、1)のブログパーツでは柔軟な出力ができないので、このAPIを使えばJSONP経由でデータを取得してJavaScriptで好きなフォーマットに成形できます。
他にも色々使い道はありそうですね。何かアイデアある人はでひ作ってみてください。

3)各SBMのブックマーク表示画面のURLにリダイレクトするURL

はてブでは http://b.hatena.ne.jp/entry/{URL} で表されるブックマーク表示画面のURLが、各SBMでバラバラなので覚えやすい様にリダイレクターを作ってみました。
URL

http://labs.creazy.net/sbm/entry?service={サービス識別子}&url={URL}

サービス識別子には、下記8つがあります。

delicious,hatena,livedoor,yahoo,buzzurl,fc2,nifty,pookmark

4)各SBMのブックマーク追加画面のURLにリダイレクトするURL

はてブでは http://b.hatena.ne.jp/append?{URL} で表されるブックマーク追加画面のURLが、各SBMでバラバラなので覚えやすい様にリダイレクターを作ってみました。
URL

http://labs.creazy.net/sbm/add?service={サービス識別子}&url={URL}

サービス識別子には、下記8つがあります。

delicious,hatena,livedoor,yahoo,buzzurl,fc2,nifty,pookmark

あとがき

とりあえず、出してしまったけどまだまだバギーな気がします。
お気付きの点があればお知らせください。
あと、同じような仕組みはすでに存在しているようですが、APIである事が重要(特にブログ利用される事を考えるとJSONP必須)だと思ったので公開に踏み切りました。
レンサバが貧弱なので、アクセス集中するとレスポンス遅れるかもしれません。
(そういう事は流行ってから心配する事にしました。)

更新履歴

[追記:2008/07/22]
SBM Common API (ver1.1) ブックマーク表示画面、追加画面のURLリダイレクターを追加
・3)4)としてブックマーク表示画面、ブックマーク追加画面のURLへのリダイレクターを公開しました。
・上記リダイレクター公開に合わせて、1)2)のAPIでレスポンスとして返すURLもリダイレクターのURLに変更しました。
・このエントリーが長くなってきたので目次とページ内リンクを作りました。
[追記:2008/08/25]
DeliciousのリニューアルにともなくAPI変更も対応しました。
自作のAPIを使用しています。
Delicious2.0 の被ブックマーク数画像取得APIを作りました

-WebService, 開発実績

執筆者:


  1. SBM Common API貼ってみました

    ブログ回遊の楽しみは、新たな知見に出会うこと。
    そし…

  2. M.C.P.C. より:

    SBM Common APIの対象URLをクエリー文字列で指定

    SBM Common API を作りました ::: creazy photograph [creazy.net] このスクリプトは張り付けられたページのU…

  3. はてブに各ソーシャルブックマーク数と円グラフを表示するGreasemonkey

    http://furukawa.rikuo.googlepages.com/SBM_pie_chart.user.js (例:http://b.hate…

  4. WordPress再インストール、もろもろカスタマイズなど

    photo credit: drustar
    どうも投稿がうまく行かず管理画面が真っ白になってしまう時があるので、WordPressを再インストールするこ…

comment

メールアドレスが公開されることはありません。

関連記事

ブログの更新を自動通知する仕組みの違い Linkback/TrackBack/PingBack/RefBack

昨日トラックバックに代わる仕組みが欲しいと思って、サクッと「LinkBack.JS」なんてものをでっち上げたんですが、その中で@akkyさんからコメントで良い情報を頂きました。 Technoratiの …

やまざきメソッドが雑誌に掲載されていました

風の噂だけで聞いていたのですが、今日ようやく紀伊国屋書店で発見しました。 不良のためのパソコン術―説明書には絶対載せられない極悪ワザ100 (アスペクトムック) (アスペクトムック) なんで、この本に …

no image

【公開停止】TwitterのAPI制限を回避するためのYahoo!Pipes

【2009/10/21:追記】 このエントリーで紹介しているYahoo!PipesはTwitterの規約に違反しているため、公開停止としました。詳しい解説は下記エントリーをご確認ください。 Twitt …

YouTube HD Suite を修正しました(2009-02-13)

YouTubeをとにかく最高画質のHDで楽しみたい人のためのGreaseMonkeyスクリプト「YouTube HD Suite」を更新しました。 主な変更点は下記の通りです。 1)修正:再生ページ( …

YouTube HD Suite v3.5.4(YouTube仕様変更対応)Google Chromeへのインストール方法

YouTubeの内部仕様変更により動作不良になっていましたので、YouTube HD Suiteのアップデートを行いました。対応が遅れまして申し訳ありません…。 インストールは下記URLか …

スポンサードリンク

スポンサードリンク