お問い合わせ

お知らせをWebhookでGoogle Chatに通知してみよう

お知らせWebhookを利用し、Google Apps Script経由でお知らせの登録・更新・削除時に通知を受け取り、条件判定をおこなってGoogleに通知する方法を紹介します。

全体像は以下の図になります

Shopらんのお知らせのwebhookをGoogle Chatに通知するためには、Shopらんのwebhookの形式をGoogleChatのwebhook形式に変換する中間モジュールが必要となります。

本記事では中間モジュールをGoogle Apps Script(GAS)を用いて作成する場合の手順を解説します。

前提

  • Google Apps Scriptを使った方法になります
  • Google Chatで外部アプリケーションからWebhookを受け取るには有償版のGoogle Workspaceが必要です
  • GASから外部サービスへの接続を許可する権限が必要です
  • Shopらんのシステムの管理権限が必要です

ステップ

  1. 中間モジュールからGoogle Chatにメッセージを投稿する

  2. ShopらんのWebhookを中間モジュールで受け取る

  3. お知らせの内容をGoogle Chatに通知する

中間モジュールからGoogle Chatにメッセージを投稿する

Google Apps ScriptからGoogle Chatに「Hello, Google Chat!」というメッセージを投稿できることを目指します。

  1. Google Driveを開き、適当なフォルダを作成します。

  2. 「新規」→「その他」→「Google App Script」を選択すると、Apps Scriptの編集画面が開きます。
    1.png

  3. Google ChatにWebhookでメッセージを投稿するコードを作成します。次のサンプルコードを参考にしてください。

    function postMessageToChat() {
 var url = 'Webhook URL'; // Webhook URLを指定します。
 var message = 'Hello, Google Chat!'; // 投稿するメッセージを指定します。

 var payload = {
   'text': message
 };
 var options = {
   'method' : 'post',
   'contentType': 'application/json',
   'payload' : JSON.stringify(payload)
 };
 UrlFetchApp.fetch(url, options);
}
  4. Google Chatを開きます。

  5. メッセージを投稿したいスペースを開きスペース名をクリックして開くメニューから、「アプリと統合」→「Webhookを管理」→「Webhookを追加」を選択します。
    __________2023-04-24_16.09.59.png
    注：無償版のGoogle アカウントでは「Webhookを管理」のボタンが無効になっています

  6. 適当な名前を入力し、保存します。

  7. 作成した着信Webhookのコピーボタンを押してURLをコピーします。

  8. Google Apps Scriptに戻り、Webhook URLを書き換えます。

    var url = 'https://chat.googleapis.com/v1/spaces/XXXXXXXX'; // Webhook URLを指定します

  9. スクリプトを保存します。

  10. 関数名（postMessageToChat）を選択して実行ボタンを押します。__________2023-04-24_17.18.28.png

  11. Google Chatに"Hello, Google Chat!"のメッセージが表示されれば成功です。
    4.png

ShopらんのWebhookを中間モジュールで受け取る

ShopらんからのWebhook通知をGoogle Apps Scriptで受け取り、そのことをGoogle Chatに「Hello, Google Chat!」と投稿することで知らせることを目指します。

5.png

  1. スクリプトを開きます。

  2. スクリプトに、Webhookを受け取った際に実行される関数を追加します。

    function doPost(e) {
 postMessageToChat();
}

    今回は受信したデータは処理せずに受信したことだけをGoogle Chatに通知するので、前回作成した関数を呼び出します。

  3. スクリプトを保存します。

  4. 「デプロイ」→「新しいデプロイ」を選択します。

  5. 「種類の選択」の右側にある歯車ボタンを押し、「ウェブアプリ」を選択します

  6. 「アクセスできるユーザー」を「全員」に変更します。

  7. 「デプロイ」ボタンを押します。__________2023-04-24_16.48.59.png

  8. ウェブアプリのURLをコピーします。 （このURLは「デプロイ」→「デプロイを管理」を開くと再度確認できます。）

  9. Shopらんを開き、サービス管理者としてログインします。

  10. サイドメニューから「システムの管理」→「連携アプリの設定」→「お知らせのWebhookの設定」を開きます。
    __________2023-04-24_16.58.09.png

  11. 「Webhookを追加する」ボタンを押し、「ペイロードURL」に先ほどコピーしたウェブアプリのURLを入力し、ペイロード形式バージョンをv2に設定し、保存します。
    __________2023-04-24_17.14.06.png

  12. お知らせを公開し、Google Chatに「Hello, Google Chat!」というメッセージが投稿されれば成功です。

二回目以降のデプロイについて

GASではコードを保存しただけではデプロイ中のスクリプトの動作は変わらないので注意してください。

コードの変更を反映させるには、再度デプロイを行う必要があります。

GASの編集画面から、「デプロイ」→「デプロイを管理」を開き、既存のデプロイを選択し、鉛筆マークの編集ボタンを押してバージョンを新バージョンに変更してデプロイを行います。

__________2023-04-25_13.57.03.png

「デプロイ」→「新しいデプロイ」からデプロイを行う場合はデプロイのwebhook URLが変わってしまうので「ShopらんのWebhookを中間モジュールで受け取る」の8~12を参考に、webhookの設定をしなおしてください。

お知らせの内容をGoogle Chatに通知する

「ShopらんのWebhookを中間モジュールで受け取る」のセクションでは、お知らせの内容に関わらず、GoogleChatには「Hello, Google Chat!」が投稿されるだけでした。

このセクションでは、お知らせの内容に応じたメッセージを通知したり、通知するしないを切り替えることを目指します。
mceclip2.png

次の３ステップで進めます。

  1. ShopらんのWebhook通知の内容をそのままGoogle Chatに投稿する
  2. 投稿するチャットメッセージの内容を整える
  3. 必要なお知らせのみを通知するようにフィルタリングする

