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













