Notion・Slack・GAS超初心者が試行錯誤しながら作った記録です。おかしなところがあるかもしれませんごめんなさい😿
Notionの通知は発展途上
Notion→Slackへの通知は公式の方法で一応できるんですけど、プロパティに変化があったらすべて通知してしまうので、通知の量が凄いことになって使いにくいです。
最近メンションをSlackへ通知するオプションが追加されたらしいのですがまだβ版らしいのと、個人ではなく全体への通知ができないのが少しだけネックです。(試していないのでもしかしたらできるのかもしれないです・・!)
ので、今回はGoogleAppsScriptを使って試行錯誤して作ってみたので記録に残します。
こんなのを作った
![Notionデータベースの画面](https://mogumogu-design.com/wp-content/uploads/2023-01-28_15h21_49.jpg)
![Slack通知がきてますね。いいね](https://mogumogu-design.com/wp-content/uploads/2023-01-28_15h47_11.jpg)
こんなふうに通知されます
【カード作成者】さんが【タイトル】をお知らせします!(【期限】)<改行>
【NotionカードのURL】
![Slack通知のチェックがリセットされていることが分かります](https://mogumogu-design.com/wp-content/uploads/2023-01-28_15h41_16.jpg)
通知し終わったらデータベース側のチェックをリセットします。
使ったサービス
これを実現するには、以下3つのサービスを利用しています。
- NotionAPI…データベースID/トークンを取得
- SlackAPI…でWebhook URLを取得
- Google App Script…スクリプトとトリガーの設定
Zapierやmakeなどのノーコードツールを使いたかったんですが、やりたいことを実現するには有料登録が必要になるので頑張ってGASでの方法を調べました・・
Notion側の準備
Notion側では以下2つの情報が必要です。
- Notionデータベースの作成
- NotionデータベースIDの取得
- NotionAPI(トークン)の取得
Notionデータベースの作成
Notionのデータベースを作成します。今回は4項目でデータベースを作成しました。
- タイトル(テキスト)
- 期限(日付)
- 作成者(作成者)
- Slack通知(チェックボックス)
※()内はプロパティの種類
ここで設定した項目の名前は後でGASで使用します。
![Notionで作成したデータベース](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h14_34.jpg)
データベースIDの取得
次に作成したデータベースのIDを取得します。データベースに直接アクセスします。
![「フルページとして開く」をクリック](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h21_10.jpg)
そしたらデータベースページが開くので、URLを確認します。
https ://www.notion.so/【ユーザーURL】/【データベースID】?v=xxxxxxxxxx
ユーザーURLの後から「?」の前までがデータベースIDになります。
これをどこかにコピーしときます。
![データベースIDはURLから確認できます。ドメイン後、?の前。](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h24_11.jpg)
NotionAPI(トークン)の取得
Notionのインテグレーションへアクセスし「新しいインテグレーションを作成する」をクリックします。
![「新しいインテグレーションを作成する」をクリック](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h33_33.jpg)
任意の名前をつけて「コンテンツを読み取る」「コンテンツを更新」「コンテンツを挿入」にチェック、ユーザー機能は「メールアドレスなしでユーザーを読み取る」を選択し「送信」をクリック。
![Notion API インテグレーションの基本情報。](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h39_13.jpg)
送信後にインテグレーションの個別ページへ遷移します。トークンは後々必要なのでどこかにコピーしておきます。
![シークレットトークンをコピーしておく](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h46_32.jpg)
そしたら先ほどのデータベースのページに戻りページリロードし、「…」>「+コネクトの追加」>「(先ほど作成したインテグレーション)」を選択します。
![「コネクトの追加」>先ほど作成したインテグレーションを選択](https://mogumogu-design.com/wp-content/uploads/2023-01-28_16h52_36.jpg)
無事にコネクトできたらNotion側の準備は完了です。
Slack側の準備
Slack側は
- Webhook URLを取得する
の1点だけなんですが、この手順がめんどくさかった…何度か壁にあたってやっとできました。
WebhookURLの取得方法は公式が分かりやすいですが、キャプチャ交えて説明するとこんな感じです👇
Create App
SlackAPIにアクセスし「From scratch」を選択します。
![Create ann app > From scratchを選択](https://mogumogu-design.com/wp-content/uploads/2023-01-28_20h40_29.jpg)
任意の名前と通知を送りたいSlackチャンネルを選択し「Create App」をクリック。
![Name App & choose workspaceでチャンネル選択。](https://mogumogu-design.com/wp-content/uploads/2023-01-28_20h41_26.jpg)
Incoming Webhooks設定
Incoming Webhooksに移動してActiveにし、「Add New Webhook to Workspace」をクリック。
![IncomingWebhooksをONにして、「Add New Webhook to Workspace」をクリック。うまくいかない場合は次の項目参照](https://mogumogu-design.com/wp-content/uploads/2023-01-28_20h46_28.jpg)
ボットが存在しないとエラーが出てしまいます。
最近セキュリティ強化に伴い仕様が変わったらしく、ボットの名前と権限の設定が必要になったそうです。
左メニューから「App Home」を選択>「Your App’s Presence in Slackで「Edit」をクリックし、ボット名(日本語でも英語でもOK)とデフォルト名(英数字のみ)を入力します。
![App Home>Your App’s Presence in Slack。ボット名を編集します。](https://mogumogu-design.com/wp-content/uploads/2023-01-28_21h11_56.jpg)
![Add App Display Name](https://mogumogu-design.com/wp-content/uploads/2023-01-28_21h12_09.jpg)
名前を変更したら、ボットの準備完了です!
botの名前が編集できないときは…
左メニューから「OAuth & Permissions」に移動し、Scopesの「Bot Token Spaces」ところに
- chat:write
- chat:write.customize
を追加します。
![chat:writeとchat:write.customize](https://mogumogu-design.com/wp-content/uploads/2023-01-28_21h01_29.jpg)
※その下にある「User Token Scopes」はユーザーに成り代わって投稿する設定なので今回は不要です。
App Homeに戻って、再度ボットの名前を設定したらうまくいきました!
ボットの設定が出来たらIncoming Webfooksに戻って、「Add New Webhook to Workspace」を再度クリックします。
権限リクエストが表示されるので、通知したいチャンネルを設定し「許可する」をクリックします。
![アクセス権限のリクエスト](https://mogumogu-design.com/wp-content/uploads/2023-01-28_21h28_45.jpg)
Webhook URL取得
「Incoming Webhooks」のページに移動するので、Webhook URLをどこかにコピーしておきます。
![Incoming Webhookのページ。Webhook URLをコピーしておく。](https://mogumogu-design.com/wp-content/uploads/2023-01-28_21h34_11.jpg)
これでSlack側の準備は完了です。
Google App Scriptの設定
Google Apps Scriptにアクセスし「新しいプロジェクト」をクリック。
![GoogleAppsScriptの「新しいプロジェクト」をクリックする](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h28_14.jpg)
以下のスクリプトをコピペし、「SlackのWebhook URL」「NotionのデータベースID」「NotionのデータベースURL」【SlackのユーザーIDまたはグループID】を差し替えます。
GASからSlackにメンションする時は@mogura
と書いてもメンションできません。ユーザーIDが必要です。
チャンネル:<!channel>
アクティブユーザー:<!here>
ユーザー:<@メンバーID>
グループ:<!subteam^取得したID|グループ名>
個人のユーザーIDを確認するとき
各人のプロフィールから「…」>「メンバーIDをコピー」で取得できます。
![Slack個人のユーザーIDを確認する場所](https://mogumogu-design.com/wp-content/uploads/2023-01-30_08h24_49.jpg)
グループのIDを確認するとき
ブラウザ版Slackの検証ツールからIDを取得できます。
以下の記事がとても参考になりました。
実行
差し替え終わったら保存し「実行」をクリックすると…
![実行ボタン。押してみて!](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h25_56.jpg)
承認のポップアップが出るので「権限を確認」をクリック。
![承認のポップアップが出ます。権限を確認してください](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h30_42.jpg)
![「このアプリはGoogleで確認されていません」の表示。詳細を表示から、移動してください](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h30_53.jpg)
「詳細を表示」>「【任意の名前】(安全ではないページ)に移動」をクリックして進みます。
実行ログを確認し、「実行完了」と表示が出ていたらエラーなくスクリプトが実行できてます。
![実行完了の表示](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h35_07.jpg)
動作確認
準備が完了したので動作確認してみます。
Notionのデータベースページに移動し、「Slack通知」にチェックを入れます。
![ためしにチェックを入れてみる](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h37_18.jpg)
GASに戻り、「実行」ボタンをクリック。Slackを開いてみると…
![Slackに通知が届いてる!](https://mogumogu-design.com/wp-content/uploads/2023-01-29_10h39_44.jpg)
無事に通知がきてました!やったー!複数チェック入れてテストしましたが、問題なく動作していました。
トリガーの設定
このままでは、毎回手動で実行ボタンを押す必要があるので、一定時間おきにSlackへ通知してくれる仕組み=トリガー設定します。
![サイドバーからトリガーをクリック](https://mogumogu-design.com/wp-content/uploads/2023-01-29_11h26_42.jpg)
「トリガーを追加」をクリック。
![トリガーを追加 ボタンを押します](https://mogumogu-design.com/wp-content/uploads/2023-01-29_11h35_46.jpg)
- 関数;main
- デプロイ:Head
- イベントソース:時間主導型
- 時間ベース:時間主導型
- 時間間隔:希望の間隔
出来ることなら即時反映が理想ですが、GASではイベントソースが「時間主導型」「カレンダーから」の2種類しか設定できません。
ただ、時間主導型では1分おきに実行できるので、“ほぼ”即時反映は実現できます。
ただし、GASの無料枠制限を超えないように注意する必要があります。(無料枠を超えたら自動で停止するみたいです)
![関数;main デプロイ:Head イベントソース:時間主導型時間ベース:時間主導型 時間間隔:1分](https://mogumogu-design.com/wp-content/uploads/2023-01-29_20h22_49.jpg)
動作確認
トリガーを設定し終わったら、Notionータベースに戻りチェックを入れてみます。
無事通知が届けば設定完了です!
さいごに
GASどころかJavaScriptすら危うい人間ですが、なんとか動くものを作ることができました…!
今回頑張ったことで、JavaScriptが好きになってきました。
自動化って楽しい!
次の記事
特定の時間のみ実行できるようにしてみました