テーマに加えた変更をローカルでプレビューする方法

任意のコードエディタでローカルにテーマを作成し、Webブラウザで変更の結果をリアルタイムでプレビューすることができます。変更の結果をプレビューするために、毎回ファイルをGuideにアップロードする必要はありません。ファイルをローカルに保存するたびに、コンピュータのバックグラウンド処理で変更がアップロードされます。

以下に例を示します。

この記事では、次のトピックについて説明します。

• テーマのローカルプレビューを設定する
• テーマのローカルプレビューを開始する
• 変更結果をプレビューする

テーマのローカルプレビューを設定する

ローカルテーマのプレビューを設定するには、テーマファイルをダウンロードし、アカウントでAPIアクセスを有効にし、、Zendesk Command Line Interface（ZCLI）をコンピュータにインストールします。ZCLIを使用すると、ローカルテーマのプレビューが可能になります。

テーマのローカルプレビューを設定するには

1. Guideからテーマファイルをダウンロードし、作業フォルダに解凍します。

   詳しくは「ヘルプセンターのテーマをダウンロードする」を参照してください。

2. ZendeskアカウントでAPIアクセスを有効にしてください（有効にしていない場合）。

   管理センターで、サイドバーの「 アプリおよびインテグレーション」をクリックし、「API」>「Zendesk API」を選択します。

3. ZCLIをインストールします。手順については、Zendeskの開発者ドキュメントの「Installing and updating ZCLI」を参照してください。

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

コンピュータ上でテーマファイルの編集を開始する前に、テーマのローカルプレビューを開始する必要があります。

テーマのローカルプレビューを開始するには

1. コンピューターのコマンドラインターミナルで、ダウンロードして解凍したテーマファイルが格納されているフォルダに移動します。以下に例を示します。

   cd guide_themes/newlook_theme

2. テーマをダウンロードしたZendeskアカウントにサインインします。

   zcli login -i

   プロンプトが表示されたら、サブドメイン、メールアドレス、パスワードを入力します。

   アカウントの標準のZendeskサブドメインを使用してサインインします。ホストマッピング済みのサブドメインは使用しないでください。

   Zendeskへのサインインにシングルサインオン（SSO）を使用している場合は、APIトークンを使用してサインインすることができます。ユーザー名に「your_email/token」と入力します。ここで「/token」はそのまま「/token」と入力してください。パスワードにはAPIトークンを指定します。以下に例を示します。

   Email: [e-mail]/token
   Password: e8Pvy0pvGzE8meUQxWgjIYkjr

3. ローカルプレビューのバックグラウンド処理を開始します。

   zcli themes:preview 

   このZCLIコマンドにより、ローカルプレビューが開始され、プレビューモードのローカルテーマがヘルプセンターにアップロードされます。ローカルでファイルに加えた変更は、プレビューモードでテーマに反映されます。

4. ReadyのURLをコピーし、ChromeやFirefoxなどのWebブラウザに貼り付けます。

   ブラウザで、HTTPとHTTPSの混在コンテンツが許容されている必要があります。Safariは混在コンテンツをサポートしていないため、ローカルでテーマをプレビューすることはできません。

   ReadyのURLは、「https://yoursubdomain.zendesk.com/hc/admin/local_preview/start」のように表示されます。

ZCLIのpreviewコマンドの詳細については、GitHubのzcli themesを参照してください。

変更結果をプレビューする

ZCLIでテーマをプレビューモードでヘルプセンターにアップロードした後、お気に入りのコードエディタでローカルにテーマファイルを操作し、ブラウザで変更をプレビューすることができます。テーマの開発とテストは、繰り返しの作業です。たとえば、ファイルに変更を加えたら、そのファイルを保存し、ブラウザで変更を確認します。変更した内容に問題が見つかったら、他の変更を加える前に、その問題を修正します。

変更結果をプレビューするには

1. 編集したファイルをコードエディタで保存します。
2. テーマに加えた変更をブラウザのプレビューモードで確認します。

ファイルをローカルに保存すると、テーマはブラウザで自動的に再読み込みされます。ページを更新する必要はありません。

この自動再読み込みを無効にするZCLLオプションがあります。詳しくは、GitHubのzcli themesを参照してください。

1日の作業が終わったら、次のいずれかの方法でプレビューモードを停止できます。

• ZCLIを実行しているターミナルセッションで、Ctrl+Cキーを押します。
• ブラウザで「https://yoursubdomain.zendesk.com/hc/admin/local_preview/stop」を開きます。yoursubdomeinには実際のサブドメインを入力します。
• ブラウザのテーマプレビューページの上部にある、「プレビューを閉じる」リンクをクリックします。