つーさのくーかん

TwitterはJSONをくれるので、それを使ってページを表示してみましょう。
Ajaxの使い方はわかりますか？　いいえ、必要ありません。JSONPがあるので万事オッケーです。

今回は、僕のブログで右側に表示されてる twitter.com みたいなやつを表示してみるのを考えます。

まずは、僕のツイートをとってきましょう。
Twitterのリファレンス https://dev.twitter.com/docs/api/1/get/statuses/user_timeline を見ます。
ふむふむ、いろんなパラメータがあるのがわかります。
で、とりあえず、僕のツイートのjson形式を得るには↓でいいことがわかります。
http://api.twitter.com/1/statuses/user_timeline/ttsuki.json
\\uでエンコードされててなんか見た目おぞましいですが最近の僕のツイート20件くらいが返ります。

で、Twitterは、このURLそのままでjsonpも使えます。すばらしい。
http://api.twitter.com/1/statuses/user_timeline/ttsuki.json?callback=twitterLoaded
このような引数を渡すと、生成したjsonを引数にfunctionを呼び出すスクリプトを返してくれます。
さっきのURLの内容と比べて、先端付近が変化してるのがわかりますね！

というわけで、これを受けるためのスクリプトをあらかじめ準備します。

function twitterLoaded(json) {
  // テンプレ
  var format = '<li title="%TEXT% [%DATE% (%AGO%)]">%TEXT% <span class="side_pubtime">(%AGO%)</span></li>';

  // 中身を用意。
  var items = "<ul>";
  for (var i in json) {
    var e = json[i]; // ここで得られるeの中身はAPIリファレンスのExample Requestを参照
    items += format
      .replace(/%TEXT%/g, e['text'])
      .replace(/%DATE%/g, formatDate(new Date(e['created_at'])))
      .replace(/%AGO%/g, formatAgo(new Date(e['created_at'])));
  }
  items += "<li><a href='http://twitter.com/ttsuki/'>もっと見る</a></li>";
  items += "</ul>";

  // #side_twitter の 中身を入れ替える。
  document.getElementById("side_twitter").innerHTML = items;
}

function formatDate(d) { // Dateオブジェクトから"yyyy-mm-dd hh:mm"を作ります。
  return d.getFullYear() + '-' 
    + ('0' + (d.getMonth() + 1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2) + ' '
    + ('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2);
}

function formatAgo(d) { // Dateオブジェクトから "ほげ分前" を作ります。
  var s = (new Date().getTime() - d.getTime()) / 1000;
  if (s < 60) return "じゃすとなう";
  if (s < 3600) return Math.floor(s / 60) + "分前";
  if (s < 172800) return Math.floor(s / 3600) + "時間" + (s % 3600 > 1800 ? "半" : "") + "前";
  return Math.floor(s / 86400) + "日前";
}

つたないスクリプトですがこんなのを用意してみました(実際このサイトで使ってるやつです)。
あとは、このtwitterLoadedが定義されてる状態で、

とかやったれば、twitterのjsonpが、僕がいま定義したfunctionを呼んでくれて、
かくしてHTMLの入れ替えができましたー。ぱちぱちぱち。
(実際、この記事のHTMLソースの下から25行目あたりでまとめて呼んでます)

というわけです。非常にカンタンですね！
是非、独自のかわいいTwitterウィジェットを作ってみましょう。
半分JSONPの使い方の説明になってしまいました。

参考：
もちろん、僕のツイート以外にも特定のハッシュタグ検索結果を表示することもできます。
APIリファレンスで、Requires Authentication? → Supported*1 になってるのはいけます。
Yesって書いてあるのは、そもそも認証しないとまったく取得できないのであきらめるか、
自分のアカウントで認証したプロキシを……はい、どう考えても危ないのでやめましょう。
そもそも、一般のWebに対して公開してはいけないものが含まれる可能性もあるのであきらめましょう。

参考：
JSONはドメインによる制限を受けないのでCSRFできますし、
JavaScriptインジェクション攻撃を受ける可能性があります。
信頼できないサイトからJSON引っ張ってこないようにね！

last.fm もいっしょ！

僕のブログではlast.fmも似たようなことをやっています。
一昔前にaudioscrobbler として、いろんなブログでNow Playingを表示してたアレです。

APIリファレンスは http://www.lastfm.jp/api/show/user.getRecentTracks 。
Other Formatsのとこで、APIキー要らないとか書いてあるんですが、jsonの方はなんか動きません！　ひどい！
なので、しぶしぶAPIキーを取得して、フツーに↓のAPIを呼ぶことにします。こっちはJSONもOK。
http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=hogehoge&api_key=fugafuga

サーバから返ってくるものは、直接見た方が早いですね。
僕のとこでは、(一応)APIキーを隠すためにプロキシhttp://tu3.jp/xternal/lastfm.jsonが動いてます。
こっからほしい値をさっきみたいに適当にフォーマットしてあげればオッケー。
lastfmLoaded に関してはソースhttp://tu3.jp/xternal/xternal.jsを見てね！

まとめ

超簡単にtwitterとlast.fmの情報が表示できた。
もちろんスタイルシートとかも使い放題です。
是非、かわいいウィジェット？　ガジェット？を作ってください！

そうだ、何秒おきに更新とかやろうと思うとAjax要ります。
おんなじ感じで、すぐできるとは思います。やってみたら教えてください！

ライセンス：この記事中のソースコード部分はNYSLです！
逆にこの記事で僕が危ないことをやっちゃっている場合はこっそり教えてもらえるとうれしいです。

おわり。