ShopらんのWebhook通知の内容をそのままGoogle Chatに投稿する

まずはお知らせの内容に応じたメッセージを通知することを目指します。

  1. スクリプトを開きます。

  2. postMessageToChat関数のmessageを「Hello, Google Chat!」固定ではなく、引数として受け取れるように変更します。

    // 引数にmessageを追加
function postMessageToChat(message) {
   var url = 'Webhook URL'//省略
   //var message = 'Hello, Google Chat!'; 　この行を削除する

  3. doPost(e)関数からpostMessageToChat(message)関数に、引数としてWebhookの内容をそのまま渡すように変更します。

    function doPost(e) {
 postMessageToChat(e.postData.contents);
}
  4. スクリプトをデプロイします。
  5. お知らせを公開して、Google ChatにShopらんのWebhookのペイロードがjson形式で投稿されたら成功です。

投稿するチャットメッセージの内容を整える

webhookのペイロードをそのままGoogleChatに通知できるようになりましたが、json形式で通知されても読みづらいです。

そこで、jsonオブジェクトから必要な情報を抜き出して、メッセージを整形して通知するようにしましょう。

  1. スクリプトを開きます。
  2. Shopらんのwebhookを受け取り、GoogleChatに通知したいメッセージを返す関数を作成します。
    function makeMessage(webhook_body) {
   let domain = 'YOUR DOMAIN NAME' //'sample.shoprun.jp'のようなドメイン名を入れます
   let noticeId = webhook_body.id;
   let title = webhook_body.title;
   let pubUser = webhook_body.pubUser.name;
   let pubGroup = webhook_body.pubGroup.name;

   let noticeURL = `https://${domain}/h2/notice/${noticeId}`;

   let message =
`お知らせ「${title}」が公開されました。
発信者：　${pubUser}
発信部署：　${pubGroup}
URL：　${noticeURL}
`;

   return message;
}
    • webhook_bodyの中身についてはオンラインガイドを参照してください。
    • お知らせへのリンクのURLはwebhookのペイロードには含まれていませんが、お知らせのidを使用することで作成することが可能です。

  3. doPost関数を編集してwebhookをmessageに加工するように変更します。

    function doPost(e) {
 let webhook_body = JSON.parse(e.postData.contents);
 let message = makeMessage(webhook_body);
 postMessageToChat(message);
}

  4. スクリプトをデプロイし、Shopらんでお知らせを公開して、Google Chatにメッセージが投稿されたら成功です。
    notice_webhook.png

必要なお知らせのみを通知するようにフィルタリングする

Shopらんからは全てのお知らせの公開・更新・削除がwebhookで通知されます。必要なお知らせのみを通知するようにフィルタリングを実装します。

  1. ここまでで作成してきたスクリプトを開きます。

  2. お知らせを通知するかどうかを判定する関数を作成します。 ここでは重要または緊急のお知らせの公開のみを通知するようにします。

    function isNotifyNeeded(webhook_body) {
 const PRIORITY_NORMAL = 3 // 通常のお知らせの重要度
 let priority = webhook_body.priority;
 let event = webhook_body.event;

 if (priority === 3) {
   return false;
 }
 if (event !== "PUBLISH") {
   return false;
 }
 return true;
}

  3. doPost関数を編集して、通知したいwebhookのみを通知するように変更します。

    function doPost(e) {
 let webhook_body = JSON.parse(e.postData.contents);

 //条件式を追加
 if (isNotifyNeeded(webhook_body)) {
   let message = makeMessage(webhook_body);
   postMessageToChat(message);
 }
}

  4. スクリプトをデプロイします。

  5. Shopらんで重要度が重要のお知らせを公開し、GoogleChatに通知されることを確認します。

  6. Shopらんで重要度が普通のお知らせを公開し、GoogleChatに通知されないことを確認します。

  7. Shopらんで重要度が重要のお知らせを削除し、GoogleChatに通知されないことを確認します。

これを応用すると、区分やカテゴリーごとに通知するスペースを出し分けたりといったことができます。

サンプルコード

function postMessageToChat(message) {
  var url = 'https://chat.googleapis.com/v1/spaces/XXXXXXXX'; // Webhook URLを指定します。

  var payload = {
    'text': message
  };
 var options = {
    'method' : 'post',
    'contentType': 'application/json',
    'payload' : JSON.stringify(payload)
  };
  UrlFetchApp.fetch(url, options);
}

function doPost(e) {
  let webhook_body = JSON.parse(e.postData.contents);

  //条件式を追加
  if (isNotifyNeeded(webhook_body)) {
    let message = makeMessage(webhook_body);
    postMessageToChat(message);
  }
}

function makeMessage(webhook_body) {
    let domain = 'YOURDOMAIN' //sample.shoprun.jp等
    let noticeId = webhook_body.id;
    let title = webhook_body.title;
    let pubUser = webhook_body.pubUser.name;
    let pubGroup = webhook_body.pubGroup.name;

    let noticeURL = `https://${domain}/h2/notice/${noticeId}`;

    let message =
`お知らせ「${title}」が公開されました。
発信者：　${pubUser}
発信部署：　${pubGroup}
URL：　${noticeURL}
`;

    return message;
}

function isNotifyNeeded(webhook_body) {
  const PRIORITY_NORMAL = 3 // 通常のお知らせの重要度
  let priority = webhook_body.priority;
  let event = webhook_body.event;

  if (priority === 3) {
    return false;
  }
  if (event !== "PUBLISH") {
    return false;
  }
  return true;
}

ガイド

  • Shopらんオンラインガイド＞管理詳細＞連携アプリの設定のWebhookの設定を参照してください。

このセクションの記事

この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

関連記事