第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を作ったエントリーも内容的に参考にしたのでご一読を。
第5回: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 という2種類の日付フォーマットに対応しているのは細かいけどありがたい。

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: 第5回:twitter の JavaScript Badge を改造する

まとめ

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

・第14回:JaikuのJavaScript BadgeをJSONから作ってみる
第13回:URLエンコードとURLデコードを簡単にするブックマークレット
第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
第11回:引用(blockquote)を簡単にするブックマークレット
第10回:Windowsフォントをアンチエイリアスでキレイに見せる方法
第9回:閲覧しているサイトへのリンクタグを生成するブックマークレット
第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ
第7回:サムネイル作成APIをJavaScriptで簡単に切り替える方法
第6回:TinyURL の遷移先が怖くて開けない場合の対処法
第5回:twitter の JavaScript Badge を改造する
第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる
第3回:JavaScriptで画像サイズと合ったポップアップウィンドウを開く
第2回:タグに関わる基本的な事
第1回:CSSで画像にborderをつけてみる

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil