はじめてのZendesk 〜テーマ制作基盤構築篇〜

## はじめに

![logo.jpg](https://qiita-image-store.s3.amazonaws.com/0/31885/87743126-d489-5c1c-bd92-f36d732ccf95.jpeg)

業務でカスタマーサービスプラットフォーム「Zendesk」の構築業務に携わっているのですが、テーマの制作基盤の構築ついて、ひとつにまとまったドキュメントが見つからなかったため、本家Zendeskが提供しているドキュメントを参考に整理してみました。

なお、以下項目を前提としています。

- 既存のテーマの改修ではなく、新規テーマの構築を想定しています。
- 構築予定のドメイン「https\://xxxx.zendesk.com」はすでに取得している。
- 作業環境はMacを想定しています。

Zendeskのテーマ制作でお悩みの方の助けになればいいな。そんな心境です。
テーマの編集、デプロイ等は、別途まとめていこうと思ってます。

## 構築手順

### 1. APIを有効にする

まずAPIを有効にします。有効にする手順は以下のとおりです。

1. 構築対象のZendeskサイトにアクセスしてください。
2. 「Support」に遷移してください。
2. 「管理」をクリックしてください。
3. 「API」をクリックし、「Zendesk API」ページを開きます。
4. 「設定」タブをクリックし、設定画面に遷移します。
5. 「パスワードアクセス」「トークン」をオンにします。
6. 「＋」をクリックし、APIトークンを追加します。
7. 後に必要になる「APIトークン」をコピーし、保存しておきます。
8. 「保存」をクリックします。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/31885/0dddcf7a-f237-5a85-ee27-2dda685f1e9c.png)

![2.png](https://qiita-image-store.s3.amazonaws.com/0/31885/56d5c572-8380-680f-d334-a8f4dd677cad.png)

### 1. ZATのインストール

Zendeskが提供しているドキュメント(後述の「参考資料」を参照のこと)によると、Zendeskのテーマ構築をサポートする目的で、Zendeskは「ZAT(Zendesk App Tools) 」呼ばれるコマンドラインツールを提供しています。

ZATは、ローカルサイトの起動、テーマの文法チェック、テーマのパッケージ化などが可能です。

ZATのインストールは大変簡単です。ターミナルを起動し、以下のコマンドを順次実行してください。
 (環境に応じてルート権限「sudo」を先頭に付与してください)

```bash
$ gem install rake
$ gem install zendesk_apps_tools
```

インストール後「zat」を実行し、以下のようなZATのオプション一覧が表示されたらインストールは完了です。

```bash
$ zat
Commands:
  zat clean             # Remove app packages in temp folder
  zat create            # Create and install app on your account
  zat help [COMMAND]    # Describe available commands or one specific command
  zat migrate           # Helps with the migration of a v1 app to v2
  zat new               # Generate a new app
  zat package           # Package your app
  zat server            # Run a http server to serve the local app
  zat theme SUBCOMMAND  # Development tools for Theming Center (Beta)
  zat update            # Update app on the server
  zat validate          # Validate your app
  zat version, -v       # Print the version
```

### 2. テーマ構築用ディレクトリの準備

テーマ構築ディレクトリを準備します。準備の方法は以下の2つがあります。

- 方法その1：Zendeskが提供しているテーマのリポジトリから取得する。
- 方法その2：構築対象のサイトからテーマファイルを一式ダウンロードする。

ここでは、Zendeskが一から構築する際に推奨している、方法その1「Zendeskが提供しているテーマのリポジトリから取得する」で進めます。

Zendeskが提供しているテーマのリポジトリからファイルを一式cloneします。

	$ git clone https://github.com/zendesk/copenhagen_theme

- 補足：上記方法その2「構築対象のサイトからテーマファイルを一式ダウンロードする」方法は以下になります。
	1. 「Guide」に遷移してください。
	2. 「Guide管理」をクリックしてください。
	3. 「デザインをカスタマイズ」をクリックしてください。
	4. テーマの一覧から、対象のテーマをエクスポートしてください。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/31885/eb569cab-f92b-31c6-6fbd-0ae6dbef3165.png)
