2025-12-08
microCMS用の絵文字ピッカー拡張フィールドを作った話

microCMSの拡張フィールドを使った絵文字入力フィールドについて紹介しています。
Table of Contents
 はじめにmicroCMSでコンテンツを管理していると、「絵文字をフィールドとして保存したい」という場面に遭遇することが稀によくあります。

今回、まさにその課題を解決するための絵文字ピッカー拡張フィールドを作成したので、その背景と実装について紹介します。
 作った背景私のブログでは、サムネイルのデザインに絵文字を使用しています。

(↓こんな感じ)

そのため、記事ごとに内容に合った絵文字を自分で選び、それをサムネイルに反映させるというフローを毎記事おこおなう必要がありました。
 従来の入稿フロー使いたい絵文字をイメージする
絵文字を入力するために変換する、または「絵文字 〇〇」でインターネット検索
見つけた絵文字をコピー
microCMSのテキストフィールドにペースト
たった1つの絵文字を入力するために、毎回ブラウザを行き来したり、変換候補から探したりするのは意外と手間です。特に「この絵文字ってどうやって変換すれば出るっけ？」というときは、検索→コピー→ペーストの往復が発生。めんどくさい！
 理想のフローピッカーから絵文字を選ぶ
完了
以下の記事からインスピレーションをいただき、DiscordやSlackで絵文字を選ぶようなピッカーをフィールドに作ればいいんじゃないかということで作成してます。

microCMSの管理画面にポケモンフィールドを作る
 機能紹介 UI

左側に選択した絵文字のプレビュー、右側に絵文字ピッカーを配置したシンプルな構成です。
左側: 選択中の絵文字を大きく表示 + 名前・Unicodeコードポイント
右側: カテゴリ別の絵文字一覧と検索機能
 主な特徴emoji-martにすでに用意されてるオプションに対応して、テーマのオート適応、日本語での検索には対応をしています。
 保存されるデータmicroCMSには以下のデータ構造がレスポンスとして返ってきます。：
{
  "id": "grinning",
  "native": "😀",
  "unified": "1F600",
  "name": "grinning face"
}
フロントエンドでは emoji.native で絵文字そのものも渡しているので、そのままレンダリングにも使えます。
 技術スタックBun: ランタイム・バンドラー・パッケージマネージャー
React 18: UIライブラリ
Tailwind CSS v4: スタイリング
emoji-mart: 絵文字ピッカーライブラリ
microcms-field-extension-react: microCMS拡張フィールドSDK
 emoji-martについてemoji-mart はMissive社が開発している絵文字ピッカーライブラリです。以下の点が優れています：

Optionが豊富に用意されており、Zennでも使用されているライブラリであるためこちらを採用しました。
 実装のポイント microCMSとの通信拡張フィールドはiframe内で動作し、親フレーム（microCMS管理画面）とは postMessage APIで通信します。
const { data, sendMessage } = useFieldExtension<EmojiData>(config.microcmsOrigin);

const handleEmojiSelect = (emoji: EmojiData) => {
  sendMessage({
    title: emoji.native,
    description: `${emoji.name} (${emoji.unified})`,
    imageUrl: `https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/${emoji.unified.toLowerCase()}.png`,
    data: emoji,
  });
};
拡張フィールドについてはmicroCMSさんが出しているこちらの記事を確認してください。
 セキュリティ考慮個人で利用しますし、個人情報とかを取り扱うわけではないので最低限、環境変数で許可するオリジンを明示的に指定する実装にしてます。
# 本番環境
MICROCMS_ORIGIN=https://your-service.microcms.io
 セットアップ方法 1. microCMS管理画面での設定APIスキーマ設定を開く
「拡張フィールド」タイプのフィールドを追加
フィールドURLにデプロイ先のURLを入力
保存
 2. コンテンツ入稿設定後、コンテンツ編集画面に絵文字ピッカーが表示されます。あとは好きな絵文字をクリックするだけ！
 まとめ「絵文字を入稿するたびに検索するのが面倒」という小さな課題から生まれたこの拡張フィールド。作ってみると、想像以上に入稿体験が快適になりました。
microCMSの拡張フィールドは、こうした「あったらいいな」を自分で実装できるのが魅力です。同じような課題を感じている方は、ぜひ参考にしてみてください。
 リポジトリソースコードはGitHubで公開しています。
emoji-microcms
 参考リンクmicroCMS 拡張フィールドドキュメント
emoji-mart