はじめに
プリザンターのカスタマイズでJavaScriptやCSSライブラリを使用したいことがあります。wwwrootの中にファイルを置く方法があるのですが、ライブラリ自体のバージョンアップや、プリザンターのバージョンアップに追従させるのがすこし面倒です。
パブリックな環境においてある環境であればjsDelivrなどのライブラリを配信しているCDNサービスを使うことでそれらの手間をなくすことが出来ます。今回は、その方法を紹介します。
実現方法
拡張HTMLを使うことで実現出来ます。HtmlHeaderBottomとHtmlBodyBottomを使用します。
マニュアルだと言語文字列を含んだHtmlHeaderBottom_ja.htmlとHtmlBodyBottom_ja.htmlを使用するように記載されていますが、この文字列を除いたHtmlHeaderBottom.htmlとHtmlBodyBottom.htmlを使用することで全ての言語で適用されます。
実装例
メッセージボックスを表示されるためによく使われるsweetalert2を例に説明してみます。
これらのリンクをそれぞれのHTMLに記載します。
JavaScriptはHtmlHeaderBottomに、CSSはHtmlBodyBottomに記載します。
HtmlHeaderBottom.html
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.22.2/dist/sweetalert2.all.min.js"></script>
HtmlBodyBottom.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.22.2/dist/sweetalert2.min.css">
複数のライブラリを組み込む場合はこれらのファイルどんどん追記していけばOKです。
まとめ
今回はjsDelivrなどのライブラリCDNをプリザンターに組み込む方法を紹介しました。ライブラリはCDNを使用することで、バージョン管理の手間の低減を図ったり、プリザンター自体のバージョンアップ時の手間を減らすことが出来ます。是非試してみてください。