拡張フィールドを使ってHTMLだけで直感的なカラーピッカーを作ってみよう

はじめに

初めまして。株式会社メンバーズの柴田です。

microCMS は標準機能だけでも充実していますが、拡張フィールド機能を活用することでプロジェクトごとに発生する細かい運用上のニーズに応えることができます。

この記事では実際の活用事例として、microCMS の拡張フィールド機能を使い直感的に色を選択できるカラーピッカーを実装したので、その方法を紹介します。

HTML と JavaScript だけを使い、外部ライブラリに頼らず手軽に作成できますので、ぜひ参考にしてみてください。

実装の背景と課題

あるプロジェクトでクライアントから「Webサイトの背景や枠線などに色を活用して変化を加えたく、コーポレートカラーを管理画面から簡単に選択し変更できるようにしたい」という要望をいただいたことがありました。

具体的には、インタビュー記事などで表示するアイコンの枠線の色を、あらかじめ決められたコーポレートカラーの中から選びたいという要望です。

microCMS の標準フィールドでは色を指定する場合、テキストフィールドにカラーコード（例：#ff0000）を直接入力する必要があります。

しかし、これだと以下のような課題が発生します。

直感的でなく、色がイメージしにくい
入力ミスが起きやすい
毎回カラーコードを調べる手間がかかる

そこで、拡張フィールドを使ってサイト運用者が迷わず色を選択できる UI を実装することにしました。また、長期的な運用を考慮し外部ライブラリに依存せずメンテナンスしやすい構成を目指しました。

作成する機能の概要

今回作ったカラーピッカーは、以下のようなシンプルな拡張フィールドです。

クリックするとカラーピッカーが表示される
設定した色が microCMS のコンテンツデータとして保存される

※カラーピッカーの UI はブラウザや OS の標準デザインが適用されるため、閲覧環境によって表示が異なります（画像はmacOS / Chromeの例）。

実装手順

それでは、実際にカラーピッカーを実装した手順を紹介します。複雑な環境構築は不要で、HTMLファイル1つ作成するだけで完結します。

HTML/JSコードの全体像

以下のコードを、 index.html として作成します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
  </head>
  <body>
    <input id="color-field" type="color" value="#000000" />

    <script>
      const serviceDomain = "YOUR-SERVICE-DOMAIN"; // 実際のサービスドメインに置き換えてください
      let windowId = ""; // iframeの識別子を保持する変数

      // microCMSとの通信処理
      const sendToMicroCMS = (colorCode) => {
        if (windowId) {
          window.parent.postMessage(
            {
              id: windowId,
              action: "MICROCMS_POST_DATA",
              message: {
                description: colorCode,
                data: {
                  color: colorCode,
                },
              },
            },
            `https://${serviceDomain}.microcms.io`
          );
        }
      };

      // カラーパレットの初期化関数
      const initializeColorField = (defaultColor = "#000000") => {
        const colorField = document.getElementById("color-field");

        if (!colorField) {
          console.error("colorField not found");
          return;
        }

        colorField.value = defaultColor;

        // 色変更時のイベントリスナーを追加
        colorField.addEventListener("change", (event) => {
          const colorCode = event.target.value;
          sendToMicroCMS(colorCode);
        });
      };

      // 初期値設定のためのメッセージリスナー
      window.addEventListener("message", (event) => {
        if (
          event.isTrusted === true &&
          event.data.action === "MICROCMS_GET_DEFAULT_DATA"
        ) {
          windowId = String(event.data.id ?? "");
          const savedColor = event.data?.message?.data?.color ?? "#000000";

          // 保存されている色でカラーパレットを初期化
          initializeColorField(savedColor);
        }
      });
    </script>
  </body>
</html>

実装のポイント解説

このコードでは、シンプルな動作とメンテナンス性を重視しています。

1. microCMS との通信

microCMS の拡張フィールドは iframe 内で動作するため、親ウィンドウである microCMS の管理画面と window.postMessage を使って通信します。

データ取得（MICROCMS_GET_DEFAULT_DATA）

フィールドが読み込まれると、microCMS から MICROCMSGETDEFAULT_DATA アクションのメッセージが送られてきます。このメッセージから、保存されているカラーコードや iframe の識別子（id）を取得します。データがまだない場合は、デフォルトカラー（#000000）でカラーピッカーを初期化します。

