GitHubからZendesk Guideテーマをインポートする方法

Zendeskの管理インターフェースでヘルプセンターのテーマを直接管理するのは、小さな調整には問題ありません。しかし、大幅な変更を加えたり、チームで作業したりすると、すぐに制限に突き当たります。バージョン管理がなく、誰が何を変更したかを追跡する方法がなく、変更を公開前にテストする簡単な方法もありません。

そこで、GitHub連携が登場します。Zendesk GuideテーマをGitHubリポジトリに接続することで、バージョン管理のすべてのメリットが得られます。実験のためのブランチ、コードレビューのためのプルリクエスト、そしてすべての変更の完全な履歴です。チームは互いの作業を妨げることなくテーマ開発で共同作業でき、自信を持ってアップデートをデプロイできます。

このガイドでは、GitHubからZendesk Guideテーマをインポートする完全なプロセスを説明します。公式のCopenhagenテーマから始める場合でも、既存のカスタムテーマをインポートする場合でも、連携の設定方法、ZCLIを使用したローカルでの作業方法、およびチームに合わせて拡張できるワークフローの確立方法を学びます。

ヘルプセンターの外観を改善する際には、顧客とのやり取りをどのように処理するかについても検討してください。eesel AIのようなツールはZendeskと直接統合して、応答を自動化し、チケットをトリアージし、インテリジェントな自動化で新しいテーマを補完します。

ステップ1：GitHubでテーマを準備する

GitHub連携には、リポジトリの構造に関する特定の要件があります。これを事前に正しく行うことで、後で頭を悩ませる必要がなくなります。

リポジトリ構造の要件

テーマリポジトリは、次の2つの主要な要件を満たす必要があります。

1. manifest.jsonファイルは、リポジトリのルートにある必要があります。 このファイルには、テーマのメタデータと設定の定義が含まれています。Zendeskは、サブディレクトリではなく、最上位レベルでこのファイルを探します。

2. リポジトリごとに1つのテーマ 1つのリポジトリに複数のテーマを保存することはできません。テーマのバリエーションが必要な場合は、代わりにブランチを使用します。

標準的なテーマ構造は次のようになります。

my-zendesk-theme/
├── manifest.json
├── style.css
├── script.js
├── thumbnail.png
├── templates/
│   ├── header.hbs
│   ├── footer.hbs
│   ├── home_page.hbs
│   ├── article_page.hbs
│   └── ...
├── assets/
│   ├── logo.png
│   └── ...
├── settings/
│   └── ...
└── translations/
    └── ...

Copenhagenテーマのフォークとゼロからの作成

ほとんどのチームにとって、公式のCopenhagenテーマをフォークするのが最適な出発点です。これはZendeskのデフォルトテーマであり、積極的にメンテナンスされており、レスポンシブでアクセスしやすいように設計されています。ここから始めるということは、Zendeskがベーステーマを改善したときにアップデートを受け取ることを意味します。

フォークするには、Copenhagenテーマリポジトリにアクセスし、[Fork]ボタンをクリックします。これにより、自由にカスタマイズできる独自のコピーが作成されます。

Zendeskに既存のテーマが既にある場合は、ナレッジ管理インターフェースからダウンロードし、代わりに新しいGitHubリポジトリにプッシュします。

テーマのバリエーションのためのブランチ戦略

リポジトリごとに1つのテーマしか持つことができないため、ブランチを使用してバリエーションを管理します。

• main または master 本番テーマ
• develop 変更をテストするためのステージング環境
• feature/new-header 特定の機能の作業
• brand/variant-a さまざまなブランドのホワイトラベルバリエーション

Zendeskにインポートするときに、使用するブランチを指定できるため、同じリポジトリから複数のテーマバリエーションを簡単に管理できます。

ステップ2：ローカル開発環境をセットアップする

ローカルで作業すると、毎回Zendeskにアップロードしなくても、変更をすぐにプレビューできます。ZCLIを使用すると、これが簡単になります。

ZCLIをインストールする

ZCLIは、テーマ開発のためのZendeskの最新のコマンドラインツールです。npm経由でグローバルにインストールします。

