microCMS APIをStudioに連携する
注意：
本手順には外部サービスの手順も含まれています。外部サービスの仕様や動作、記事内の手順以外についてはチャット窓口でのサポート対象外となる可能性があります。
記事内の外部サービスの画面や仕様は2022年9月時点の情報です。記事と異なる場合、外部サービスにて最新情報をご確認ください。
API連携 (Beta) の注意事項を必ずご確認ください。
この記事では、API機能のBeta版についてご紹介しています。Beta版API機能は全プランでご利用いただけますが、今後は提供プランを限定した正式版API機能のリリースを予定しています。 正式版リリース後は、本Beta版API機能の提供を停止する可能性がございますこと、あらかじめご了承いただけますと幸いです。
コンテンツ管理サービスのmicroCMS上のデータをAPI連携で取得し、Studio上で扱うことができます。この記事では、Studioでの microCMS API 連携手順と連携後の設定について解説します。
Tips：microCMSでは、APIをリスト形式とオブジェクト形式で作成できますが、Studioではリスト形式のみ対応しています。
microCMS API 連携手順
1. microCMSのcURLをコピーする
まずは、連携に必要なmicroCMSのcURLを取得します。
microCMSのコンテンツ一覧画面を開き、画面右上の 「API プレビュー」ボタンをクリックします。
右側からAPI情報が確認できる画面が表示されるので、cURLタブをクリックし表示された cURLをコピーします。
また、それぞれの画面上のコンテンツを、最低一つ以上「公開中」にしてください。
※現状、microCMSのコンテンツが非公開（下書き中または公開終了）だと、公開サイトはもちろん、エディター・ライブプレビューでもそのコンテンツは表示されません。
2. Studio上で連携する
Studio デザインエディターを開き、左の追加パネルからAPIタブを開きます。
「＋新規追加」ボタンをクリックします。
表示された画面で、APIタイプ「 microCMS 」を選択します。
次に、microCMS でコピーした cURLを入力欄にペーストし、「次へ」をクリックします。
直後、API 確認が実施され、成功すると「API確認済み」となり連携完了です。
一旦、設定画面枠外をクリックしてエディターへ戻ります。
3. APIデータを動的リスト内の要素に紐付ける
連携が完了すると、「追加パネル > APIタブ」に連携したAPI リクエストが表示されます。
使用したいAPI リクエストをクリックすると、「API リストパーツ」が表示されます。ドラッグ＆ドロップまたはクリックでページに配置します。
配置・追加したテキスト・画像ボックスなどの要素に、データパネルからAPIデータ（プロパティ）を紐付けてデザインしていきます。
プロパティの種類や紐付けの方法について詳しくは以下をご覧ください。
また、日付のフォーマットを変えたり、表示文字数を指定するなどテキストプロパティの表示を調整できます。
詳しくは、プロパティの文字列フィルタでご確認ください。
