microCMS

テキストフィールド

テキストフィールドは、短いテキストや文字列を入力するためのフィールドです。
記事タイトル、商品名、著者名など、改行を含まない文字列データの管理に適しています。

データの入稿方法

フィールドをクリックして、テキストを入力します。 


補足

フィールドの右下には入力されている文字数が表示されます。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

POST /api/v1/{endpoint}
https://document.microcms.io/content-api/post-content#h6165104509
コンテンツのCSVインポート
https://document.microcms.io/manual/csv-import#h2b3036ae9c

制限事項/注意事項

  • デフォルトでは最大文字数の制限は設けていません。ただし、1コンテンツあたりのデータ容量には上限(約200KB)があるため、上限を超えるデータは登録できません。

設定項目

説明

必須項目

設定をオンにすると入稿時の入力が必須となります。

説明文

入稿画面に表示する説明文です。

重複を許可しない(ユニーク)

設定をオンにすると他のコンテンツで同じ値がある場合に保存できなくなります。

1つのAPIに対して最大で5つのフィールドに設定が可能です。

コンテンツに重複した値がある場合はオンに変更することはできません。

特定のパターンのみ入力を許可

正規表現にマッチした入力のみに制限します。

利用可能な正規表現のパターンには制限があります。詳しくは「入力文字列の制限で利用可能な正規表現のパターンは?」をご参照ください。

文字数制限

フィールドに入力する文字数の最小文字数、最大文字数を制限します。

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

GET APIのフィールドごとのレスポンス形式
https://document.microcms.io/content-api/get-api-field-responses#h1e03ffe5f5

フロントエンドでの利用方法

テキストフィールドは文字列として返されるため、HTMLの要素や属性に直接指定できます。
以下はNext.jsの実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK(https://github.com/microcmsio/microcms-js-sdk)を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      {/* textFieldはフィールドIDです。実際のフィールドIDに置き換えてください */}
      <h1>{data.textField}</h1>
    </main>
  );
}