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

最終更新日
2017.09.20

移行作業中のため一部のページが正しく表示されていない場合があります(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`
    &noResults = ` `
  ]]
]
</script>

上で作った「記事リストJSON」チャンクをテンプレートとして使用します。Ditto にモディファイアの trim(',') を付けて一番最後のカンマだけ外すようにし、配列になるように Ditto の周りは [ ] で囲む。

使う時

JavaScript では以下のようにパースして使用する事ができる。

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