サイト制作に関するメモ書き

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

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"
    }
]

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP