フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

jQuery

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

2017年07月30日

Pocket

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

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

MTの仕様

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

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

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

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

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

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

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

JSON書き出し・読み込み

MTの投稿データをJSONで書き出す

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

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

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

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

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

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

30:
title "ブログテスト2"
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 "ブログテスト3"

読み込み

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

応用:ランダム表示

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

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

JSON書き出しで自由度無限大!

MTタグでできることが限られる為どうしたものかと思案しましたが、JSONで書き出せることが分かればあとは簡単。
いくらでもカスタマイズできそうですね。

参考:データをJSON形式で出力する裏ワザ
このカテゴリで良く読まれている記事
関連記事

COMMENT