Github ActionsでNotionの情報をPRに取り込んでみる

2024年8月21日 18:33

くふうAIスタジオでエンジニアをしているyamayuです。主にグループ内のWebサイト・Webアプリケーションを担当させていただいています。今回は、普段業務で利用しているNotionとGithubの利用について、お話しようと思います。

最終的には、タイトルの通り「Notionに記載した情報をGithub ActionsでPRに取り込んでみる」お話になります。少し回り道もありますが、お付き合いいただけると幸いです。

くふうAIスタジオでのNotionの活用

弊社では、ドキュメントやタスクの管理ツールとして、Notionの利用を推奨しています。くふうグループは、時間をかけていくつかの会社が徐々に集まって現在の組織となっています。もちろん、それぞれの会社・サービスで異なる文化があり、異なるツールを利用していました。

せっかくなら他のチームの行動を知り、グループとしてより良いものを作れるように知見を共有していけるようにということで、Notionの活用が進められております。

現在では、様々なプロジェクトがNotion上で管理され、そこで出てきた知見などがドキュメントとして社内誰でも確認できる状態になりつつあります。

また、Notion活用を推進するメンバーもおり、Tipsなどを共有してより良い活用方法を模索しています。

Notionでのタスク管理と個人的な悩み

Notionでは、データベースを利用して柔軟にタスク管理をすることが可能です。もちろん、かんばんボード形式やタイムライン形式などでの表示は当たり前であり、最近だとグラフの表示も可能になりましたね。

エンジニアでも、そうでない人も特に大きな抵抗なく簡単に扱えるツールだと思います。様々な機能を使いこなす凄腕の方もちらほらと、、、

一方で、開発をしているとほぼ確実に扱うのが、Githubなどのツールです。そしてそこにもタスク管理系の様々な機能がありますし、おそらくタスク管理ツールやGithubを両方使っているところは多くあると思います。個人的には、どの内容をどっちに書けばいいの？と言う点です。

弊社で言うと、NotionとGithub。ディレクション系のタスク、デザイン系のタスク、開発系のタスクと様々なタスクを管理するのであればNotionにまとめることになります。 GithubはPull Request（PR）を作る上で、誰がなんのために何をしたかが別の開発者にわかるように、実施内容はもちろん目的や背景も重要になります。そうすると、NotionにもGithubにも同じような内容を書く必要が出てきてしまいます。Notionにも連携機能がありますし、それぞれにリンクを貼ると言うのも一つの手です。ただその場合、Notionに飛ぶ必要も出てきますし、権限などの理由でアクセスできない人もいるかもしれません。長くなりましたが、「それならば、Notionの情報をなんとかしてGithubにとりこんでしまおう。」と言うのが今回のきっかけです。

Github ActionsとNotion APIを利用して、PRにNotionの内容を取り込む

想定する挙動（仮）

```mermaid
flowchart TD
    A[PRにNotionのURLが記載されている状態] -->|PR Open or synchronize| B(Action 実行)
    B --> C(PRからNotionのURLを検出)
    C --> D(APIでデータ取得)
    D --> E(取得データの分解・PRに反映)
```

注意点：PRの更新をトリガーにしてはいけません。完了時にPRを更新するので、無限ループが発生します。

反映したデータは、下記のような形でPR末尾に追加します。

<details>
<summary>Notion Content</summary>

$output

</details>

どうしても長くなってしまうので、上記の形式にして内容を折りたためるようにしておきます。

セクションを折りたたんで情報を整理する（Github）

これが

こうじゃ

実行環境

今回はNode.jsを利用してデータをとりに行きます。

ワークフローをそのまま。

name: Copy Notion Body to Github PR
on:
  pull_request:
    types:
      - opened
      - synchronize

jobs:
  invoke:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: node --version

      - name: Extract Notion Page ID
        run: |
          page_id=$(echo "${{ github.event.pull_request.body }}" | sed -n 's/.*\[Notion Link\](https:\/\/www\.notion\.so\/\([^)]*\)).*/\1/p' | sed 's|^[^/]*\/||' | sed 's|.*-||' | sed 's|\?.*||' )
          echo "NOTION_PAGE_ID=$page_id" >> $GITHUB_ENV
        shell: bash

      - name: Fetch Notion Page and Create Text on Node.js
        run: |
          npm install
          echo $(node notion.js)
          output=$(node notion.js)
          insert_body=$(cat <<EOF
          <details>
          <summary>Notion Content</summary>

          $output

          </details>
          EOF
          )
          base_body=$(echo "${{ github.event.pull_request.body }}" | sed '/<details>/,/<\/details>/d')
          update_body="$base_body $insert_body"
          echo $update_body
          gh pr edit $PULL_REQUEST --body "$update_body"
        working-directory: .github/workflows
        env:
          NOTION_SECRET: ${{ secrets.NOTION_SECRET }}
          GH_TOKEN: ${{ secrets.GHA_TOKEN }}
          PULL_REQUEST: ${{ github.event.pull_request.html_url }}

データの取得と分解・整形

一番大変なのが、Notion APIで取得した情報を分解してPR内で表示できるようにmarkdown形式に直すところです。

今回Notion APIを初めて触りましたが、ドキュメントのセクションごとに、しかも階層ごとに内容を返してくるんですね。最初そのままmarkdown形式で固まりを返してくれたらすぐだなと思っていたのにそこまで甘くはなかった。

と言うことで、コードは長くなるのでURLに貼っておきます。

まだまだ足りない部分はありますが、少しずつ更新しようと思います（きっと）

だいぶ最低限しかできていませんが今はこんな感じ

そもそもGithubで対応できないものはあるので、そこは諦めるか、何か別のテキストやリンクを入れておくかすると良いかもしれません。

終わりに

今回はNotionとGithub Actionsの連携について簡単に紹介させていただきました。

Notion APIもGithub Actionsも今までほとんど触っていなかったので、そこに触れることができただけでも個人的には良い経験になりました。それが今後の業務効率改善につながっていくと嬉しいです。

くふうAIスタジオでは、採用活動を行っています

当社は「AX で暮らしにひらめきを」をビジョンに、2023年7月に設立されました。（AX＝AI eXperience（UI/UX における AI/AX）とAI Transformation（DX におけるAX）の意味を持つ当社が唱えた造語）くふうカンパニーグループのサービスの企画開発運用を主な事業とし、非エンジニアさえも当たり前にAIを使いこなせるよう、積極的なAI利活用を推進しています。（サービスの一例：累計DL数1,000万以上の家計簿アプリ「Zaim」、月間利用者数1,600万人のチラシアプリ「トクバイ」等） AXを活用した未来を一緒に作っていく仲間を募集中です。ご興味がございましたら、以下からカジュアル面談のお申込みやご応募等お気軽にお問合せください。 https://open.talentio.com/r/1/c/kufu-ai-studio/homes/3849

中途採用 #エンジニア採用 #採用広報 #株式会社くふうAIスタジオ #テックブログ #Notion #GithubAction