MovableTypeの投稿一覧をJSON書き出し、ランダム表示させる

以前MovableTypeで構築する機会があったのですが、慣れないとこれがなかなか厄介なシロモノ。
用意されているMTタグで基本的なことは簡単にできるのですが、逆に凝った事をやろうとすると非常に難しい。
WordPressならばPHPで書けばどうとでもなるところが、MTだと自由度が低くMTタグだけではカスタマイズが難しいです。

その時ハマったのが記事のランダム表示。
プラグインで実装できるようなのですが、プラグインを導入できない案件だったので調べてみたところ記事をJSONファイルに書き出すことができたので、その備忘録です。

1 MTの仕様
- 1.1 「インデックステンプレート」で自由にファイルを生成できる
- 1.2 MTタグは静的ファイルを書き出すタイミングで変換される
2 JSON書き出し・読み込み
- 2.1 読み込み
- 2.2 応用：ランダム表示
3 JSON書き出しで自由度無限大！

MTの仕様

まずJSONを書き出すための前提から

「インデックステンプレート」で自由にファイルを生成できる

ダッシュボードの「デザイン」→「テンプレート」の「インデックステンプレート」で書いたコードは「テンプレート設定」内の「出力ファイル名（ファイル名.拡張子）」でファイルが生成されますので、「test.json」と書けばjsonファイルが生成されます。

また「test/test.html」のように書けばディレクトリも生成されます。

MTタグは静的ファイルを書き出すタイミングで変換される

MovableTypeはWordPressのように動的に書き出すものではなく、構築・再構築のタイミングで全てのデータを静的に書き出します。

htmlはもちろんcssやjs/jsonも当然それに該当します。
逆に考えればjsだろうが何だろうがファイル形式に関係なくMTタグを書けば全てMTの情報に強制的に書き換えられるわけです。

JSON書き出し・読み込み

上記仕様を踏まえた上で書き出すコードです。
ここではtest.jsonとしておきます。

<mt:SetVar name="entries" function="undef" />
<!— JSONで書き出す変数の定義して中身を初期化 -->
<mt:Entries category="ブログ">
    <!-- ループ開始 -->
    <mt:SetVar name="e" function="undef" />
    <!— ループ変数の定義して中身を初期化 -->
    <mt:SetHashVar name="e">
        <!--  ハッシュ変数（配列）開始 -->
        <$mt:EntryTitle setVar="title" $>
            <!--  記事タイトルを変数に定義 -->
            <$mt:EntryDate format="%Y-%m-%d" language="ja" setVar="date" $>
                <!--  記事日付を変数に定義 -->
                <$mt:EntryPermalink setvar="link" $>
                    <!--  記事リンクを変数に定義 -->
    </mt:SetHashVar>
    <!--  ハッシュ変数　終了 -->
    <mt:EntryID setvar="id" />
    <!--  記事idを変数に定義 -->
    <mt:SetVar name="entries" key="$id" value="$e" />
    <!-- idをkeyにハッシュ変数をentriesに挿入 -->
</mt:Entries>
<!-- ループ終了 -->
<mt:Var name="entries" to_json="1" />
<!-- entriesをJSONに書き出し -->

注釈を見れば分かると思いますが、要はテンプレート内で記事アーカイブを表示させるのと同様に、ループをかけて情報を変数に代入、１記事分を配列に格納した後に記事idをkeyに連想配列に格納しています。

ポイントは最後の行のJSONに書き出す命令ですね。

<mt:Var name="entries" to_json="1" />

これで連想配列（ハッシュ変数）をJSONに変換しています。
再構築の後にファイルにアクセスすればJSONで書き出されたデータを確認できます。

29:
title "ブログテスト１"
date "2017-07-27"
link "http://localhost/blog/2017/07/post-1.html"

30:
title "ブログテスト２"
date "2017-07-27"
link "http://localhost/blog/2017/07/post-2.html"

31:
link "http://localhost/blog/2017/07/post-3.html"
date "2017-07-27"
title "ブログテスト３"

読み込み

あとは普通に読み込むだけです。
一応サンプルはこんな感じ。

<script>
  $(function(){
    var keys = [];
    $.getJSON("<$mt:BlogURL$>test3.json", function(index){
      console.log(index);
      for(var key in index){
        console.log('日付：'+ index[key].date);
        console.log('タイトル：'+ index[key].title);
        console.log('リンク：'+ index[key].link);
      }
    });
  });
</script>

応用：ランダム表示

応用で記事をランダム表示してみます。

<script>
  $(function(){
    var keys = [];
    $.getJSON("<$mt:BlogURL$>test.json", function(index){

      var keys = [];
      for(var key in index){
        keys.push(key);
      }
      var rNum = Math.floor(Math.random()*keys.length);
      console.log(index[keys[rNum]]);
    });
  });
</script>

普通に連想配列をランダム表示するのと同じです。