注意：外部サービス連携とAPI連携 (Beta) について
■外部サービス連携における注意
本手順には外部サービスでの操作が含まれます。外部サービスの仕様や動作、この記事に記載していない操作については、チャット窓口のサポート対象外となる場合があります。
記事内の外部サービスの画面や仕様は2022年9月時点の情報です。実際の画面が異なる場合は、各外部サービスの公式ドキュメントで最新情報を確認してください。
■API連携 (Beta) における注意
API連携 (Beta) の注意事項を必ず確認してください。
この記事ではAPI機能のBeta版について説明します。Beta版API機能は全プランで利用できますが、今後は提供プランを限定した正式版API機能のリリースを予定しており、正式版リリース後は本Beta版API機能の提供を停止する可能性があります。
コンテンツ管理サービスのmicroCMS上のデータをAPI連携で取得し、Studioの動的リスト（APIリスト）で利用できます。 この記事では、microCMS APIから取得した変数データの連携手順と、連携後にデータを紐付ける設定について説明します。
APIで取得した変数データを動的ページで利用することはできません。
Tips：microCMSでは、APIをリスト形式とオブジェクト形式で作成できますが、Studioが対応しているのはリスト形式のみです。
手順 1. microCMSのcURLをコピーする
microCMS側で、Studioと連携するためのcURLを確認します。
microCMSで、対象のコンテンツAPIの一覧画面を開きます。
画面右上の[APIプレビュー]ボタンをクリックします。
右側にAPI情報が表示されるので、[cURL]タブをクリックします。
表示されたcURLをコピーします。
microCMS側で、一覧画面に表示されているコンテンツを最低1件以上「公開中」にしてください。 現在、microCMSのコンテンツが非公開（下書き中または公開終了）の場合、そのコンテンツは公開サイトだけでなく、エディターやライブプレビューにも表示されません。
手順2. Studioのデザインエディタに連携する
Studio デザインエディタで、microCMSのcURLを使ってAPI連携を設定します。
Studioにログインし、該当のプロジェクトでデザインエディタを開きます。
画面左のナビゲーションから[接続]
アイコンをクリックします。[API]タブを選択し、[＋新規追加]をクリックします。
表示された画面で、APIタイプの一覧から[microCMS]を選択します。
microCMSでコピーしたcURLを、[cURLをペースト]欄にペーストし、[次へ]をクリックします。
API確認が自動で実行されます。[API確認済み]と表示されていれば、連携が完了です。
設定画面の枠外をクリックして、エディタ画面へ戻ります。
手順 3. APIリストをページに追加する
連携が完了すると、追加パネルのAPIタブからmicroCMSのAPIデータを利用できます。
デザインエディタの左パネルで[接続]アイコンをクリックし、[API]タブを開きます。
使用したいmicroCMSのAPIリクエストをクリックします。
リストパーツが表示されるので、ドラッグ＆ドロップまたはクリックでページに配置します。
配置したAPIリスト全体を選択した状態で、右パネルで[データ]タブを開くと、リストに紐付いているデータの詳細を確認できます。パネルが閉じている場合は、右パネルを開いてください。
手順 4. APIで取得した変数データ（プロパティ）をAPIリスト内のボックス要素に紐付ける
配置したリスト内のボックス要素に、取得した変数データ（プロパティ）を紐付けます。操作方法の詳細は、API連携（APIリスト）> 変数データ（プロパティ）の紐付けを参照してください。
プロパティ文言の表示を変更する
日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。
詳しくは、プロパティの文字列フィルタでご確認ください。
Gemini ChatGPT OAuth2.0 OAuth 2.0