検索結果0件」

    【Zendeskの使い方】ローカルに環境を作りデザインを変える

    【Zendeskの使い方】ローカルに環境を作りデザインを変える

    こんにちは、シンヤです!
    先日、以下のツイートをしました。

    最近自社開発のプロジェクトで、ヘルプセンターをZendeskで作りました
    結構面白いですね
    環境構築のやり方が独特で、自分で調べながら作りました
    「自己解決しながら何かを作ること」は好きです
    Zendeskのデザインの変更方法をまとめた記事は少ないので、やり方をブログに書いてみようと思います😊

    上記の通りなのですが、最近Zendeskでヘルプセンターのホームページを作ったので、やり方を解説した記事を書こうと思います😀


    Zendeskとは?

    Zendeskとは、世界中140カ国以上で利用されている、カスタマーサポート向けのホームページが作れるソフトウェアです。
    要は「お問い合わせページ」がかんたんに作れるツールという感じですね😀

    主な特徴

    • 導入がかんたん
      • 管理画面から好きなテーマを選ぶだけで、カスタマーサポート向けのホームページが出来上がる
    • 多言語対応
      • 様々な国の言語をサポートしているので、世界中で展開しているサービスで使われています
    • 提供している機能が豊富
      • 「チャット」「CRM」「分析」など、多種多様な機能を提供しています

    デザインも自由自在に変えられる

    Zendeskは提供しているライブラリである、「Zendesk Apps Tool(ZAT)」を使えば、自分のパソコンでZendeskのヘルプセンターのデザインを変えることができます。

    自分のパソコンに、ライブラリが動く環境を作ることを「ローカルに環境を構築する」といいます(以下ローカルと呼称)。

    ローカルに環境を構築できれば、プログラミング言語を使って独自の機能や思い通りのデザインに、ヘルプセンターを作り替えることができます。

    ローカルに環境を作りデザインを公開する工程を、以下の6つに分解して解説いたします。

    1. ライブラリが動く環境を構築する
    2. ライブラリをインストールする
    3. ベースのテーマをダウンロードする
    4. APIトークンを発行する
    5. ローカルでZendeskを動かす
    6. 作ったデザインをZendeskにアップロードする

    1. ライブラリが動く環境を構築する

    • Homebrew
    • rbenv
    • bundler

    上記3つをインストールしていきます。

    以下に解説する方法は、Macで環境構築をするやり方となっております。
    Linux系なら同じやり方で動くと思いますが、Windowsをご利用の方はプログラミングを行うなら、Macを購入することをオススメいたします。

    Homebrewのインストール

    Homebrewとは、Macで提供されているパッケージ管理ツールです。
    Homebrewを通して、必要な機能をインストールしていくのが、Macでよく使われる環境構築となっております。

    まずは、ターミナルの起動を行います。
    Mac下部の「Launchpad」で、「terminal」と入力して出てきたアイコンを、クリックしてください。

    以下のコマンドを入力して、Homebrewをインストールします。

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    インストール後、以下のコマンドを入力して、Homebrewのバージョンが表示されたら、成功しています😊

    $ brew -v
    #> Homebrew 1.2.3
    #> Homebrew/homebrew-core (git revision 7212; last commit 2017-07-02)

    rbenvのインストール

    rbenvとは、Rubyのバージョン管理をかんたんにできるようになるライブラリです。

    rbenvを使わずそのままRubyをインストールすると、Mac本体のシステムデータにインストールされます。
    その場合Rubyのバージョンを切り替えるのが難しくなるので、rbenvでバージョンを管理するのが一般的です。

    Homebrewを使って、rbenvをインストールしていきます。
    以下のコマンドを使って、rbenvとRuby-buildをインストールします。

    rbenvにはRubyのバージョンを管理する機能しかないので、Ruby本体をインストールできるRuby-buildもインストールしていきます。

    まずは以下のコマンドを入力して、インストールできるrbenvを確認します。

    $ rbenv install -l
    2.5.8
    2.6.6
    2.7.2
    jruby-9.2.13.0
    maglev-1.0.0
    mruby-2.1.2
    rbx-5.0
    truffleruby-20.2.0
    truffleruby+graalvm-20.2.0

    インストール可能なバージョンが、ずらりと表示されました😅
    とりあえず安定的に使えそうな、v2.6.6をインストールしていきたいと思います。

    $ rbenv install 2.6.6

    インストールできているか、以下のコマンドを入力して確認します。

    $ rbenv versions
      system
    * 2.6.6 (set by /Users/shinyasato/.rbenv/version)

    念のためglobaで使うRubyも、インストールしたRubyに切り替えていきます。

    $ rbenv global 2.6.6

    以下のコマンドを打って、Rubyのバージョンが変わっていたら完了です😀

    $ ruby -v
    ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-darwin19]

    Rubyのバージョンが切り替わらない場合

    Rubyのバージョンが切り替わらない場合、以下のコマンドを入力して、ルートディレクトリに.bash_profileというファイルを作ります。

    $ vi ~/.bash_profile

    ターミナルの画面が変わったら、キーボードの「I」を押します。
    その後、以下の情報を書き込みます。

    export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"
    eval "$(rbenv init -)"

    コードを追加したら、

    1. 「esc」キーを押す
    2. 「:wq」と入力する
    3. 「Enter」を押す

    上記を実行すると、コードの保存が終わり、エディターが閉じます。
    その後以下のコマンドを入力して、変更を反映させます。

    $ source ~/.bash_profile

    再度Rubyのバージョンをチェックしてみて、反映されていたら成功です😀

    bundlerのインストール

    bundlerとは、Rubyで作られたライブラリを管理するための、パッケージマネージャーです。
    Homebrewとはまた違います。

    Homebrewは、Mac本体にインストールしたいプログラミング言語を管理する、パッケージマネージャーです。
    bundlerは、Rubyを使うライブラリを管理するための、パッケージマネージャーです。

    まずは以下のコマンドを入力して、rbenvを使ってbundlerをインストールします。

    $ rbenv exec gem install bundler

    パスが通っていないこともあるので、リフレッシュしてちゃんと動作するか確認します。

    $ rbenv rehash # パスを通す
    $ rbenv exec bundler -v # bundlerが動作するか確認
    $ Bundler version 2.1.4 # bundlerのバージョン

    2. ライブラリをインストールする

    bundlerでインストールするパッケージを管理していきます。
    以下のコマンドを入力して、ルートディレクトリにGemfileを作成します。

    $ rbenv exec bundler init

    次に以下のコマンドを入力して、Gemfileを編集していきます。
    このGemfileに、インストールしたいパッケージを書き込んでいきます。

    $ vi ~/Gemfile

    ターミナルの画面が変わったら、キーボードの「I」を押します。
    その後、以下の情報を書き込みます。

    # frozen_string_literal: true
    
    source "https://rubygems.org"
    
    git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
    
    # gem "rails"
    gem "rake"
    gem "zendesk_apps_tools", '3.8.1'
    gem "sassc"
    gem "filewatcher"

    コードを追加したら、

    1. 「esc」キーを押す
    2. 「:wq」と入力する
    3. 「Enter」を押す

    上記を実行すると、コードの保存が終わり、エディターが閉じます。
    以下のコマンドを入力して、bundlerに記載したパッケージをインストールしていきます。

    $ bundle install

    最後に以下のコマンドを入力して、パッケージがインストールされているか確認します。

    $ bundle exec zat -v
    3.8.1

    バージョンが正常に表示されたら、Zendesk Apps Tool(ZAT)のインストールが成功しています😊


    3. ベースのテーマをダウンロードする

    以下のコマンドを入力して、「書類」ディレクトリに移動します。

    $ cd
    $ cd documents

    次に以下のコマンドを入力して、「書類」ディレクトリにベーステーマをダウンロードします。

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

    「書類」ディレクトリに、「copenhagen_theme」というフォルダが作られていたら、ダウンロードが成功しています😀


    4. APIトークンを発行する

    Step1
    まずはZendesk Supportの管理画面にアクセスします。
    左側メニューの歯車アイコンをクリックして、【API】をクリックします。
    Step2
    【APIトークンを追加】をクリックします。
    Step3
    「APIトークンの説明」を入力して、APIトークンをコピーして【保存】をクリックします。
    注意:APIトークンは保存すると二度と表示されないので、必ずコピーを取り保存してください。

    これでAPIトークンの発行が完了しました。


    5. ローカルでZendeskを動かす

    コピーしたcopenhagenのテーマと、APIトークンを使って、実際にローカルでZendeskを動かしていきます。

    ログイン情報を保存する

    以下のコマンドを入力して、コピーしたcopenhagenのディレクトリに移動します。

    $ cd # ルートディレクトリに移動
    $ cd documents # 「書類」ディレクトリに移動
    $ cd copenhagen_theme # コピーしたcopenhagenのテーマに移動

    以下のコマンドを入力して、.zatファイルを作成します。

    $ touch .zat

    作成した.zatファイルを開いて、以下のように情報を入力します。

    {
      "subdomain": "サブドメインを入れる",
      "username": "ログインするメールアドレス",
      "password": "パスワード or APIトークン"
    }
    • subdomain
      • Zendeskのサブドメインを入れます(例:https://hogehoge.zendesk.com)
    • username
      • 「登録したメールアドレス@gmail.com/token」と入力します
    • password
      • APIトークンを入力します

    APIトークンでログインする場合は、登録したメールアドレスの末尾に/tokenを入力します。
    入力が終わったら、以下のコマンドを実行して、ローカルでZendeskのプレビューを起動させます。

    $ bundle exec zat theme preview

    以下のように表示されていればOKです。

    $ bundle exec zat theme preview
      Generating  Generating theme from local files
      Generating  OK
       Uploading  Uploading theme
       Uploading  OK
           Ready  https://hogehoge.zendesk.com/hc/admin/local_preview/start
    You can exit preview mode in the UI or by visiting https://hogehoge.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

    https://hogehoge.zendesk.com/hc/admin/local_preview/startにアクセスして、以下の画像のようなプレビューが表示されていれば成功です😊

    CSSを編集できるようにする

    ZendeskはSCSSを使って、CSSを編集します。

    プレビューを表示させただけでは、SCSSからCSSに変換されません。
    CSSを編集したい場合は、以下のコマンドを入力してSCSSの変更を自動的に感知して、CSSに変換されるようにします。

    $ bundle exec filewatcher './styles/*.scss' './bin/compile.rb'

    これでSCSSの変更をRubyが自動的に感知して、CSSに変換してくれます😊


    6. 作ったデザインをZendeskにアップロードする

    なんやかんや色々と変更して、以下のようなデザインが出来上がったものとします😅

    作ったデザインを、Zendeskにアップロードしていきます。
    テーマのルートディレクトリにあるmanifest.jsonを開き、以下の箇所を修正します。

    "name": "テーマの名前",
    "author": "テーマの作者",

    編集したらZendesk Guideを開き、目玉マークをクリックします。
    【テーマを追加】をクリックし、【テーマをインポート】をクリックします。

    事前に作ったテーマを、ZIPファイルに圧縮しておいてください。

    テーマの追加が完了したら、三つの点のアイコンをクリックして、【ライブテーマとして設定】をクリックします。
    以上で設定が完了します😀


    最後に

    以上でZendeskを編集できる環境をローカルに構築して、Zendeskへアップロードすることができるようになります。

    プログラミングが少しわかるサポート担当者とかなら、Zendeskを使うといいかもしれません。
    かなり自由度が高いヘルプセンターが作れると思います😊

    ちなみに記事では触れませんでしたが、JavaScriptも自由に設定することができます。

    ではでは、またね〜🤗

    • 【Zendeskの使い方】ローカルに環境を作りデザインを変える