💭

ContentfulのUI Extensionsの紹介

2022/01/29に公開

Contentful

Headless CMS

idea

仕事で Contentful を使っているのですが、UI Extensions という機能を初めて使ってみて、便利だなぁと感じたのでその紹介です。

※Contentful はヘッドレス CMS です。
https://www.contentful.com/

UI Extensions とは

Contentful の Web アプリの基本機能を拡張させてくれるものです。
入力する際のインターフェイスをより使いやすくすることも可能です。

参考リンク

例：
・Youtube ID
Youtube のリンクを入力すると、id だけを抽出してくれるものです。

・JSON Form Editor
JSON をそのまま編集させるのでなく、GUI 的に編集できるものです。

Contentful で記事の投稿なのを行うのはビジネスサイドの方が多いかと思います。
UI Extensions を使い、そういった非エンジニアのにもよりわかりやすい入力フィールドを作ることも可能です。

設定の仕方

ここからは、UI Extensions の設定の仕方を説明します。

Settings をクリックして、Extensions（スクショの赤枠）を押します。

すると、以下のような画面になります。
ここで、Add extension を押すと Github からインストールするか、新しく作成するかを選べるので、必要な方を選びます。（今回は、Github からの方で説明します。）

Github からの場合、以下のような画面になります。

そこに使いたい extensions の Github の extensions.json の URL を入力する必要があります。

例えば、
Youtube ID という extensions を入れたいなら、
https://github.com/contentful/extensions/blob/master/samples/youtube-id/extension.json
という URL を入れます。

https://github.com/contentful/extensions/tree/master/samples

にサンプルがあります。

入力すると以下のような画面になります。

設定画面の説明

FieldTypes はその名の通り、どんなフィールドのタイプにこの Extensions を適用するかです。

Legacy sidebar extension の Yes, this is a legacy sidebar extension のチェックは不要です。
（付けるとサイドバーに表示されます。）

Hosting も元々チェックされてる Hosted by Contentful (srcdoc)でいいです。
もしホスティングを変更したければ、指定してください。

Code(required)に実際にどんな挙動をするかを記述します。
Github からインストールした場合は、元々記述がありますので、必要に応じて、値を修正します。

フィールド側での設定

元々の入力画面は以下のようでした。

実際に Youtube ID を設定した画面は以下です。Youtube の動画 URL を貼り付けると、動画の id のみが抽出されてます。

Youtube の動画の URL を上げるだけで、id を抽出してくれるので、「id って何入れればいいの？」みたいなやりとりも減りそうですね。

JSON Form Editor の設定

先ほどは YoutubeId を例に紹介にしました。
JSON Form Editor の場合を紹介します。

手順はほとんど同じですが、
入力する GitHub の URL が以下になります。
https://github.com/contentful/extensions/blob/master/samples/json-form-editor/extension.json

FieldTypes は Object に適用したいので、Object にチェックします。

Code(required)を編集

window.CONTENTFUL_FORM_EDITOR_SCHEMAのところを以下のように修正します。

window.CONTENTFUL_FORM_EDITOR_SCHEMA = {
  title: "Person",
  oneOf: [
    {
      $ref: "#/definitions/basicperson",
      title: "Basic Person",
    },
  ],
  definitions: {
    basicperson: {
      title: "Person",
      type: "object",
      id: "person",
      properties: {
        name: {
          type: "string",
          description: "First and Last name",
          minLength: 4,
          propertyOrder: 10,
        },
        age: {
          type: "integer",
          default: 21,
          minimum: 18,
          maximum: 99,
          propertyOrder: 20,
        },
      },
    },
  },
};