yotiky Tech Blog

とあるエンジニアの備忘録

Notion - issit を使って Slack メッセージから Notion にタスクを登録する

TL;DR

  • NotionのGitHub連携(Synced Database)は2022年後半にリリース予定なのでそれまでの代替手段として
  • issitを使ってSlackのメッセージをGitHubのissueに登録する
  • GitHub Acctions を使って、NotionのDatabaseにタスクを登録する
  • 登録後のissueの状態の同期などはしない

目次

issit

Slack Appのインストール

issit.plaid.co.jp

ページを開いて「Slackに追加する」を押してインストールする。

f:id:yotiky:20220401011418p:plain:w300

許可すると追加される。

f:id:yotiky:20220401011037p:plain:w300

一時的に、`Oops, Something Went Wrong! Please Try Again or Contact the App Owner` と言われてインストールできなかったが、サポートに問い合わせたら修正中とのことで、暫くしたら解消されました。サポート窓口まであって大変有り難い。

GitHub Appのインストール

Slackのissitホーム画面で「Install GitHub App」を押してGitHubの画面を開いたら、「Install」を押す。

f:id:yotiky:20220401011746p:plain

対象リポジトリを選択してインストールする。

f:id:yotiky:20220401011927p:plain:w300

GitHubアカウントの認証

Slackのissitホーム画面で「Connect GitHub Account」を押して連携する。

動作確認

issit を利用するチャンネルを開いて、コマンドを入力してリポジトリを紐付ける。

/issit add yotiky/SlacktonotionNoFumidai

f:id:yotiky:20220401012607p:plain

Slack に適当なメッセージを投稿し、 投稿したメッセージのメニューから「GitHubのissueにする」を実行する。

f:id:yotiky:20220401012935p:plain:w300 f:id:yotiky:20220401012922p:plain:w200

タイトルを入力して、本文はお好みで修正して「issueを作る」を押す。

f:id:yotiky:20220401013046p:plain:w300

成功していればGitHubのissueに追加されている。

f:id:yotiky:20220401013147p:plain:w400

GitHub Actions

こちらの記事とサンプルのリポジトリを使わせて頂く。(感謝)

Actions の作成

リポジトリをクローンして中身を自分のリポジトリへコピーする。

コードを変更してプッシュする

(一旦コミットするなどして、) 以下の変更を加える。

.github/workflows/main.yml

  • typeをopenedに変更
  • ifブロックを削除
  • issue-bodyを追加
on:
  issues:
    types:
      ['opened']
jobs:
  labeled-actions:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        uses: ./
        with:
          issue-title: ${{ github.event.issue.title }}
          issue-body: ${{ github.event.issue.body }}
          url: ${{ github.event.issue.url }}
          integrations-token: ${{ secrets.NOTION_TOKEN }}
          db-id: ${{ secrets.DB_ID }}

action.yml

  • issue-bodyを追加
  issue-body:
    description: 'issue body'
    required: true

main.js

  • issue-bodyの入力を受け取って入力チェック
  • Notion APIに投げるjsonに本文を追加
  • Statusを任意の値に
    const notionToken = core.getInput('integrations-token');
    const issueTitle = core.getInput('issue-title');
    const issueBody = core.getInput('issue-body');
    const url = core.getInput('url');
    const dbId = core.getInput('db-id');

    if (!notionToken || !issueTitle || !issueBody || !url || !dbId) {
      throw new Error('Missing environment var');
    }
    const properties = {
      Title: {
        title: [{ text: { content: issueTitle } }],
      },
      本文: {
        rich_text: [{ text: { content: issueBody } }],
      },
      アドレス: {
        url: url,
      },
      Status: {
        select: {
          name: 'new',
        },
      },
    };

ncc を使ってコンパイルした方がいいのかもだが、当該箇所だけならdist/index.jsを直接修正しても動く。

終わったらコミットしてプッシュしておく。

GitHubでActionsを開くと、workflowの実行結果が確認できる。

f:id:yotiky:20220401020109p:plain f:id:yotiky:20220401020141p:plain

Notion

Integrationの作成

Integrationを開いて「New integration」を押して、Integrationを作成する。

適当に名前をつけてSubmit。

f:id:yotiky:20220401020741p:plain:w400

トークンをShowしてコピーしておく。

f:id:yotiky:20220401020842p:plain:w300

タスクデータベースの設定

タスクを追加するデータベースを作成する。

f:id:yotiky:20220401021126p:plain:w400

  • 本文:Text
  • アドレス:Url
  • Status:Select

右上のメニューから「Share」を押して、IntegrationをInviteする。

f:id:yotiky:20220401021508p:plain

先ほど作成したIntegrationを選択してInviteを押す。

f:id:yotiky:20220401021531p:plain

f:id:yotiky:20220401021602p:plain

最後に、URLからDatabaseのIDをコピーしておく。IDはURLの以下の部分。

https://www.notion.so/{workspace_name}/{database_id}?v={view_id}

GitHubのSecretを設定する

リポジトリの Settings > Secrets > Actions を開いて以下のSecretを登録する。

  • NOTION_TOKEN の名前で、コピーしておいたNotionのIntegrationのトークンを設定
  • DB_ID の名前で、DatabaseのIDを設定

f:id:yotiky:20220401022156p:plain

動作確認

ふたたびSlackでメッセージを投稿して、issit のショートカットを実行する。

f:id:yotiky:20220401012922p:plain:w200

GitHubのissueに登録され、Actionsのworkflowに実行状況、結果が表示される。

f:id:yotiky:20220401022641p:plain:w400 f:id:yotiky:20220401022733p:plain:w400

成功するとNotionのDatabaseにタスクが追加される。

f:id:yotiky:20220401022842p:plain

参考

yotiky.hatenablog.com

yotiky.hatenablog.com