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

はじめに

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

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

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

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

構築手順

1. APIを有効にする

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

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

1. ZATのインストール

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

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

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

$ gem install rake
$ gem install zendesk_apps_tools

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

$ 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. テーマの一覧から、対象のテーマをエクスポートしてください。
余談：Zendeskのデフォルトのテーマは「copenhagen (コペンハーゲン)」です。コペンハーゲンはデンマークの首都ですが、これはZendesk発祥の地にちなんでいるようです。

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

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

$ 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

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

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

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

4. SASSの設定

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

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

$ gem install sassc

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

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

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

$ 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