npm install -g @zendesk/zcli

インストールを確認します。

zcli --version

Zendeskアカウントで認証する

テーマをプレビューする前に、ZCLIがZendeskアカウントにアクセスする必要があります。ログインコマンドを実行します。

zcli login -i

次のプロンプトが表示されます。

• サブドメイン Zendeskサブドメイン（.zendesk.comの前の部分）
• メール Zendesk管理者のメールアドレス
• パスワード APIトークン（推奨）またはアカウントパスワード

APIトークンを作成するには、管理センター > アプリと連携機能 > API > Zendesk APIに移動し、[設定]タブでトークンを追加します。

テーマリポジトリをクローンする

まだ行っていない場合は、テーマリポジトリをローカルにクローンします。

git clone https://github.com/your-org/your-theme.git
cd your-theme

ローカルプレビューを開始する

ZCLIが認証され、テーマコードがローカルにある状態で、プレビューサーバーを起動します。

zcli themes:preview

このコマンドは次のことを行います。

• テーマを一時的な場所にアップロードします
• ローカル開発サーバーを起動します
• デフォルトのブラウザを開いてテーマをプレビューします
• ファイルの変更を監視し、自動的にリロードします

プレビューでは、実際のZendeskアカウントデータが使用されるため、実際の記事、カテゴリ、チケットがテーマでレンダリングされます。テンプレートファイルを変更し、保存すると、ブラウザが自動的に更新されます。

ステップ3：ZendeskをGitHubリポジトリに接続する

GitHubでテーマの準備が整い、ローカル開発が機能しているため、Zendeskとリポジトリ間の接続を確立します。

GitHub連携に移動する

Zendeskアカウントで：

1. ナレッジ管理（ヘルプセンター管理インターフェース）に移動します
2. サイドバーの[デザインをカスタマイズ]をクリックします
3. 右上の[テーマを追加]をクリックします
4. [GitHubから追加]を選択します

認証とインポート

リポジトリURLを要求するダイアログが表示されます。完全なGitHub URLを入力します。

https://github.com/your-org/your-theme

デフォルトブランチ以外のものからインポートする場合は、必要に応じてブランチ名を指定します。

[インポート]をクリックします。ZendeskがGitHubにアクセスすることをまだ承認していない場合は、GitHubにリダイレクトされて権限が付与されます。Zendeskアプリを承認し、Zendeskに戻ります。

インポートプロセスでは、GitHubからテーマファイルが取得され、Zendeskアカウントに新しいテーマが作成されます。完了すると、[テーマ]ページにテーマのサムネイルが表示されます。

接続について

この最初のインポートでは、ZendeskテーマとGitHubリポジトリ間の1回限りの接続が確立されます。この時点以降、変更は一方向に流れます。GitHubからZendeskへ。接続を中断せずに、ZendeskインターフェースでGitHub管理のテーマを直接編集することはできません。

ステップ4：テーマをカスタマイズしてデプロイする

連携がアクティブになったので、バージョン管理の力とZendeskへの簡単なデプロイを組み合わせたワークフローができました。

ローカルで変更を加える

常にZendesk管理ではなく、ローカルでテーマを操作してください。推奨されるワークフローは次のとおりです。

1. 変更のためにブランチを作成します：git checkout -b feature/update-header
2. テンプレート、CSS、またはJavaScriptを編集します
3. zcli themes:previewで変更をプレビューします
4. 作業をコミットします：git commit -am "Update header styling"
5. GitHubにプッシュします：git push origin feature/update-header
6. チームレビューのためにプルリクエストを開きます
7. 承認されたらmainにマージします

重要： ZendeskインターフェースでGitHub管理のテーマを直接編集しないでください。そうすると、GitHub接続が中断されることがZendeskから警告されます。Zendeskで誤って変更を加えた場合は、テーマをダウンロードしてそれらの変更をGitHubにコミットして、同期を復元する必要があります。

Zendeskでテーマを更新する

変更がmainブランチにマージされ、デプロイする準備ができたら：

