MTで複数サイトの記事の一覧をjsonで出力してjsでhtml整形する方法

Movable Typeを使用して複数のサイトの記事一覧をJSON形式で出力し、JavaScriptを使用してHTML形式に整形する手順です。

通常にHTMLとして複数サイトの記事をまとめて一覧にする為に出力したいサイトIDを指定して記事を出力します。

サイトのIDは

ダッシュボード > システム > サイトで確認できます。

サイトのIDは引っ越しなどで変わってしまうため、最近は構築の時にIDではなくサイト名を変数に入れてサイト引っ越しで変わっても問題なく表示されるように

下記のように変数に格納しています。

<mt:Blogs>

<mt:If tag="BlogName" eq="サイト1"><$mt:BlogID setvar="site_1_id"$></mt:If>

<mt:If tag="BlogName" eq="サイト2"><$mt:BlogID setvar="site_2_id"$></mt:If>

</mt:Blogs>

1. Movable Typeのテンプレートを作成します。

記事一覧を表示するためのテンプレートを作成します。

テンプレート内で必要な情報(タイトル、URL、日付など)を出力するためのテンプレートタグを使用します。

2. テンプレートをJSON形式で出力するように設定します。

Movable TypeのテンプレートでJSON形式を出力するように設定します。

[

<mt:Entries include_blogs="$site_1_id" lastn="0">

  <$mt:EntryDate format="%Y%m%d%H%M%S" setvar="key"$>

  <mt:SetVarBlock name="entries" key="$key">

  {

    "created_at":"<$mt:EntryDate format="%Y.%m.%d"$>",

    "title":"<$mt:EntryTitle$>",

    "url":"<$mt:EntryPermalink$>"

  }

  </mt:SetVarBlock>

</mt:Entries>

<mt:Entries include_blogs="$site_2_id" lastn="0">

  <$mt:EntryDate format="%Y%m%d%H%M%S" setvar="key"$>

  <mt:SetVarBlock name="entries" key="$key">

  {

    "created_at":"<$mt:EntryDate format="%Y.%m.%d"$>",

    "title":"<$mt:EntryTitle$>",

    "url":"<$mt:EntryPermalink$>"

  }

  </mt:SetVarBlock>

</mt:Entries>

<mt:Loop name="entries" sort_by="key numeric reverse">

  <mt:If name="__counter__" le="20">

  <$mt:GetVar name="__value__"$>

  <mt:If name="__last__"><mt:Else>,</mt:Else></mt:If>

  </mt:If>

</mt:Loop>

]

3. JSONファイルとして出力します。

テンプレートのデータを、JSONファイルとして出力します。

Movable Typeの管理画面から、テンプレートの出力先(出力ファイル名)任意のファイル名.jsonに設定します。

4. HTMLファイルを作成し、JavaScriptを使用してJSONファイルを読み込みます。

HTMLファイル用テンプレートにJavaScriptを使用し、JSONファイルを読み込みます。

<script type="text/javascript">

    window.addEventListener('DOMContentLoaded', function(){

    $.getJSON("../2,で作った任意のファイル名.json", function(list){

        for(var i in list){

            var h = '<li>'

                + '<a href="'

                + list[i].url

                + '">'

                +'<span>'

                + list[i].created_at

                +'</span><span>'

                + list[i].title +'</span>';

            $("ul").append(h);

            }

        });

    });

</script>

以上が、ムーバブルタイプを使用して複数のサイトの記事一覧をJSON形式で出力し、JavaScriptを使用してHTML形式に整形する手順です。

具体的な実装には、使用するライブラリや環境によって異なる部分がありますので、適宜調整してください。

ちなみにjsonじゃなければ複数サイトの記事をまとめて出力するのには下記のほうが楽だと思います。

    <ul>
    <mt:Entries include_blogs="$site_1_id,$site_2_id" lastn="20">
        <li>
            <a href="<$mt:EntryPermalink$>">
                <span><$mt:EntryDate format="%Y.%m.%d"$></span>
                <span><$mt:EntryTitle$></span>
            </a>
        </li>
    </mt:Entries>  
  </ul>