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

テーマのファイルをGuideからエクスポートして、お気に入りのエディタでオフラインで作業することができます。変更をプレビューするたびに、ファイルがzipされインポートされないようにするには、Zendesk Apps Tool（ZAT）を使用して、変更をWebブラウザでローカルにプレビューします。変更をプレビューするには、デスクトップエディタにテーマファイルを保存し、ブラウザでページを更新するだけです。例：

ZATは、Sinatraを含む開発ツールのコレクションです。Sinatraはコンピュータ上でローカルに実行されるWebサーバーです。プレビューモードを開始すると、プロセスはバックグラウンドで実行されます。画像下部にあるコマンドラインインターフェイスを参照してください。

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

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

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

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

1. 「管理」>「チャネル」>「API」にアクセスして、Zendesk SupportアカウントでAPIアクセスを有効にします（まだ有効にしていない場合）。
2. Zendesk Apps Tool（ZAT）をインストールします。

   開発者向けのヘルプセンターで、「Zendesk Apps Toolのインストールと使用」を参照してください。

3. 以前にZATをインストールしてZendeskアプリをビルドしたことがある場合は、コマンドラインインターフェイスで次のコマンドを実行して更新してください。

   $ gem update zendesk_apps_tools

ZATをインストールして使用するには、コマンドラインインターフェイス（CLI）が必要です。macOSでは、「アプリケーション/ユーティリティ」フォルダの「ターミナル」を使用します。Windowsでは、コマンドプロンプトまたはPowershellを使用します。Windows 10ユーザーの方は、より開発者に優しいCLIであるBash shellをインストールして使用することができます。「Setting up a Bash shell in Windows 10（Windows 10でのBashシェルの設定）」を参照してください。

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

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

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

1. コマンドラインインターフェイスで、解凍されたテーマファイルが格納されているフォルダに移動します。

   cdコマンド（ディレクトリの変更コマンド）を使用して、子フォルダに移動します。例：

   $ cd guide_themes/newlook_theme

   1つ上のディレクトリに戻るには、cdの後に、スペース1個とピリオド2個を入力します。例：

   cd ..

2. 次のコマンドを実行します。

   $ zat theme preview 

3. プロンプトに、Zendesk Supportのサブドメインと、Zendesk Guideへのサインイン時に使用するメールアドレスとパスワードを入力します。

   

   サブドメインとメールアドレスはテーマのフォルダにある.zatという名前のテキストファイルに保存され、次回からはパスワードを入力するだけでプレビューモードを開始できます。ユーザー名またはパスワードを間違えた場合は、.zatファイルを削除してから再開してください。なお、macOSではドット（.）で始まるファイル名はデフォルトで表示されないのでご注意ください。osxdaily.comのWebサイトで「Show Hidden Files in Mac OS X」を参照してください。

   シングルサインオン（SSO）を使用してGuideにサインインする場合は（Googleまたはマイクロソフトの資格情報を使用するなど）、サポート管理インターフェイスから取得できるAPIトークンを使用してログインできます。REST APIのドキュメントで「API token（APIトークン）」を参照してください。ZATからサインインを求められたら、ユーザー名に「{your_email}/token」と入力します。ここで "/token"はそのまま "/token"と入力してください。パスワードには実際のAPIトークンを指定します。例：

   Enter your username: [e-mail]/token
   Enter your password: e8Pvy0pvGzE8meUQxWgjIYkjr

   サインインに成功すると、プレビューモードが起動し、バックグラウンドで実行されます。

   

4. 出力から「Ready」に示されているURLをコピーし、ブラウザに貼り付けます。

   この例では、URLは「https://nadosolutions.zendesk.com/hc/admin/local_preview/start」です。

   サインインすると、書式なしのページが読み込まれます。最新のブラウザには、特定のローカルファイル（「混合コンテンツ」とも呼ばれる）がページに読み込まれないようにするセキュリティ機能があります。次の手順に従って、ChromeとFirefoxでこの機能を無効にすることができます。

5. ChromeとFirefoxでは、アプリを読み込むには、ブラウザのアドレスバーの盾アイコンをクリックして、安全でないスクリプトの読み込みに同意するか（Chrome）、ページの保護を無効にします（Firefox）。Firefoxでは、盾のアイコンはアドレスバーの左側に表示されます。

   

   メモ：Safariにはこのセキュリティ機能を無効にするオプションはありません。プレビューには、ChromeまたはFirefoxを使用する必要があります。

   正しく書式設定されたページが自動的に読み込まれます。テーマファイルの編集をエディタで開始し、変更内容をブラウザでプレビューすることができます。

変更をプレビューする

テーマプレビューモードを起動した後は、お気に入りのエディタでテーマファイルを編集できます。テーマの開発とテストは、繰り返しの作業です。たとえば、JavaScriptにいくつか変更を加えて保存し、ブラウザのページを更新して変更をテストします。

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

1. 編集したファイルを、エディタで保存します。
2. ブラウザのページを更新します。

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

• ブラウザに切り替えて、プレビュー中のページの上部にある「To exit, click here」リンクをクリックします。
• コマンドラインインターフェイスに切り替えて、Ctrl + Cを押します。