JavaScript、Ajax、HTML5(API)、Ruby…Web及び関連技術の実験&情報公開&制作物紹介。

JSON Feed のススメ

| トラックバック(3)

更新情報の配信といえば、RSSやAtomが有名ですよね。
その中で最近、「JSON Feed」なる言葉を目にした(耳にした)人も少なくないはず。

JSON Feed というのは、誤解を恐れずに言えば「JavaScriptで記述された情報配信フォーマット」です。
そのまま「外部JavaScriptファイル」として<script>タグで読み込むことができ、スクリプトやAjaxで加工することができます。

ということで、このLabにも付けてみました。
http://www.antimon2.atnifty.com/feed.js
せっかくなので、Movable Type 用の「JSON Feed テンプレート」を公開、ご自分のブログへの設置方法も解説します。

JSON Feed テンプレート

テンプレートの全文を以下に示します:


if(typeof(MovableTypeJsonFeed) == 'undefined') MovableTypeJsonFeed = new Array();
MovableTypeJsonFeed["<$MTBlogURL encode_js="1"$>"] = {
  "title": "<$MTBlogName remove_html="1" encode_js="1"$>",
  "link": "<$MTBlogURL encode_js="1"$>",
  "id": "tag:<$MTBlogHost exclude_port="1" encode_xml="1"$>,2006:<$MTBlogRelativeURL encode_xml="1"$>/<$MTBlogID$>",
  "updated": "<MTEntries lastn="1"><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></MTEntries>",
  <MTIfNonEmpty tag="MTBlogDescription">"subtitle": "<$MTBlogDescription remove_html="1" encode_js="1"$>",</MTIfNonEmpty>
  "generator": "http://www.sixapart.com/movabletype/",
  "entry": [
<MTEntries lastn="15">
          {
              "title": "<$MTEntryTitle remove_html="1" encode_js="1"$>",
              "link": "<$MTEntryPermalink encode_js="1"$>",
              "id": "<$MTEntryAtomID$>",
              "summary": "<$MTEntryExcerpt remove_html="1" encode_js="1"$>",
              "author": "<$MTEntryAuthorDisplayName encode_xml="1"$>",
              <MTEntryCategories>"category": "<$MTCategoryLabel encode_js="1"$>",</MTEntryCategories>
              "published": "<$MTEntryDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$>",
              "updated": "<$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$>"
            }<MTEntriesFooter> <MTElse>, </MTElse> </MTEntriesFooter>
</MTEntries>
         ]
};
if(typeof(MovableTypeJsonCallback) != 'undefined'){
   MovableTypeJsonCallback(MovableTypeJsonFeed["<$MTBlogURL encode_js="1"$>"])
}

JSON Feed 設置方法

以下の手順に従ってください:

  1. MT管理メニューの〈設置したいブログ〉→「テンプレート」をクリック。
    「インデックス」タブが選択されていなければ「インデックス」を選択
  2. 「テンプレートを新規作成」をクリック
  3. それぞれの入力欄に以下のように記入:
    テンプレート名
    JSON Feed (この通りでなくても構いません)
    出力ファイル名
    feed.js
    このテンプレートにリンクするファイル
    (空欄のままで構いません)
    テンプレートの内容
    (上記のテンプレート全文をコピー&ペースト)
  4. 「保存」をクリック

JSON Feed のURLは <$MTBlogURL$>feed.js になります。
以降、ブログを再構築すれば、RSSやAtomのように JSON Feed が毎回更新されます。

技術情報

JSON Feed は、まだ特に確定した仕様がないようです。
その中で今回は、TypePad用に公開されている JSON Feed テンプレートを参考にしました。
TypePad も Movable Type と同じ Six Apartが開発しているものなので、ポーティングは容易でした。
以下に、参考にした点・TypePad用から変更した点を記述しておきます。

  • TypePadとMTで共通のタグ・属性はそのまま利用した。
  • 基本的にTypePad用AtomテンプレートをそのままJavaScript用に記述しなおしただけだったので、MTに存在しないTypePad独自タグ・属性が使われている部分は既存のMT用Atomテンプレートの内容をそのまま移植した。
  • 「TypePad?」という記述を全て「MovableType?」に置換した。

なお、元にしたのがTypePad用の JSON Feed テンプレートなので、TypePadと同様にコールバックファンクションが使用できます。
MovableTypeJsonCallback()という名前のJavaScriptファンクションを用意しておけば、<script>タグで読み込んだMovableTypeのJSON Feed記事情報を動的に処理することも可能です。
詳しくは、TypePad用の記事JSONフィードを使って、ブログのまとめページをつくろうを参照してください(「TypePadJsonCallback()」を「MovableTypeJsonCallback()」と読み替えてください)。
このブログでも、何か有用なサンプルができたら紹介したいと思います。

トラックバック(3)

ミューラァlog/SPS-V - JSONフィードを使って新着情報を表示する (2007年1月15日 15:25)

Typepadで「JSONフィード」なる言葉を見かけました。 Six Apart - TypePad inside: JSONフィードを使っ... 続きを読む

INSTINCのおもちゃ箱 - JSONフィードで更新情報掲載 (2007年4月 1日 00:22)

instincトップページに更新情報なるものを載せるにあたって、とってもラクチン... 続きを読む

WEBデザイン BLOG - Movable TypeにGoogle AJAX Search APIを利用した検索機能を実装 (2007年5月 4日 08:01)

Movable Typeのサイト検索機能をパワーアップするのにはいろんな方法があります。今回このサイトではGoogle AJAX Search APIを利... 続きを読む

カテゴリ

月別 アーカイブ

OpenID対応しています OpenIDについて

このブログ記事について

このページは、あんちもん2が2006年12月26日 23:53に書いたブログ記事です。

ひとつ前のブログ記事は「CatSort ver.0.41 - エントリー数のソートを修正」です。

次のブログ記事は「FeedBurner 始めました。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。