みなさん、こんにちは！
2020年8月1日よりChatwork社にJoinさせていただきました、 サーバーサイド開発部(PHP)のやまごしと申します！
今回はIntegromat(現在はMakeというサービス名に変更)というノーコードで様々なサービスを連携させることができるサービスを使い、Chatworkをより便利に利用していただける方法をお伝えしたいと思います。
この記事を参考にしたらできること
この記事を参考にすすめると、以下の画像のように自分で作成しておいたルームに自分宛てのメンションメッセージをまとめて受け取り、見ることができるようになります。
はじめに
現在Chatwork社にお世話になっている私ですが、学生時代の受託企業でのアルバイトや前職の頃からずっとChatworkを利用していました。
当時から業務で日常的に使っていたものの、仕事のやり取りをする上で便利なビジネスチャットツールとしてのChatworkを使っていただけの状態でした。
そんな中、Chatworkは特定の業種によらず使えるように機能がシンプルになっている一方で、ソフトウェアエンジニアとしてもう少し機能がほしいと思うことがありました。
ところがChatwork社に入ってから、Chatworkをカスタマイズして便利に使いこなしている先輩方がたくさんいました。
しかも、その一部には一切プログラムを知らない人でもできる、ノーコードでも実現できるものがあり、そういった便利な活用方法があるのだったらもっと前から知りたかった！やりたかった！と思いました。
そういった自分のような思いをする人を減らしたいと思い、普段からChatworkをご活用いただいている皆様にも更にChatworkを便利に使いこなしていただけるように紹介記事でお伝えすることにしました！
今回伝えたいこと
自分宛ての[RE]や[TO]などのメンションがあった際に、自分専用の通知用のルーム(マイチャットでも可)を作成し、そのルームにメンションのあったメッセージをまとめるようにできる方法についてお伝えしたく思います。
Chatworkを普段使っている人にとってはあるあるだと思うのですが、
作業中などに[RE]や[TO]などのメンション通知が来たタイミングでメッセージを確認し一度は既読にしたものの、別のチャットを見たり作業を終わらせた後になってから確認したいことがあると思います。
それらが終わった後に、先程来ていたメンションのメッセージを見ようと思っても既読にしてしまっていることで、さっきの通知はどこのルーム・人から来ていたんだっけ？となってしまうことが非常によくありがちです。(私自身もよくありました)
そんなありがちな困りごとですが、通知用ルームを作成しそこでメンションをまとめて見れるようになることで解決させることができるのです！🎉
解決するための方法ですが、Integromatというノーコードサービスを使って実現することが可能です！
※記事の内容はすべて、2020年11月上旬時点のものになります。
目次
- この記事を参考にしたらできること
- はじめに
- 目次
- Integromat(Make)とは？
- Integromatの設定をする前にChatworkで準備をする
- IntegromatからChatworkにメッセージを送信する
- Chatworkでのメンションに反応できるように設定する
- Integromatで作成したシナリオ常に起動させる
- 最後に
- おまけ
- Chatworkのメンションに反応できるように設定する (Webhookモジュール編)
Integromat(Make)とは？
普段仕事をしている時に使っているWeb上のアプリケーションやサービスなどとChatworkを連携させておき、何かがあったときなどにChatwork上で通知を受け取りたいなーと思うことはよくあると思います。
最近はそのサービス自体にChatworkと連携できる機能がついているものも増えてきましたが、できないものもまだ多い状態です。
Integromatは、そういったサービスやアプリケーション、またはChatwork自身に発生したイベントをトリガーにしてChatworkのルームにメッセージを送るなどの連携を、一切プログラムを書かなくても実現が可能な、いわゆるノーコードでいい感じにできてしまうサービスです。
Integromat(Make)のアカウント登録
まずIntegromat(現在はMakeというサービス名に変更)にアカウント登録をしていきましょう。
TOPページにあるSign upのフォームに
- アカウント名
- Emailアドレス
- パスワード
- 国
などを入力し、利用規約を確認したうえで下にある【Sign up for FREE】をクリックしてください。
すると、サインアップの申し込みが完了し、登録に使ったメールアドレスに対してメールアドレス確認のメールが来ます。
メールアドレスの確認ボタンから再度Integromatのサイトへアクセスし、先程登録したメールアドレスとパスワードで次はSign inを行います。
するとSign upにするにあたって、Integromatへ利用する上での質問をきかれます。
- あなたの会社の業種で一番近いものはなんですか？
- (WHICH BEST DESCRIBES YOUR COMPANY?)
- あなたの主な役割(部署・業種等)はどれですか？
- (WHAT IS YOUR PRIMARY ROLE?)
- Integromatを使って何をしたいですか？
- (WHAT DO YOU WANT TO ACCOMPLISH USING INTEGROMAT?)
- Integromatを個人で利用しますか？
- (WILL YOU BE USING INTEGROMAT ALONE?)
- あなたはすでにIntegromatの使い方をわかっていますか？
- (ARE YOU ALREADY FAMILIAR WITH INTEGROMAT?)
といった質問内容になっていますので、ご自身にあった内容をそれぞれ入力してください。
今回の利用でいうと、
Integromatを使って何をしたいですか？ (WHAT DO YOU WANT TO ACCOMPLISH USING INTEGROMAT?)
については SaaSツールであるChatworkをIntegromatと連携させることで便利にしたいので、「Streamline workflows by making SaaS tools work together」を選ぶと良いと思います。
Integromatを個人で利用しますか？ (WILL YOU BE USING INTEGROMAT ALONE?)
こちらについては、このアカウントで所属している組織全体で使う場合はNO、今回の様に組織に所属していても個人的に使うだけであれば 「YES」 で良いと思います。
以上の入力を終えた後、「CONTINUE」を押し、アカウントの登録完了となります。
再度サインインを行ってMy Labページがみえれば、Integromatを使うための準備ができたということになります。おめでとうございます！
Integromatの設定をする前にChatworkで準備をする
ChatworkのAPI の利用準備とルーム作成
それでは続いてIntegromatで設定を始める前に、Chatwork側で連携できるようにするための準備と通知用のチャットを作成していきましょう。
ChatworkのAPI の利用準備
今回は、Chatwork APIを利用してメッセージの送信を行うため、Chatwork APIを使える状態にします。
以下の手順に沿って発行してください。
https://help.chatwork.com/hc/ja/articles/115000172402-API%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%82%92%E7%99%BA%E8%A1%8C%E3%81%99%E3%82%8Bhelp.chatwork.com
今回はAPIトークン自体を手動で入力することはありませんので、発行ができる状態になっていれば問題ありません。
※注意
指定したチャットにメッセージ投稿を行う(APIを利用する)アカウントですが、必ずメンションを受け取るアカウントと同一のアカウントを利用してください。
アカウントAへの通知を、アカウントBで通知チャットにてメンションのお知らせ→アカウントBからのメンションお知らせメッセージにもWebhookが反応してしまい、それをまたアカウントBが通知する・・・
といった、通知の無限ループに陥ってしまう可能性があります。
そのためこの記事を参考に設定する場合は、必ずメンションを受け取るアカウントと同一のアカウントを利用してください。
(一応メッセージから[toAll][To][Re]を消して投稿するように変えるという対策方法もありますが、難しいためこの記事内では割愛します。)
通知用ルーム(通知を受け取るチャット)を作成する
次に、今回の自分宛のメンションや今後様々なサービスと連携した際の自分宛ての通知メッセージをわかりやすくChatwork上でまとめて受け取れるように、自分専用のグループチャットを作成してみましょう！
※グループチャット数を増やしたくない方などは、マイチャットでも可能なのでルームの新規作成部分は飛ばしてください。
（部屋名については自由にわかりやすい名前にしてください）
IntegromatからChatworkにメッセージを送信する
まず、Integromatの使い方をなれるためにも、IntegromatからChatworkにメッセージを送ってみたいと思います。
Integromatにログインし、TOPページに移動します
次に、表示された 「What service do you want to integrate?」では、検索窓に「chatwork」と入力して出てきた「Chatwork」を選択します。
選択したら右上にある「Continue >」を押してください。
すると、真ん中に下記のようなアイコンが表示されているページに移動します。
そこに表示されている「Chatwork」を選択
するとChatworkにメッセージを送るためのモジュールの設定ができるようになります。
ここで空リストの右にある「Add」をクリックします。
Chatworkと連携をするためのConnectionを作成します。
「Connection name」についてはご自身の中で、どのChatworkアカウントの設定なのかわかりやすいように名前をつけておいていただければと思います。
名前を決めたら続けて、「Continue」を押してください。
すると新しいページが開き、現在開いているブラウザでログインしているChatworkアカウントに対してIntegromatから権限の許可を求められますので、「許可」を押します。
（ログインしていない場合はログイン画面が表示されますので、ログインを行った後連携を許可してください）
新しいConnectionが作成され、メッセージを送信するRoomとメッセージ内容、未読状態にするかなど設定できるようになります。
それでは、お試しとしてテスト用のメッセージを送信できるように設定してみましょう！
上記の画像を参考に、「Room ID」の部分には通知したいルームを選択してください。今回の場合は用意した「通知用ルーム」を選択してみます。
「Message Body」にはテスト用だとわかりやすいように「メッセージテストです！」と入力してみました。
「Set the Message Status」は「Unread」としておくことで、自分自身のアカウントから見た場合でも未読メッセージ扱いにすることができます。
ここまで設定したら「OK」を押しましょう。
その後、左下にある「Run once」をクリックしてください。すると・・・
Chatworkでのメンションに反応できるように設定する
それでは、いよいよ本題であるChatworkのアカウントに対してメンションがあった場合に、通知用ルームにメッセージを投稿されるように設定していきましょう！
ChatworkでWebhookの設定をする
Chatwork右上から「サービス連携」へ移動します。
左の一覧から「Webhook」へ移動してください
○Webhook名
今回作るWebhookがどういう用途で使うものかの名前を付けます。 わかりやすい名称であれば自由ですが、今回は「メンション通知用」としてみます。
○Webhook URL
こちらにIntegromatのWebhookのURLを設定することで、Chatwork側で指定のイベントが発生した時にこのURLに対してデータが渡され、Integromatと連動させることができるようになります。
IntegromatのWebhookのURLは現時点ではまだ入手できませんので、一旦仮のURLとして[ https://hook.integromat.com ]と入力しておきます。（今は作成できればWebhookURLの中身は何でも問題ありません）
○イベント
- アカウントイベント
- ルームイベント
と二種類ありますが、今回は「アカウントイベント」を選択してください。すると、自分自身へのメンションが発生したタイミングで、設定したURLに対してデータが渡されるようになります。
上記を設定できたら「作成」を押してください。
こうして今回の設定をするためのWebhookをChatworkに作成することが出来ました。
この作成したWebhookのトークンですが、Integromatに設定を登録する際に必要になりますので、メモしておいてください。
IntegromatにChatworkで準備したWebhookの情報を設定する
Integromatの設定ですが、こちらの画面から進めます。
「Watch Events」モジュールを追加したら、画像のように右にある小さい○をドラックして「Create a room Message」につなげてください。
こうしてつなげることで、追加した「Watch Events」がトリガーとなって「Create a Room Message」が動くといった連携ができるようになります。
続いて「Watch Events」の設定を行います。
「Add」を押し、「Add a hook」というウィンドウでWebhookの設定を作成していきます。
「Webhook name」 にはConnection同様にWebhookの設定をしたアカウントのものだと分かる名前にしてください。
「Connection」には、先程Chatworkへメッセージを送信する際に作成したConnectionを設定します。
「Token」には、先程Chatwork側で作成したWebhookの所でコピーしておいた「トークン」を入力してください。
上記を入力し終わったら右下の「Save」をクリックします。
すると設定したWebhookの設定が保存されて使えるようになっています。
この設定を保存したことで、[ https://hook.integromat.com/〜 ]で始まるWebhookのURLが発行されるので、先程Chatwork側のWebhookの設定の際に仮のURLをしていたWebhookのURLが手に入ります。
「Copy address to clipboard」をクリックするとURLをコピーすることができますので、コピーしておきましょう。
右下の「OK」を押し、Chatwork側の設定画面に一度戻ります。
ChatworkでWebhookの設定をする
それではもう一度Chatworkの設定画面に戻り、仮のURLを入力していた部分を先程入手できたWebhookのURLで上書きしましょう。
このWebhook URLを入力して保存すれば、Chatwork側で設定することは全て完了となります！
IntegromatからChatworkに送信するメッセージをいい感じにする
先程のChatwork側にWebhookの設定をしたことで、Chatwork側のメンションに反応させてメッセージを送信するという設定自体はほぼ完了しました。
ただこのままメンションのたびに実行するようにしてしまうと、メンションがあるたびにテスト用のメッセージが来るだけです。
そのため、メンションを受け取ったタイミングで動くようにする前に、以下のようないい感じのメッセージでお知らせできるようにしたいと思います。
この記事の初めに貼った最終形ですが、このようなメッセージを受け取れるようにするには、Chatwork記法とWebhookで取得できるデータを組み合わせることで実現できます。
ただChatwork記法を理解していないと難しい部分ではありますので、下記にいい感じのメッセージを送れる文章を用意しました。
[info][title][piconname:{{1.webhook_event.from_account_id}}] からメンションです[/title]https://www.chatwork.com/#!rid{{1.webhook_event.room_id}}-{{1.webhook_event.message_id}}
{{1.webhook_event.body}}
[/info]
上記の文章を使うことで、
- メンションを送信したユーザーのアイコン＋名前
- メンション発生したメッセージへのリンク
- 受け取ったメッセージ内容
が見れるようになり、サンプルのように該当するメッセージへのリンクもあったり、アイコンや名前なども自動で反映される非常に見やすいメッセージとなります。
ぜひ、コピーしてIntegromatの「Create a Room Message」内の「Message Body」に貼り付けてみてください。
すると以下の画像の様になるかと思いますので、そのまま保存してください。
※上記の文章を貼り付けた際に「Message Body」の[Webhook Event: ~~]というブロックが黒くなっていたりしてエラーが出てしまっている場合は、右側に出ている「Watch Events」から同じ名前のブロックを選択して差し替えていただけるとうまくいくと思います。
これにて全ての準備が完了です！あとはメンションが来た際に、常にIntegromatが実行されるようにしましょう！
Integromatで作成したシナリオ常に起動させる
メンションが発生した時に通知用ルームに送られるメッセージの設定まで済んだら、あとはいつでも送ってもらえるように設定して完了です！
一番左下にある「SCHEDULING」をONにしてください。
その際、スケジュールの種類については最初から選択されている項目のままで、Webhookに対してイベントが有った時に自動で動いてくれるようになります。
あとは実際にメンションを受け取ると、このような形でメンションのお知らせを通知用ルームで受け取ることができるようになっていると思います。
最後に
Chatworkはシンプルな機能ゆえ、ITに明るくない方でも手軽に使っていただけるサービスです。その点、使いこなしていくと物足りなくなってしまう一面があることもまた事実です。
そのような方はぜひ、更に進んだChatworkの使い方としてこういった別サービスとChatworkを組み合わせていくことで、より便利に、より楽しくChatworkを使っていただけるとChatworkを提供・開発しているものとして非常に嬉しく思います！
おやくそく
Chatworkでは、ユーザーにとってより価値のあるサービスを追求し、大規模な基盤システムの開発改修運用保守を担うPHPのリードエンジニアについても募集しています。
自ら、Chatworkをもっといいサービスにしてやりたい！と思っていただけている方がいれば、ぜひご応募お待ちしております！
おまけ
実は・・・
この記事を書き終わった10月初旬の頃はまだIntegromatにChatworkモジュールが実装されておらず、汎用的なWebhookモジュールとHTTPモジュールを組み合わせて実装するといった内容の記事でした。
10月の中旬になり、大変喜ばしいことにChatworkのモジュールがIntegromatに実装され、記事の書き直しとなりました（血涙）
いいオチがついた所で、書いていた内容自体はかつてのChatworkのようにモジュールが存在しないサービスと連携させるという、Integromatを今後使いこなす上でも非常に参考になる内容だと思いますので、おまけとして下記に残しておこうと思います。
（ほぼ共通の項目については省略しておりますので、本編の方を参考にしていただければと思います。）
準備
ルームのIDをメモっておく
IntegromatからChatworkにメッセージを送信する (HTTPモジュール編)
まず、最初からむずかしいことをする前に簡単な動作確認をしてみましょう。
具体的には、先程準備したAPI TokenとルームIDを使ってIntegromatからChatworkに対してメッセージを送ってみたいと思います。
Integromatにログインし、TOPページに移動します
次に、表示された 「What service do you want to integrate?」では、検索窓に「webhooks」と入力して出てきた「Webhooks」を選択、 続けて、下にある「Did not find what you were looking for?」から「HTTP」を選択します。
2つを選択したら右上にある「Continue >」を押してください。
すると、真ん中に下記のようなアイコンが表示されているページに移動します。
そこに表示されている「Webhooks」を選択
するとCustom Webhooksの設定ができるようになります。
ここで空リストの右にある「Add」をクリックします。
新しく追加するWebhookの名前と、もしIPアドレスのホワイトリストを登録したければ設定できるようになります。
今回はChatworkにしか登録しない予定なので特にIPアドレスの制限はせず、Webhookの名前はわかりやすく「自分へのメンション」としておきます。
こうして新しくWebhookを作成したことで、Webhook用のURLが発行されます。
Webhooksから右にちょこんと出た◯の中に「+」が入ったものを押します。
それではHTTPを選択しましょう。
こちらの画面で、Chatworkにメッセージを送るために必要な設定をしていきます。
設定自体は、ChatworkAPIのドキュメントから「チャットに新しいメッセージを追加」についての項目を参考に設定を進めていきます。
https://developer.chatwork.com/ja/endpoint_rooms.html#POST-rooms-room_id-messages
URLには https://api.chatwork.com/v2/rooms/{投稿したいルームID}/messages と入力します。
（{投稿したいルームID}の箇所にはコピーしておいたルームIDをいれてください。）
Methodは POST を選択してください。
Headersの「Name」には「X-ChatWorkToken」と入力し、「Value」 には「{自分のAPIトークン}」とあるように、コピーしておいたAPIトークンを入力してください。
今回はとりあえずChatworkに投稿できるか確認したいので、「テストメッセージです！」と入力してみましょう。
Body typeについては 「Application/x-www-from-urlencoded」を推奨します。
ココまで入力できたら右下の「OK」を押して保存しましょう。
その後、HTTPを右クリックします。
表示された中にある「Run this module only」を押下してみましょう！
その後Chatworkを見てみると・・・？
次はいよいよWebhookの設定をしていき、Chatworkで自分宛にメンションが来た時にIntegromatから通知用ルームに対してメッセージを受け取れるようにしましょう！
Chatworkのメンションに反応できるように設定する (Webhookモジュール編)
IntegromatにChatworkで準備したWebhookの情報を設定する
いよいよWebhookでChatworkからデータを受け取ったIntegromatから、Chatwork側にいい感じのメッセージを送るようにしましょう
Integromatのこちらの画面から進めます。
URLの下に表示されている「Re-determine data structure」を押下します。
すると画像のような状態になり、Webhookからのデータの受け取り待機状態となります。
この状態になったら、知り合いの方などにメンションを送ってもらったり、自分自身のサブアカウント・bot用アカウントなどから、今回設定を進めているアカウントに対してメンションを送ってもらいましょう。
ほかユーザーからメンションを受け取るとIntegromat側では画像のような状態になり、Chatworkでメンションを受け取った場合のWebhookデータの形式をIntegromatが登録できたことになります。
Webhookデータの形式を登録できたことでChatworkに送信するメッセージをもっと使いやすくカスタムできるようになりましたので、通知用ルームに送信するメッセージをカスタマイズしてみましょう！
IntegromatからChatworkにいい感じのメッセージを送れるようにする
HTTPの「Query String」を開きます。
するとChatworkからWebhookで取得できたデータの項目を「Value」で利用することができる状態となっています。
画像を参考に登録されたデータ項目を駆使して送信するメッセージをカスタマイズしてみましょう！
今回は以下のようなメッセージの形で受け取ることができるようにしてみました。
- メンションを送信したユーザー
- メンション発生したメッセージへのリンク
- 内容
が見れるようになっており、該当するメッセージへのリンクもあり、アイコンや名前なども自動で反映されるので非常に見やすい形で通知用ルームに受け取ることができるようになりました。
もし上記のサンプルと同じ形式のメッセージにしたい場合は、以下をコピーしてメッセージの「Value」の部分にはりつけてみてください。
[info][title][piconname:{{1.webhook_event.from_account_id}}] さんからメンションです[/title]https://www.chatwork.com/#!rid{{1.webhook_event.room_id}}-{{1.webhook_event.message_id}}
{{1.webhook_event.body}}
[/info]
おまけのあとがき
モジュールが追加されたことでChatwork自体は非常に便利に連携できるようになっていることがおわかりいただけたかと思います。
上記のようにモジュールが存在しないものでもAPIなどが提供されているサービスであればChatworkと組み合わせることも簡単にできるので、ぜひ色々チャレンジしてみてください！
