第14回：JaikuのJavaScript BadgeをJSONから作ってみる

JaikuがGoogleに買収されるという事でにぎわっていますね。

Googleは、フィンランドのヘルシンキを拠点とするモバイルソーシャルネットワーキングプロバイダJaikuを買収する。Jaikuは、Twitterの競合企業としても知られている。

via: グーグル、Twitterのライバル企業Jaikuを買収へ:ニュース – CNET Japan

買収と言っても、

What does that mean? First and foremost, we’re of course continuing to support our existing users.

via: Jaikido Blog | We’re joining Google

サービスはそのまま継続するようなのでご安心あれ。
こうなるとJaiku、もしかしたら今後ブレイクするかもなぁなんて気がするわけです。オレは、だいぶ前にとりあえずアカウントとったものの周りにユーザもいない事から、ただブログとかTwitterのログを流すだけの存在になっていてもったいないなぁと思ってました。
で、これからユーザが増える（かもしれない）し、ブログとの親和性を高めるにはやっぱりBadge（ブログパーツ）が必要だろう！と思って公式のbadgeをチェックしたんですが、
　・Jaiku | Badges（Flash版）
　・Jaiku | Presence Badge（JS版）
Flashは見た目良い感じなんだけど日本語表示されないし、JSは画像で出力される微妙な作りなのでこりゃダメだと。
じゃあ、自分で作りましょ。

参考ページ

Here’s the javascript to do it. I have given an entire HTML page to show you exactly what bits are needed – the javascript in the header, the div tag to receive the contents.

via: PluggedOut Blog » Blog Archive » Javascript JSON Script for Jaiku

UKのデベロッパーが既に作ってたので参考にしました。
それから、手前味噌ですが前に書いたTwitterのJavaScript Badgeを作ったエントリーも内容的に参考にしたのでご一読を。
・第５回：twitter の JavaScript Badge を改造する

user’s streamのJSONフォーマット形式の中身をチェック

こんなURLを叩くとJSON形式で取得できます。

http://スクリーン名.jaiku.com/feed/json
(JSON 形式で取得)

via: Jaiku API 仕様書

中身はこんなフォーマットです。

{
"title" : "Jaiku | Latest from ニックネーム",
"url": "ユーザのJaikuホームURL",
"stream": [
{
"id": "数字のID",
"title": "内容",
"content": "",
"icon": "アイコンファイルのURL",
"url": "詳細ページのURL（Jaikuの場合はコメントのページで、外部RSSを読み込んだ場合はそのParmalink）",
"created_at": "投稿時間（YYYY-MM-DDTHH24:MI:SS GMT）",
"created_at_relative": "投稿経過時間（5 days, 18 hours ago）",
"comments": "コメント数",
"user":
{
"avatar": "ユーザのプロフィール画像URL",
"first_name": "ユーザのファーストネーム",
"last_name": "ユーザのラストネーム",
"nick": "ユーザのニックネーム",
"url": "ユーザのJaikuホームURL"
}
},
・・・最大20件繰り返し・・・
]
}

Twitter と同じような感じですね。
・content に値が入らないのはなんでだろう？
・created_at と created_at_relative という２種類の日付フォーマットに対応しているのは細かいけどありがたい。
JSONが分かったところで、次はJSのコードを作ります。

Jaiku JavaScript badge

外部JSにしておく前提で書きます。

/**
* Jaiku JavaScript badge
*/
// modify to suit (http://{this part}.jaiku.com/)
var jaiku_user_name = "yager";
// set a limit to render
var jaiku_limit = 5;
// JSON Callback Function
function jaikuCallback(obj) {
var elm = document.getElementById('jaiku');
var html = '<ul>';
for ( i=0; i<obj.stream.length && i<jaiku_limit ; i++) {
var entry = obj.stream[i];
html
+= '<li>'
+  '<a href="' + entry.url + '" target="_blank">' + entry.title + '</a><br />'
+  '<span>' + entry.created_at_relative + '</span>'
+  '</li>';
}
html += '</ul>';
elm.innerHTML = html;
}
// execute JSON API
document.write(
'<scr'+'ipt '
+'type="text/javascript" '
+'src="http://'+jaiku_user_name+'.jaiku.com/feed/json?callback=jaikuCallback">'
+'</scr'+'ipt>'
);

jaiku_user_name と jaiku_limit を適宜変更して、「jaiku.js」とかで保存。（もちろんUTF-8でね。）
HTMLからの呼び出しはこんな感じにします。

<div id="jaiku"></div>
・・・色々HTML・・・
<script type="text/javascript" src="/js/jaiku.js"></script>
</body>
</html>

こちらに実装したサンプルがあります。
参考にしたPluggedOutでは、window.onloadから関数呼び出ししてるけど、すでにonload使っているサイトもあるだろうからbodyの最後に書くしかないかなと思います。あ、bodyの最後に書くのはJaikuのサーバが重い場合の対処です。以下参照。

twitter 流行り過ぎかしらんけど結構レスポンス遅い時があるけど、 JSONP が返ってこなくて画面が固まっちゃう事があるので script タグは body の一番最後に置いとくと影響が少ない。

via: 第５回：twitter の JavaScript Badge を改造する

まとめ

デザインは html の部分を変更すれば可能です。
コメントと時間以外にも、JSONで取得できる項目なら表示可能なので色々カスタマイズできますね。

第14回：JaikuのJavaScript BadgeをJSONから作ってみる

参考ページ

user’s streamのJSONフォーマット形式の中身をチェック

Jaiku JavaScript badge

まとめ

関連エントリー