Sanity の Portable Text Editor は標準的な HTML を扱うところまで用意されています。また、カスタムコンポーネントを作成することで、例えば地図情報と合わせたお店の情報、という形の定型のコンテンツに関して簡単に扱えるようにしたいといったコンテンツを入れることも可能です。今回は Portable Text Editor にカスタムのコンテンツの項目を追加するための手順をまとめます。
ポータブルテキストエディタのカスタマイズ
2026-01-10
地図情報コンポーネントの作成
まず最初に、地図情報をページで利用するための基本的な情報を以下のように定義します。
- 地名 - string
- 公式サイト - url
- 緯度 - number
- 経度 - number
これを定義するスキーマタイプのファイルを追加します。
schemaTypes/maps.ts
続いてこの項目を Portable Text の定義に追加します。参考までに以下が全体のコードです。アイコンを利用したいため、EarthGlobeIcon のアイコンを追加しています。
schemaTypes/portableText.ts
最後に、maps.tx に関して index.ts に追加の定義をします。参考までに、すべてのコードを記載していますが、追加しているのは maps.ts 関連のコードのみです。
schemaTypes/index.ts
これで基本的な設定は完了しました。それではブラウザで画面を確認していきます。まず、対象となる Portable Text のフィールドを参照すると Maps という項目が追加されています。
実際にアイコンをクリックすると以下のようなダイアログが開きます。
データの入力までの作業に関しては、これだけで作業が完了することになります。
プレビューの作成
実際に入力した情報に関してのプレビューの部分をまだ作成していません。今の段階では以下のような形で表示されます。
入力したデータを表示するためのプレビューコンポーネントを作成していきます。今回は以下のファイルを作成します。
components/MapsPreview.tsx
このコンポーネントを利用してプレビューを表示する形で、maps.ts のファイルを以下の部分を更新します。import の追加と、preview などのコードの変更になります。
schemaTypes/maps.ts
schemaTypes/maps.ts
結果として、以下のようにプレビューで内容を確認できるようになりました。
データの確認
上記のデータがどのように GROQ で検索をすると表示されるのかを確認します。Vision で以下の GROQ を実行します。
結果の JSON を確認すると以下のようなデータが返ってきています。
json
_type maps のデータとしてフロントエンドで処理をすれば、地図のデータとして表示することができます。
まとめ
今回は定型のデータを Portable Text のエリアに追加する手順を紹介しました。実際に地図データと Web サイトで展開するパターンに関しては、Next.js で地図データを入れるサンプルを参考にしてください。
