cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

Givery PEP 連携-Garoon や Slack に設置したチャットボットから Garoon 予定を取得しよう-

作成日
更新日

Index

はじめに

株式会社ギブリー運営の AI アシスタント PEP を Web（Garoon）上および Slack に設置し、PEP からガルーン API を呼び出すことで Garoon の予定を取得する方法についてご紹介します。

PEP は、専用の GUI エディタで自然言語処理による一問一答や選択肢型によるシナリオを定義し、
ノンプログラミングで AI アシスタント（チャットボット）を構築できるサービスです。
Web への設置はもちろん、Slack、Microsoft Teams、LINE WORKS とも連携可能で、
さらに外部サービスの API を呼び出すことで、社内で利用されている様々なシステムの情報をボットからの呼び出しに統一することができます。

できること

この記事では、Garoon 上で会話できる AI アシスタントと、Slack 上で会話できる AI アシスタントを紹介します。

Garoon に AI アシスタントを設置する

Garoon 上に AI アシスタントのウィジェットを設置し、会話を行います。
全体 JS としてカスタマイズを適用すると、ポータル・スケジュール・メール・ワークフローなどアプリケーションに関係なく、Garoon 画面上にウィジェットを設置できます。

このウィジェットは、Garoonをスマートフォンのブラウザで開いたときでも利用できます。

garoon-pep.png

Slack に AI アシスタントを設置する

Slack で /home と入力する※ と AI アシスタントが起動します。
※ コマンド名は自由に設定できます。

slack0.png

ボタンを使って、AI アシスタントと対話します。

slack1.png

システム構成

garoon-pep.png

Garoon に配置したAIアシスタントのウィジェットまたは Slack 上から、PEP で作成したアプリケーションを呼び出すと、アプリケーションのシナリオが実行されます。

シナリオでは、APIノードとして Garoon の予定取得 API を実行する API ノードを配置しています。 

必要なもの

  • Garoon クラウド版 アカウント
  • AI アシスタント PEP アカウント　※ アカウントのお申込みはこちらをご参照ください。
  • Slack アカウント（Slack上に AI アシスタントを設置する場合）

設定

Garoon に AI アシスタントを設置する

1. AIアシスタント作成・Garoon 上へ設置

Step 1：PEP でのアプリケーション作成

  1. PEP 管理画面でログインします。
    20200121_084733.png
  2. アプリケーション一覧画面で、[新規作成]ボタンをクリックし、アプリケーションを新規作成します。
  3. 次の内容を入力し、画面下部の[新規作成]ボタンをクリックします。
    __2.png
    項目 値
    アプリケーション名 任意の値を設定します
    この記事では「AssistantHelpdesk」としています。
    アプリケーションタイプ 「Webチャットボット」を設定します
    チャットウィンドウを設置するドメイン https://{subdomain}.cybozu.com
    利用しているGaroon のドメインを指定します。
    アプリケーション公開状況 公開中
    チャットウィンドウ AIアシスタントのロゴなどを設定します。
    チャットビジュアル 任意の値を設定します。
    この記事では「ボックスタイプ」を選択しています。
  4. 作成したアプリケーションの設定画面で、[スクリプトを生成]ボタンをクリックします。
  5. 任意のチャットウィンドウの表示形式を選択し、表示されるスクリプトタグをメモします。後述の Garoon の設定で利用します。
    2020-01-21_9_22_07.png

Step 2：Garoon へ設置

  1. Garoon にログインし、Garoon システム管理画面を開きます。
  2. 「基本システムの管理」タブをクリックし、[カスタマイズ] を選択します。
  3. [JavaScript/CSSによるカスタマイズ]をクリックします。
  4. カスタマイズグループを追加する]をクリックします。
  5. 以下の内容を入力します。入力が終わったら、[追加する]をクリックします。
    customize.png
    項目名 設定値
    カスタマイズ 「適用する」を選択します。
    カスタマイズグループ名 任意の値を入力します。
    この記事では「PEP」としています。
    適用対象 カスタマイズを適用するユーザーやグループを選択します。
    JavaScript カスタマイズ 以下の内容で、拡張子 js ファイルとして保存したファイルを追加します。文字コードは「UTF-8」を使用してください。
    ※ コピーしたスクリプトの部分は、「Step1：PEP のアプリケーション作成」で控えたスクリプトタグに置き換えてください。
    CSS カスタマイズ なし
  6. Garoon のポータルを開き、AI アシスタントのウィジェットが表示されていることを確認します。
    ※ 全体JS でカスタマイズを適用しているので、スケジュールなど各アプリケーションの画面でも表示されます。
    __6.png

2. シナリオの登録

Step 1：シナリオの新規作成

  1. PEP 管理画面でログインします。
  2. 作成したアプリケーションを開きます。
  3. 左サイドメニューから「シナリオ」を選択します。
  4. [新規作成]ボタンをクリックし、新規シナリオを作成します。
    __7.png
    項目名 設定値
    シナリオ名 任意の値を設定します。
    シナリオに入る条件 チャットウィンドウを開いた場合

Step 2：対話ノードの作成

「対話ノード」でボットの応答文を作成します。対話ノードはドラッグアンドドロップで追加できます。

  1. シナリオを新規作成すると、シナリオエディタが表示されます。
  2. エディタ画面に追加した「対話ノード」をクリックして設定を開き、「応答文」を設定します。
    ここでは、AI アシスタントが開いたら「こんにちは」と発言するように設定してみます。
    __8.png
  3. 追加した「対話ノード」を右のエディタ画面にドラッグし、対話開始ポイントと接続します。
    __9.png

Step 3：対話ノードの接続

  1. 対話ノードの「条件分岐」の[追加]ボタンをクリックし、分岐を追加します。
    分岐条件を追加すると、ユーザーの応答に応じて会話フローを分岐させることができます。
    ここでは、クリックしたボタンに応じて返答内容を変えてみます。
    condition.png
  2. 分岐先に「対話ノード」をつなぐと、それぞれのボタンをクリックしたときの会話フローを作成できます。
    __9_____.png
  3. 「シナリオ動作確認」をクリックすると、作成したシナリオを確認できます。
    __10.png

3. Garoon の予定を取得するノードの作成

次のような、今日の予定を取得するシナリオを作成します。

__11.png
__12.png

Step 1：OAuth クライアントの追加

cybozu.com 共通管理の設定から、OAuth クライアントを追加します（参照：OAuthクライアントの使用）。

  1. cybozu.com 共通管理画面を開きます。
  2. 「システム管理」の[外部連携]を選択します。
  3. 「高度な連携を設定する」の[OAuthクライアントの追加]をクリックします。
  4. 以下の内容を入力します。入力が終わったら、[保存]をクリックします。
    oauth.png
    項目名 設定値
    クライアント名 任意の値を入力します。
    ここでは「PEP連携」としています。
    クライアントロゴ 任意の画像を指定します。
    リダイレクトエンドポイント PEP 管理画面で取得できます。
  5. 次が発行されるので、値をメモしておいてください。後述の「OAuth 2.0設定 および APIノードの作成」で利用します。
    • クライアントID
    • クライアントシークレット
    • 認可エンドポイント
    • トークンエンドポイント

Step 2：OAuth 2.0設定 および API ノードの作成

  1. PEP 管理画面でログインします。
  2. 画面上部の「管理メニュー」から「OAuth2.0設定」を選択します。
  3. 次の内容を入力します。入力が終わったら[新規作成]ボタンをクリックして保存します。
    20200122_095437.png
    項目名 設定値 説明
    Domain cybozu Authorization URI のドメイン名です。
    Authorization URI OAuth クライアントの追加でメモした「認可エンドポイント」  
    Access Token URI OAuth クライアントの追加でメモした「トークンエンドポイント」  
  4. 作成済みのシナリオを選択し、シナリオエディタを開きます。
  5. シナリオノードを次のように設定します。
    __12.png
  6. APIノードは、次のように設定します。入力が終わったら[設定]ボタンをクリックします。
    2020-01-22_11_45_06.png
    項目名 設定値
    API名 任意の値を設定します。
    ここでは「getScheduleToday」としています。
    URL https://{subdomain}.cybozu.com/g/api/v1/schedule/events
    ※ {subdomain} は利用している Garoon のサブドメインを設定してください。
    HTTPメソッド GET
    Content-Type application/json
    OAuth2 「利用する」にチェックします。
    OAuth の設定値は次の値を設定します。
    • client_id：OAuth クライアントの追加でメモした「クライアントID」
    • client_secret：OAuth クライアントの追加でメモした「クライアントシークレット」
    • scope：g:schedule:read
    ボディ それぞれ以下のキーと値を設定します。
    キー 値
    rangeStart {{ 0 | days_later | date:"Y-m-d\T00:00:00+09:00" }}
    rangeEnd {{ 0 | days_later | date:"Y-m-d\T23:59:59+09:00" }}
  7. APIノードの「呼び出し成功した場合」に接続するノードでは、API のリクエスト結果を用いて、応答文を作成します。
    API リクエスト結果などのデータを処理して表示する場合、Django テンプレートのシンタックスで記述します。
    __14.png
    応答文 
    ■本日の予定です
    {% for item in state.scenario_1.api_response.API_NAME.events %}
    {{item.start.dateTime | strptime:"%Y-%m-%dT%H:%M:%S+09:00" | date:"H:i"}}-{{item.end.dateTime | strptime:"%Y-%m-%dT%H:%M:%S+09:00" | date:"H:i"}} {{item.subject}}
    {% endfor %}
    ※ API_NAME は、APIノードで設定した「API名」に置き換えます。
  8. シナリオができたら[シナリオを保存する]ボタンをクリックします。
  9. 「シナリオを公開する」をクリックし、Garoon 上に設置したウィジェットから実行できるようにします。

