まず最初にこのテンプレートを複製し、作業しながらいくつかのパラメータをコードブロック内にメモしてください。まだバグがあると思うので、コードは GitHub で管理していく予定です。
slack_to_notion
Github
slack_to_notion
Owner
hkobUpdated
Jul 28, 2022
Version history
- Version 0.3 (2022/8/2): multiple workspaces support
- Version 0.2 (2022/7/30): add page when the reaction is the first one.
- Version 0.1 (2022/7/29): first release
↑ 目次
1. データベースの準備
- このデータベースを自分の好きな場所に移動してください(Version 0.3 から workspace_name セレクタプロパティが増えました)。
2. インテグレーションキーの作成とトークンの保存
- 最初に my-integrations page に移動し、インテグレーションキーを作成してください。
- 最低限、以下の3つのコンテンツ機能はオンにしてください。
- この説明内では
input_tasksというインテグレーションで説明します。
- Notion の設定画面のインテグレーションでインテグレーショントークンのコピーをクリックしてコピーします。コピーできたら後で利用するので下のコードブロックにメモとして残しておいてください。
3. インテグレーションの招待と database_idの取得
-
Slack 保存用 DBを開き、「…」から「コネクトの追加」として作成したインテグレーションを追加してください。
- 次にデータベースページの URL を取得します。私の場合だとこんな感じになっています。この赤い「?v」の前までの32桁の文字列が database id です。
https://www.notion.so/hkob/771391e755c245b2a31290f40f187ab9?v=19b6c58912764cc2900e8af0afe204e3
- ここに自分のデータベース ID を記録しておいてください。
4. Google Apps Script の準備
- 新しい Google Spreadsheet を開き、拡張機能から「Apps Script」を開きます。
- 以下のリンクの github repository からコードを取得し、スクリプトエディタにコピーします。
- 2.4 で保存したインテグレーショントークンを 4 行目の MY_NOTION_TOKEN にコピーします。
"MY_NOTION_TOKEN": "secret_XXXXXXXXX"のような形になるはずです。
- 同様に 3.3 で保存した database_id を 5 行目の DATABASE_ID にコピーします。
"DATABASE_ID": “XXXXXXXXXXX”のような形になるはずです。
- 上の
storeTokenAndIdsを選択し、実行をクリックします。
- 一番最初の実行時には、アプリの実行の確認が求められます。下のリンクの動画を参考にして、アプリの実行許可を認めてください。
- もし
storeTokenAndIdsが実行できれば、二つの変数が環境に保存され、下の実行ログに表示されます。
- ここで、トークンが正しく設定されているかを確認するために、
testCreateNotionPageを選択して実行してみてください。もし成功すれば、Notion のデータベースに以下のような形でサンプルデータが書き込まれます。
- ここまでの状態で右上の「デプロイ」から「新しいデプロイ」を実行します。
- Web アプリを選択し、適当な説明を書いた後で、アクセスできる人を「すべて」に選択し、デプロイをクリックしてください。
- 成功するとこんな画面が出ます。Web アプリの場所にある URL をコピーして下にメモしておいてください。
5. Slack App を作る
- 今度は Slack アプリを作成します。まず、Slack api のページに飛びます。
-
Create an Appをクリックします。
- ダイアログが出てくるので、
From scratchを選択します。
-
App Nameに SlackToNotion のような名前を付けます。その後、使用するワークスペースを選択し、Create App をクリックします。
- 次にイベントの設定をします。
Event Subscriptionsをクリックしてください。
- 以下のような画面になるので、
Enable Eventsをオンにします。
- Request URL の部分に 4.8 で保存した Web アプリの URL を入力します。デプロイが正しく設定されていれば、Verified が出てくるはずです。
- 次に
Add Bot User Eventをクリックし、rection_addedを追加します。これで、リアクションをした時にイベントが発生します。
- 次にその他の権限を追加します。左のメニューから
OAuth & Permissionsをクリックします。
-
Bot Token ScopesのAdd an OAuth Scopeにて以下の権限を追加してください。設定すると下の画面のようになります。 - channels:history
- channels:read
- reactions:read
- team:read (Ver 0.3 から増えました)
- users:read
- ここまで設定が終わったら、ワークスペースにアプリをインストールします。
Install Appタブをクリックし、Install to Workspaceをクリックします。権限の確認のダイアログが表示されるので、認証します。インストールが成功すると、OAuth Tokens for Your Workspace というページにリダイレクトされます。
- リダイレクトされたページにある
Bot User OAuth Permissionsをコピーします。このキーは Slack の情報に外部からアクセスするためのキーです。下のコードブロックに貼り付けておきましょう。
- さらに
Basic Informationのタブを開き、App Credentialsの中にあるVerification Tokenをコピーし、下に貼り付けておいてください。
6. Google Apps Script へのトークンの追加
- Google App Script のページに戻り、5.13 で保存した verification token を11行目の
:の左側に貼り付けてください。
- 同様に 5.12 で保存した Bot User OAuth Token を 11 行目の
:の右側に貼り付けてください。
- その他別の Slack App がある場合は、12行目以降に同じ形で追加してください。
- 貼り付けが完了したら、再度
storeTokenAndIdsで環境にキーを保存します。実行するとこれまで設定した値などが表示されるはずです。
- これらの設定は「設定」のスクリプトプロパティでも確認できます。もし、前のバージョンで VERIFICATION_TOKEN や BOT_USER_OAUTH_TOKEN を設定していた場合には消してしまってください。
- ここまで終わったら、Google Apps Script の作業は終了です。
7. Slack チャンネルへの App の登録
- 記事を保存したいチャンネルに移動し、
View channel detailsをクリックします。
-
Integrationsタブに移動し、Add an Appをクリックします。
- アプリ一覧の中に「SlackToNotion」がいるはずなので、
Addボタンを押して追加してください。追加に成功すると、チャンネルに右のような表示が行われるはずです。
8. 設定完了
- 以上で設定は完了です。保存したい記事で 📌 リアクションをしてください。
9. その他の実装
9.1 プロパティに保存するバージョン
ページ本体ではなく、プロパティに本文を入れ、URL も登録してほしいという依頼がありました。以下のような修正をしてください。
- “link” という名前の URL プロパティと “whole_message” というテキストプロパティを追加してください。
- 上のコードを以下のものに差し替えてください。
- GAS のアプリをもう一度デプロイし、新しいWeb app’s URL をコピーします。
- Slack api の Event Subscription page iを開き、Request URL を変更します。
10. Ver 0.2 以前からのアップデート
Ver 0.3 では複数の Slack App に対応するために、スクリプトをかなり修正しました。これまでに設定していた方は以下の手順でアップデートしてください。該当箇所のブロックへのリンクを貼っておきます。
- 5.10 の Slack App の OAuth Scope に
team:readを追加します。Bot Token ScopesのAdd an OAuth Scopeにて以下の権限を追加してください。設定すると下の画面のようになります。
- 4.2 のスクリプトを取得し、GAS のスクリプトを書き換えます。 以下のリンクの github repository からコードを取得し、スクリプトエディタにコピーします。
- 6.1 で Verifycation token を : の左側に書きます。
Google App Script のページに戻り、5.13 で保存した verification token を11行目の
:の左側に貼り付けてください。
- 6.2 で Bot User OAuth Token を : の右側に書きます。結果として、
"VERIFICATION_TOKEN1": "BOT_USER_OAUTH_TOKEN1",のようになります。複数の Slack ワークスペースに設置する場合には、それぞれのワークスペースで作成した Slack App の token を同様に追加してください。 同様に 5.12 で保存した Bot User OAuth Token を 11 行目の:の右側に貼り付けてください。
- 4.8 で testCreateNotionPage を実行してみて、ワークスペース名がデータベースに登録されることを確認します。
ここで、トークンが正しく設定されているかを確認するために、
testCreateNotionPageを選択して実行してみてください。もし成功すれば、Notion のデータベースに以下のような形でサンプルデータが書き込まれます。
- 4.9-11の手順に従い、変更したソースのデプロイを実施します。生成された新しい URL を上書き記録します。 ここまでの状態で右上の「デプロイ」から「新しいデプロイ」を実行します。
- 記録した URL を 5.7 の Event Subsctipt の Change を押して登録します。 Request URL の部分に 4.8 で保存した Web アプリの URL を入力します。デプロイが正しく設定されていれば、Verified が出てくるはずです。