Curlybarsを使用してZendesk Guideのコンポーネントを非表示にする方法

Zendeskヘルプセンターで特定の要素を非表示にする必要がある場合があります。たとえば、よりクリーンなブランド体験のために「Powered by Zendesk」フッターを削除したい場合があります。または、公開ホームページに表示されない内部カテゴリがあるかもしれません。記事のコメントを1つずつ無効にせずに、グローバルに非表示にする必要がある場合もあります。

Zendeskのテンプレート言語であるCurlybarsを使用すると、ヘルプセンターでレンダリングされるものを正確に制御できます。CSSによる非表示（単に非表示にするだけ）とは異なり、Curlybarsはコンポーネントがブラウザに到達するのを防ぐことができます。これは、セキュリティとパフォーマンスの両方にとって重要です。

このガイドでは、Curlybarsを使用してZendesk Guideのコンポーネントを非表示にする方法を学びます。コンポーネントIDの検索、テーマテンプレートの編集、およびisntヘルパーの実装について説明します。最後には、最も一般的な非表示シナリオの動作するコード例が得られます。

開始する前に必要なもの

コードに入る前に、適切な設定になっていることを確認してください。Curlybarsのカスタマイズには、特定のZendeskプランと権限が必要です。

以下が必要です。

• Guide ProfessionalまたはEnterpriseプラン（またはSuite Growth以上）。これらのカスタマイズはSuite Teamでは利用できません。
• Zendeskアカウントのデザイン設定のカスタマイズへの管理者アクセス
• HTML/CSSの基本的な知識（必須ではありませんが役立ちます）
• バックアッププラン - カスタムテーマはZendeskによって公式にサポートされていないため、変更を文書化してください

多数のカスタマイズを含む複雑なヘルプセンターを管理している場合は、eesel AIのようなツールが設定の文書化と維持にどのように役立つかを検討してください。当社のAIチームメイトは、ナレッジベースコンテンツとともにテーマの変更を追跡できるため、すべてを1か所で簡単に管理できます。

Curlybarsの非表示の仕組みについて

Curlybarsは、ZendeskのHandlebarsベースのテンプレート言語です。ヘルプセンターのページがブラウザに到達する前に、Zendeskのサーバー上で実行されます。このサーバーサイド処理により、Curlybarsの非表示は他の方法とは根本的に異なります。

isntヘルパーを使用してコンポーネントを非表示にすると、そのHTMLは単に生成されません。ブラウザはそれを受信しません。これをJavaScriptによる非表示と比較してください。JavaScriptによる非表示では、HTMLはページソースに存在し、CSSで非表示にされているだけです。基本的なブラウザスキルを持つ人なら誰でも、JavaScriptで非表示にされたコンテンツを表示できます。

これが重要な理由：

• セキュリティ：機密コンテンツはサーバー応答から完全に除外されます
• パフォーマンス：HTMLが少ないほど、ページロードが速くなります
• SEO：非表示のコンテンツは検索エンジンのクロールに表示されません

isntヘルパーは、厳密な不等式（!==）を使用して2つの値を比較します。一致しない場合、ブロック内のコンテンツがレンダリングされます。一致する場合、何もレンダリングされません。これは、一意のIDでコンポーネントを非表示にするための主要な方法です。

代替方法は存在しますが、異なる目的を果たします。

• **ユーザーセグメント**は、Zendeskの権限システムを通じて記事レベルでアクセスを制御します
• JavaScript/CSSによる非表示は、外観上の変更には有効ですが、安全ではありません
• 設定で機能を無効にする（コメントをオフにするなど）と、すべてのコンテンツにグローバルに影響します

詳細については、コンポーネントの非表示に関するZendeskの公式ドキュメントを参照してください。

コンポーネントを非表示にするためのステップバイステップガイド

実際の実装について説明しましょう。これらの手順は、Copenhagenテーマまたはそれをベースにしたカスタムテーマを使用していることを前提としています。

ステップ1：コンポーネントIDを見つける

ヘルプセンターのすべてのカテゴリ、セクション、および記事には、一意のID番号があります。そのコンポーネントに移動すると、URLに表示されます。

見つけ方は次のとおりです。

1. エンドユーザーが見るようにヘルプセンターを開きます
2. 非表示にするコンポーネント（カテゴリ、セクション、または記事）に移動します
3. ブラウザのアドレスバーを確認します
4. URLから番号を抽出します

たとえば、URLが/hc/en-us/categories/200420805-Generalの場合、IDは200420805です。

URLパターンはコンポーネントタイプによって異なります。

• カテゴリ：/categories/ID-Name
• セクション：/sections/ID-Name
• 記事：/articles/ID-Name

非表示にするすべてのコンポーネントのIDを書き留めます。次のステップで必要になります。

