Lekumo ビジネスブログ

サポート

JSON フィードでブログのまとめページを作成する

JSON フィードとは?

JSON フィードとは、ブログの更新情報を Javascript 形式で実装された情報です。
JSON フィードは全てのブログで自動的に生成され、feed.js というファイルで公開されています。ブログが更新されるとそのブログの JSON フィードも自動的に更新されます。

例:http://***.lekumo.biz/weblog/feed.js

複数ブログのまとめページを作成する

Lekumo ビジネスブログ で複数のブログを作成している場合は、他の WEB ページに JSON フィードを組み込んで、複数ブログの最新記事一覧ページを作成することができます。
具体的には、Javascript 形式の JSON フィードを他のページの 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; i < Math.min(3, data.entry.length); i++) {
    entry = data.entry[i];
    var myli  = document.createElement("div");
    var published = new Date(entry.published);
    if (isNaN(published)) {
      // for IE8
      var month = entry.published.substr(5, 2);
      var day   = entry.published.substr(8, 2);
      myli.innerHTML = "<h4><a href='" + entry.link + "'>"
        + month + " / " + day + " :  "
        + entry.title + "</a></h4><p>" + entry.summary
        + " <a href='" + entry.link + "'>" + "詳しく読む" + "</a>"
        + "</p>";
    } else {
      myli.innerHTML = "<h4><a href='" + entry.link + "'>"
        + ("0" + (published.getMonth() + 1)).slice(-2) + " / " + ("0" + published.getDate()).slice(-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://***.lekumo.biz/sample/feed.js" ></script>
<script type="text/javascript" src="http://***.lekumo.biz/sample2/feed.js" ></script>

サンプルスクリプトを使用して複数ブログのまとめページを作成する

  1. サンプルスクリプトをコピー & ペーストする
    JSON フィードを使用して更新履歴を表示したいページの HTML に、以下に用意されているサンプルスクリプトをコピー & ペーストします。
  2. サンプルスクリプト内の JSON フィード URL を変更する
    サンプルスクリプトの以下の部分の URL を、表示させたいブログの JSON フィード URL (http://ブログ URL / feed.js)に変更します。
    たとえば、5 つのブログの新規記事一覧を表示させたい場合は、以下の指定を 5 回表記し、それぞれの URL を各ブログの JSON フィード URL に変更することで可能です。
  3. <script type="text/javascript" src="http://***.lekumo.biz/sample2/feed.js" ></script>
  4. 必要に応じて新規記事一覧の表示数を変更する
    JSON フィードで表示する新規記事の表示件数をコントロールするには、以下の部分の 3 の数値を変更します。
  5. for (var i=0; i < Math.min(3, data.entry.length); i++) {
  6. 編集した HTML を保存する
    サンプルスクリプトの編集が完了したら、HTML ファイルを保存し、表示を確認します。
  7. 注意:
    パスワード保護設定 されたブログや、フィードの出力設定 がオフになっているブログの記事一覧は表示できません。
    ・Lekumo ビジネスブログから配信される JSON フィードは文字コードが UTF-8 となっています。外部の HTML にサンプルスクリプトを貼り付ける場合は、HTML の文字コードをあわせてください。
page top