Slack to Notion テンプレート

1. データベースの準備

1. このデータベースを自分の好きな場所に移動してください(Version 0.3 から workspace_name セレクタプロパティが増えました)。

2. インテグレーションキーの作成とトークンの保存

1. 最初に my-integrations page に移動し、インテグレーションキーを作成してください。
Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

https://www.notion.so/my-integrations

2. 最低限、以下の3つのコンテンツ機能はオンにしてください。

3. この説明内では input_tasks というインテグレーションで説明します。

4. Notion の設定画面のインテグレーションでインテグレーショントークンのコピーをクリックしてコピーします。コピーできたら後で利用するので下のコードブロックにメモとして残しておいてください。

3. インテグレーションの招待と database_idの取得

1. Slack 保存用 DB を開き、「…」から「コネクトの追加」として作成したインテグレーションを追加してください。

2. 次にデータベースページの URL を取得します。私の場合だとこんな感じになっています。この赤い「?v」の前までの32桁の文字列が database id です。

https://www.notion.so/hkob/771391e755c245b2a31290f40f187ab9?v=19b6c58912764cc2900e8af0afe204e3

3. ここに自分のデータベース ID を記録しておいてください。

4. Google Apps Script の準備

1. 新しい Google Spreadsheet を開き、拡張機能から「Apps Script」を開きます。

2. 以下のリンクの github repository からコードを取得し、スクリプトエディタにコピーします。
github.com
https://github.com/hkob/slack_to_notion/raw/main/code.js

3. 2.4 で保存したインテグレーショントークンを 4 行目の MY_NOTION_TOKEN にコピーします。"MY_NOTION_TOKEN": "secret_XXXXXXXXX" のような形になるはずです。

4. 同様に 3.3 で保存した database_id を 5 行目の DATABASE_ID にコピーします。"DATABASE_ID": “XXXXXXXXXXX”のような形になるはずです。

5. 上の storeTokenAndIds を選択し、実行をクリックします。

6. 一番最初の実行時には、アプリの実行の確認が求められます。下のリンクの動画を参考にして、アプリの実行許可を認めてください。
OAuth Client Verification | Apps Script | Google Developers
Verification is Note: not required for Apps Script projects whose owner and users belong to the same Google Workspace domain or customer. If you don't verify your script project's OAuth client, users outside your domain see an unverified app screen when they try to authorize your script.

https://developers.google.com/apps-script/guides/client-verification

7. もし storeTokenAndIds が実行できれば、二つの変数が環境に保存され、下の実行ログに表示されます。

8. ここで、トークンが正しく設定されているかを確認するために、 testCreateNotionPage を選択して実行してみてください。もし成功すれば、Notion のデータベースに以下のような形でサンプルデータが書き込まれます。

9. ここまでの状態で右上の「デプロイ」から「新しいデプロイ」を実行します。

10. Web アプリを選択し、適当な説明を書いた後で、アクセスできる人を「すべて」に選択し、デプロイをクリックしてください。

11. 成功するとこんな画面が出ます。Web アプリの場所にある URL をコピーして下にメモしておいてください。

5. Slack App を作る

1. 今度は Slack アプリを作成します。まず、Slack api のページに飛びます。
Slack API: Applications | Slack

https://api.slack.com/apps?new_app=1

2. Create an App をクリックします。

3. ダイアログが出てくるので、 From scratchを選択します。

4. App Name に SlackToNotion のような名前を付けます。その後、使用するワークスペースを選択し、Create App をクリックします。

5. 次にイベントの設定をします。 Event Subscriptions をクリックしてください。

6. 以下のような画面になるので、 Enable Events をオンにします。

7. Request URL の部分に 4.8 で保存した Web アプリの URL を入力します。デプロイが正しく設定されていれば、Verified が出てくるはずです。

8. 次に Add Bot User Event をクリックし、 rection_addedを追加します。これで、リアクションをした時にイベントが発生します。

9. 次にその他の権限を追加します。左のメニューから OAuth & Permissions をクリックします。

10. Bot Token Scopes のAdd an OAuth Scope にて以下の権限を追加してください。設定すると下の画面のようになります。
• channels:history
• channels:read
• reactions:read
• team:read (Ver 0.3 から増えました)
• users:read

