✏️

microCMSのiframeフィールドを作る時に便利なカスタムフックを公開した

hanetsuki

2022/10/21に公開

microCMS

tech

こんにちは、ちょっと株式会社エンジニアのhanetsukiです。

microCMSのAPIスキーマの種類に外部データ連携（iframeフィールド）というのがあります。
これは、独自フィールドをiframeを通してmicroCMSで扱えるというもので、公式から幾つか利用方法が出ています。

Google Mapと連携し、「地図」コンテンツを配信する

Youtubeと連携し、「動画」コンテンツを配信する

Amazonの書籍データを取得し、microCMSへ連携する

自社の基幹システムと連携し、コンテンツ配信する

CRMから顧客情報を取得し、microCMSへ連携する

APIを用いて、microCMSとは別で管理するデータの連携が主な利用方法なようです。
APIを用いないiframeフィールドとして、microCMSでは現在サポートされていない、テーブル入力用のフィールドを作るというものの紹介もありました。

今回は、そんなiframeフィールドをReactで作成する上で便利なカスタムフックを作成・公開をしたのでその紹介になります！

命名：use-microcms-iframe

今回作成したのは、use-microcms-iframeというカスタムフックパッケージです。
このカスタムフックは、microCMSとデータの連携を行う上で必要なイベントを取りまとめています。

利用方法

パッケージをインストールします。

npm install use-microcms-iframe

一番シンプルな利用方法は、コンポーネント内で呼び出し、useStateと同じ要領で扱うことです。これだけで、iframeを表示させたmicroCMSとデータの疎通が可能になります。

import { useStateMicroCMSIframe } from 'use-microcms-iframe'

export const Component: React.FC = () => {
  const [state, setState] = useStateMicroCMSIframe({ text: '' })

  return <input type="text" value={state.text} onChange={(e) => setState({ text: e.target.value })} />
}

useStateMicroCMSIframe の第二引数にはオプションを渡すことができます。

const [state, setState] = useMicroCMSIframe({ text: '' }, {
  // microCMSに表示するiframeの高さ（default: 300）
  height: 500,
  // microCMSに表示するiframeの横幅（default: 100%）
  width: '100%',
  // iframeを表示させるmicroCMS管理画面のorigin url
  origin: 'https://example.microcms.io',
  // `setState`実行時にmicroCMSにpostするデータを整形する関数
  parsePostMessageParams: (data) => ({
    title: data?.text || '',
    data,
  }),
})

詳しくは、READMEをお読みください！

このパッケージで郵便番号からある程度住所入力を省くことができるサンプルもありますので是非ご覧ください！

最後に

自称microCMSファンクラブの一員としては、今回も良い汗を流したなと感じています。
是非、microCMSでiframeフィールドを利用する際には導入をご検討ください！

ちょっと株式会社では、microCMSなどといったheadlessCMSを用いたJamstackでのwebサイト制作などやwebアプリケーションの開発を行なっており、デザインが好きなエンジニアを積極的に募集しております。

興味のある方は是非、私や弊社代表のtwitter宛・採用情報などからご連絡ください！

chot Inc. tech blogPublication

ちょっと株式会社（chot-inc.com）のエンジニアブログです。フロントエンドエンジニア募集中！カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig

命名：use-microcms-iframe

利用方法

最後に

Discussion