🐰

microCMSの拡張フィールドを用いて技術アイコン選択フィールドを作成した所感

2024/05/28に公開

Next.js

デザインエンジニアのりょーたです。

今回は、microCMSの拡張フィールドを用いて以下のように技術アイコンを選択できる拡張フィールドを作成しましたので、よかったところやほんの少し詰まったところについて記載しようと思います。

拡張フィールドの使用例

iframeで埋め込んでいるアプリケーションは、Next.jsとNextUIで作成しました。
microCMSで埋め込む前提で作成していますので、他の用途での利用はできませんが、よければご覧ください笑

devicon-app

アプリケーションについて少し補足をさせていただきますと、npmライブラリのdevicon内で管理されているアイコンデータを用いて、アイコンのリストを表示しています。
deviconのバージョンは以下の通りです。

"devicon": "^2.16.0",

拡張フィールドのよかったところ

1.自由にレスポンスデータのインターフェースを定義できる

拡張フィールドを利用すると、外部データを自由なインターフェースでAPIのレスポンスに設定することができます。今回で言うと、devicon-appで選択したアイコンの画像URLとアイコン名をskillスキーマのデータとしてレスポンスに含めるように設定しています。

レスポンス例

   "skills": [
        {
            "name": "react",
            "icon": "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg"
        },
        {
            "name": "typescript",
            "icon": "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg"
        },
   ]

また、microCMSの拡張フィールドの事例だと外部データから１つのデータを管理画面に送信するケースが紹介されていましたが、複数のデータを配列で送信することも可能です。

2.拡張フィールド用のSDKが用意されており、爆速開発が可能

アプリケーションを作成するにあたって、拡張フィールド用のSDKを利用して実装を行いました。また、今回はNext.jsで作成したのですが、exampleが用意されており、めちゃめちゃ参考になりました🎉🎉🎉

SDKを用いることで、iframeと管理画面間のやり取りの実装をする必要がなくなり、受け渡しのデータの型の定義も用意されている関数に則って作成すると良いので、とても簡単にできました（便利！！！）

interface SendMessageData {
  name: string;
  icon: string;
}

const { data, sendMessage } = useFieldExtension<SendMessageData[] | null>(
  null,
  {
    origin: "https://[id].microcms.io",
    height: 300,
    onPostSuccess: (message) => {
      if (message.data.message.title) {
      }
    },
  }
);

ほんの少し詰まったところ

1. 拡張フィールドの使いやすさがデベロッパー依存になりそう

今回開発をしてわかったのですが、データを選択した際に、

どのデータを選択したか
管理画面へのデータの送信が成功したか

といった視覚的なフィードバックは、埋め込んだアプリケーション内で行う必要がありました。
そのため、microCMSのコンテンツ作成画面の素晴らしいインタラクションの中で、拡張フィールドの部分も同じようなフィードバックを返すようにしないと、コンテンツの入稿者がデータを問題なく設定できているか不安になりそう、と感じました。

実際自分が拡張フィールドを作成しているとき、iframeから管理画面側にデータが正常に送信されたら、そのデータが管理画面側で他の種類のフィールドのように表示されると思っていました（ドキュメントの事例のUIのクオリティが高すぎたことで、iframeで埋め込まれた部分と管理画面の部分の境目がわからなかったのもあります笑）

もし可能なら、microCMSのデザインパターンに則ったUI、インタラクションを構築できるソリューションの提供があれば嬉しいなと思いました（もしくはfigmaで一部コンポーネントやカラー変数の公開など...!）

2. iframeから管理画面に送る設定値についての理解に時間がかかった

これに関しては自分の理解力のせいかもしれませんが、iframeから管理画面にデータを送る際のメタ情報について理解するのに時間がかかりました。

iframeから管理画面にデータを送る際の仕様はこちらに記載されているのですが、メタ情報のtitle・description・imageUrlがどのように利用されるのかが最初イメージが湧かず、dataの設計も含め色々と試しながら「そういうことか！」となりました（設定しておくと、コンテンツ一覧画面等で表示されます。という記載があるので、必要な情報は提示いただいているのですが...）

1で記載したように、管理画面に渡ったデータがiframe外の管理画面上に表示されると思い込んでいて、その際に上記のメタ情報が利用されると思っていたのもあります笑

最終的に、dataは複数のスキル情報を配列で管理し、titleは配列をアイコン名で結合し文字列にし、imageUrlは設定しないことで、コンテンツ一覧画面で以下のように表示するようにしました。

コンテンツ一覧の拡張フィールド

最後に

なんやかんや言いましたが、拡張フィールドはUI的にもデータ設計的にも自由度が高くとても良いソリューションだと思います！
アプリケーションの作成から管理画面への繋ぎ込みも含めて1日もかからずできましたし、SDKやサンプルコードの提供のおかげでUIやインタラクションの作成に注力できてよかったです。