API連携 (Beta)

API連携で取得した外部データを動的リストで使う

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

APIを公開・提供している外部サービス上のデータを、STUDIOで取得し利用できます。現在、APIから取得したデータは動的リストで表示できます。



1 ) 連携条件

APIにはさまざまな機能・用途があります。そのうち、STUDIOで利用できるAPI情報のメソッドタイプは以下2つです。

  • GET

  • POST

※ どちらも、外部からSTUDIOにデータを取得する用途でのみ利用できます。

※ STUDIO側からデータ自体の更新・追加はできません。

1-a) microCMS API, Notion API, Airtable API

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

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

1-b) カスタムAPI

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

1-b-i) API連携手順

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

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

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

次にAPIのURLをURL欄にペーストし、「APIの確認」をクリックします。

直後、API 確認が実施され、成功すると「API確認済み」となり連携完了です。
一旦、設定画面枠外をクリックしてエディターへ戻ります。

1-b-ii) APIデータ紐付け

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

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

配置・追加したテキスト・画像ボックスなどの要素に、データパネルからAPIデータ(プロパティ)を紐付けてデザインしていきます。

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

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

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

2) 注意事項

  • 現時点で全てのプランでご利用いただけますが、将来的にプラン制限が入る可能性があります。

  • 外部からのデータ取得のみに対応しています。STUDIOから外部へとデータを出力することはできません。

    GET / POSTのメソッドが選択できますが、POSTもAPI取得のためだけに利用できます。

  • 動的リストに表示できるアイテム数には上限があり、20件まで表示可能となっています。

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

  • APIの動的リストでは、CMSの動的リストで利用できる「もっと見る」ボタンが未対応です。

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