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

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

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

  1. 最初に my-integrations page に移動し、インテグレーションキーを作成してください。
  1. 最低限、以下の3つのコンテンツ機能はオンにしてください。
    1. notion image
  1. この説明内では input_tasks というインテグレーションで説明します。
    1. notion image
  1. Notion の設定画面のインテグレーションでインテグレーショントークンのコピーをクリックしてコピーします。コピーできたら後で利用するので下のコードブロックにメモとして残しておいてください。
    1. notion image

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

  1. Slack 保存用 DB を開き、「…」から「コネクトの追加」として作成したインテグレーションを追加してください。
    1. notion image
  1. 次にデータベースページの URL を取得します。私の場合だとこんな感じになっています。この赤い「?v」の前までの32桁の文字列が database id です。
    1. ここに自分のデータベース ID を記録しておいてください。

      4. Google Apps Script の準備

      1. 新しい Google Spreadsheet を開き、拡張機能から「Apps Script」を開きます。
        1. notion image
      1. 以下のリンクの github repository からコードを取得し、スクリプトエディタにコピーします。
      1. 2.4 で保存したインテグレーショントークンを 4 行目の MY_NOTION_TOKEN にコピーします。"MY_NOTION_TOKEN": "secret_XXXXXXXXX" のような形になるはずです。
      1. 同様に 3.3 で保存した database_id を 5 行目の DATABASE_ID にコピーします。"DATABASE_ID": “XXXXXXXXXXX”のような形になるはずです。
      1. 上の storeTokenAndIds を選択し、実行をクリックします。
        1. notion image
      1. 一番最初の実行時には、アプリの実行の確認が求められます。下のリンクの動画を参考にして、アプリの実行許可を認めてください。
      1. もし storeTokenAndIds が実行できれば、二つの変数が環境に保存され、下の実行ログに表示されます。
      1. ここで、トークンが正しく設定されているかを確認するために、 testCreateNotionPage を選択して実行してみてください。もし成功すれば、Notion のデータベースに以下のような形でサンプルデータが書き込まれます。
        1. notion image
      1. ここまでの状態で右上の「デプロイ」から「新しいデプロイ」を実行します。
        1. notion image
      1. Web アプリを選択し、適当な説明を書いた後で、アクセスできる人を「すべて」に選択し、デプロイをクリックしてください。
        1. notion image
      1. 成功するとこんな画面が出ます。Web アプリの場所にある URL をコピーして下にメモしておいてください。
        1. notion image

      5. Slack App を作る

      1. 今度は Slack アプリを作成します。まず、Slack api のページに飛びます。
      1. Create an App をクリックします。
        1. notion image
      1. ダイアログが出てくるので、 From scratchを選択します。
        1. notion image
      1. App Name に SlackToNotion のような名前を付けます。その後、使用するワークスペースを選択し、Create App をクリックします。
        1. notion image
      1. 次にイベントの設定をします。 Event Subscriptions をクリックしてください。
        1. notion image
      1. 以下のような画面になるので、 Enable Events をオンにします。
        1. notion image
      1. Request URL の部分に 4.8 で保存した Web アプリの URL を入力します。デプロイが正しく設定されていれば、Verified が出てくるはずです。
        1. notion image
      1. 次に Add Bot User Event をクリックし、 rection_addedを追加します。これで、リアクションをした時にイベントが発生します。
        1. notion image
      1. 次にその他の権限を追加します。左のメニューから OAuth & Permissions をクリックします。
        1. notion image
      1. Bot Token ScopesAdd an OAuth Scope にて以下の権限を追加してください。設定すると下の画面のようになります。
          • channels:history
          • channels:read
          • reactions:read
          • team:read (Ver 0.3 から増えました)
          • users:read
          notion image
      1. ここまで設定が終わったら、ワークスペースにアプリをインストールします。 Install App タブをクリックし、 Install to Workspaceをクリックします。権限の確認のダイアログが表示されるので、認証します。インストールが成功すると、OAuth Tokens for Your Workspace というページにリダイレクトされます。
        1. notion image
      1. リダイレクトされたページにある Bot User OAuth Permissions をコピーします。このキーは Slack の情報に外部からアクセスするためのキーです。下のコードブロックに貼り付けておきましょう。
        1. notion image
      1. さらに Basic Information のタブを開き、 App Credentials の中にあるVerification Token をコピーし、下に貼り付けておいてください。
        1. notion image

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

      1. Google App Script のページに戻り、5.13 で保存した verification token を11行目の : の左側に貼り付けてください。
      1. 同様に 5.12 で保存した Bot User OAuth Token を 11 行目の : の右側に貼り付けてください。
      1. その他別の Slack App がある場合は、12行目以降に同じ形で追加してください。
      1. 貼り付けが完了したら、再度 storeTokenAndIds で環境にキーを保存します。実行するとこれまで設定した値などが表示されるはずです。
        1. notion image
      1. これらの設定は「設定」のスクリプトプロパティでも確認できます。もし、前のバージョンで VERIFICATION_TOKEN や BOT_USER_OAUTH_TOKEN を設定していた場合には消してしまってください。
        1. notion image
      1. ここまで終わったら、Google Apps Script の作業は終了です。

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

      1. 記事を保存したいチャンネルに移動し、 View channel details をクリックします。
        1. notion image
      1. Integrations タブに移動し、 Add an Appをクリックします。
        1. notion image
      1. アプリ一覧の中に「SlackToNotion」がいるはずなので、 Add ボタンを押して追加してください。追加に成功すると、チャンネルに右のような表示が行われるはずです。
        1. notion image
          notion image

      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 に対応するために、スクリプトをかなり修正しました。これまでに設定していた方は以下の手順でアップデートしてください。該当箇所のブロックへのリンクを貼っておきます。
      1. 5.10 の Slack App の OAuth Scope に team:read を追加します。 Bot Token ScopesAdd an OAuth Scope にて以下の権限を追加してください。設定すると下の画面のようになります。
      1. 4.2 のスクリプトを取得し、GAS のスクリプトを書き換えます。 以下のリンクの github repository からコードを取得し、スクリプトエディタにコピーします。
      1. 6.1 で Verifycation token を : の左側に書きます。 Google App Script のページに戻り、5.13 で保存した verification token を11行目の : の左側に貼り付けてください。
      1. 6.2 で Bot User OAuth Token を : の右側に書きます。結果として、"VERIFICATION_TOKEN1": "BOT_USER_OAUTH_TOKEN1",のようになります。複数の Slack ワークスペースに設置する場合には、それぞれのワークスペースで作成した Slack App の token を同様に追加してください。 同様に 5.12 で保存した Bot User OAuth Token を 11 行目の : の右側に貼り付けてください。
      1. 4.8 で testCreateNotionPage を実行してみて、ワークスペース名がデータベースに登録されることを確認します。 ここで、トークンが正しく設定されているかを確認するために、 testCreateNotionPage を選択して実行してみてください。もし成功すれば、Notion のデータベースに以下のような形でサンプルデータが書き込まれます。
      1. 4.9-11の手順に従い、変更したソースのデプロイを実施します。生成された新しい URL を上書き記録します。 ここまでの状態で右上の「デプロイ」から「新しいデプロイ」を実行します。
      1. 記録した URL を 5.7 の Event Subsctipt の Change を押して登録します。 Request URL の部分に 4.8 で保存した Web アプリの URL を入力します。デプロイが正しく設定されていれば、Verified が出てくるはずです。
       
      Loading...