1. ナレッジ管理で、[デザインをカスタマイズ]に移動します
2. GitHub管理のテーマを見つけます
3. メニュー（3つのドット）をクリックし、[GitHubから更新]を選択します
4. プレビューで変更を確認します
5. 準備ができたら[公開]をクリックします

Zendeskはリポジトリから最新バージョンを取得し、ヘルプセンターに適用します。更新はすぐに実行されるため、変更をライブにする前に検証する必要がある場合は、ステージング環境またはテストブランチの使用を検討してください。

チームコラボレーションのヒント

複数の人がテーマに取り組んでいる場合は、いくつかのプラクティスが整理された状態を維持するのに役立ちます。

ブランチ戦略

チームがブランチをどのように使用するかについて、明確な規則を確立します。

• main 本番環境で使用できるコードのみ。mainに直接コミットしないでください。
• develop ステージング用の統合ブランチ。テストのためにフィーチャーブランチをここにマージします。
• feature/* 個々の機能またはバグ修正。タスクごとに新しいブランチを作成します。
• hotfix/* 通常のワークフローをバイパスする必要がある緊急の修正。

Zendeskでは、異なるブランチを使用して同じリポジトリからインポートされた複数のテーマを持つことができます。developブランチを追跡する「ステージング」テーマを維持することを検討して、変更が本番環境に到達する前にプレビューできるようにします。

コードレビューのワークフロー

mainへのすべての変更にプルリクエストを要求します。これにより、次のことが保証されます。

• 少なくとももう1人がコードを確認します
• 自動チェックを実行できます（lint、アクセシビリティテスト）
• 変更が加えられた理由の文書化された記録があります

多くのチームはGitHub Actionsを使用して、プルリクエストでテストを自動的に実行し、Zendeskに到達する前に問題を検出します。

複数のテーマの管理

複数のブランドまたは地域のヘルプセンターを管理する場合は、次のオプションがあります。

• 個別のリポジトリ テーマ間の完全な分離
• 同じリポジトリ、異なるブランチ ブランド固有のオーバーライドを含む共有コード
• 構成ベースのテーマ manifest.json設定を使用してブランド要素を切り替えます

ブランチアプローチは、テーマが似ていて、ブランド固有の色、ロゴ、またはコンテンツが必要な場合に適しています。

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

認証エラー： Zendeskがリポジトリにアクセスできない場合は、リポジトリが承認したアカウントからアクセスできることを確認してください。プライベートリポジトリには適切な権限が必要です。

インポートの失敗： manifest.jsonがリポジトリのルートにあり、有効なJSONが含まれていることを確認してください。このファイルの構文エラーはインポートを妨げます。

同期の問題： Zendeskが最新の変更を反映していない場合は、正しいブランチにプッシュしたこと、およびZendeskで正しいブランチから更新していることを確認してください。

テーマを超えてヘルプセンターを強化する

適切に設計されたテーマは、ヘルプセンターをプロフェッショナルに見せますが、顧客体験への実際の影響は、やり取りをどのように処理するかにかかっています。訪問者はクリーンなインターフェースを高く評価しますが、本当に必要なのは、質問に対する迅速で正確な回答です。

ここで、AI搭載のサポートツールが役立ちます。eesel AIはZendeskと直接統合して、応答を自動化し、受信チケットをトリアージし、ナレッジベースから即座に回答を提供します。ヘルプセンターは見栄えが良くなるだけでなく、本当に役立つようになります。

この組み合わせは特にうまく機能します。カスタムのGitHub管理テーマは視覚的な体験を生み出し、AIは会話レイヤーを処理します。顧客は、記事を閲覧している場合でも、AIエージェントとチャットしている場合でも、ブランド化されたまとまりのある体験を得られます。

ヘルプセンターの外観のカスタマイズに労力を費やしている場合は、その中で行われる会話の処理方法も改善することを検討してください。顧客サポート自動化に関するガイドでは、AIが応答時間を短縮し、チームが人間の注意を本当に必要とする複雑な問題に集中できるようにする方法について説明しています。