[Zendesk]動的コンテンツをscript.jsで間接的に読み込んでみた

はじめに

こんにちは、筧( @TakaakiKakei )です。

Zendesk Guide で提供しているヘルプセンターを JavaScript でカスタマイズする際に、動的コンテンツを参照した実装をしたいことはありませんか？

動的コンテンツを参照する際、hbs ファイルからは直接読み込むことはできますが、script.js からは現状できないようです。そこで hbs ファイルで一度動的コンテンツを読み込んだ後に script.js から参照することで。script.js から間接的に動的コンテンツを読み込んでみました。今回はその方法をご紹介します。

用語説明

登場する専門用語について予め説明します。 ご存じの方はスキップいただいて結構です。

Zendesk Guide

Zendesk のヘルプセンター機能を提供するサービスです。 Zendesk Guide のテーマを編集することで、ヘルプセンターをカスタマイズをすることができます。

ヘルプセンターをGuideで構築する方法：設定 – Zendeskヘルプ

動的コンテンツ

サポートで複数の言語を提供する際に利用します。 動的コンテンツのプレースホルダをメッセージのテキストに置き換えることで、システム側が動的コンテンツを参照して、予め用意しておいた言語のコンテンツを表示できます。

動的コンテンツでの複数の言語のサポート – Zendeskヘルプ

hbs ファイル

ヘルプセンターの各ページはてテンプレートで管理されており、各 hbs ファイルを編集することでカスタマイズできます。 例えば、新規リクエストページは new_request_page.hbs で管理されています。

ヘルプセンターテーマのカスタマイズ – Zendeskヘルプ

script.js

ヘルプセンターの JavaScript をカスタマイズしたい際に編集します。

ヘルプセンターのJavaScriptレシピ集 – Zendeskヘルプ

やってみた

新規リクエストページ（new_request_page.hbs）で動的コンテンツを呼び出し、script.js で参照しています。

動的コンテンツの作成

以下の公式ページを参照して、参照する動的コンテンツを作成します。 今回の例では日本語と英語だけですが、その他の言語を有効化している場合は、それらの言語のコンテンツも作成します。

動的コンテンツでの複数の言語のサポート – Zendeskヘルプ

• タイトル： hc::script::template::hoge
• コンテンツ
  • 日本語： ほげ
  • 英語： hoge

プレースホルダの変換

作成した動的コンテンツのページを開くと、{{dc.hc-script-template-hoge}}のようなプレースホルダが表示されます。 ヘルプセンターで参照する場合は、プレースホルダの形式を変換する必要があります。 {{dc "hc-script-template-hoge"}}のような形式で、ローカルにメモしておきましょう。

Helpers | Zendesk Developer Docs

hbs ファイルの編集

新規リクエストページ（new_request_page.hbs）を開き、ハイライトの箇所を追加して保存します。 hidden 属性を利用することで、ページ上は非表示にしています。 変換後のプレースホルダを記述していることに注意ください。

new_request_page.hbs

<div class="container section">
..snip..
  <div class="dc-for-scriptjs">
    <div hidden id="template_hoge">{{dc "hc-script-template-hoge"}}</div>
  </div>
</div>

script.js　の編集

特に import 文などは不要で、以下のコードで変数に動的コンテンツの値を格納できます。 なお、用意していない言語で開くと、対象の動的コンテンツが存在しない旨のメッセージが表示されるので、有効化している言語の動的コンテンツは全て準備しておきましょう。

script.js

const templateAwsLimitIncrease = document.getElementById(
  'template_hoge'
).innerHTML;

補足

今回は動的コンテンツを script.js で間接的に読み込みましたが、各 hbs ファイルで script 属性 を記述して動的コンテンツを直接的に読み込むことも可能です。

おわりに

最後まで読んでいただきありがとうございます。

本記事の内容を調査するのに地味に時間がかかったので、どなたかの役にたてば幸いです！それではまた！