注意:本機能はBeta版にて提供しています
Beta版API機能は全プランで利用可能ですが、提供プランに制限を設けた正式版API機能のリリースを予定しています。
正式版リリース後は、本Beta版API機能の提供を停止する可能性があります。あらかじめご了承ください。
外部サービスの設定や動作についてチャット窓口でのサポート対象外となる可能性があります。Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。
API連携 (Beta)は、APIを公開・提供している外部サービス上のデータをStudioで取得し、動的リストに表示できる機能です。この機能を使えば、例えばNotionで管理するデータをStudio上に表示することができます。
連携条件
API情報のメソッド
APIにはさまざまな機能・用途があります。そのうち、Studioで利用できるAPI情報のメソッドタイプは以下2つです。GET
POST
レスポンスデータが配列型(リスト形式)のフィールドのみ紐づけ可能
APIレスポンスが配列型のフィールドを持ってない場合、紐付けするデータとして利用できません。正常に連携確認が完了しても動的リストにデータが表示されません。
注意:GET / POSTのメソッドどちらを使っても、外部サービスからデータを取得することのみ可能です。Studioのデータを外部へ出力することはできません。
microCMS API / Notion API / Airtable API 連携手順
microCMS、Notion、Airtabel サービスのAPIは、Studioエディタの専用画面から連携できます。
詳しい手順と特徴については、それぞれの記事をご覧ください。
カスタムAPI 連携手順
API のGETメソッド(またはPOST)でデータ取得できる外部サービスであれば、カスタムAPIとして連携できます。
1. APIのエンドポイント(URL) やアクセスキーの準備
API のエンドポイント(URL) やアクセスキーなどを準備しておき、Studio デザインエディタを開きます。
2. Studio上でAPI連携を設定
Studioでデザインエディタを開きます。
エディタ画面左のナビゲーションから、[接続]アイコン
を選択します。[API]タブを選択し、[+新規追加]をクリックします。
表示された画面で、[カスタムAPI]を選択します。
APIのURLを追加し、[APIの確認]をクリックします。
API 確認が実施され成功すると[API確認済み]と表示されます。これで連携完了です。
一度、設定画面枠外をクリックしてエディタへ戻ります。
※Tips:パラメーターは1つまで追加可能です。
3. APIデータを動的リストに紐付ける
連携が完了すると、[API]タブに連携したAPIリクエストが表示されます。
使用したいAPIリクエストをクリックすると、API リストパーツが表示されるのでページに配置します。
APIリストに表示できるアイテム数は50件までです。
変数データ(プロパティ)の紐付け
リストパーツ内のテキストや画像ボックスに、APIで取得した変数データ(プロパティ)の紐付けができます。
不要な要素は削除し、必要な要素には別のプロパティを設定することで、一覧の構成を柔軟に調整できます。
紐付けは右パネル内の各種設定パネルで行います。
参考:動的リスト > 変数データ(プロパティ)をボックス要素に紐付ける
フィルタを活用する
表示するデータに対してフィルタを設定すると、日付のフォーマットや表示する文字数を指定するなどの表示を調整できます。
詳しくは、プロパティの文字列フィルタをご覧ください。






