メインコンテンツにスキップ

API連携(APIリスト)

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

昨日アップデートされました

注意本機能は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を設定する手順

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

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

使用するAPIのエンドポイントURLやアクセスキーなどを準備してから、Studioデザインエディタを開きます。

2. Studio上でAPI連携を設定

  1. エディタ画面左のナビゲーションから、[接続]アイコンを選択します。

  2. [API]タブを選択し、[+新規追加]をクリックします。

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

    スクリーンショット:API連携する様子。
  4. APIのURLを入力し、必要に応じてパラメーターを1件まで追加します。

  5. [APIの確認]をクリックします。

    スクリーンショット:API連携する様子。
  6. 確認が成功すると[API確認済み]と表示され、API連携が完了します。

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

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

3. APIリストを追加する

連携が完了すると、「追加パネル > APIタブ」に連携したAPI リクエストが表示されます。

使用したいAPI リクエストをクリックすると、「API リストパーツ」が表示されます。ドラッグ&ドロップまたはクリックでページに配置します。

APIリストに表示できるアイテム数は最大50件です。


APIで取得した変数データ(プロパティ)を紐付ける

追加したAPIリストに、連携した変数データ(プロパティ)を紐付けます。

1. リストアイテム内のボックス要素を選択する

変数データ(プロパティ)を紐付けたいAPIリスト内のボックス要素を選択します。

紐付けるデータの内容により、使用するボックスが変わります。

2. 右パネルで各要素に合わせた設定タブを開く

右パネルで、選択した要素に合わせた設定タブを開きます。パネルが閉じている場合には、右パネルを開いてください。

  • 画像ボックス:[画像]タブ

  • テキストボックス:[テキスト]タブ

3. 各要素の設定欄で変数データ(プロパティ)を選択して紐付ける

各タブ内の設定入力欄でプロパティリストから紐付ける変数データ(プロパティ)を選択します。

  • 画像ボックス:[URL]入力欄

  • テキストボックス:[テキスト]入力欄

または、[データ]タブの[リストアイテム]から、コネクタを利用して要素と紐付けることも可能です。

注意:データタブでコネクタを活用して変数データ(プロパティ)を紐付ける

APIリストの各種要素に、media_thumbnail などのダミープロパティがデフォルトで紐付けられている場合があります。

ダミープロパティが入力された状態では、[データ]タブの[リストアイテム]から、コネクタを利用した要素の紐付けができません。

以下の手順で、ダミープロパティの紐付けを解除してください。

  1. リストアイテム内のボックス要素を選択します。

  2. 右パネルで各要素に合わせた設定タブを開きます。画像ボックスの場合は[画像]タブ、テキストボックスの場合には[テキスト]タブを開きます。

  3. 設定欄に入力されているダミープロパティを削除して、エンターキーをクリックします。

  4. [データ]タブを開き、[リストアイテム]から、コネクタでボックス要素に紐付けます。


プロパティ文言の表示を変更する

テキストボックスに紐付けた変数データ(プロパティ)の表示を変更できます。

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

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

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