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

目次

はじめに

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

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

できること

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

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

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

このウィジェットは、Garoon をモバイルのブラウザーで開いたときでも利用できます。

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

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

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

システム構成

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

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

必要なもの

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

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

Step 1:PEP でのアプリケーション作成
  1. PEP 管理画面でログインします。

  2. アプリケーション一覧画面で、[新規作成]ボタンをクリックし、アプリケーションを新規作成します。

  3. 次の内容を入力し、画面下部の[新規作成]ボタンをクリックします。

    項目
    アプリケーション名 任意の値を設定します
    この記事では「AssistantHelpdesk」としています。
    アプリケーションタイプ 「Webチャットボット」を設定します
    チャットウィンドウを設置するドメイン https://{subdomain}.cybozu.com
    利用しているGaroon のドメインを指定します。
    アプリケーション公開状況 公開中
    チャットウィンドウ AIアシスタントのロゴなどを設定します。
    チャットビジュアル 任意の値を設定します。
    この記事では「ボックスタイプ」を選択しています。
  4. 作成したアプリケーションの設定画面で、[スクリプトを生成]ボタンをクリックします。

  5. 任意のチャットウィンドウの表示形式を選択し、表示されるスクリプトタグをメモします。後述の Garoon の設定で利用します。

Step 2:Garoon へ設置
  1. Garoon にログインし、Garoon システム管理画面を開きます。

  2. 「基本システムの管理」タブをクリックし、[カスタマイズ]を選択します。

  3. [JavaScript/CSS によるカスタマイズ]をクリックします。

  4. カスタマイズグループを追加する]をクリックします。

  5. 以下の内容を入力します。入力が終わったら、[追加する]をクリックします。

    項目名 設定値
    カスタマイズ 「適用する」を選択します。
    カスタマイズグループ名 任意の値を入力します。
    この記事では「PEP」としています。
    適用対象 カスタマイズを適用するユーザーやグループを選択します。
    JavaScript カスタマイズ カスタマイズファイル の内容をテキストエディタに貼り付け、拡張子 .js で保存したファイルを追加します。
    文字コードは「UTF-8」を使用してください。
    CSS カスタマイズ なし
  6. Garoon のポータルを開き、AI アシスタントのウィジェットが表示されていることを確認します。
    全体 JS でカスタマイズを適用しているので、スケジュールなど各アプリケーションの画面でも表示されます。

カスタマイズファイル
1
document.write('コピーしたスクリプト');

コピーしたスクリプト の部分は、 Step 1:PEP でのアプリケーション作成 で控えたスクリプトタグに置き換えてください。

2. シナリオの登録

Step 1:シナリオの新規作成
  1. PEP 管理画面でログインします。
  2. 作成したアプリケーションを開きます。
  3. 左サイドメニューから「シナリオ」を選択します。
  4. [新規作成]ボタンをクリックし、新規シナリオを作成します。

    項目名 設定値
    シナリオ名 任意の値を設定します。
    シナリオに入る条件 チャットウィンドウを開いた場合
Step 2:対話ノードの作成

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

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

  3. 追加した「対話ノード」を右のエディタ画面にドラッグし、対話開始ポイントと接続します。

Step 3:対話ノードの接続
  1. 対話ノードの「条件分岐」の[追加]ボタンをクリックし、分岐を追加します。
    分岐条件を追加すると、ユーザーの応答に応じて会話フローを分岐させることができます。
    ここでは、クリックしたボタンに応じて返答内容を変えてみます。

  2. 分岐先に「対話ノード」をつなぐと、それぞれのボタンをクリックしたときの会話フローを作成できます。

  3. 「シナリオ動作確認」をクリックすると、作成したシナリオを確認できます。

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

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

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

cybozu.com 共通管理の設定から、OAuth クライアントを追加します(参照: OAuth クライアントを追加する)。

  1. cybozu.com 共通管理画面を開きます。

  2. 「システム管理」の[外部連携]を選択します。

  3. 「高度な連携を設定する」の[OAuth クライアントの追加]をクリックします。

  4. 以下の内容を入力します。入力が終わったら、[保存]をクリックします。

    項目名 設定値
    クライアント名 任意の値を入力します。
    ここでは「PEP連携」としています。
    クライアントロゴ 任意の画像を指定します。
    リダイレクトエンドポイント PEP 管理画面で取得できます。
  5. 次が発行されるので、値をメモしておいてください。後述の OAuth 2.0 設定 および APIノードの作成 で利用します。

    • クライアント ID
    • クライアントシークレット
    • 認可エンドポイント
    • トークンエンドポイント
Step 2:OAuth 2.0 設定 および API ノードの作成
  1. PEP 管理画面でログインします。

  2. 画面上部の「管理メニュー」から「OAuth2.0 設定」を選択します。

  3. 次の内容を入力します。入力が終わったら[新規作成]ボタンをクリックして保存します。

    項目名 設定値
    Domain cybozu
    Authorization URI のドメイン名です。
    Authorization URI OAuth クライアントの追加でメモした「認可エンドポイント」
    Access Token URI OAuth クライアントの追加でメモした「トークンエンドポイント」
  4. 作成済みのシナリオを選択し、シナリオエディタを開きます。

  5. シナリオノードを次のように設定します。

  6. API ノードは、次のように設定します。入力が終わったら[設定]ボタンをクリックします。

    項目名 設定値
    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-dT00:00:00+09:00" }}
    • キー:rangeEnd
      値:{{ 0 | days_later | date:"Y-m-dT23:59:59+09:00" }}
  7. API ノードの「呼び出し成功した場合」に接続するノードでは、API のリクエスト結果を用いて、応答文を作成します。
    API リクエスト結果などのデータを処理して表示する場合、 Django テンプレート (External link) のシンタックスで記述します。

    応答文

    1
    2
    3
    4
    
    ■本日の予定です。
    {% 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. チャットウィジェットで「今日の予定を取得」ボタンをクリックします。

  3. 「認証」ボタンをクリックします。

  4. 別タブが表示され、「Garoon スケジュール予定、施設、施設グループの取得」に対するアクセス許可を求められます。「許可」ボタンをクリックします。

  5. タブを閉じて、Garoon の画面に戻ります。

  6. 「認証完了、次へ」をクリックします。

  7. 取得した今日の予定が表示されます。

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

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

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

  1. PEP 管理画面でログインします。

  2. アプリケーション一覧画面で、[新規作成]ボタンをクリックし、アプリケーションを新規作成します。

  3. 次の内容を入力し、画面下部の[新規作成]ボタンをクリックします。

    項目
    アプリケーション名 任意の値を設定します
    アプリケーションタイプ 「Slack チャットボット」を設定します
  4. 作成したら、画面に表示される Slack callback url をメモしておきます。Slack App の設定で利用します。

  5. テンプレートの選択を求めるモーダルが表示された場合、[×]をクリックして閉じます。

  6. Slack API 管理画面 (External link) から、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 アプリの設定を入力します。

    項目
    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」を選択します。

2. 動作確認

  1. Slack を開きます。
  2. 左サイドメニューから「App」を選択し、追加した Slack App を選択します。
    最近使用したアプリに Slack App の名前が表示されます。
  3. Slack App を選択します。

  4. メッセージ欄に /home を入力して送信します。
  5. Slack 上の AI アシスタントが起動します。
  6. [今日の予定を取得]ボタンをクリックし、作成したシナリオが表示されるかを確認します。

おわりに

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

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

複数の予定を取得する

PEP へのお申し込み方法

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

information

この Tips は、2020 年 1 月版 Garoon で動作を確認しています。