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

Data Connect API(API連携)

APIを公開している外部サービスからデータを取得し、動的リストや動的ページなど、Studioの動的な要素で表示する方法を解説します。連携可能なAPIの条件、各種API連携サービスの設定手順、データの紐付け方法、注意点などをまとめています。

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

対象プラン:Businessプラン以上


API連携は、APIを公開・提供している外部サービスからデータを取得し、動的ページ動的モーダル動的リストなどStudioの動的な要素に反映し、表示できます。

注意

  • 本記事内の手順には、外部サービス側での操作内容を含みます。外部サービス側での設定や動作に関するお問い合わせは、Studioチャット窓口でのサポート対象外となる可能性があります。詳細はご利用のサービスへお問い合わせください。

  • 実装に関する詳細なサポートをご希望の場合は、Enterpriseプランの窓口までお問い合わせください。


利用可能プラン

注意:API連携 (Beta)で連携済みのデータについて

2026年4月まで提供していたAPI連携 (Beta)機能で連携済みのデータは、引き続き全プランにて利用が可能です。

ただし、新規連携や連携データの変更はできません。

本機能はBusinessプラン以上で利用可能です。各プランによる機能制限は以下の通りです。

一覧エンドポイントのAPIデータは動的リストに、詳細エンドポイントのAPIデータは動的ページ動的モーダルにそれぞれ反映できます。

プラン

一覧エンドポイント

詳細エンドポイント

1つまで

利用不可

制限なし

制限なし

制限なし

制限なし


連携条件

利用できるHTTPメソッド

利用できるHTTPメソッドは次のとおりです。

  • GET

  • POST