ステップ2：テーマコードにアクセスする

次に、テーマエディターを開き、適切なテンプレートファイルを見つけます。

1. Zendeskで、Guide管理（または新しいインターフェイスではKnowledge管理）に移動します
2. サイドバーのデザインのカスタマイズアイコンをクリックします
3. ライブテーマを見つけて、カスタマイズをクリックします
4. コードの編集をクリックして、テーマエディターを開きます
5. 左側のサイドバーで必要なテンプレートファイルに移動します

選択するテンプレートは、非表示にするものによって異なります。

• home_page.hbs - ヘルプセンターのホームページ
• article_page.hbs - 個々の記事ページ
• section_page.hbs - セクションランディングページ
• category_page.hbs - カテゴリランディングページ
• footer.hbs - グローバルフッター要素
• header.hbs - グローバルヘッダー要素

ステップ3：isntヘルパーコードを追加する

適切なテンプレートを開いたら、非表示にするコンポーネントを見つけます。それをisntヘルパーでラップします。

構文は次のようになります。

{{#isnt id 'YOUR_COMPONENT_ID'}}
  <!-- コンポーネントコードをここに -->
{{/isnt}}

実際の例を次に示します。ホームページからカテゴリを非表示にするには：

{{#each categories}}
  {{#isnt id '200420805'}}
    <div class="category">
      <a href="{{url}}">{{name}}</a>
    </div>
  {{/isnt}}
{{/each}}

複数のコンポーネントを非表示にするには、複数のisntステートメントを連鎖させます。

{{#isnt id '200420805'}}
  {{#isnt id '200420806'}}
    <div class="category">
      <a href="{{url}}">{{name}}</a>
    </div>
  {{/isnt}}
{{/isnt}}

または、反対のロジックには、elseブロックを持つisヘルパーを使用します。

{{#is id '200420805'}}
  <!-- このカテゴリは非表示です -->
{{else}}
  <div class="category">
    <a href="{{url}}">{{name}}</a>
  </div>
{{/is}}

ステップ4：公開して確認する

コードを追加した後、変更を保存してテストする必要があります。

1. 右上隅の保存をクリックします
2. 公開をクリックして、変更をライブにします
3. プレビューをクリックして、ヘルプセンターがどのように見えるかを確認します
4. コンポーネントを非表示にしたページに移動します
5. 非表示になっているが、ダイレクトリンクからアクセスできることを確認します

コンポーネントがまだ表示される場合は、以下を再確認してください。

• ID番号が正しい
• 適切なテンプレートファイルを編集している
• 構文が正確に{{#isnt id 'NUMBER'}}である（アポストロフィ付きのisn'tではない）

一般的な非表示シナリオとコード例

最も一般的なユースケースの実用的なレシピを次に示します。

記事のコメントをグローバルに非表示にする

各記事で個別にコメントを無効にする代わりに、テーマでコメントセクションを非表示にすることができます。

article_page.hbsで、コメントセクションを見つけて、HTMLコメントでラップします。

{{!--
<div class="article-comments">
  <!-- コメントコードをここに -->
</div>
--}}

これにより、コメントHTMLがページから完全に削除されます。コメントを無効にしたいが、数百の記事を個別に編集したくない場合は、これを使用します。

ホームページからカテゴリを非表示にする

ダイレクトリンクからアクセスできるようにカテゴリを保持しながら、ホームページから非表示にするには：

{{#each categories}}
  {{#isnt id '200420805'}}
    <div class="category-block">
      <h2><a href="{{url}}">{{name}}</a></h2>
      <p>{{description}}</p>
    </div>
  {{/isnt}}
{{/each}}

これは、エージェントがブックマークを介してアクセスするが、一般の訪問者には表示されない内部ドキュメントカテゴリに役立ちます。

フッター要素を非表示にする

「Powered by Zendesk」テキストまたはその他のフッター要素を削除するには：

{{#isnt help_center.name 'Internal Help Center'}}
  <div class="footer-powered-by">
    Powered by Zendesk
  </div>
{{/isnt}}

または、footer.hbsで関連するセクションを削除またはコメントアウトして、完全に非表示にします。

ユーザータイプに基づいて非表示にする

ロールベースの非表示には、Curlybarsをユーザーセグメントと組み合わせます。

{{#if signed_in}}
  {{#isnt user.role 'end-user'}}
    <div class="internal-notice">
      このセクションはエージェント専用です
    </div>
  {{/isnt}}
{{/if}}

真のセキュリティのために、これをZendeskのユーザーセグメントと組み合わせて、権限レベルで記事へのアクセスを制限します。

特定のページでパンくずリストを非表示にする

記事ページからパンくずリストを削除し、他の場所に保持するには：

{{#isnt article.id '123456789'}}
  {{breadcrumbs}}
{{/isnt}}

または、isヘルパーを使用して、特定のページタイプでのみパンくずリストを表示します。

ベストプラクティスとセキュリティに関する考慮事項

カスタマイズを開始する前に、これらのガイドラインに留意してください。

**常に最初にテーマを複製してください。**ライブテーマの横にある3つのドットをクリックし、「複製」を選択します。コピーで作業し、徹底的にテストしてから、自信がある場合はライブテーマを切り替えます。これにより、すぐにロールバックオプションが得られます。

**サンドボックス環境でテストします。**Zendeskサンドボックスがある場合は、最初にそこで変更を加えます。一部の機能はプレビューモードでは機能しないため、すべてが正しく機能することを確認するには、実際の環境が必要です。

**カスタマイズを文書化します。**以下を追跡する共有ドキュメントを作成します。

• 変更したテンプレート
• 非表示にしているID
• 各変更を加えた理由
• いつ変更を加えたか

このドキュメントは、トラブルシューティングが必要な場合や、チームメンバーが変更する場合に非常に貴重になります。

**セキュリティへの影響を理解します。**Curlybarsによる非表示はサーバーサイドで行われるため、HTMLはブラウザに到達しません。これは安全です。JavaScriptによる非表示は、ロード後にCSSを使用して要素を非表示にする場合、安全ではありません。コンテンツはページソースに残り、調べ方を知っている人には表示されます。

**パフォーマンスに関する注意：**Curlybarsでコンポーネントを非表示にすると、ブラウザに送信されるHTMLが減り、ロード時間が短縮されます。ただし、Zendesk側のデータベースクエリは減少しません。コンテンツはまだフェッチされます。レンダリングされないだけです。

複数のプラットフォームでドキュメントを管理している場合は、eesel AIがどのように役立つかを検討してください。当社のAIチームメイトはZendeskと統合して、サポートチケットに基づいてヘルプセンターの記事を自動的に生成および更新し、テーマのカスタマイズに集中しながらコンテンツを最新の状態に保ちます。

一般的な問題のトラブルシューティング

慎重に実装しても、期待どおりに機能しない場合があります。最も一般的な問題を修正する方法を次に示します。

**コンポーネントがまだ表示されます。**ID番号を再確認してください。数字を転置したり、類似のURLから間違ったIDを取得したりするのは簡単です。また、正しいテンプレートファイルを編集していることを確認してください。home_page.hbsへの変更は、記事ページには影響しません。

**テンプレートが壊れています。**エラーメッセージが表示されたり、ヘルプセンターがロードされない場合は、構文エラーがある可能性があります。一般的な原因：

• isntの代わりにisn'tを使用する（Curlybarsにアポストロフィはありません）
• 終了タグがない（{{/isnt}}）
• IDの周りの引用符が一致しない

すぐにバックアップテーマに戻し、コードの変更を注意深く確認してください。

**プレビューがライブと異なって見えます。**プレビューモードでは、ユーザーに表示されるものが常に正確に表示されるとは限りません。一部の機能は、完全にページをロードしないと機能しません。公開する前に、常にライブ環境（複製されたテーマ上でも）で変更をテストしてください。

**複数の条件が機能していません。**ネストを確認してください。各isntヘルパーには、独自の終了タグが必要です。複雑なロジックの場合は、テンプレートコードよりもユーザーセグメントの方が適切なソリューションになるかどうかを検討してください。

eesel AIを使用したヘルプセンターコンテンツの管理

Curlybarsは、ヘルプセンターの外観を処理します。しかし、コンテンツ自体はどうでしょうか？

テーマをカスタマイズしている間も、顧客が読む記事を作成、更新、および維持する必要があります。そこでeesel AIが登場します。

当社のAIチームメイトは、Zendeskと直接統合して、次のことを行います。

• 解決済みのサポートチケットからヘルプセンターの記事を生成します
• 新しい記事がチケット量を削減する知識のギャップを特定します
• すべてのドキュメントで一貫したトーンを維持します
• 新しい製品情報に基づいて古い記事を更新します

すべての記事を手動で作成する代わりに、eesel AIに実際の顧客の質問に基づいてコンテンツを下書きさせることができます。レビュー、編集、公開します。まるで、すべてのサポートインタラクションから学習するテクニカルライターがいるかのようです。

複雑なヘルプセンターを管理するチームにとって、これはドキュメントの作成にかかる時間が短縮され、顧客エクスペリエンスの向上に費やす時間が増えることを意味します。Curlybarsでプレゼンテーションレイヤーを処理します。AIでコンテンツレイヤーを処理します。

eesel AIがZendeskとどのように連携するかの詳細、またはZendeskチケッティングシステムの完全なガイドを参照して、サポート設定を最適化する方法をさらに調べてください。