STUDIOにAPI連携したデータを表示する

APIを公開・提供している外部サービス上のデータをSTUDIOで取得し、動的リストに表示することができます。

連携条件

API情報のメソッド
APIにはさまざまな機能・用途があります。そのうち、STUDIOで利用できるAPI情報のメソッドタイプは以下２つです。
- GET
- POST
※ GET / POSTのメソッドが選択できますが、どちらも外部からSTUDIOにデータを取得する用途でのみ利用できます。STUDIOから外部へデータを出力することはできません。
レスポンスデータが配列型（リスト形式）のフィールドのみ紐づけ可能
APIレスポンスが配列型のフィールドを持ってない場合、紐付けするデータとして利用できません。正常に連携確認が完了しても動的リストにデータが表示されません。

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

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

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

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

左の追加パネルからAPIタブを開き「＋新規追加」ボタンをクリックします。

表示された画面で、APIタイプ「カスタムAPI」を選択します。

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

直後、API 確認が実施され、成功すると「API確認済み」となり連携完了です。

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

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

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

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

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

プラン制限
現在全プランでご利用いただけますが、将来的にプラン制限が入る可能性があります。
データ出力
外部からのデータ取得にのみ対応しています。STUDIOから外部へデータを出力することはできません。GET / POSTのメソッドが選択できますが、POSTもAPI取得のためだけに利用できます。
アイテム表示上限数
動的リストに表示できるアイテム数は、20件までとなります。
パラメーターの追加上限
パラメータは、１つまで追加可能です。
もっと見るボタン表示
APIの動的リストでは、CMSの動的リストで利用できる「もっと見る」ボタンの表示に対応していません。