【非公式】NotionをCMSにして記事一覧を取得してみた【だけど便利】

みなさんこんにちは。itohです。最近は業務委託でデザイン会社で学びつつ日銭を稼ぐ生活をしています。まだまだ社会情勢など不安定な中皆さんはどうお過ごしでしょうか。
今回は、あのEvernoteの上位互換、タスク管理もメモもブックマーク管理も兼ね備えたすごいツール。NotionをNuxtをつかってCMSみたいにしてみたので、こうして手記をのこしてみたいと思います。

https://www.notion.so/

## やりかた
今回はNuxtで作っていきますので、手始めに `create-nuxt-app` でNuxtのプロジェクトを作成します。

```bash
$ npx create-nuxt-app notion-api-test
```
またこのあとaxiosを入れるかどうか聞かれると思うので忘れずに入れましょう。
入れ忘れた場合はnpmかyarnでaxiosをインストールします。

```bash
$ npm i axios
```

nuxtのプロジェクトができたところでpageディレクトリーにページを追加します。今回私は`index.vue`というページを作成しました。

### Notionに専用のページをつくる。
さてここまでできたところで、Notionに自分がCMSを設定したいページを作成していきます。ここがデーターベースのような形になるのでただのページではなく`Full page list`や`Full page table`で作っていきます。
今回はテスト用にNotionが用意してくれているTemplateで作っていきます。

<img width="1440" alt="スクリーンショット 2020-07-07 15.38.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204436/ae739034-b3ec-1668-87ea-05739caf06ee.png">

またNotionをブラウザなどで開き、ついでに**PAGE_ID**と**TOKEN**も取得しておきましょう。

PAGE_IDはブラウザで開いたときのURLの黒塗りされた部分、ワークスペース名のスラッシュと?で括られた部分になります。
<img width="1073" alt="スクリーンショット 2020-07-07 15.45.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204436/27df65b8-512f-f1b0-925b-7566fbb796b0.png">

TOKENはこのページで`開発者ツール > Application` にある `token_v2` という項目になります。
<img width="459" alt="スクリーンショット 2020-07-07 15.48.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204436/1f65a801-37e3-dcff-820e-b393afcd484a.png">


これで下準備は整いました。それでは実際にコードを書いていきます。

### コード
目指すコードはこのような形になります。

```vue
<script>
import axios from 'axios'

export default {
  async asyncData() {

    const id = 'PAGE_ID'
    const token = 'TOKEN'
    const { data } = await axios.get(
      'https://notion-api.splitbee.io/v1/table/' + id,
      {
        headers: { Authorization: `Bearer ${token}` }
      }

    )
    console.log(data);
    return {
      ITEM: data
    }
  }
}
</script>
```

やっていることはヘッドレスCMSを使ったことがある人ならわかると思いますが、import文でaxiosをインポートします。
API情報取得はasync awaitで非同期処理をする必要があります。中にaxiosを使った書き方で`get`する対象は`https://notion-api.splitbee.io/v1/table/`のエンドポイントと先ほどの`PAGE_ID`をつなげた形になります。
今回のこちらのエンドポイント、有志の方々が開発したNotionの記事取得のエンドポイントになります。
資格認証のために、`headers `には`Authorization`をキーに設定し、`Bearer`という文字列の後に`TOKEN`をつなげて渡します。
たったこれだけの行でNotionから情報を取得することができます。

あとはHTMLかPugでコードを書いてスタイルを整理するだけです。

```vue
<template lang="pug">
.container
  h2.container__title Meeting
  .container__box
    .item(v-for="item in ITEM")
      p {{item.Name}}
</template>

<script>
import axios from 'axios'

export default {
  async asyncData() {

    const id = 'PAGE_ID'
    const token = 'TOKEN'
    const { data } = await axios.get(
      'https://notion-api.splitbee.io/v1/table/' + id,
      {
        headers: { Authorization: `Bearer ${token}` }
      }

    )
    console.log(data);
    return {
      ITEM: data
    }
  }
}
</script>

<style lang="sass">
.container
  padding: 80px
  width: 100vw
  &__title
    font-size: 40px
    margin-bottom: 60px
  &__box
    display: grid
    display: grid
    grid-template-columns: repeat(3, 1fr)
    grid-template-rows: 1fr
    gap: 20px 20px

.item
  padding: 20px
  border: 1px solid #525252

</style>

```

![localhost_3000_(Desktop).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204436/ba53ae8b-52ca-f9b9-673d-ad65386f1413.png)

## 最後に
こちらのAPI、Twitterのほうで「What do you guys want to do when the Notion API comes out? I want to use it as a CMS.」と呟いていたところ作者直々に教えていただきました。

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">You can do this already :)<a href="https://t.co/AnulfpW5mU">https://t.co/AnulfpW5mU</a><a href="https://t.co/1tyotDMUbK">https://t.co/1tyotDMUbK</a></p>&mdash; Tobias Lins 🌿 (@linstobias) <a href="https://twitter.com/linstobias/status/1280096049135304704?ref_src=twsrc%5Etfw">July 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


しかも1日に使えるリクエストは10,000件と太っ腹です。今回は一覧だけを取得しましたが、中の記事を取得する方法が記載されたドキュメントがあるので、興味がある方は是非ご覧ください。
私も使い始めてわからないことだらけですが、どんどん勉強していきたいと思います。

https://github.com/splitbee/notion-api-worker