masalibの日記

システム開発、運用と猫の写真ブログです

Firebase入門 Cloud Functionsでslackに通知する

Cloud Functionsでslackに通知したいと思います

この記事はReact Firebase入門シリーズです 1-1-1・ Firebase初期設定とFirebaseAuthのSignUp
1-1-2・ 「react-hook-form」を入れてみた
1-1-3・ AuthのSignUpの通信エラー対応
1-2 ・ FirebaseAuthのログイン処理
1-3 ・ FirebaseAuthのログイン認証とログアウト処理
1-4 ・ FirebaseAuthのパスワード初期化処理
1-5 ・ FirebaseAuthのメールアドレスの有効化
1-6 ・ FirebaseAuthのメールアドレスとパスワード変更
1-7 ・ FirebaseAuthの表示名変更
1-8 ・ FirebaseAuthの拡張項目追加
1-9-1 ・ FirebaseAuthのTwitter認証
1-9-2 ・ FirebaseAuthのTwitter認証(既存ユーザー向け)と解除
1-10 ・ FirebaseAuthのGoogle認証(既存ユーザー含む)と解除 2-1・ FirebaseStorageのファイルアップ:基礎
2-2・ FirebaseStorageのファイルアップ前に画像の切り抜き
2-3・ FirebaseStorageのファイルアップの移動
3-1・FirestoreのCRUD
3-2・Firestoreのデータ取得補足
3-3・Firestoreのページネーション処理
3-4・Firestoreのコレクション(テーブル)のJOIN
5・ FirebaseのHosting(デプロイ)
6-1・ Cloud FunctionsでHello,world
6-2・ Cloud Functions(エミュレータ)でHello,world
6-3・ ユーザーの作成時にCloud Functionsを実行
6-4・ Cloud Functionsでメール送信
6-5・ Cloud Functionsでslackに通知する 今ここ
よかったら他の記事も見てください。

やりたい事

  • Slack通知

メールの通知よりもエンジニアならこっちじゃないかな。JOSNデータはそこまで重くないので通信容量も引っかからないと思う。

通知のURLの準備

エンジニアならわかるかと思うけど Incoming Webhookをインストールしてチャンネルを選ぶのではなく自分自身を選択して WebhookのURLを発行します
詳しくは以下のページを参考にする

risaki-masa.com

環境変数の設定

githubで公開している関係で通知のURLをsourceに直接記載するわけにはいかないので環境変数に登録します

$ cd Project_homeFolder
$ firebase functions:config:set slack_service.adminurl="https://hooks.slack.com/services/XXXXXXXXXXXXWebhookXXXXXXXXXXXX"
$ firebase deploy --only functions
$ cd functions
$ firebase functions:config:get > .runtimeconfig.json #エミュレータ用

プログラムの修正

前回と同じで/funcions/index.jsを修正します。 プログラムは至ってシンプルです

//webhook-url-in-slack
const { IncomingWebhook } = require('@slack/webhook');
exports.webhookslack = functions.https.onRequest(async (request, response) => {
    functions.logger.info("webhookslack start");

    const webhook = new IncomingWebhook(functions.config().slack_service.adminurl);

    const testId = 'test0001';
    const postId = 'post0001';
    const commentName = 'masalib';

    const array = [
        `新しいコメントが届きました!`,
        `<https://xxxxx.jp/jump?id=${testId}&post=${postId}|こちらから飛ぶ>`,
        `名前: ${commentName}`
    ]

    // slack APIが受け取れるオブジェクトを作成する
    const data = {
        text: array.join('\n'), // 配列を`\n`で結合、改行する
        username: 'FirebaseApp-BOT',
        icon_emoji: ':ghost:'
    }

    await webhook.send(data);
    response.send("webhookslack success");
    return;
})

基本的にはSlackのWebhookにJSONデータを送るだけです。 APIキーとかOauthとかいりません。 テキスト、アイコン、ユーザー名を設定しておくるだけです。 dataのフォーマットは以下です。

  • text: 投稿する文章です。リンクなどいろいろかけます
  • icon_emoji: 投稿者のアイコンを絵文字で指定できます
  • username: 表示されるユーザ名です
  • channel: 投稿先のチャネルを設定します

個人のslackじゃなかったのでchannelでのテストはやっていません

結果

f:id:masalib:20201215002358p:plain

感想

slackの通知は本当に楽!! この仕組が他のシステム(googleTwitter)でも使えたらいいのにと思う

参考URL

bitto.jp