対象プラン:Businessプラン以上
注意:
本記事内の手順には、外部サービス側での操作内容を含みます。外部サービス側での設定や動作に関するお問い合わせは、Studioチャット窓口でのサポート対象外となる可能性があります。詳細はご利用のサービスへお問い合わせください。
実装に関する詳細なサポートをご希望の場合は、Enterpriseプランの窓口までお問い合わせください。
利用可能プラン
注意:API連携 (Beta)で連携済みのデータについて
2026年4月まで提供していたAPI連携 (Beta)機能で連携済みのデータは、引き続き全プランにて利用が可能です。
ただし、新規連携や連携データの変更はできません。
本機能はBusinessプラン以上で利用可能です。各プランによる機能制限は以下の通りです。
プラン | 一覧エンドポイント | 詳細エンドポイント |
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) やアクセスキーを準備する
Notion、microCMS、Airtableなど、利用したいサービスでREST APIを有効にします。
一覧データ・詳細データに利用するエンドポイントURLと、レスポンスの構造を確認します。
APIキーやトークンなど、認証に必要な情報とヘッダー名(Authorization、X-MICROCMS-API-KEYなど)を控えます。
詳細用エンドポイントを連携する際は、外部サービスのドキュメントでパスパラメータ(プレースホルダーパラメータ)がどのように記載されているかを確認します。
例:
外部サービスのドキュメントの例
/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の認証情報を追加する
Studioでデザインエディタを開きます。
エディタ画面左のナビゲーションから、[接続]アイコンを選択します。
[API]タブを選択します。
[認証]の[+]、または[+追加]ボタンをクリックして、API認証を追加します。
名前:認証の名称を設定します。
キー:認証用ヘッダーキー(例: Authorization, X-API-Key)を入力します。
値:認証用ヘッダーキーの値を入力します。
[保存]をクリックして、認証情報を保存します。
保存が完了したら、認証ダイアログ外のグレーの部分をクリックしてスクリーンに戻ります。
手順3. Studioでエンドポイントを作成する
Studioでデザインエディタを開きます。
エディタ画面左のナビゲーションから、[接続]アイコンを選択します。
[API]タブを選択します。
[エンドポイント]の[+]、または[+追加]ボタンをクリックして、エンドポイントを追加します。
表示された画面で、エンドポイントの設定を行います。手順1で確認した外部サービス側のエンドポイントURLやプレースホルダーパラメータ等の情報を使用します。
名前:エンドポイントの名称を設定します。(例:ブログ一覧、ブログ詳細)
URL:利用するAPIのエンドポイントURLを入力します。
一覧データ:例
https://example.com/api/items
idはプレースホルダーパラメータ(変数)です。手順1で確認したアイテムのIDフィールド名に合わせて、
:idや:article_idなどの形式で設定します。レスポンスタイプ:[一覧](リスト形式)または[詳細](記事の詳細)を選択します。
認証:手順2で追加した認証情報を選択します。情報を追加していない場合には、[+ 新規作成]から追加してください。
リクエストヘッダー(任意):必要なヘッダー(Authorization、X-MICROCMS-API-KEY など)を入力します。
プレースホルダーパラメータ:詳細データ設定時に使用するパスパラメータ名を指定します。
キー:URL欄に記載した
:idや:credential_idなどと同じ名前を設定します。値:実際の変数を入力します。ここで指定した変数の詳細データがデザインエディタ上で表示されます。エディタ上で表示する詳細データを切り替えることはできません。
情報をすべて入力したら、画面右上で[GET]または[POST]いずれかのHTTPメソッドを選択し、[接続を確認]ボタンをクリックします。
確認が成功すると、画面右に取得したAPIのサンプル情報が表示されます。
[保存]をクリックして、連携を完了します。保存すると、公開サイトに即時反映されます。
APIリストを作成する
取得したAPIのリストデータを動的リストに紐付けて、一覧形式で表示できます。APIリストに表示できるアイテム数は最大50件です。
APIデータを紐付けたいリストを選択します。
右パネルで[データ]タブを開きます。パネルが閉じている場合は、右パネルを開いてください。
リストの[データを紐付け]をクリックします。
紐付け可能なデータリストから対象のAPIデータを選び、紐付けます。
APIページを作成する
取得したAPIの詳細データを動的ページに紐つけて、記事の詳細を表示できます。
APIで取得した変数データ(プロパティ)をボックスに紐付ける
API連携で取得した変数データ(プロパティ)をボックスに紐付ける手順を紹介します。
リストアイテム内のボックス要素を選択します。
変数データ(プロパティ)を紐付けたいAPIリスト内のボックス要素を選択します。
紐付けるデータの内容により、使用するボックスが変わります。
画像:画像ボックス
テキスト:テキストボックス
本文(body、content):リッチテキストボックス
右パネルで[データ]タブを開きます。パネルが閉じている場合には、右パネルを開いてください。
[リストアイテム]から、コネクタを利用して要素と紐付けます。
画像ボックスとテキストボックスへ紐付けをする場合には、各要素の設定欄で変数データ(プロパティ)を選択して紐付けることも可能です。
各タブ内の設定入力欄でプロパティリストから紐付ける変数データ(プロパティ)を選択します。
プロパティ文言の表示を変更する
テキストボックスに紐付けた変数データ(プロパティ)の表示を変更できます。
日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。
詳しくは、プロパティの文字列フィルタでご確認ください。
主な外部サービスとの連携方法
micro CMS、Notionとの詳しい連携手順は以下のヘルプ記事を参照してください。









