本文へジャンプ

Movable Typeで、JSONから配列を作る。

※これはMovable Type Advent Calendar 2024の6日目の記事です。

記事データを複数の HTML パターンで出力したい場合、
<mt:Entries>を何回も実行したくなくて、配列にすることがあると思います。

今回はそんなときに、記事データの一覧をふつうに配列(連想配列/多次元配列)で作った場合と、json形式テキストから配列を作った場合をご紹介します。

連想配列・多重配列の場合

01:記事一覧の配列を作る

「SET_記事データ」という配列に、記事タイトルとURLを格納して、その配列を「ARY_記事一覧」の値とします。
※以下サンプルです。実際はもっとフィルタリングを用意すると思いますがサンプルなので簡易的にしてあります。

<mt:Entries lastn="10">
<mt:SetVarBlock name="SET_KEY"><$mt:EntryDate format="%Y%m%d%H%M%S"$>_<$mt:EntryID zero_pad="8"$></mt:SetVarBlock>

<$mt:SetVar name="undef(SET_記事データ)"$>
<mt:SetHashVar name="SET_記事データ">
 <mt:SetVarBlock name="SET_タイトル"><$mt:EntryTitle remove_html="1"$></mt:SetVarBlock>
 <mt:SetVarBlock name="SET_リンクURL"><$mt:EntryLink$></mt:SetVarBlock>
</mt:SetHashVar>
<$mt:SetVar name="ARY_記事一覧" key="$SET_KEY" value="$SET_記事データ"$>
</mt:Entries>

【メモ】変数「ARY_記事一覧」に格納されている構造イメージ

├ SET_KEY
| ├  SET_タイトル
| └  SET_リンクURL
└ SET_KEY
  ├  SET_タイトル
  └  SET_リンクURL

02:作成した配列を出力する

「ARY_記事一覧」をloopで回して、値(value)を出力します。
配列の中の配列を出力する場合は、Loopの入れ子でも可能です。
今回は、階層が深くないので「__value__」に「key」を添えて直接出力しています。

<mt:Loop name="ARY_記事一覧" sort_by="key reverse">
<mt:If name="__counter__" le="5">
<div>
 <a href="<$mt:Var name="__value__{SET_リンクURL}"$>">
     <span><$mt:Var name="__value__{SET_タイトル}"$></span>
 </a>
</div>
</mt:If>
</mt:Loop>

json形式テキストの場合

準備

Movable Typeで、josn形式に変換するには、「GetHashVar」プラグイン(※PowerCMSには標準装備)が必要になります。
ここでは他に、「MTAppjQuery」「ApplyModifier」プラグインを使用しています。

01:「json形式のテキスト」を作る

変数「SET_記事一覧_base」に、json形式でソート用の番号、記事タイトルとURLを追記(append)していきます。

<mt:Entries lastn="10">
<mt:SetVarBlock name="SET_KEY"><$mt:EntryDate format="%Y%m%d%H%M%S"$>_<$mt:EntryID zero_pad="8"$></mt:SetVarBlock>

<mt:SetVarBlock name="SET_記事一覧_base" append="1">
<mt:ApplyModifier compress="2">
{
"SET_番号":"<$mt:Var name="SET_KEY"$>",
"SET_タイトル":"<$mt:EntryTitle remove_html="1" encode_xml="1"$>",
"SET_リンクURL":"<$mt:EntryLink$>"
},
</mt:ApplyModifier>
</mt:SetVarBlock>
</mt:Entries>

※ <mt:ApplyModifier>は、藤本壱氏作成のプラグインです。<mt:Unless>でも代用可能。
※ 「compress="2"」は、「MTAppjQuery」で追加されるモディファイアです。指定した箇所の空行と空白が削除されます。

02:「json形式のテキスト」を整形する

作成した「SET_記事一覧_base」を整形します。最初と最後に[]を追加して、
最後の項目のカンマ対策で、中身なしの{}を追加します。
※[01]のところで、<mt:Unless name="__last__">を頑張らなくてもいいようにしています。

<mt:SetVarBlock name="SET_記事一覧_json"> [ <mt:Var name="SET_記事一覧_base"> {} ] </mt:SetVarBlock>

【メモ】「SET_記事一覧_json」の中身はこうなってる

[
 { "SET_番号":"20241025000000_00000000" , "SET_タイトル":"タイトル" , "SET_リンクURL":"http://www"},
 { "SET_番号":"20241025000000_00000000" , "SET_タイトル":"タイトル" , "SET_リンクURL":"http://www"},
 { "SET_番号":"20241025000000_00000000" , "SET_タイトル":"タイトル" , "SET_リンクURL":"http://www"},
 {}
]

03:作成した「json形式のテキスト」を「配列」に変換する

「GetHashVar」プラグインで拡張された「json2vars」モディファイアを使用して、
作成したjson形式のテキストを、配列に変換します。

<$mt:Var name="SET_記事一覧_json" json2vars="ARY_記事一覧"$>

※ 「json2vars」モディファイア:JSON文字列をテンプレート変数にセットします。(「GetHashVar」プラグイン)

【メモ】「get_items」モディファイア

{"items": [ ... ]} という形式に固定はされてしまいますが、 MTAppjQueryにも「get_items」というjsonを変換するモディファイアもあります。

04:作成した配列を出力する

03で配列に変換したので、通常の配列同様にLoopタグで出力します。

<mt:Loop name="ARY_記事一覧" sort_by="$SET_番号">
<mt:If name="__counter__" le="5">
<div>
 <a href="<$mt:Var name="SET_リンクURL"$>">
     <span><$mt:Var name="SET_タイトル"$></span>
 </a>
</div>
</mt:If>
</mt:Loop>

まとめ

普通に連想配列を入れ子にするよりも、
json形式のテキストから配列に変換したほうが、途中の値のチェックがしやすいのでデバッグしやすいなと個人的には思いました。
ぜひ、試してみてください。

CMS構築ならMONSTER DIVEまでご相談を!

MONSTER DIVEでは、PowerCMSをはじめ、Movable TypeやWordPressなど、CMSを活用したWebサイト構築のご相談、承っています。
お気軽お問い合わせください。

Recent Entries
MD EVENT REPORT
What's Hot?