STUDIOとmicroCMSをAPI連携させる

先日、STUDIOのAPI連携機能がリリースされた。NotionやmicroCMSと簡単に連携できる様子。

この機能を触ってみるために、とりあえずmicroCMSと連携させてみる。

STUDIOは、STUDIO CMSが既にある。この前STUDIOで行っていた「WordPressからの移行が簡単にできる」のような他CMSからの移行を簡単にする施策は分かるが、そもそも移行しなくて良いという今回の施策はなかなか思い切っているなと感じる。

とりあえずmicroCMS側で適当なAPIを作成

なんかAPI接続は以下の方法で一瞬でできたっぽい

サイドバーから「API」を開いて「API接続」を新規作成

「microCMS」を選択

curl "(APIエンドポイント)"を入力

401と言われるのでmicroCMSからX-MICROCMS-API-KEYを探して、ヘッダーのkeyをvalueに設定。

APIで取ってきたコンテンツをページに埋め込むやり方が分からない

以下のドキュメントを見ると、

1-c) APIデータを動的リスト内の要素に紐付ける
連携が完了すると、「追加パネル > APIタブ」に連携したAPI リクエストが表示されます。
使用したいAPI リクエストをクリックすると、「API リストパーツ」が表示されます。ドラッグ＆ドロップまたはクリックでページに配置します。

とあるが、APIリクエストをクリックしても「APIリストパーツ」が表示されない。何か間違っているのかな。。

microCMS側で作成するAPIは、リスト形式でないといけないようだった。「APIリストパーツ」という名前を見ればそりゃそうだという感じだが、オブジェクト形式だとページに埋め込むことができない。

リスト形式のものを作成して無事完成。

今回はmicroCMSとの連携を行ったが、「カスタムAPI」を使用すれば特定のサービスに関わらず連携できるようなのでかなり自由度の高い機能ということが分かった。

ヘッドレスCMSのViewとしてSTUDIOを使ったり、一度エンジニアがフルスクラッチにサイトを作ってしまったが、マーケ施策をスピーディーに行うためにフロントをマーケター・デザイナーのみで行えるようにするためにSTUDIOに移行したり、と使える場面結構あるなと感じた。

このスクラップは2022/09/23にクローズされました