こんにちは！エンジニアのjunです。
今回は、具体的なカスタムブロックの例ではなく、一歩進んだカスタムスクリプトの活用方法をご紹介！
「カスタムスクリプト」に制限はない
「カスタムブロック」に対して任意の JavaScript を設定できる「カスタムスクリプト」。
その特徴の一つが、 JavaScriptの記述に制限がない点だと思います。
「カスタムスクリプト」内でMTコアが提供している機能は、主に2つです。
具体的には、関数 MTBlockEditorSetCompiledHtml() と、 iframe内のdata属性 document.body.dataset.hasCompiledHtml。
これらも決して必須ではないため、皆さんが書き慣れた普段の JavaScript が利用できます。
使いこなすためのハードルはあってないようなもの！
自由がきく、それはつまり、外部ライブラリも利用できるということ。
前置きが長くなりましたが、今回はテンプレートエンジンライブラリ「mustache.js」のご紹介です。
過去には、外部ライブラリとして「Swiper」を利用したカスタムブロックも取り上げていますので合わせてご覧ください！
【カスタムブロック】画像をスライドショーで表示するブロックを追加する - MovableType.net 活用ブログ
なお、JavaScript 自体が言語として受ける制限はカスタムスクリプトでも同様です。
例えば、外部サイトのコンテンツを取得することはできません。CORSの制限があるためです。
その他、カスタムスクリプトの仕様は、以下のページに明るいので合わせてご覧ください。
カスタムスクリプトの仕様 | CMSプラットフォーム Movable Type ドキュメントサイト
テンプレートエンジン mustache.js
mustache.js は、 JavaScript から動的に HTML を作成する際に便利なライブラリです。
一般にテンプレートエンジンなどと呼ばれるものの1種です。
外部ファイルを読み込めば準備完了。
とにもかくにも、まずは使ってみましょう。
例として、以前にご紹介したリストのカスタムブロックを取り上げます。
【カスタムブロック】リスト内で画像も挿入できるカスタムブロックを作成する - MovableType.net 活用ブログ
<!-- mustache.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>
<!-- HTML構造を定義 -->
<script type="x-tmpl-mustache" id="js-template">
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
</script>
<!-- 具体的な処理 -->
<script>
document.addEventListener("DOMContentLoaded", () => {
if (document.body.dataset.hasCompiledHtml) {
return;
}
const data = { items: [] };
const container = document.body.firstElementChild;
[...container.children].forEach((e) => {
data.items.push(e.innerHTML);
});
const template = document.querySelector('#js-template').innerHTML;
const rendered = Mustache.render(template, data);
MTBlockEditorSetCompiledHtml(rendered);
});
</script>mustache.js を用いる1番のメリットは、HTML構造を JavaScript の処理から切り離せることだと思います。
「見た目と機能の分離」とでも言いましょうか。
通常、 JavaScript でHTML要素を扱う場合は、Document.createElement()やNode.appendChild()などを利用しますよね。
ただ、最終的な出力とかけ離れているのが難点ではないでしょうか。
複雑な階層構造や繰り返しの表現になるとなおさら。
その点、テンプレートエンジンはHTMLに近い形で記述できるので、直感的な理解が容易になり、グッと見通しがよくなります。
今回は非常にシンプルな例でしたが、それでも効果を実感できるのではないでしょうか。
mustache.js - Logic-less {{mustache}} templates with JavaScript
まとめ
mustache.js の具体的な記法は割愛してしまいましたが、今回お伝えしたいのは2点！
- 「カスタムスクリプト」に制限はない。ライブラリの利用も思いのまま。
- テンプレートエンジンは便利。
mustache.js はもちろん、お気に入りのライブラリと組み合わせて、カスタムブロックをご活用ください！