4. 動作確認する

  1. Garoon にログインします。
  2. チャットウィジェットで「今日の予定を取得」ボタンをクリックします。
    _2020-01-22_9.39.43.png
  3. 「認証」ボタンをクリックします。
    _2020-01-22_9.40.26.png
  4. 別タブが表示され、「Garoon スケジュール予定、施設、施設グループの取得」に対するアクセス許可を求められます。「許可」ボタンをクリックします。
    20200122_094052.png
  5. タブを閉じて、Garoon の画面に戻ります。
  6. 「認証完了、次へ」をクリックします。
    _2020-01-22_9.40.26.png
  7. 取得した今日の予定が表示されます。
    _2020-01-22_9.40.26-2.png

Slack に AI アシスタントを設置する

Slack 上で会話できる Slack App（AIアシスタント）を設置します。

1. AIアシスタント作成・Slack 設定

  1. PEP 管理画面でログインします。
  2. アプリケーション一覧画面で、[新規作成]ボタンをクリックし、アプリケーションを新規作成します。
  3. 次の内容を入力し、画面下部の[新規作成]ボタンをクリックします。
    20200122_132057.png
    項目 値
    アプリケーション名 任意の値を設定します
    アプリケーションタイプ 「Slack チャットボット」を設定します
  4. 作成したら、画面に表示される Slack callback url をメモしておきます。Slack App の設定で利用します。
  5. テンプレートの選択を求めるモーダルが表示された場合、[x]をクリックして閉じます。
  6. Slack API 管理画面から、Slack アプリを追加します。
    •  以下の機能を追加し、Slackアプリをワークスペースに追加します。
      • Bots
      • Event Subscriptions
      • Slash Command
    • Request URL には、PEP 管理画面で作成したアプリケーションの Slack callback url を設定します。
    • Slack App で発行される「OAuth Access Token」および「Bot User OAuth Access Token」は、メモしておいてください。
      PEP の管理画面で利用します。
  7. PEP 管理画面に戻り、作成したアプリケーションの設定画面で、Slackアプリの設定を入力します。
    20200122_134711.png
    項目 値
    OAuth Access Token Slack App で追加したアプリの OAuth Access Token
    Bot User OAuth Access Token Slack App で追加したアプリの Bot User OAuth Access Token
  8. シナリオを作成します。Garoon から今日の予定を取得するシナリオの作成手順は、2. シナリオの登録および3. Garoon の予定を取得するノードの作成を参照してください。
    なお、「シナリオに入る条件」は「SLACK Home command」を選択します。
    __19.png

2. 動作確認

  1. Slack を開きます。
  2. 左サイドメニューから「App」を選択し、追加した Slack App を選択します。
    最近使用したアプリに Slack App の名前が表示されます。
  3. Slack App を選択します。
    __20.png
  4. メッセージ欄に「/home」を入力して送信します。
  5. Slack 上のAIアシスタントが起動します。
  6. [今日の予定を取得]ボタンをクリックし、作成したシナリオが表示されるかを確認します。
    __21.png

おわりに

PEP で作成したシナリオ上で API ノードを利用すると、Slack 上で Garoon の予定などの情報を取り出せます。
また、この記事では、Garoonの予定を取得するシナリオを作成しましたが、例えば情シス部門へのFAQのシナリオを作成すると、
問い合わせ業務を自動化でき、利用者はチャットボット上で対話的に問い合わせできるようになります。

この記事で利用した Garoon REST API

PEP へのお申し込み方法

PEPのお申込みはこちら、または以下までお問い合わせください。
PEP公式サイト内にあるチャットでも対応しております。
Tel : 03-6277-5463　（PEPカスタマーサポート担当宛て）
PEP公式サイト：https://pep.work/

このTipsは、2020年1月版 Garoon で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。