2020/02/04Zendeskのテーマ制作環境をローカルに作る4ステップ!今回はZendeskのテーマ制作する環境をローカルに作る手順について説明します。前提条件は以下になります。Zendeskの新規テーマを制作する構築するドメインは「hogehoe.zendesk.com」で取得済み構築する環境は以下の通りです。v1.39.2この記事の目次Zendeskのテーマ制作環境をローカルに作る手順ステップ1:APIトークンを取得するステップ2:テーマ開発に必要はツールをインストールするステップ3:ベースとなるテーマを設置するステップ4:ローカル環境とZendeskをつなげるZendeskのテーマ制作環境をローカルに作る手順まずはZendeskから情報を受け取れるようにAPIトークンを取得しましょう。ステップ1:APIトークンを取得するZendeskにログインしたら、画面の右上にあるメニューから「サポート」を選択します。左にあるギアのアイコンをクリックして、「API」を選択。APIの画面から以下の手順でAPIトークンを取得します。「保存」ボタンを押す※APIトークンは必ずメモ帳などに保管しておきましょう。保存を押した後は見ることができません。Tools)」というツールが用意されています。これによってローカル環境でサイトを確認できたり、テスト・検証ができます。ZendeskそれではZATをインストールしましょう。ZATはgemのパッケージなのでBundlerを通してインストールします。Bundlerからgemをインストールする方法は以下の記事に書いたので参考にしてください。Homebrew→rbenv→bundlerで管理する2019.12.11GemfileファイルにZATに必要なパッケージを書き込みます。GemfileにZATのパッケージを書いたら実際にインストールします。私の環境ではプロジェクトの上のディレクトリにインストールしています。vendor/bundleの部分はご自身の環境にあわせて変更しましょう。どこにZATをインストールする指定するインストールできたか以下のコマンドで確認します。zatインストールできているとターミナルでは以下のように表示されます。ステップ3:ベースとなるテーマを設置する以下のコマンドを打って、githubからベースとなるテーマをインストールします。.これでローカルで開発できるパーツは揃いました。次はローカルとZendeskをつなげます。ステップ4:ローカル環境とZendeskをつなげるZendeskとつなげる前に管理画面に戻って、「Guide」をクリックして以下の画面になるか確認しておいてください。表示されないとZendeskと繋げることができません。確認できたらターミナル上でテーマがあるディレクトリに移動しましょう。それから以下のコマンドを打ちます。previewそうすると以下のように表示されるので必要な情報を順番に入力していきましょう。stop入力する重要な部分は以下です。url:https://〇〇.zendesk.comusername:登録したメールアドレス/tokenpassword:APIトークン(表示されない)ターミナル上に表示用のURLが記載されているのでクリックしてアクセスできるか確認してみてください。https://hogehoge.zendesk.com/hc/admin/local_preview/startさいごに今回はZendeskのテーマ制作環境をローカルに作る手順について説明しました。これでローカルで修正した内容が表示に反映させることができますし、Zendeskの管理画面から入力した内容も表示に反映させることができます。あとはSassを使える環境と、JavascriptでJSONデータを送受信できる環境を作ってテーマ開発を進めていきます。この2つについてはまた後ほど記事にします。2020.2.4追記SassとAutoprefixerの設定について書きました。