Twitterのツイートをウェブサイトやブログに表示するJavaScript × JSON に触発されて、ブログの更新情報も同じように表示する JavaScript × JSON を作ってみた。

1. 更新情報の json ファイルを出力。
Movable Typeの「インデックステンプレートを作成」から
タイトル「MTCallback」
出力ファイル名「mt.json」
テンプレートの種類「カスタムインデックステンプレート」
で以下のソースを貼り付けて保存。json ファイルを出力。

MTCallback([
<mt:Entries glue=",">
{
"created_at":"<$mt:EntryDate format="%x %X"$>",
"title":"<mt:EntryTitle escape="url" $>",
"url":"<mt:EntryPermalink$>"
}
</mt:Entries>
]);

記事を更新するごとに公開日時、タイトル、URLを含んだ json ファイルを出力してくれる。タイトルは URLエンコード化。

2. あとは、ページにjsonファイルまでのブログURLを設定した三行のソースを貼り付けるだけ。JavaScriptファイル (blogger.js) はダウンロードして使ってもOK。

<ul id="blog_update_list"></ul>
<script type="text/javascript" src="http://api.thingslabo.com/MTCallback/blogger.js"></script>
<script type="text/javascript" src="ブログURL/mt.json?callback=MTCallback"></script>

JavaScriptのソース (blogger.js) は、こんな感じの10行。

function MTCallback(MT) {
  var statusHTML = [];
  for (var i=0; i<MT.length; i++){
    var title = decodeURIComponent(MT[i].title);
    var url = MT[i].url;
    var date = MT[i].created_at;
    statusHTML.push('<li><a href="'+url+'">'+title+'</a> '+date+'</li>');
  }
  document.getElementById('blog_update_list').innerHTML = statusHTML.join('');
}

ブログサービスでも json ファイルで更新情報の出力に対応してほしいゾ。