まず最初にこのテンプレートを複製し、作業しながらいくつかのパラメータをコードブロック内にメモしてください。まだバグがあると思うので、コードは GitHub で管理していく予定です。
slack_to_notion
hkob • Updated 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 です。
- ここに自分のデータベース 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 が出てくるはずです。