初期表示用のデータをJSONでページに埋め込む

更新日
2017.08.07
作成日
2017.07.24

移行作業中のため一部のページが正しく表示されていない場合があります(o-ω-))

初期表示分だけ API を使いたくなかったり、埋め込みデータからサクッと表示させたい場合の方法。

Ditto で JSON を作成する

Ditto のオプションのフォーマットを JSON にするだけだと固定の項目しか返せないので、テンプレート変数なども含みたい場合は Ditto のフォーマットファイルを追加するか、通常フォーマットで作成します。チャンクに分けておくと API 用と埋め込み用で使いまわすことが出来ます。

JSON テンプレートを作成

今回は 記事リストJSON という名前でチャンクを作りました。なんでもOKです。

{
"id": [+id+],
"url": "[~[+id+]~]",
"title": "[+pagetitle:addslashes+]",
"date": "[+createdon:date(`%Y.%m.%d`)+]",
"createdon": "[+createdon+]",
"tags": "[+tags+]"
},

文字列の部分には addslashes モディファイアを付けてクォートをエスケープするようにしておきます。このテンプレートでは最後にカンマを入れておきます。

Ditto を記述

次に埋め込みたいページに Ditto の記述をします。

<script type="application/json" id="first-json">
[
  [[Ditto:trim(',')?
    &id = `list`
    &showInMenuOnly=`1`
    &orderBy=`createdon DESC`
    &filter=`searchable,1,1`
    &display=`10` // 初期表示する件数 or all
    &depth = `2`
    &tpl = `記事リストJSON`
  ]]
]
</script>

さっき作った 記事リストJSON チャンクをテンプレートとして使います。Ditto に trim(',') を付けて一番最後のカンマだけ外しています。配列になるように Ditto の周りは [ ] で囲みます。

使う時

JavaScript で使う時は以下のようにパースします。

var json = JSON.parse(document.getElementById('first-json').innerHTML)