TypePad 法人

JSONフィードとは？

JSONフィードを利用することで、ブログの新着記事の情報を、他のWEBページに組み込んで表示することができます。JSONフィードは、Javascript形式のファイルで、ブログが更新されると自動的に更新されます。このJavascript形式のJSONフィードを、他のページのHTMLでスクリプトとして読み込み、処理を記述することで利用します。

JSONフィードは、各ブログごとに feed.js というファイルで公開されています。

例：　http://goodpic.typepad.jp/sample/feed.js

JSONフィードを利用する

JSONフィードは、通常のJavascriptとして読み込んで、自由に処理を記述することが可能です。例えば、上記のサンプルのJSONフィードを読み込むには、以下のような<script>タグを、HTMLに記述します。

<script type="text/javascript" src="http://goodpic.typepad.jp/sample/feed.js" ></script>

JSONフィードを読み込んだ後は、通常のJavascriptのオブジェクトとして記事情報のデータなどにアクセスすることが可能です。

例：

ブログのタイトル
TypePadJsonFeed["http://goodpic.typepad.jp/sample/"].title

最も最近の記事の情報
TypePadJsonFeed["http://goodpic.typepad.jp/sample/"].entry[0].title
TypePadJsonFeed["http://goodpic.typepad.jp/sample/"].entry[0].link
TypePadJsonFeed["http://goodpic.typepad.jp/sample/"].entry[0].summary

デフォルト・ファンクションを利用する

上記のようにJavascriptのオブジェクトとして利用する以外にも、より簡単にJSONフィードを利用する方法があります。TypePadのJSONフィードでは、TypePadJsonCallback()というファンクションが、デフォルトで設定されています。このファンクションの中身を、JSONフィードを読み込むHTMLで記述することで、JSONフィードが読み込まれた際に、コールバック的にファンクションを実行することができます。これは、JSONPとよばれているアイデアに近いものです。

具体的な例を以下に示してみます。TypePadJsonCallback()というファンクションを定義して、読み込んだJSONフィードの記事情報を、HTML内に動的に組み込んで表示します。<div id="matome"></div> というHTMLタグの場所に、ブログの記事情報を表示します。

<script type="text/javascript">
<!--

  function TypePadJsonCallback(data) {
  
    var content = document.getElementById("matome");
  
    var mydiv  = document.createElement("div");
    mydiv.setAttribute("class", "section updates");
    var title = document.createElement("h3");
    title.innerHTML = data.title;
    mydiv.appendChild(title);
  
    for ( var i=0, entry  ; entry = data.entry[i]; i++){
      var myli  = document.createElement("div");
      myli.innerHTML = "<h4><a href='" + entry.link + "'>"
        + entry.published.substr(5,2) + " / " + entry.published.substr(8,2) + " :  "
        + entry.title + "</a></h4><p>" + entry.summary 
        + "　<a href='" + entry.link + "'>" + "詳しく読む" + "</a>"
        + "</p>";
      mydiv.appendChild(myli);
    }
    content.appendChild(mydiv);
  }

-->
</script>

<div id="matome"></div>

<script type="text/javascript" src="http://goodpic.typepad.jp/sample/feed.js" ></script>
<script type="text/javascript" src="http://goodpic.typepad.jp/sample2/feed.js" ></script>

この方法のメリットとしては、複数のJSONフィードを読み込んだ場合でも、一つのファンクションを定義するだけでよい、という利点があります。JSONフィードを読み込んだ数だけ、自動的に処理がされます。例えば、会社で複数のブログを公開している場合に、複数のブログの新着情報を一つのページで表示する場合などに便利です。TypePadJsonCallback() に共通で実行する処理を記述して、<script>タグでJSONフィードを複数読み込むことで実現できます。

TypePad のプロ・アカウントで利用可能な、上級テンプレート機能を利用すると、独自のHTMLページを作成することが可能です。そのように作成したHTMLに、上記のような方法でJSONフィードとJavascriptを組み込むことで、簡単に「自分のブログだけのポータルサイト」をつくることもできます。Javascript を利用すると非常に柔軟にWEBページを作成することができるので、ぜひトライしてみてください！

トラックバック

トラックバック url