🗓️

Zenn で書いた記事を Notion でアドベントカレンダーにする！

2021/09/04に公開

Zenn

はじめに

夏休みで暇なのでアドベントカレンダーでもしようかなーと思ってたんですが、折角やるならということで、Notion API と merge-schedule-action による予約投稿を活用して、ZennやGitHubで管理してる個人ブログでアドベントカレンダーをできるようにしました。

作ったGitHub Actions ↓

リポジトリ

Tl;dr

Zenn(個人ブログ)で記事を書く
記事を書いたら、プルリクを投げる。
プルリクを merge-schedule-action で、予約投稿（予約マージ）をする
投稿されたら（マージされたら）Notion APIを使って、Notionのカレンダーに追加する

というのをつくりました。GitHub Actions に公開してるので、記事を管理してるリポジトリでアクションの設定をすればいつでも、誰でも、 Notion でアドベントカレンダーができます。

導入方法

上のリポジトリの README にも記載していますが、一応ここでも説明します。

Notion 側の設定

Notion API の設定

まずは、Notion API の設定をします。（基本的に公式と同じ手順です。）

まずはNotion API の Integration を作成します。
https://www.notion.so/my-integrations

ワークフローで使いたいので、Integration の Internal Integtration Token を Github のリポジトリの Secrets に NOTION_TOKEN という名前で設定しておきましょう。

アドベントカレンダー用のページを作成。

次に、アドベントカレンダー用のページを作成します。作成するときは、Database は Calendar を指定しておきましょう。

ページを作ったら、そのページに Integration を追加します。右上の Share -> Invite で作成した Integratioon を追加しましょう。ページを公開したい場合は、Share to Web もついでにONにしておきましょう。

ワークフローで使いたいので、作成したページの Database ID を Github のリポジトリの Secrets に NOTION_DATABASE_ID という名前で設定しておきましょう。

Github App の作成

今回、merge-schedule-action というアクションを使って予約投稿を実現しつつ、merge-schedule-action でのマージをトリガーとして実行します。ですが、GITHUB_TOKEN にデフォルトの secrets.GITHUB_TOKEN を指定するとワークフローのマージをトリガーにできないので、（めんどくさいですが）Github App を作成して、その Github APp を活用してトークンを生成する必要があります。

まず、Githubの右上から Settings -> Developer settings -> Github Apps -> New Github App と飛んで、Github App を作成します。

使うのは自分だけなので名前とか HomePage とかは適当に設定して下さい。WebHook は使わないと思うので Active のチェックは外して大丈夫です。

Permissionsは、とりあえず actions, checks, contents, deployments, issues, pull requests, repository projects, Commit statuses あたりを設定します（ここら辺は不要なPermissionのがいっぱいあると思うのでそのうち更新します...）。

App の公開はしないので、Where can this GitHub App be installed? は、Only on this account を選択しておきます。

Create Github App で作成したら、記事を管理しているリポジトリにインストールして、Github App の APP_ID と Private Key をリポジトリの Secrets にそれぞれ APP_ID 、PRIVATE_KEY という名前で設定しておきましょう。

merge-schedule-action のワークフローを作成

予約投稿をできるようにするために、merge-schedule-action を使ったワークフローを作成します。

name: Merge Schedule
on:
  pull_request:
    types:
      - opened
      - edited
      - synchronize
  schedule:
    - cron: 0 0,3,9,12 * * *

jobs:
  merge_schedule:
    runs-on: ubuntu-latest
    steps:
      - name: Generate Token
        id: generate_token
        uses: tibdex/github-app-token@v1
        with:
          app_id: ${{ secrets.APP_ID }}
          private_key: ${{ secrets.PRIVATE_KEY }}
      - name: Merge Schedule
        uses: gr2m/merge-schedule-action@v1
        with:
          time_zone: "Asia/Tokyo"
        env:
          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}

github-app-tokenというアクションを使って、Github App の APP_ID と PRIVATE_KEY からトークンを生成して、それを merge-schedule-action のほうの GITHUB_TOKEN に指定しています。こうすることで、merge-schedule-action でのマージをトリガーとしてワークフローを実行できるようになります。

notion-advent-calender-action のワークフローを作成

記事が投稿されたときに Notion のアドベントカレンダーに追加するワークフローを notion-advent-calender-action を使って作成します。

name: Notion Advent Calendar
on:
  pull_request:
    branches:
      - main
    types: [closed]

job:
  notion-advent-calender:
    runs-on: ubuntu-latest
    if: github.event.pull_request.merged == true
    steps:
      - uses: takumma/notion-advent-calender-action@v1.0.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
          NOTION_DATABASE_ID: ${{ NOTION_DATABASE_ID }}

NOTION_TOKEN と NOTION_DATABASE_ID にそれぞれ設定しておいた Secrets を指定します。

on:
  pull_request:
    branches:
      - main
    types: [closed]

と

if: github.event.pull_request.merged == true

を設定することで、プルリクがマージされたときにワークフローが実行されるようにしています。

これで準備は完了です。

記事を書く

準備が出来たら、ブランチを切って記事を書きましょう。

記事が書けたら、プルリクを投げます。そのとき、プルリクの Description を以下のように書きます。

/title 記事のタイトル
/tags Notion JavaScript
/url 記事のURL
/date 2021-09-04
/schedule 2021-09-04T18:00

それぞれ、以下のように指定します。

プロパティ	説明
`/title`	記事のタイトルを指定します。
`/tags`	記事二付けたいタグです。半角空白区切りで指定します。
`/url`	記事のURLを指定します。
`/date`	アドベントカレンダーの日付を指定します。形式はISO 8601です。日付だけでも、時間を含めても大丈夫です。
`/schedule`	これは merge-schedule-action ほうのプロパティです。マージしたい（投稿したい）日時を指定します。JS の `new Date()` で指定できる文字列なら大丈夫みたいです。

これで、指定した時間になったら記事が投稿され、Notion のアドベントカレンダーに追加されます。
例（うまくいってたらこの記事がちゃんと追加されてるはず...）↓

感想

作ってみたら割とセットアップの手順が多くなってしまって、使いずらくなっちゃったな...って感じです。
あと、Github Actions 作ってこの記事を書いてるときにはもうアドベントカレンダーをやる気が無くなってしまいました（何のために作ったんだ...？）