メインコンテンツにスキップ

Notion API 連携

Notionのデータベースで管理しているデータを、Data Connect API機能を使ってStudioサイトに表示できます。この記事では、Notion側の準備からStudioでのAPI設定、動的リスト・動的ページ・動的モーダルへのデータ連携までの流れを説明します。

今週アップデートされました

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

連携に必要なもの

Notion APIとStudioを連携するには、次の準備が必要です。

  • Notionアカウントと対象ワークスペース

  • 連携したいNotionデータベース(テーブル形式のページ)

  • Notionで発行した「内部インテグレーションシークレット(Internal Integration Token)」

  • StudioのBusinessプラン以上のプロジェクト(Data Connect API機能を利用するため)

Notion APIの利用条件や仕様の詳細は、Notion公式ドキュメントを参照してください。


手順1. Notionでインテグレーションを作成する

Studioと連携するためのインテグレーションとAPIキーをNotion上で準備します。

  1. Notionの内部インテグレーション設定にアクセスし、[+新しいインテグレーションを作成]をクリックします。

  2. インテグレーションの基本情報を設定します。

    • インテグレーション名

    • アイコン

    • 関連ワークスペース:連携したいワークスペースを選択します。

  3. [作成]をクリックし、インテグレーションを作成します。

  4. 表示されたダイアログで、[インテグレーション設定]をクリックします。

  5. 作成したインテグレーションの編集画面で、[内部インテグレーションシークレット]をコピーします。

注意:内部インテグレーションシークレットはAPI認証に使用する重要な情報です。第三者と共有しないよう管理してください。


手順 2. Notionデータベースにインテグレーションのアクセス権を付与する

作成したインテグレーションから対象データベースへアクセスできるようにします。

  1. Notionで連携したいデータベースページを開きます。

  2. 右上の3点メニュー[…]をクリックします。

  3. メニュー下部の[接続]をクリックし、手順1で作成したインテグレーションを選択します。


手順 3. Studio上でAPI連携する

Studioでエンドポイントを設定するために、次の情報を確認します。

  1. データベースID:データベース固有の32文字の英数字

    エンドポイント登録時のURL設定に利用します。

    ブラウザで対象のデータベースを開き、https://www.notion.so/の後から ? の前まで(ワークスペース名カスタムドメインを使っている場合は、その名前の直後から ? の前まで)の32文字の英数字をコピーしてください。

    例: https://www.notion.so/d982XXXXXXXXXXXXXXXXXXXXXXXXXXXX?v=...の場合、IDは d982XXXXXXXXXXXXXXXXXXXXXXXXXXXX です。

  2. HTTPヘッダー:エンドポイント登録時、以下のをリクエストヘッダーとして使用します。

    • Notion-Version: 2022-06-28など、利用するAPIのバージョン

    • Content-Type: application/json


手順4. StudioでAPI認証を追加する

StudioデザインエディタでNotion APIにアクセスするための認証情報を登録します。

  1. Studioにログインし、該当プロジェクトでデザインエディタを開きます。

  2. エディタ画面左のナビゲーションから[接続]アイコンをクリックします。

  3. [API]タブを選択します。

  4. [認証]の[+]または[+追加]ボタンをクリックして、新しい認証を作成します。

  5. 表示されたダイアログで次の項目を入力します。

    • 名前:認証の名称を任意で設定します(例:Notion)。

    • キー:Authorization

    • 値:Bearer {Internal Integration Token}(手順1でコピーしたトークンをBearer の後に続けて入力)

  6. [保存]をクリックして認証情報を保存します。


手順5. Notionのエンドポイントを登録する

Studio デザインエディタで、Notionデータベース用のエンドポイントを追加します。

  1. デザインエディタ左の[接続]アイコンから[API]タブを開きます。

  2. [エンドポイント]の[+]または[+追加]をクリックします。

  3. 表示された画面で、次の項目を設定します。

  4. HTTPメソッドとしてPOST を選択し、[接続を確認]をクリックします。

  5. ステータス「200 OK」とレスポンスが表示されることを確認し、サンプルデータに問題がなければ[保存]をクリックして、エンドポイント設定を保存します。

リクエストヘッダーに入力する値

キー

Notion-Version

2022-06-28 など、利用するAPIのバージョン

Content-Type

application/json


手順6. Notionのデータを動的要素で利用する

連携が完了すると、取得したNotion APIのデータを動的リストでリスト表示できるようになります。要素へのデータ連携は、右パネルの[データ]タブから行います。

操作方法の詳細は、次のヘルプ記事を参照してください。


手順7. 取得したAPIの変数データ(プロパティ)をボックス要素に紐付ける

リスト内のボックス要素に、APIで取得した変数データ(プロパティ)を紐付けます。操作方法の詳細は、次のヘルプ記事を参照してください。


プロパティ文言の表示を変更する

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

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


Notion APIで詳細データを取得する

この記事では、POST /v1/databases/{database_id}/query を使った一覧データの取得方法を説明していますが、Notion APIでは単一ページを対象とした詳細データの取得も可能です。

詳細データを取得する場合は、HTTPメソッドとしてGETを選択し、エンドポイント設定で次のように登録してください。

キー

id

Notion側で取得した page_id の文字列

Notionインテグレーションの認証ヘッダーと、Notion-Version などのリクエストヘッダーは、一覧取得時と同一の内容で設定してください。

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