注意:

  • GET / POSTのどちらを使用しても、外部サービスからデータを取得することのみ可能です。

  • Studio側から外部サービスのデータを作成・更新・削除((PUT / PATCH / DELETEなど)はできません。

エンドポイントの構造

StudioのData Connect APIでは、次のようなエンドポイント構造に対応しています。

  • 一覧エンドポイント

  • 詳細エンドポイント(URLパスにパラメータを含む形式)

    上記の:id部分は、Studio側の動的ページのパスパラメータ名と一致します。(例:/contents/:id

レスポンスデータの形式

  • 対応しているREST APIのレスポンス形式はJSON形式です。

  • 一覧データの場合、配列型(リスト形式)のフィールド、もしくは配列を含むオブジェクトをエンドポイントから返す必要があります。

    レスポンスに配列型フィールドが含まれていない場合、一覧データのエンドポイントとして設定しても、動的リストに取得データが表示されません。

  • Studioの動的リストには、レスポンス内の配列型フィールドをデータソースとして紐付けます。

  • 詳細データの場合、単一オブジェクトとしてレスポンスが返る必要があります。

認証方式

  • APIキー認証、Basic認証など、HTTPヘッダーで指定する認証方式に対応しています。

  • 認証情報はStudio側のProxyから送信され、公開サイトのソースコードには直接表示されません。

  • 外部サービス側のIP制限やCORS設定は不要ですが、エンドポイントURLにStudioから到達できることが前提です。


APIデータを取得する

手順 1. 外部サービス側APIのエンドポイント(URL) やアクセスキーを準備する

  1. Notion、microCMS、Airtableなど、利用したいサービスでREST APIを有効にします。

  2. 一覧データ・詳細データに利用するエンドポイントURLと、レスポンスの構造を確認します。

  3. APIキーやトークンなど、認証に必要な情報とヘッダー名(Authorization、X-MICROCMS-API-KEYなど)を控えます。

  4. 詳細用エンドポイントを連携する際は、外部サービスのドキュメントでパスパラメータ(プレースホルダーパラメータ)がどのように記載されているかを確認します。

    例:

    • 外部サービスのドキュメントの例

      /api/example/{example_id}

    • Studioで入力するエンドポイントパスの例

      /api/example/:example_id

      {example_id}:id のような部分は、アイテムごとのIDを含めるためのパラメータ(変数)です。

      詳細APIでは、このパラメータに、レスポンス内の「アイテムごとのIDフィールド」の値を渡します。

      json// 一覧APIのレスポンス例 { "contents": [ { "id": "URLに含めるID", "title": "...", ... } ] }

      この場合、詳細エンドポイントのパスは次のように指定します。外部サービスのドキュメント上のプレースホルダー表記({example_id} など)を、Studioでは :(コロン)+フィールド名 の形式に置き換えて指定します。

      • ドキュメントの例:/api/example/{id}

      • Studioで入力:/api/example/:id

手順2. StudioでAPIの認証情報を追加する

  1. エディタ画面左のナビゲーションから、[接続]アイコンを選択します。

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

  3. [認証]の[+]、または[+追加]ボタンをクリックして、API認証を追加します。

    • 名前:認証の名称を設定します。

    • キー:認証用ヘッダーキー(例: Authorization, X-API-Key)を入力します。

    • 値:認証用ヘッダーキーの値を入力します。

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

  5. 保存が完了したら、認証ダイアログ外のグレーの部分をクリックしてスクリーンに戻ります。

手順3. Studioでエンドポイントを作成する

  1. エディタ画面左のナビゲーションから、[接続]アイコンを選択します。

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

  3. [エンドポイント]の[+]、または[+追加]ボタンをクリックして、エンドポイントを追加します。

  4. 表示された画面で、エンドポイントの設定を行います。手順1で確認した外部サービス側のエンドポイントURLやプレースホルダーパラメータ等の情報を使用します。

    • 名前:エンドポイントの名称を設定します。(例:ブログ一覧、ブログ詳細)

    • URL:利用するAPIのエンドポイントURLを入力します。

      id はプレースホルダーパラメータ(変数)です。

      手順1で確認したアイテムのIDフィールド名に合わせて、:id:article_id などの形式で設定します。

    • レスポンスタイプ:[一覧](リスト形式)または[詳細](記事の詳細)を選択します。

    • 認証:手順2で追加した認証情報を選択します。情報を追加していない場合には、[+ 新規作成]から追加してください。

    • リクエストヘッダー(任意):必要なヘッダー(Authorization、X-MICROCMS-API-KEY など)を入力します。

    • プレースホルダーパラメータ:詳細データ設定時に使用するパスパラメータ名を指定します。

    • キー:URL欄に記載した :id:credential_id などと同じ名前を設定します。

    • 値:実際の変数を入力します。ここで指定した変数の詳細データがデザインエディタ上で表示されます。エディタ上で表示する詳細データを切り替えることはできません。

  5. 情報をすべて入力したら、画面右上で[GET]または[POST]いずれかのHTTPメソッドを選択し、[接続を確認]ボタンをクリックします。

  6. 確認が成功すると、画面右に取得したAPIのサンプル情報が表示されます。

  7. [保存]をクリックして、連携を完了します。保存すると、公開サイトに即時反映されます。


APIリストを作成する

取得したAPIのリストデータを動的リストに紐付けて、一覧形式で表示できます。APIリストに表示できるアイテム数は最大50件です。

APIデータを紐付けたいリストを選択します。

  1. 右パネルで[データ]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。

  2. リストの[データを紐付け]をクリックします。

  3. 紐付け可能なデータリストから対象のAPIデータを選び、紐付けます。


APIページを作成する

取得したAPIの詳細データを動的ページに紐つけて、記事の詳細を表示できます。

  1. 動的ページを追加して、[データを接続する]メニューから対象のAPIデータを選択します。

  2. デフォルトの動的ページでは、titleプロパティが紐付いたテキストボックスのみが配置されています。ページ内で表示したいプロパティ項目に合わせて、ボックス要素を追加してください。


APIで取得した変数データ(プロパティ)をボックスに紐付ける

API連携で取得した変数データ(プロパティ)をボックスに紐付ける手順を紹介します。

  1. リストアイテム内のボックス要素を選択します。

    変数データ(プロパティ)を紐付けたいAPIリスト内のボックス要素を選択します。

    紐付けるデータの内容により、使用するボックスが変わります。

  2. 右パネルで[データ]タブを開きます。パネルが閉じている場合には、右パネルを開いてください。

  3. [リストアイテム]から、コネクタを利用して要素と紐付けます。

    画像ボックスとテキストボックスへ紐付けをする場合には、各要素の設定欄で変数データ(プロパティ)を選択して紐付けることも可能です。

    各タブ内の設定入力欄でプロパティリストから紐付ける変数データ(プロパティ)を選択します。

    • 画像ボックス:[URL]入力欄

    • テキストボックス:[テキスト]入力欄


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

テキストボックスに紐付けた変数データ(プロパティ)の表示を変更できます。

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

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


主な外部サービスとの連携方法

micro CMS、Notionとの詳しい連携手順は以下のヘルプ記事を参照してください。

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