11. ここまで設定が終わったら、ワークスペースにアプリをインストールします。 Install App タブをクリックし、 Install to Workspaceをクリックします。権限の確認のダイアログが表示されるので、認証します。インストールが成功すると、OAuth Tokens for Your Workspace というページにリダイレクトされます。

12. リダイレクトされたページにある Bot User OAuth Permissions をコピーします。このキーは Slack の情報に外部からアクセスするためのキーです。下のコードブロックに貼り付けておきましょう。

13. さらに Basic Information のタブを開き、 App Credentials の中にあるVerification Token をコピーし、下に貼り付けておいてください。

6. Google Apps Script へのトークンの追加

1. Google App Script のページに戻り、5.13 で保存した verification token を11行目の : の左側に貼り付けてください。

2. 同様に 5.12 で保存した Bot User OAuth Token を 11 行目の : の右側に貼り付けてください。

3. その他別の Slack App がある場合は、12行目以降に同じ形で追加してください。

4. 貼り付けが完了したら、再度 storeTokenAndIds で環境にキーを保存します。実行するとこれまで設定した値などが表示されるはずです。

5. これらの設定は「設定」のスクリプトプロパティでも確認できます。もし、前のバージョンで VERIFICATION_TOKEN や BOT_USER_OAUTH_TOKEN を設定していた場合には消してしまってください。

6. ここまで終わったら、Google Apps Script の作業は終了です。

7. Slack チャンネルへの App の登録

1. 記事を保存したいチャンネルに移動し、 View channel details をクリックします。

2. Integrations タブに移動し、 Add an Appをクリックします。

3. アプリ一覧の中に「SlackToNotion」がいるはずなので、 Add ボタンを押して追加してください。追加に成功すると、チャンネルに右のような表示が行われるはずです。

8. 設定完了

• 以上で設定は完了です。保存したい記事で 📌 リアクションをしてください。

9. その他の実装

9.1 プロパティに保存するバージョン

• “link” という名前の URL プロパティと “whole_message” というテキストプロパティを追加してください。

• 上のコードを以下のものに差し替えてください。
raw.githubusercontent.com
https://raw.githubusercontent.com/hkob/slack_to_notion/main/code_only_properties.js

• GAS のアプリをもう一度デプロイし、新しいWeb app’s URL をコピーします。

• Slack api の Event Subscription page iを開き、Request URL を変更します。

10. Ver 0.2 以前からのアップデート

1. 5.10 の Slack App の OAuth Scope に team:read を追加します。 Bot Token Scopes のAdd an OAuth Scope にて以下の権限を追加してください。設定すると下の画面のようになります。

2. 4.2 のスクリプトを取得し、GAS のスクリプトを書き換えます。 以下のリンクの github repository からコードを取得し、スクリプトエディタにコピーします。

3. 6.1 で Verifycation token を : の左側に書きます。 Google App Script のページに戻り、5.13 で保存した verification token を11行目の : の左側に貼り付けてください。

4. 6.2 で Bot User OAuth Token を : の右側に書きます。結果として、"VERIFICATION_TOKEN1": "BOT_USER_OAUTH_TOKEN1",のようになります。複数の Slack ワークスペースに設置する場合には、それぞれのワークスペースで作成した Slack App の token を同様に追加してください。 同様に 5.12 で保存した Bot User OAuth Token を 11 行目の : の右側に貼り付けてください。

5. 4.8 で testCreateNotionPage を実行してみて、ワークスペース名がデータベースに登録されることを確認します。 ここで、トークンが正しく設定されているかを確認するために、 testCreateNotionPage を選択して実行してみてください。もし成功すれば、Notion のデータベースに以下のような形でサンプルデータが書き込まれます。

6. 4.9-11の手順に従い、変更したソースのデプロイを実施します。生成された新しい URL を上書き記録します。 ここまでの状態で右上の「デプロイ」から「新しいデプロイ」を実行します。

7. 記録した URL を 5.7 の Event Subsctipt の Change を押して登録します。 Request URL の部分に 4.8 で保存した Web アプリの URL を入力します。デプロイが正しく設定されていれば、Verified が出てくるはずです。