カテゴリー内の他の記事

Garoonのワークフローから、チャットワークのチャットルームへメッセージを送信する

フォローする

はじめに

Garoonのワークフローからチャットワークへメッセージを送信するサンプルです。
チャットワークに「Garoon連携用のユーザアカウント」を作成し、個人ユーザとコンタクトすることで、Garoonのワークフロー画面上から承認者あてに催促メッセージを送ることができます。

概要

Garoonのワークフローから申請を行った後に、申請者から承認者へ「承認の催促」を行うボタンを表示します。
「催促」ボタンをクリックすると、直近の未処理の承認者あてにチャットワークのメッセージを送信します。

ワークフローの承認が完了したり、却下された場合は、催促ボタンが表示されなくなりますので、これ以上の催促が行えなくなります。

以下は紹介動画です。

動作環境

2018年10月時点のGaroonで動作確認しています。
JavascriptでPromiseは使用していませんので、IE11でも動作可能です。

事前準備

  1. サンプルに使用するユーザアカウントをGaroon、チャットワークそれぞれで作成します。
    (登場人物は実在の人物ではありません)

    組織イメージ
    Organization.jpg

    以下の1名をチャットワークにアカウント作成します。
    • 連携用:外部連携 さん 
      (Garoonとの連携用です)
       
    以下の3名をチャットワーク、Garoonにアカウントを作成します。
    • 申請者 :藤田 一 さん                (開発部:一般職)
    • 承認者1:谷 啓介 さん               (開発部:課長)
    • 承認者2:佐藤 一二三 さん         (開発部:部長)

    以下の2名は、Garoonにアカウントを作成します。
    • 回覧  :林原 さん                     (経理部:課長)
    • 回覧  :恋沼 さん                     (経理部:部長)

    ※「外部連携」アカウントのコンタクト一覧に申請者、承認者のアカウントが追加されている必要があります。
     表示されていない場合は、「コンタクト管理」からユーザーを追加してください。
    0104_ChatWork_contact.png

  2. Garoonのユーザのプロフィール項目にカスタマイズ項目を追加します。
    • ChatWorkアカウントID    タイプ:文字列     公開

    0201_garoon_customItem.png

  3. チャットワークの各個人それぞれの「アカウントID」をGaroonの各個人のカスタマイズ項目へ登録してください。
    0101_ChatWork_AccountId.png

  4. チャットワークの「外部連携」ユーザの「API Token」を取得しておいてください。
    0103_ChatWork_getAPIToken.png

  5. Garoonの「プロキシAPIの設定」で、チャットワークのURLを登録します。
    ※プロキシAPIの詳細については、Garoon ヘルプをご覧ください。

    ・メッセージの送信用
    • プロキシコード : AP0001
    • メソッド    : POST
    • URL      : https://api.chatwork.com/v2/room
    • ヘッダー
      • キー   : X-ChatWorkToken
      • 値    : {上記(4)で取得したAPITokenの値}

    ・コンタクト一覧の取得用
    • プロキシコード : AP0002
    • メソッド    : GET
    • URL      : https://api.chatwork.com/v2/
    • ヘッダー
      • キー   : X-ChatWorkToken
      • 値    : {上記(4)で取得したAPITokenの値}

    0301_garoon_proxy.png

  6. Garoonの「ファイル管理」に今回のJavaScriptを登録します。
    0401_garoon_file_mng.png

    ・gr_post_ext_chat.js

    ここでアップしたJavaScriptファイルのダウンロードリンクを、のちほど使うので控えておいてください。
    ファイルの詳細から右クリック→「リンクのアドレスをコピー」でダウンロードリンクが生成できます。
    0403_garoon_file_mng.png

  7. ワークフローの申請フォームで、「Javascriptカスタマイズ用項目の追加」を行います。
    ※申請フォームはGaroonにサンプルがいくつか用意されていますので、試す際はそちらをご利用ください。
     今回の例では、サンプルフォーム > 経理関連 > 交際費申請 を利用しています。
    0504_garoon_workflow_after.png

    続けて、「JavaScript/CSSによるカスタマイズ」で、(5)で追加したJavaScriptファイルのリンクを追加してください。
    0503_garoon_workflow_js.png

ワークフローを申請してチャットワークへメッセージを送信する

  1. 藤田さんでGaroonにログインし
    上記でJavaScriptを組み込んであるワークフローを選択し、申請してください。
    経路の設定では、課長欄に谷さん、部長欄に佐藤さん、回覧の欄に、恋沼さんと林原さんの2名を設定してください。

    設定がすみましたら、申請します。
    0601_garoon_workflow.png

    0602_garoon_workflow_route.png

  2. 申請後にホーム画面の「ワークフロー」から、先ほど申請したワークフローを開きます。
    0701_garoon_notice.png

    「催促」ボタンは表示されているでしょうか?
    催促ボタンがある場合は、クリックしてみましょう。
    0702_garoon_notice_tani.png

    直近の承認者である「谷さん」へメッセージが送信されます。
    0704_garoon_notice_tani_chatwork.png

おわりに

チャットワークとGaroonを連携することで、コミュニケーションをより手軽にとることができるようになります。
是非ご活用ください。

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

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