microCMSで使用できるフィールドを試してみる

microCMSのフリープランで使用できるフィールドを一通り試してみます。

フィールド内容

以下のフィールドが用意されています。

• テキストフィールド
• テキストエリア
• リッチエディタ
• 画像
• ファイル(Starterプラン以降)
• 日時
• 真偽値
• セレクトフィールド
• コンテンツ参照
• 複数コンテンツ参照
• 数字
• インラインフレーム(Businessプラン以降)
• カスタム
• 繰り返し

今回はファイルとインラインフレーム以外を試してみます。

テキストフィールド

1行のテキスト入力ができるフィールドです。

テキストエリア

複数行のテキスト入力ができるフィールドです。
改行は「\n」が入ります。

リッチエディタ

リッチエディタを使った入力ができるフィールドです。

設定できる項目とタグの設定は以下の通りです。

• 段落
  • 見出し1(h1)
  • 見出し2(h2)
  • 見出し3(h3)
  • 見出し4(h4)
  • 見出し5(h5)
  • 段落(p)
• 標準
  • 小(span font-size: 0.75em)
  • 標準(変更なし)
  • 中(span font-size: 1.5em)
  • 大(span font-size: 2.5em)
• 太字(strong)
• 斜体(em)
• 下線(u)
• 打ち消し線(s)
• インラインコード(code)
• 背景色(span background-color)
• 文字色(span color)
• 文字揃え
  • 左揃え(変更なし)
  • 中央揃え(p text-align:center)
  • 右揃え(p text-align:right)
  • 均等揃え(p text-align:justify)
• 引用(blockquote)
• コードブロック(pre > code)
• 順序付きリスト(ol > li)
• 順序なしリスト(ul > li)
• リンク(a)
• 画像(img)
• 外部サービス埋め込み(下記サービスに対応)
  • YouTube
  • Vimeo
  • Twitter
  • Instagram
  • Facebook
  • Speaker Deck
  • SlideShare

画像

画像をアップロードできるフィールドです。

エリアをクリックすると、アップロードのモーダルが開きます。

APIではアップロード後の画像URLを返します。

日時

日時を入力できるフィールドです。

入力エリアにフォーカスを当てると、カレンダーが表示されます。

真偽値

いいえかはいを選択できるフィールドです。
スイッチのUIで表示されます。

APIではtrueかfalseを返します。

セレクトフィールド

設定した項目の中から選択できるフィールドです。

設定によっては複数選択も可能なので、APIでは配列の形式で返します。

コンテンツ参照

別のコンテンツで登録した内容と紐付けることができるフィールドです。

「選択してください」をクリックすると、モーダルで別のコンテンツで登録した内容一覧が表示されます。

選択すると、そのコンテンツの情報を参照するようになりました。

APIでは紐づけたコンテンツの情報をオブジェクト形式で返します。

{
    "id": "XXXXX",
    "createdAt": "XXXXX",
    "updatedAt": "XXXXX",
    "publishedAt": "XXXXX",
    "name": "天音かなた",
    "birthday": 4.22,
    "belong": [
        "ホロライブ"
    ]
}

複数コンテンツ参照

別のコンテンツで登録した内容を複数紐付けることができるフィールドです。

基本的には先ほどのコンテンツ参照と同じですが、こちらは名前の通り複数選択することができます。

APIでは紐づけたコンテンツの情報を配列形式で複数返します。

[
    {
        "id": "XXXXX",
        "createdAt": "XXXXX",
        "updatedAt": "XXXXX",
        "publishedAt": "XXXXX",
        "name": "リゼ・ヘルエスタ",
        "birthday": 5.25,
        "belong": [
            "にじさんじ"
        ]
    },
    {
        "id": "XXXXX",
        "createdAt": "XXXXX",
        "updatedAt": "XXXXX",
        "publishedAt": "XXXXX",
        "name": "アンジュ・カトリーナ",
        "birthday": 9.3,
        "belong": [
            "にじさんじ"
        ]
    }
]

数字

数字の入力ができるフィールドです。

カスタム

カスタムフィールドは少しイメージしにくいですが、複数の入力フィールドのグルーピングのような機能です。
一部の入力項目をまとめたい場合や、後述の繰り返しなどに使用します。

カスタムフィールドは今までのフィールドとは違い、最初のAPI登録の時点では利用できません。
API登録後に、上部メニューの「カスタムフィールド 」から追加を行います。

カスタムフィールド 名とIDを設定します。

カスタムフィールド の内容を設定します。
設定できる項目などはAPI作成時に設定する項目と同じです。

今回はテキストフィールドとテキストエリアを設定してみます。

最後に入力画面で表示するレイアウトを設定します。

入力画面では以下のようになります。

APIではオブジェクト形式で返します。

{
    "fieldId": "カスタムフィールドID",
    "custom-text": "XXXXX",
    "custom-textarea": "XXXXX"
}

繰り返し

カスタムフィールドの繰り返しができるフィールドです。
こちらもカスタムと同じく、最初のAPI登録の時点では利用できません。
カスタムフィールド登録後に、上部メニューの「API設定 」から「APIスキーマ」を選択して、フィールドの追加をします。

フィールドの種類で「繰り返し」を選択すると、登録しているカスタムフィールドから選択ができます。

今回はカスタムフィールドを1つしか作成していないので1つしか選択できませんが、複数のカスタムフィールドを選択して追加することもできるようです。
ただしフリープランの場合、登録できるカスタムフィールドは2つまでになります。

入力画面では以下のようになります。
フィールドを追加で入力エリアを追加できます。

追加後は上下のプラスアイコンで入力エリアを増やせます。
入力エリアの並び替えも可能です。

APIでは配列形式で返します。

[
    {
        "fieldId": "カスタムフィールドID",
        "custom-text": "XXXXX",
        "custom-textarea": "XXXXX"
    }
]