Zendesk Guideテーマの編集結果をローカルで確認できるようにする
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 subdomain 、 username 、 password を聞かれるので入力します。
username 、 password は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の場合と同じですので、割愛します。
