🐈

microCMSの拡張フィールドでかわいいアイコンを作る

2022/10/05に公開

microCMS

tech

CMSを使ってコンテンツを作っている際、なにかしらのアイコンを設定したくなるときってありますよね。

今回は、microCMSの拡張フィールド機能を使って、入力された名前に応じたアイコンを生成できるようにしました。

拡張フィールド機能の参考例

一覧画面

コンテンツ編集画面

Name に任意の名前を入力することで、アイコンを生成できます。また、 Random Palette で色の組み合わせを変更したり、 Variants ではアイコンのテイストを変更できます。

Boring Avatars について

アイコンの生成には、Boring Avatars を利用しました。

名前（name）やカラーパレット（colors）、イラストのテイスト（variants）を指定すると、それに応じたかわいいアイコンを生成してくれるライブラリです。
公式が用意しているジェネレーターで雰囲気をつかめると思います。

https://boringavatars.com/

実装について

実装ついては詳しく説明しませんので、適宜こちらのリポジトリからご確認ください。

microCMS の拡張フィールド機能の開発においては、それ専用のSDKが用意されているのですが、今回は使わず、 window.postMessage API を用いた素の実装を行いました。

useEffect(() => {
    window.addEventListener('message', (e) => {
      if (
        e.isTrusted === true &&
        e.data.action === 'MICROCMS_GET_DEFAULT_DATA'
      ) {
        setId(e.data.id);
        setData(e.data.message?.data);
        microcmsUpdateStyle({
          id: e.data.id,
          message: {
            height: 500,
          },
        });
      }
    });
  }, []);

管理画面からiframeにデータが送信されない

microCMS の公式ドキュメントにある拡張フィールド機能の仕様を確認しながら作っていたのですが、どうやら以下の図における①（初期値の取得）の通信がうまくいかないという症状が出ました。

iframe 側（ Next.js のアプリケーション）で EventListener を仕込んでおいて、 message を受け取るという段取りのはずなのですが、そのデータが取得できない...。下記のようなデータです。

{
  id: 'sfa3ff2c',  // iframe識別子
  action: 'MICROCMS_GET_DEFAULT_DATA',
  message: value  // 設定済みの値,
  user: {
    email: 'user-email' // ログイン中のユーザーメールアドレス
  }
}

いろいろ試してみたところ、最新（2022年10月4日現在で yarn create-next-app してできた構成）の Next.js@12.3.1 および React@18.2.0 のバージョンだと、どうやら EventListener による message イベントの受け取りに失敗するようだったので、それぞれのバージョンを以下に設定することで、症状を回避できました。なぜ取得できないか、についてはまだ分かっていません。

"dependencies": {
    "next": "12.1.2",
    "react": "18.0.0",
    "react-dom": "18.0.0"
},

使い方

使い方としては、microCMSの管理画面のAPI設定 > APIスキーマのページで、拡張フィールド用のフィールドを1つ作り、読み込みURLに、制作したアプリケーションのデプロイ先となるURLを指定します。

https://microcms-iframe.vercel.app/

そうすると、コンテンツ作成画面に移ると、アプリケーションが iframe として表示されます。

この画面で、Name に文字列を入力したり、colors でカラーパレットを設定したり、variants でイラストの種類を変えたりするなどし、コンテンツを「公開」すると、管理画面にデータが送信されます。

その状態で、管理画面でAPIプレビューをしてみると、以下のようなデータが取得できます。

{
    "id": "zdjcagvyh2wj",
    "createdAt": "2022-10-05T04:49:38.756Z",
    "updatedAt": "2022-10-05T04:49:38.756Z",
    "publishedAt": "2022-10-05T04:49:38.756Z",
    "revisedAt": "2022-10-05T04:49:38.756Z",
    "icon": {
        "name": "Tyreek Hill",
        "variant": "beam",
        "colors": [
            "#079ea6",
            "#1e0c42",
            "#f0077b",
            "#f5be58",
            "#e3e0b3"
        ],
        "imageUrl": "https://source.boringavatars.com/beam/100/Tyreek%20Hill?colors=079ea6,1e0c42,f0077b,f5be58,e3e0b3"
    }
}

これでめでたくかわいいアイコンが生成できました！

Boring Avatars について

実装について

管理画面からiframeにデータが送信されない

使い方

Discussion