- 余談：Zendeskのデフォルトのテーマは「copenhagen (コペンハーゲン)」です。コペンハーゲンはデンマークの首都ですが、これはZendesk発祥の地にちなんでいるようです。

### 3. Zendeskをローカルで起動する

1. ターミナルを起動し、ダウンロードしたテーマディレクトリに移動後、サーバーを起動するzatコマンド「zat theme preview」を実行してください。
2. Zendeskのサブドメイン(もしくはURL)、ログイン時のユーザー名、パスワードをそれぞれ入力してください (ここでは：サブドメイン「sample」/ユーザー名「sample@sample.com」としています)。

```bash
$ cd copenhagen_theme
$ zat theme preview
  Generating  Generating theme from local files
  Generating  OK
   Uploading  Uploading theme
Enter your Zendesk subdomain or full Zendesk URL: sample
Enter your username: sample@sample.com
Enter your password:
   Uploading  OK
       Ready  https://sample.zendesk.com/hc/admin/local_preview/start
You can exit preview mode in the UI or by visiting https://sample.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
```

3. 実行後に記載されている、以下のURLにアクセスし、表示されるか確認してください。

```bash
https://sample.zendesk.com/hc/admin/local_preview/start
```

表示されたら成功です。これで一旦ローカルの構築環境が整いました。

### 4. SASSの設定

テーマ制作の際、cssファイルではなく、SASSファイルを利用したいところです。
Zendeskが提供しているテーマ「copenhagen_theme」には、SASSファイルはもちろん、SASSのコンパイル環境も用意されています。
折角なので、SASSのコンパイル環境も構築してみます。

こちらのセットアップもZATのインストールの時と同様、簡単です。
まず、「sass」をインストールします。

```bash
$ gem install sassc
```

コンパイルの際は、以下のコマンドを実行します。

```bash
$ ./bin/compile.rb
Done :)! Created /style.css file
```

なお、Zendeskが提供しているテーマ「copenhagen_theme」のSASSファイルは、「styles」ディレクトリに格納されています。

```bash
$ tree styles
styles
├── _actions.scss
├── _article.scss
├── _attachments.scss
├── _base.scss
├── _blocks.scss
├── _breadcrumbs.scss
├── _buttons.scss
├── _category.scss
├── _collapsible-nav.scss
├── _collapsible-sidebar.scss
├── _comments.scss
├── _community.scss
├── _footer.scss
├── _forms.scss
├── _header.scss
├── _hero.scss
├── _home-page.scss
├── _icons.scss
├── _metadata.scss
├── _mixins.scss
├── _my-activities.scss
├── _page_header.scss
├── _pagination.scss
├── _post.scss
├── _recent-activity.scss
├── _request.scss
├── _search.scss
├── _search_results.scss
├── _section.scss
├── _share.scss
├── _status-label.scss
├── _striped_list.scss
├── _sub-nav.scss
├── _tables.scss
├── _user-profiles.scss
├── _user.scss
├── _variables.scss
├── _vote.scss
└── index.scss

0 directories, 39 files
```


## 参考資料

- [テーマに加えた変更をローカルでプレビューする方法（Guide Professional） – Zendesk Support](https://support.zendesk.com/hc/ja/articles/115012793547)
- [テーマをローカルで編集する方法（Guide Professional） – Zendesk Support](https://support.zendesk.com/hc/ja/articles/115014810447-%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-Guide-Professional-)
- [Installing and using the Zendesk apps tools – Zendesk Develop](https://develop.zendesk.com/hc/en-us/articles/360001075048#topic_wxt_wqm_1l)
- [zendesk/copenhagen\_theme: The default theme for Zendesk Guide](https://github.com/zendesk/copenhagen_theme)