Zendesk Guideテーマの編集結果をローカルで確認できるようにする

2021.06.10

Zendesk Guideのテーマファイルを編集した際、その結果をローカル環境で確認できるようにするため、こちらの内容を参考に準備してみました。

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

Zendesk APIの準備

Zendesk Supportを開き、メニューの 管理 > チャネル > API を選択します。

表示される画面の 設定 タブを選択します。 そして、 トークンアクセス を有効して、 APIトークンを追加 をクリックします。

APIトークンの説明を入力したら、表示されているAPIトークンの値を控えておきます。 控えたら 保存 ボタンを押します。

Zendesk Apps Tool(ZAT)のインストール

こちらを参考に実施いたしました。

https://develop.zendesk.com/hc/en-us/articles/360001075048

Rubyのインストール

ZATを使うためにRubyが必要で、下記であるとのことですので、インストールされているRubyを確認します。

ZAT supports Ruby 2.1 or later on macOS and Ubuntu, and Ruby 2.3 only on Windows.

$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]

インストールされていたので、このまま進めます。

ZATのインストール

rakeのインストール

マニュアルに記載のコマンドを実行します。

$ sudo gem install rake

ZATのインストール

マニュアルに記載のコマンドを実行します。

$ sudo gem install zendesk_apps_tools

ZATがインストールされたことを確認します。

$ zat -v
3.8.1

sasscのインストール

CSSをカスタマイズする際にSASSファイルをコンパイルする必要があるため、下記に記載されているコマンドでsasscをインストールします。

https://github.com/zendesk/copenhagen_theme#using-sass

$ sudo gem install sassc:1.12.1

インストールされたらSASSファイルをコンパイルしてみます。

テーマファイルのルートディレクトリに移動し、下記を実行します。

$ ./bin/compile.rb

このようになれば成功です。

Done :)! Created /style.css file

copenhagen_themeのダウンロード

Zendesk Guideのテーマファイル(コペンハーゲン)をリポジトリからダウンロードします。 https://github.com/zendesk/copenhagen_theme

任意のディレクトリにファイル一式を配置します。

ローカルでプレビューしてみる

ターミナルを起動し、テーマファイルの配置場所へ移動します。

cd copenhagen_theme-custom

下記コマンドを実行します。

$ zat theme preview

画面上で Zendesk subdomainusernamepassword を聞かれるので入力します。

usernamepassword はAPIトークンでもアクセスできますので、そのようにいたしました。

このような入力になります。

Enter your username: jdoe@example.com/token
Enter your password: e8Pvy0pvGzE8meUQxWgjIYkjr

入力内容が受付されると、処理が進みます。

    Generating  Generating theme from local files
  Generating  OK
   Uploading  Uploading theme
Enter your Zendesk subdomain or full URL (including protocol): *****
Enter your username: *****@classmethod.jp/token
Enter your password:
   Uploading  OK
       Ready  https://*****.zendesk.com/hc/admin/local_preview/start
You can exit preview mode in the UI or by visiting https://*****.zendesk.com/hc/admin/local_preview/stop
== Sinatra (v1.4.8) has taken the stage on 4567 for development with backup from Thin
Thin web server (v1.7.2 codename Bachmanity)
Maximum connections set to 1024
Listening on localhost:4567, CTRL+C to stop

このURLにブラウザでアクセスします。

Ready https://*****.zendesk.com/hc/admin/local_preview/start

画面がプレビュー表示されました。

プレビュー画面のヘッダーメニューでページごと、権限ごとの表示切替ができるので、便利です。

ソースコードを変更して保存すると、変更結果が反映されます (枠で囲った部分を変更しました)

補足:ZATのインストール(Windowsの場合)

Zendeskの推奨は、Ubuntu for Windows 10とのことですので、その手順で試してみました。

Windows10でBash shellのセットアップ

開発者用モードをONにする

Windowsの管理メニューの 開発者向けメニュー を選択して 開発者用モード をONにします。 確認メッセージが表示されますので、 はい を選択します。

PCを再起動します。

PowerShellを管理者として実行

Windowsの検索ボックスに PowerShell と入力し、結果からWindows PowerShellを右クリックして、 管理者として実行 を選択します。

下記コマンドをPowerShellで実行します。

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

実行後、PCを再起動します。

Ubuntuをダウンロード

Microsoft Storeにアクセスして行います。 ここからダウンロードいたしました。

https://www.microsoft.com/ja-jp/p/ubuntu-1804-lts/9n9tngvndl3q?activetab=pivot:overviewtab

インストールボタンを押してダウンロードされるのを待ちます。

Ubuntuを起動する

インストールが完了したらUbuntuを起動します。 Microsoft Storeアプリの一覧から起動するか、スタートメニューのプログラムからUbuntuを選択して起動します。

このような画面が出るので、しばらく待ちます。

Ubuntuのユーザー作成を求められますので、ユーザー名とパスワードを入力します。

ユーザーをubuntuとしました。 (入力したパスワードを誤ってしまい、やり直しております)

Rubyのインストール

PowerShellを起動し、下記を実行していきます。

bash
$ sudo apt-get update

パスワードは先ほど作成したユーザーのものを入力します。

$ sudo apt install ruby ruby-dev gcc g++ make zlib1g-dev

(補足) ZATのインストールの際にいくつかのビルドエラーが発生したため、必要なものを追加しております。

Rubyがインストールされたことを確認します。

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]

rakeのインストール

$ sudo gem install rake

ZATのインストール

$ sudo gem install zendesk_apps_tools

ZATがインストールされたことを確認します。

$ zat -v
3.8.1

sasscのインストール

CSSをカスタマイズする際にSASSファイルをコンパイルする必要があるため、下記に記載されているコマンドでsasscをインストールします。

https://github.com/zendesk/copenhagen_theme#using-sass

$ sudo gem install sassc:1.12.1

インストールされたらSASSファイルをコンパイルしてみます。

テーマファイルのルートディレクトリに移動し、下記を実行します。

$ ./bin/compile.rb

このようになれば成功です。

Done :)! Created /style.css file

開発者用モードをOFFにする

元に戻しておきます。

開発者用モードをOFFにしたら、PCを再起動します。

ローカルでプレビューしてみる

PowerShellを起動し、下記を実行します。

bash

Ubuntuのホームディレクトリは、Windows環境の C:\Users\ユーザー名 になっておりますので、 Zendesk Guideのテーマファイル一式をホームディレクトリに保存しておきます。

テーマファイルを保存したディレクトリへ移動します。

cd copenhagen_theme-custom

プレビューを起動させます。

zat theme preview

以降の手順はmacの場合と同じですので、割愛します。