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

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

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

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

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

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

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

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

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

• Garoonクラウド版アカウント
• AIアシスタントPEP アカウント
  アカウントのお申込みは PEPへのお申し込み方法 を参照してください。
• Slack アカウント
  Slack上にAIアシスタントを設置する場合は必要です。

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でのアプリケーション作成 で控えたスクリプトタグに置き換えてください。

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

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

   

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

Step 2：対話ノードの作成

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

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

   

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

   

Step 3：対話ノードの接続

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

   

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

   

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

   

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

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テンプレート のシンタックスで記述します。
   

   

   応答文

   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上へ設置したウィジェットから実行できるようにします。

1. Garoonにログインします。

2. チャットウィジェットで「今日の予定を取得」ボタンをクリックします。
   

   

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

   

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

   

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

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

   

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

   

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

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

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

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

   

   項目	値
   アプリケーション名	任意の値を設定します
   アプリケーションタイプ	「Slackチャットボット」を設定します

4. 作成したら、画面に表示されるSlack callback urlをメモしておきます。Slack Appの設定で利用します。

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

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アプリの設定を入力します。
   

   

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

   

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

   

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

   

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

複数の予定を取得する

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

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