悪意あるデータの取得を防ぐ（セキュリティを考慮する）場合、データ取得の分岐に Origin のチェックを含めるとより堅牢になります。

データ送信（MICROCMS_POST_DATA）

カラーピッカーで色が変更されるたびに change イベントが発生します。このイベントを検知し、選択されたカラーコードを MICROCMS_POST_DATA アクションで microCMS に送信してデータを保存します。これにより、ユーザーが色を変更すると即座に内容を反映することができます。

2. カラーピッカーの実装

この実装では、HTML 標準の <input type="color"> を使用しており、外部ライブラリは不要です。

HTML タグを 1 つ記述するだけで、カラーピッカー機能を利用できます。

JavaScript 側ではカラーピッカーの change イベントをリッスンしています。これはカラーピッカーで色を選択してポップアップを閉じた時に選択した色のデータを取得する、という動きをしています。

取得したデータを使って microCMS にデータを送る関数を呼び出し、microCMS 側にデータを登録するという処理をします。

ここで microCMS 側に登録したデータは、管理画面上の保存ボタンを押すまでは変更が保存されませんのでご注意ください。

このアプローチにより、外部ライブラリへの依存をなくし、シンプルでメンテナンスしやすい拡張フィールドを実現しています。

microCMS 管理画面での設定

作成した HTML ファイルをサーバーにアップロードし、その URL を microCMS に設定します。

1. HTML ファイルのホスティング

まずは作成した index.html を、任意のサーバーにアップロードし、Webブラウザからアクセスできる状態にします。

ただ、microCMS は拡張フィールドに localhost を指定することが可能です。そのため、動作確認段階であれば Node.js の http-server や VSCode の Live Server などを利用してローカルサーバーを立ち上げ、その URL を指定することで手軽に検証できます。

2. microCMS での設定

microCMS の管理画面へ移動し、API 設定 > API スキーマ を開きます。

「フィールドを追加」をクリックし、任意の「フィールド ID」および「表示名」を入力します。

ここではフィールド IDを「color」、表示名を「カラーピッカー」とします。

フィールドの種類にて「拡張フィールド」を選択します。

表示されたURLの入力欄に、先ほどホスティングした HTML ファイルの URL を貼り付けます。

ローカルでサーバーを起動している場合は、 http://localhost:<ポート番号> を入力してください。

「変更する」ボタンを押して保存します。

これで、コンテンツの作成・編集画面に自作のカラーピッカーが表示されるようになります。

動作確認

動作確認をするため、コンテンツ編集画面を開いてみます。

しっかりと本文の下にカラーピッカーが表示されていますね。

色を赤に変更して、「下書きを保存」または「公開」を押します。

コンテンツ一覧画面に移動してみると、当該フィールドの列に #ff0000 という値が表示されています。 #ff0000 は赤色のカラーコードなので、正しく登録されていることが確認できました。

【応用】カラーピッカーのカスタマイズ

標準の <input type="color"> に <datalist> を組み合わせることで、プリセットカラー（スウォッチ）を表示できます。これにより、運用者はワンクリックで正確な色を選択できるようになります。コーポレートカラーやテーマカラーを繰り返し選択する場合に特に便利です。

※注意：OS やブラウザによってはプリセットカラーが表示されないため、ご注意ください。

実装は非常に簡単です。カラーパレットを追加するには、以下のように、<input> タグに list 属性を追加し、対応する id を持つ <datalist> を定義するだけです。

...（省略）...
<input id="color-field" type="color" value="#000000" list="color-palette" />

<datalist id="color-palette">
  <option value="#F07800"></option>
  <option value="#415AAA"></option>
  <option value="#1A1A1A"></option>
  <option value="#FBBD53"></option>
  <option value="#F499C2"></option>
</datalist>
...（省略）...

この数行を追加するだけで、カラーピッカーに指定した色のリストが表示され、運用時の色選択が容易になりサイトデザインの統一性を保つことができます。

おわりに

今回は、microCMS の拡張フィールド機能と HTML の標準要素だけで、直感的なカラーピッカーを実装する方法を紹介しました。

今回の実装は、外部ライブラリに依存せず、シンプルで確実な動作を重視しました。これにより、メンテナンスも容易で HTML が得意でない方でも簡単に実装できるのではないかなと思います。

また、カラーパレットを用意すると入稿者の方も色選びで迷うことが少なくなるのではないでしょうか。

ぜひこの機会に拡張フィールドを活用して快適な編集環境を作ってみてください。