中野紘子
はじめに
Studioで外部データソースと連携できる「Data Connect API」が利用できるようになりました。
これにより、microCMSで管理しているコンテンツをStudio上で表示・活用できるようになります。
今回は、microCMSで管理している採用情報コンテンツを、Studioのサイトへ表示する構成を試してみます。
microCMSで管理しているコンテンツを、Studioで作成したWebサイトにも表示したい場合の参考になれば幸いです。
Data Connect APIとは
Data Connect APIとは、外部サービスや自社データベースが公開しているAPIを通じてデータを取得し、Studioと連携させることで、Studioで作成したWebサイト上に取得した情報を表示できる機能です。
StudioにはこれまでもmicroCMSとの連携機能がありましたが、Data Connect APIのリリースにより、新たに以下のことが可能になりました。
- 動的リストだけでなく、動的ページでもAPI連携が可能に
- 取得したデータを構造化データ（JSON-LD）としても活用可能に
StudioのmicroCMS API連携については、Studioのヘルプページに詳細がありますので、ぜひこちらも参考にしてみてください。
microCMS API 連携 | Studio Help
今回作るもの
今回は、microCMSで管理している採用情報コンテンツを、Studioのサイトへ表示する構成を作成します。
microCMS側では、以下のようなコンテンツを管理します。
- タイトル
- 本文
- アイキャッチ画像
- カテゴリ
そして、StudioではData Connect APIを利用してコンテンツを取得し、採用情報一覧ページ・詳細ページに表示します。
それでは、実際にmicroCMS側の準備から進めていきます。
microCMS側の準備
まずは、microCMSでお知らせを管理するためのコンテンツを作成します。
今回は、以下のようなAPIを用意しました。
- APIのエンドポイント名:
recruit - APIの型: リスト形式
※現時点でStudioのData Connect APIが対応しているmicroCMSのAPIの型は、リスト形式のみです
APIスキーマは以下のように設定しています。
- title（種類：テキストフィールド）
- body（種類：リッチエディタ）
- image（種類：画像）
- category（種類：コンテンツ参照 - カテゴリ）
※別途カテゴリ管理用APIを作成
こちらはコンテンツの一覧画面です。
今回はこの採用情報コンテンツを、StudioのData Connect APIを利用して取得し、サイト上へ表示していきます。
また、StudioからmicroCMSのコンテンツを取得するために、APIキーも利用します。
今回は読み取り権限のみを設定したAPIキーを準備しました。
APIキーの作成方法や権限設定についてはmicroCMSドキュメントをご覧ください。
APIキー（APIの認証と権限管理）｜microCMSドキュメント
Studioと連携する
microCMS側の準備ができたら、次にStudioで設定を行います。
1. API認証を追加する
Studioでデザインエディタを開き、以下のように進めていきます。
- 画面左のナビゲーションから［接続］アイコンを選択
- APIタブを選択
- 認証を追加ボタンをクリック
API認証を追加ダイアログが表示されるので、以下の項目を入力します。
- 名前：任意の名称
- キー：
X-MICROCMS-API-KEY - 値：microCMSのAPIキー
以上で認証情報の登録が完了となります。
2. APIのエンドポイントを設定する
一覧・詳細データそれぞれのエンドポイントを設定します。
Studioでデザインエディタを開き、以下のように進めていきます。
- 画面左のナビゲーションから［接続］アイコンを選択
- APIタブを選択
- エンドポイントを追加ボタンをクリック
2-1. 一覧データ
ダイアログが表示されるので、以下の項目を入力します。
- 名前：任意の名称
- URL：https://xxxxx.microcms.io/api/v1/yyyyy（
xxxxxにはサービスID、yyyyyにはAPIのエンドポイント名が入ります） - レスポンスタイプ：一覧
- 認証：1で追加したAPI認証情報を選択
右上の［接続を確認］ボタンをクリックし、成功するとレスポンスが表示されます。
問題なければ［保存］ボタンをクリックします。
2-2. 詳細データ
ダイアログが表示されるので、以下の項目を入力します。
- 名前：任意の名称
- URL：https://xxxxx.microcms.io/api/v1/yyyyy/:id（
xxxxxにはサービスID、yyyyyにはAPIのエンドポイント名が入ります） - レスポンスタイプ：詳細
- 認証：1で追加したAPI認証情報を選択
- （プレースホルダーパラメータ）キー：id
- （プレースホルダーパラメータ）値：任意の公開済みコンテンツのコンテンツIDを入力
右上の［接続を確認］ボタンをクリックし、成功するとレスポンスが表示されます。
問題なければ［保存］ボタンをクリックします。
以上で一覧・詳細それぞれのエンドポイントの設定が完了となります。
3. 一覧ページを作成する
コンテンツの一覧ページを作成してみましょう。
3-1. APIリストを作成する
新規ページを作成し（/recruit）、リストのパーツを追加してデータを接続してみましょう。
- 追加したリストを選択し、右パネルのデータタブを選択
- リストの［データを接続する］から、2-1で設定したエンドポイント（一覧）を選択
3-2. microCMSから取得したデータをボックスに紐付ける
3-1で作成したリストにmicroCMSから取得したコンテンツを紐付けてみましょう。
- リストアイテム内のボックス要素を選択
- 右パネルのデータタブを選択し、［リストアイテム］から、コネクタを利用して要素と紐付ける
![]()
microCMSから取得したコンテンツが、デザインエディタ上にも表示されるようになりました！
3-3. 文字列フィルターを設定する
公開日時（publishedAt）などのmicroCMSが自動付与する日付データはISO 8601形式で返されるため、文字列フィルターを利用して日付をフォーマットしてみましょう。
- 日付のテキストボックスを選択
- 右パネルのテキストタブを選択し、［テキスト］から該当するプロパティを選択
- ［+フィルターを追加］から、［日付をフォーマット］を選択し、フォーマットを「YYYY/MM/DD」とする
日付部分が「YYYY/MM/DD」の形で表示されるようになりました。
プレビューを確認すると、このようにお知らせ一覧ページが完成しました。
microCMSでコンテンツを新規追加してみると、すぐにStudioで作成したサイトにも反映されました。
4. 詳細ページを作成する
コンテンツの詳細（個別記事）ページを作成してみましょう。
- 動的ページを新規追加し、「データの接続」で2-2で設定したエンドポイント（詳細）を選択
![]()
- ページ内で表示したいプロパティ項目に合わせてボックス要素を追加し、一覧ページと同じようにコネクタを利用して要素と紐付ける
![]()
5. 一覧→詳細ページへのリンクを設定する
一覧ページのリストアイテムを選択し、リンクを設定します。
リンク入力欄をクリックするとサジェストが表示されるので、4で作成した詳細ページを選択します。
プレビューを確認すると、一覧ページから詳細ページへの移動が確認できました。
外部リンクを設定したい場合は、https://example.com/:id といった値を設定することも可能です。
6. 構造化データを設定する
microCMSから取得したデータを、構造化データとして利用することも可能です。
右パネルのページタブにある［構造化データ］から、［構造化データマークアップ］を有効にします。
挿入したい項目の入力欄をクリックすると、microCMSで設定しているAPIスキーマのプロパティが表示されるので、適用したいものを選択していきます。
プレビューのHTMLを確認すると、構造化データが設定されていました。microCMSから取得した値も正しく反映されています。
まとめ
今回は、StudioのData Connect APIを利用して、microCMSで管理している採用情報をStudioのサイトへ表示してみました。
ヘッドレスCMSは、1つのコンテンツを複数のWebサイトやサービスで活用できることが大きな特徴のひとつです。
今回試したように、Data Connect APIを利用することで、microCMSで管理しているコンテンツをStudio上でも活用できるようになりました。
気になる方はぜひ試してみてください！
