Notion API 連携 | Studio Help

注意：外部サービス連携とAPI連携 (Beta) について

■外部サービス連携における注意

本手順には外部サービスでの操作が含まれます。外部サービスの仕様や動作、この記事に記載していない操作については、チャット窓口のサポート対象外となる場合があります。
記事内の外部サービスの画面や仕様は2022年9月時点の情報です。実際の画面が異なる場合は、各外部サービスの公式ドキュメントで最新情報を確認してください。

■API連携 (Beta) における注意

API連携 (Beta) の注意事項を必ず確認してください。
この記事ではAPI機能のBeta版について説明します。Beta版API機能は全プランで利用できますが、今後は提供プランを限定した正式版API機能のリリースを予定しており、正式版リリース後は本Beta版API機能の提供を停止する可能性があります。

ドキュメントやデータベースを作成・管理できる Notion上のデータをAPI連携で取得し、Studioの動的リスト（APIリスト）で利用できます。この記事では、Notion APIから取得した変数データの連携手順と、連携後にデータを紐付ける設定について説明します。

APIで取得した変数データを動的ページで利用することはできません。

Notion APIとStudioを連携するには、Notion上でIntegrationを作成し、対象データベースにアクセス権を付与したうえで、StudioのデザインエディタからAPI連携を設定します。

手順 1. NotionでIntegrationを作成する

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

Notion | My integrations にアクセスし、[＋Create new integration] をクリックします。
Integrationの基本情報を次のように設定し、[Submit →] をクリックします。
- NameとLogoを任意に設定します。
- [Associated workspace] で連携したいワークスペースを選択します。
- [Update content] と [Insert content] のチェックを外します。
- [No user information] を選択します。
生成された「Internal Integration Token」は、Studioでの設定時に使用するためコピーして保管します。

Studioで利用したいNotionデータベースに、作成したIntegrationのアクセス権を付与します。

Studioで利用したいNotionデータベースのページを開きます。
右上の3点メニューから[+ Add connections] をクリックし、作成したIntegration名を入力します。
候補として表示されたIntegrationを選択し、接続します。
接続したデータベースのページURLから、データベースIDをコピーしておきます。
データベースIDは、ワークスペース名/ の後ろから ? までの部分です。
ワークスペース名がないURLの場合は、notion.so/ の後ろから ? までの部分がIDです。

Studioにログインし、該当のプロジェクトでデザインエディタを開きます。
画面左のナビゲーションから[接続]アイコンをクリックします。
[API]タブを選択し、[＋新規追加]をクリックします。
表示された画面で、APIタイプの一覧から[Notion]を選択します。
Notionでコピーしておいた「Internal Integration Token」をNotion API Key 欄に、「データベースID」をDatabase ID欄にペーストします。
必要に応じて並び替え設定を行います。
並び替え設定では、Notionデータベースに登録しているプロパティを指定し、その順序で動的リスト内のアイテムが表示されます。
入力が完了したら[次へ] をクリックします。
API確認が実行され、成功すると[API確認済み] と表示されて連携完了です。
設定が完了したら、設定画面枠外をクリックしてエディタに戻ります。

連携が完了すると、追加パネルのAPIタブからNotionのAPIデータが紐付いたAPIリストが表示されます。

デザインエディタの左パネルで[接続]アイコンをクリックし、[API]タブを開きます。
使用したいNotionのAPIリクエストをクリックします。
リストパーツが表示されるので、ドラッグ＆ドロップまたはクリックでページに配置します。
配置したAPIリスト全体を選択した状態で、右パネルで[データ]タブを開くと、リストに紐付いているデータの詳細を確認できます。パネルが閉じている場合は、右パネルを開いてください。

配置したリスト内のボックス要素に、取得した変数データ（プロパティ）を紐付けます。操作方法の詳細は、API連携（APIリスト）> 変数データ（プロパティ）の紐付けを参照してください。

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

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