Notion API を Studio に連携する
注意：
本手順には外部サービスの手順も含まれています。外部サービスの仕様や動作、記事内の手順以外についてはチャット窓口でのサポート対象外となる可能性があります。
記事内の外部サービスの画面や仕様は2022年9月時点の情報です。記事と異なる場合、外部サービスにて最新情報をご確認ください。
API連携 (Beta) の注意事項を必ずご確認ください。
この記事では、API機能のBeta版についてご紹介しています。Beta版API機能は全プランでご利用いただけますが、今後は提供プランを限定した正式版API機能のリリースを予定しています。 正式版リリース後は、本Beta版API機能の提供を停止する可能性がございますこと、あらかじめご了承いただけますと幸いです。
ドキュメントやデータベースを作成・管理できる Notion上のデータをAPI経由で連携・取得し、Studio上でデザインから公開までできます。本記事では、Notion API 連携手順と連携後の設定について解説します。
Notion API連携手順
連携するにはまず、Notion上で Integrationを作成し、API連携したいデータベースにIntegrationのアクセスを許可してAPIを有効化します。
1. 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上での操作時に必要なのでコピーしておきます。
2. Notion のデータベースに Integration を接続する
Studio上で利用したいNotionデータベースを開きます。
右上の3点メニュー内にある「+ Add connections」をクリックし、先ほど作成したIntegration名を入力。候補として表示されたら、それを選択して、接続します。
接続したデータベースのページURLからデータベースを特定するデータベースIDをコピーしておきます。このIDもStudioで連携する際に使用します。
データベースIDは、ワークスペース名/ の後ろから ?までの部分です。
※上の画像のようにワークスペース名がない場合は notion.so/ の後ろから ?までの部分がIDです。
3. Studio上でAPI連携する
デザインエディターで左の追加パネルからAPIタブを開き、「＋新規追加」ボタンをクリックします。
表示された画面で、APIタイプ「 Notion 」を選択します。
次に、Notionでコピーしておいた「Internal Integration Token」をNotion API Key 欄に、「データベースID」をDatabase ID欄にペーストします。
並び替え設定は、取得するアイテムの順序を指定できる任意の設定項目です。
Notionデータベースに登録しているプロパティが選択・設定でき、設定した順序で動的リスト内のアイテムが表示されます。
入力が済んだら「次へ」をクリックします。
その後API 確認が実施され、成功すると「API確認済み」となり連携完了です。
一度、設定画面枠外をクリックしてエディターへ戻ります。
4. APIデータをリスト内の要素に紐付ける
連携が完了すると、「追加パネル > APIタブ」に連携したAPI リクエストが表示されます。
使用したいAPI リクエストをクリックすると、APIリストが表示されるのでドラッグ＆ドロップまたはクリックでページに配置します。
配置・追加したテキスト・画像ボックスなどの要素に、データパネルからAPIデータ（プロパティ）を紐付けてデザインしていきます。
プロパティの種類や紐付けの方法について詳しくは以下をご覧ください。
また、日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。
詳しくは、プロパティの文字列フィルタでご確認ください。
