Notion API 連携

Notion API をSTUDIOに連携する

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

ドキュメントやデータベースを作成・管理できる Notion上のデータをAPI経由で連携・取得し、STUDIO上でデザインから公開までできます。

この記事では、Notion API 連携手順と連携後の設定について解説します。



1 ) Notion API連携手順

連携するにはまず、Notion上で Integrationを作成し、API連携したいデータベースにIntegrationのアクセスを許可してAPIを有効化します。

1-a) NotionでIntegrationを作成する

連携に必要な「Internal Integration Token」をNotion上で生成します。

Notion l My integrations へアクセスし、「+Create New Integration」をクリックします。

Integrationの基本情報を以下の通り登録し、「Submit →」をクリックします。

  • NameとLogoを任意のものに設定。

  • Associated workspace で連携したいワークスペースを選択します。

  • Update Content と Insert Contentのチェックを外します。

  • No user informationを選択します。

生成された「Internal Integration Token」はSTUDIO上での操作時に必要なのでコピーしておきます。

1-b) Notion のデータベースに Integration を接続する

STUDIO上で利用したいNotionデータベースを開きます。

右上の3点メニュー内にある「+ Add connections」をクリックし、先ほど作成したIntegration名を入力。候補として表示されたら、それを選択して、接続します。

接続したデータベースのページURLからデータベースを特定するデータベースIDをコピーしておきます。このIDもSTUDIOで連携する際に使用します。

データベースIDは、ワークスペース名/ の後ろから ?までの部分です。

※上の画像のようにワークスペース名がない場合は notion.so/ の後ろから ?までの部分がIDです。

1-c) STUDIO上でAPI連携する

デザインエディターで左の追加パネルからAPIタブを開き、「+新規追加」ボタンをクリックします。

表示された画面で、APIタイプ「 Notion 」を選択します。

次に、Notionでコピーしておいた「Internal Integration Token」をNotion API Key 欄に、「データベースID」をDatabase ID欄にペーストします。

並び替え設定は、取得するアイテムの順序を指定できる任意の設定項目です。

Notionデータベースに登録しているプロパティが選択・設定でき、設定した順序で動的リスト内のアイテムが表示されます。

入力が済んだら「次へ」をクリックします。

その後API 確認が実施され、成功すると「API確認済み」となり連携完了です。
一度、設定画面枠外をクリックしてエディターへ戻ります。

1-d) APIデータをリスト内の要素に紐付ける

連携が完了すると、「追加パネル > APIタブ」に連携したAPI リクエストが表示されます。

使用したいAPI リクエストをクリックすると、APIリストが表示されるのでドラッグ&ドロップまたはクリックでページに配置します。

配置・追加したテキスト・画像ボックスなどの要素に、データパネルからAPIデータ(プロパティ)を紐付けてデザインしていきます。

プロパティの種類や紐付けの方法について詳しくは以下をご覧ください。

また、日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。

詳しくは、プロパティの文字列フィルタ l STUDIO U でご確認ください。

2) 注意点

Notion API を連携する際、API連携 (Beta) 自体の注意事項も必ずご確認ください。

こちらの回答で解決しましたか?