はじめに
業務でカスタマーサービスプラットフォーム「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「構築対象のサイトからテーマファイルを一式ダウンロードする」方法は以下になります。
- 「Guide」に遷移してください。
- 「Guide管理」をクリックしてください。
- 「デザインをカスタマイズ」をクリックしてください。
- テーマの一覧から、対象のテーマをエクスポートしてください。
- 余談：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