おひとり

できる限りひとりで楽しむための情報やプログラミング情報など。

【Set Delimiter】MustacheでMustacheのテンプレートを生成

2人のMustacheが処理したHTMLを受け取る姫

訳あってMustacheでMustacheのテンプレートを作成するスクリプト(といっても簡単すぎますが)を書いたので、備忘録。。。

TL;DR

テンプレート生成スクリプトの中で展開したいもはSet Delimiterを使ってデリミタを変更する。
mustache.github.io

サンプルコード

github.com

背景

今回は複雑な業務都合で、MustacheのテンプレートをMustacheで生成する必要がありました。
今回作成するスクリプトはMustacheテンプレートの元となるファイルに、いくつかMustacheでパラメタを埋め込みます。そうしていくつかMustacheテンプレートを作成したのち、Web担当者に渡します。
生成するMustacheテンプレートの中には、後述するSaaSが自動で書き出してくれるパラメタを埋め込んであります。
そして、そのWeb担当者は受け取ったMustacheテンプレートをWebサイトをホスティングしている外部のSaaSに登録します。
Webページ閲覧者は当該Webページにアクセスすると、SaaSが登録したMustacheテンプレートに値を埋め込んでHTMLとして返す、、、と言うような仕組みです。

MustacheでMustacheのテンプレートを生成する必要が、、、

そこで問題になるのが、Mustacheのプレースホルダ(変数)に値を埋め込むのがスクリプトなのか、SaaSなのか分からない問題です。

このプレースホルダってどっちが処理するの?

今回用いたPythonのpystacheでは、渡した値に含まれないプレースホルダは消滅してしまいますので、出力に残りません。
今回はこの問題を解決するために、MustacheのSet Delimiterを使います。

Set Delimiter

MustacheのSet Delimiterはテンプレート中でデリミタを変える機能です。
通常、Mustacheは

{{ copyright }}

のような記法ですが、これを一時的に

{? copyright ?}

というようなデリミタに変更できます。
💡HTMLエスケープを適用しない場合は{?& content ?}

デリミタを変更するには、変えたい箇所に

{{={? ?}=}}

のように記述します。

Set Delimiterの文法

「一時的に」と書いたのは、これはもう一度Set Delimiterを使うことで元に戻せるためです。
今回の例では、元に戻すには次のようにします。

{?={ }=?}

具体例

以下のテンプレートでは1行目にSet Delimiterがあり、これ以降Set Delimiterは存在しません。そのため、このファイル全体で{? ?}の箇所のみ処理されます。

{{={? ?}=}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ page_title }}</title>
</head>
<body>
    <main>
        {? content ?}
    </main>
    <footer>
        <div class="copyright">{{ copyright }}</div>
    </footer>
</body>
</html>

※たとえデータが以下のようであっても、copyrightは処理されず単なる{{ copyright }}という文字列のまま出力されます。

{
  "content": "これがページのコンテンツです!",
  "copyright": "SRsawaguchi"
}

まとめ

Set Delimiterは知っておくと今回のような場合以外でも活用できそうな機能です。
覚えておけば複雑な業務も単純化できるかもしれません。

参考サイト

komari.co.jp

mustache.github.io