API連携 (Beta)とは

APIを公開している外部サービスのデータを取得し、STUDIOの動的リストに表示する方法を解説しています。連携可能なAPIの条件、各種API連携サービスの設定手順、データの紐付け方法、注意点などをご紹介します。

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

対象プラン:全プラン


注意:現在全プランでご利用いただけますが、将来的にプラン制限が入る可能性があります。

STUDIOのAPI連携(Beta)とは

API連携 (Beta)は、APIを公開・提供している外部サービス上のデータをSTUDIOで取得し、動的リストに表示することができる機能です。この機能を使えば、例えばNotionで管理するデータをSTUDIO上に表示することができます。

注意:現在APIで取得したデータは動的ページに紐付けて表示することはできません。リスト表示のみご利用いただけます。

連携条件

  1. API情報のメソッド
    APIにはさまざまな機能・用途があります。そのうち、STUDIOで利用できるAPI情報のメソッドタイプは以下2つです。

    • GET

    • POST

  2. レスポンスデータが配列型(リスト形式)のフィールドのみ紐づけ可能
    APIレスポンスが配列型のフィールドを持ってない場合、紐付けするデータとして利用できません。正常に連携確認が完了しても動的リストにデータが表示されません。

注意:GET / POSTのメソッドどちらを使っても、外部サービスからデータを取得することのみ可能です。STUDIOのデータを外部へ出力することはできません。

microCMS API / Notion API / Airtable API 連携手順

microCMS、Notion、Airtabel サービスのAPIは、STUDIOエディタの専用画面から連携できます。

スクリーンショット:API連携機能を使用する様子。

詳しい手順と特徴については、それぞれの記事をご覧ください。

カスタムAPI 連携手順

API のGETメソッド(またはPOST)でデータ取得できる外部サービスであれば、カスタムAPIとして連携できます。

1. APIのエンドポイント(URL) やアクセスキーの準備

API のエンドポイント(URL) やアクセスキーなどを準備しておき、STUDIO デザインエディタを開きます。

2. STUDIO上でAPI連携を設定

画面左側の追加パネルからAPIタブを開き[+新規追加]をクリックします。

スクリーンショット:API連携する様子。

表示された画面で、[カスタムAPI]を選択します。

スクリーンショット:API連携する様子。

次にAPIのURLを追加し、[APIの確認]をクリックします。

スクリーンショット:API連携する様子。

API 確認が実施され成功すると[API確認済み]と表示されます。これで連携完了です。

一度、設定画面枠外をクリックしてエディタへ戻ります。

Tips:パラメーターは1つまで追加可能です。

スクリーンショット:API連携する様子。

3. APIデータのリストへの紐付け

連携が完了すると、[API]タブに連携したAPIリクエストが表示されます。使用したいAPIリクエストをクリックすると、API リストパーツが表示されるのでページに配置します。

スクリーンショット:APIリストパーツが表示される様子。

リストパーツ内のテキストや画像ボックスに、スタイルパネルからAPIデータ(プロパティ)を紐付けます。

プロパティの種類や紐付け方法について詳しくは、以下記事をご覧ください。

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

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

注意

  • アイテム表示上限数

    動的リストに表示できるアイテムは50件までとなります。

  • もっと見るボタン表示

    APIの動的リストでは、CMSの動的リストで利用できる「もっと見る」ボタンが利用できません。

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