検索
Close
カテゴリー内の他の記事

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

作成日
更新日
フォローする

はじめに

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

概要

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

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

以下は紹介動画です。

動作環境

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

事前準備

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

    組織イメージ
    Organization.jpg

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

    以下の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 ヘルプ -プロキシAPIの設定　クラウド版・パッケージ版をご参照ください。

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

    ・コンタクト一覧の取得用
    • プロキシコード　：　AP0002
    • メソッド　　　　：　GET
    • URL　　　　　　：　https://api.chatwork.com/v2/
    • ヘッダー
      • キー　　　：　X-ChatWorkToken
      • 値　　　　：　{上記（４）で取得した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によるカスタマイズ」で、（５）で追加した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 コミュニティをご活用ください。

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