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

API連携(APIリスト)

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

今週アップデートされました

注意本機能はBeta版にて提供しています

  • Beta版API機能は全プランで利用可能ですが、提供プランに制限を設けた正式版API機能のリリースを予定しています。

  • 正式版リリース後は、本Beta版API機能の提供を停止する可能性があります。あらかじめご了承ください。

  • 外部サービスの設定や動作についてチャット窓口でのサポート対象外となる可能性があります。Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。

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連携を設定

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

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

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

    スクリーンショット:API連携する様子。
  4. APIのURLを追加し、[APIの確認]をクリックします。

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

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

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

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

3. APIデータを動的リストに紐付ける

連携が完了すると、[API]タブに連携したAPIリクエストが表示されます。

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

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

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

変数データ(プロパティ)の紐付け

リストパーツ内のテキストや画像ボックスに、APIで取得した変数データ(プロパティ)の紐付けができます。

不要な要素は削除し、必要な要素には別のプロパティを設定することで、一覧の構成を柔軟に調整できます。

紐付けは右パネル内の各種設定パネルで行います。

  • 参考:動的リスト > 変数データ(プロパティ)をボックス要素に紐付ける


フィルタを活用する

表示するデータに対してフィルタを設定すると、日付のフォーマットや表示する文字数を指定するなどの表示を調整できます。

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

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