inSmartBank

B/43を運営する株式会社スマートバンクのメンバーによるブログです

オリジナルのZendeskアプリ開発でCS生産性を向上させる

こんにちは、おはようございます、こんばんは、スマートバンクでCREをしている佐藤(@tmnbst)です。

弊社ではお問い合わせの対応にZendeskを利用しています。Zendeskには、アプリマーケットプレイスがあり、Zendeskの機能を拡張するためのアプリを追加することができます。これにより、標準のZendeskにはない機能を追加することができます。また、アプリはユーザー自身で開発することもでき、自社のCS業務に合わせたアプリを開発することができます。

今回は、オリジナルのZendeskアプリを開発して、CS生産性を向上させた事例を紹介したいと思います。

開発のきっかけ

日々、CSチームが行っている作業の中で、問い合わせユーザーの状況を社内管理画面で確認するプロセスがあります。

このプロセスは、以下の手順で行われていました。

  1. Zendeskのチケットページからお問い合わせを確認
  2. チケットページからZendeskのユーザーページに遷移
  3. ユーザーページからメールアドレスの編集をクリック
  4. メールアドレスが編集可能になるので、メールアドレスをコピー(ここで本当に編集してしまわないように注意!
  5. 社内管理画面のユーザー一覧ページを表示
  6. ユーザー一覧ページで検索ボックスにメールアドレスをペーストして検索
  7. ユーザーの検索結果を表示
  8. 検索結果からユーザー詳細情報に遷移して、状況を確認

実際の操作


ユーザー情報を確認するために、1日1回ならまだしも、1日に何度もこの作業を行うので、時間もかかるし、作業効率が悪いと感じていました。CSチームにおける、このような煩雑な作業を減らし、お問い合わせに迅速に対応できるようにするために、Zendeskアプリを開発することにしました。

作ったZendeskアプリ

2〜6ステップをなくし、ワンクリックで社内管理画面でユーザーの検索結果を表示するアプリを開発しました。


一瞬でユーザー検索結果が表示され、煩雑な作業が減ったことがお分かりいただけましたでしょうか!

次にどのようにアプリを開発したかを紹介したいと思います。

アプリ開発の流れ

以下のステップでアプリを開発しました。

  1. 開発アカウントの取得
  2. ZCLIのインストール
  3. 認証
  4. アプリのスターターファイルを作成
  5. アプリの開発
  6. ローカルでアプリをテスト
  7. アプリのデプロイ

技術スタック

  • Node.js 14.17.3以降
    • Zendesk Command Line Interface (ZCLI)を使用するために必要です。
  • Zendesk Command Line Interface (ZCLI)
    • アプリのビルドやテスト、デプロイについてのコマンドを提供します。
  • Zendesk Application Framework SDK(ZAF SDK)
    • Zendesk本体との通信を行うためのJavaScriptライブラリです。お問い合わせ情報などリソース情報の取得や、アプリのサイズ変更などのイベントの検知を行うことができます。

1. 開発アカウントの取得

Zendeskアプリを開発するためには、Zendeskのアカウントが必要です。すでにZendeskを利用している場合は、そのアカウントを使用することができます。まだアカウントを持っていなかったり、お試しで開発してみたい場合は、トライアルアカウントまたはZendesk Supportアカウントを Getting a trial or sponsored account for development から取得することができます。

2. ZCLIのインストール

ZCLIは、Zendeskアプリを開発するためのコマンドラインツールです。ZCLIを使用すると、Zendeskアプリをローカルで構築、テスト、パッケージ化など、さまざまな操作を行うことができます。

$ npm install @zendesk/zcli -g

3. 認証

ZCLIを使用してアプリを開発するには、Zendeskアカウントにログインする必要があります。以下のコマンドを実行して、Zendeskアカウントにログインします。

$ zcli login -i
Subdomain: {Zendesk管理画面URLサブドメイン}
Email: {登録したメールアドレス}/token
Password: {APIトークン}
Successfully logged in.

実行すると、サブドメイン、メールアドレス、パスワードを入力するプロンプトが表示されます。

  • サブドメイン: Zendesk管理画面URLサブドメイン
  • メールアドレス: /token の文字列を追加したメールアドレスを指定します。Zendeskに登録したメールアドレスが tomonobu_sato@example.com であれば、tomonobu_sato@example.com/token となります
  • パスワード: Zendeskの管理画面から取得したAPIトークンを指定します。APIトークン取得方法は https://support.zendesk.com/hc/ja/articles/4408889192858-Zendesk-APIへのアクセス管理#topic_tcb_fk1_2yb をご覧ください。

4. アプリのスターターファイルを作成

ZCLIを使用して、アプリの雛形を作成します。

$ zcli apps:new

Enter a directory name to save the new app (will create the dir if it does not exist):
Enter this app authors name:
Enter this app authors email:
Enter this app authors website (optional):
Enter a name for this new app:
Successfully created new project sample_app
  • ディレクトリ名: アプリを作成するディレクトリ
  • 著者名: あなたの名前
  • メールアドレス: あなたのメールアドレス
  • ウェブサイト: 空白のまま Enter キーを押します
  • アプリ名: 開発するアプリの名前

実行が完了すると以下のファイルが作成されます。

test_app
├── assets
│   ├── iframe.html
│   ├── logo-small.png
│   ├── logo.png
│   └── logo.svg
├── manifest.json
├── README.md
└── translations
    └── en.json

5. アプリの開発

Zendeskアプリは、Zendesk各種ページ内のiframeとして表示されます。アプリの開発はHTML、CSS、JavaScriptを使用して行います。アプリの開発を行うためには、assetsディレクトリ内のiframe.htmlファイルを編集します。

デフォルトのiframe.htmlファイルの内容は以下の通りです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--   See Using Zendesk Garden:
    https://developer.zendesk.com/apps/docs/developer-guide/setup#using-zendesk-garden
    https://garden.zendesk.com/css-components/bedrock/
    https://garden.zendesk.com/css-components/utilities/typography/
   -->
</head>
<body>
  <h2 class="u-semibold u-fs-xl">Hello, World!</h2>
  <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
  <script>
    // Initialise Apps framework client. See also:
    // https://developer.zendesk.com/apps/docs/developer-guide/getting_started
    var client = ZAFClient.init();
    client.invoke('resize', { width: '100%', height: '200px' });
  </script>
</body>
</html>

実際に開発したアプリのコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <!-- ZAF SDKの読み込み -->
  <script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Zendeskアプリケーションフレームワーククライアントを初期化
      const client = ZAFClient.init();
      // アプリのウィンドウサイズを設定
      client.invoke('resize', { width: '100%', height: '200px' });

      // 現在のチケットの問い合わせユーザーのメールアドレスを取得
      client.get('ticket.requester.email').then(emailData => {
        if (emailData && emailData['ticket.requester.email']) {
          // 取得したメールアドレスをエスケープし、検索用のURLを生成
          const escapedEmail = encodeURIComponent(emailData['ticket.requester.email']);
          const emailSearchUrl = `https://{社内管理画面のURL}/users?filter={"email":"${escapedEmail}"}`;

          // Handlebarsを使用してリンクを生成
          const requesterData = { email_search_url: Handlebars.escapeExpression(emailSearchUrl) };
          const source = document.getElementById("email-template").innerHTML;
          const template = Handlebars.compile(source);
          const html = template(requesterData);

          // 生成されたHTMLをページに挿入
          document.getElementById("content").innerHTML = html;
        }
      });
    });
  </script>
  <!-- Handlebarsライブラリを読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
  <!-- ここに生成されたリンクが挿入される -->
  <div id="content"></div>
  <!-- Handlebarsテンプレート。メールアドレスで検索するリンクを生成 -->
  <script id="email-template" type="text/x-handlebars-template">
    {{#if email_search_url}}
    <a href="{{{email_search_url}}}" target="_blank">メールアドレスでA/43を検索する</a><br />
    {{/if}}
  </script>
</body>
</html>

ご覧いただけると分かると思いますが、非常に規模の小さいコードになっています。

以下の部分でZendesk本体と通信を行いリソース情報を取得しています。

// Zendeskアプリケーションフレームワーククライアントを初期化
const client = ZAFClient.init();
...
// 現在のチケットの問い合わせユーザーのメールアドレスを取得
client.get('ticket.requester.email')

ZAFClientを利用して、取得できるリソース情報やイベントの検知はZAF Client APIドキュメントに詳しく載っています。

ただ実際にどんな情報が取得できるかドキュメントだけではわかりにくい場合があります。そのような場合は、Zendeskのv2 REPLを使用して、実際にコードを実行しながらデバッグすることができます。

6. ローカル環境でアプリをテスト

アプリの開発が完了したら、ローカルでアプリをテストします。以下のコマンドを実行して、アプリをローカルで起動します。

$ zcli apps:server

Apps server is running on http://localhost:4567 🚀

Add ?zcli_apps=true to the end of your Zendesk URL to load these apps on your Zendesk account.

ただし、アプリの表示や動作はZendeskの画面内で確認する必要があります。URLの最後に zcli_apps=true パラメータをつけることで、ローカルで開発したアプリをZendeskの画面内で確認することができます。

https://{subdomain}.zendesk.com/agent/tickets/1?zcli_apps=true

7. アプリのデプロイ

アプリを利用できるようにするために、デプロイを行います。

$ zcli apps:create

Uploading app... Uploaded
Deploying app... Deployed
Successfully installed app: user-search with app_id: 1045734

デプロイが完了すると ?zcli_apps=true のパラメータなしで、アプリが利用できるようになります。

まとめ

このZendeskアプリの開発プロジェクトを通じて、CSチームの業務効率を大幅に向上させることができました。Zendeskアプリの開発は開発環境も整っており、迅速かつ効率的にアプリを開発することができます。今回のアプリ開発を通じて得られた知見を基に、今後もCS業務の改善に役立つツールやアプリの開発を進めていきたいと考えています。

読者の皆さんも、自社のCS業務プロセスを改善するために、ぜひZendeskのアプリ開発を検討してみてください。きっと業務効率の向上に大きく貢献するでしょう!

スマートバンクではCSチームの生産性を向上させるエンジニアを募集しています!

smartbank.co.jp

smartbank.co.jp

We create the new normal of easy budgeting, easy banking, and easy living.
In this blog, engineers, product managers, designers, business development, legal, CS, and other members will share their insights.