Strapiのコンテンツタイプ登録時に用意されているフィールドを一通り試してみます。
フィールド内容
以下のフィールドが用意されています。
- Text
- Rich Text
- Password
- Number
- Enumeration
- Date
- Media
- Boolean
- JSON
- Relation
- UID
- Component
- Dynamic Zone
Text
タイトルや説明などのテキストが入力できるフィールドです。
フィールド名と種類を選択します。
右上の高度な設定を選択すると、デフォルト値や必須かどうか、最大・最小の文字数の設定などが行えます。
TypeでShort textを選ぶと、コンテンツ登録画面では以下のような1行テキストの入力になります。
Long textを選んだ場合は複数行テキスト(textarea)になります。
メールアドレスの入力フィールドです。
フィールド名を設定します。
高度な設定はTextとほぼ同じです。
コンテンツ登録画面では以下のような表示になります。
入力値がメールアドレスの形式でない場合、その場でエラーが表示されます。
Rich Text
書式設定のできる入力フィールドです。
フィールド名を設定します。
高度な設定はEmailと同じです。
コンテンツ登録画面では以下のような表示になります。
タイトル(h1〜h6)、太字(strong)、斜体(em)、下線(u)、打ち消し線(s)、箇条書きリスト(ul)、番号リスト(ol)、コード(code)、画像(img)、引用(blockquote)が使用できます。
Password
パスワードの入力フィールドです。
フィールド名を設定します。
高度な設定はRich Textと同じです。
コンテンツ登録画面では以下のような表示になります。
デフォルトでは入力値は隠れた状態、右のアイコンクリックで入力値を表示できます。
Number
数値の入力フィールドです。
フィールド名と数値形式を指定します。
数値形式は整数(integer)、大きな整数(big integer)、小数(decimal)、浮動小数点(float)から選択します。
高度な設定は今までのフィールドと同じです。
数値形式でinteger、decimal、floatを選択した場合、コンテンツ登録画面では以下のような表示になります。
big integerの場合は以下のような表示になります。
Enumeration
複数項目から選択するフィールドです。
フィールド名と値を入力します。
値は1行が1項目になります。
高度な設定は以下のようになります。
コンテンツ登録画面ではselectで表示されます。
Date
日付や時刻を入力するフィールドです。
フィールド名と種類を選択します。
種類は日付(date)、日付と時刻(datetime)、時刻(time)から選択します。
高度な設定は以下の内容を設定できます。
種類で日付を選択した場合、コンテンツ登録画面では以下のような表示になります。
入力時はカレンダーが表示されます。
時刻を選択した場合は以下のような表示になります。
入力時はプルダウンから選択する形になります。
日付と時刻を選択した場合、2つが並んで表示されます。
Media
画像や動画、ファイルなどを添付するフィールドです。
フィールド名と単一・複数の選択をします。
高度な設定は添付するファイルの種類を設定できます。
Images、Videos、Filesからチェックして選択します。
コンテンツ登録画面では以下のような表示になります。
Boolean
ONかOFFを選択するフィールドです。
フィールド名を設定します。
高度な設定は以下の内容を設定できます。
コンテンツ登録画面では以下のようにOFFとONを選択する形になります。
初期値は未選択の状態にできますが、どちらかを選択した後は未選択の状態には戻せないようです。
JSON
json形式のデータを入力するフィールドです。
フィールド名を設定します。
高度な設定は以下の内容を設定できます。
コンテンツ登録画面では以下のような入力エリアになります。
Relation
別のコンテンツタイプを参照するフィールドです。
フィールド名と参照先のコンテンツタイプ、コンテンツタイプとの関係(中央のアイコン)を選択します。
参照するコンテンツの例として、genreというコンテンツタイプを別途作成して試してみます。
まず右側のコンテンツタイプを先ほど作成したgenreにして、中央のアイコンの一番左を選択します。
この場合、今作成しているコンテンツタイプからgenreのコンテンツを参照できるようになります。
コンテンツ登録画面では以下のような表示になります。
クリックすると、genreのコンテンツが選択できます。
フィールドの登録画面に戻って、左から2番目にしてみます。
この場合、双方からコンテンツを参照できるようになります。
左から3番目の場合、双方からコンテンツを参照でき、かつ左のコンテンツはgenreを複数選択できるようになります。
右から3番目の場合、双方からコンテンツを参照でき、かつgenreは左のコンテンツを複数選択できるようになります。
右から2番目の場合、双方からコンテンツを複数参照できるようになります。
一番右の場合、左のコンテンツからgenreを複数参照できるようになります。
高度な設定は以下の内容を設定できます。
UID
ユニークIDを設定するフィールドです。
フィールド名と、ユニークID設定時に使用するフィールドを選択します。
高度な設定は以下の内容を設定できます。
Attached fieldをNoneにした場合、コンテンツタイプ名をベースにユニークIDが設定されます。
コンテンツ登録画面では以下のような表示になり、入力フィールド右のアイコンをクリックすると自動で生成されます。
初回作成時はコンテンツタイプ名と同じ「all」で生成されました。
コンテンツを保存後、2つ目のコンテンツ作成時には「all-1」と生成されました。
UIDを初回で使用した「all」に変更した場合は利用不可と表示され、UIDの候補がサジェストされます。
Attached fieldをTextで設定してみます。
この場合、Textに入力した内容がそのままUIDに反映されます。
既に使用されているUIDの場合は、自動で連番がふられます。
Component
繰り返しや再利用できるフィールドのグループを作成するフィールドです。
まず新規でコンポーネントを作成するか、既存のコンポーネントを使用するかを選択します。
新規の場合はコンポーネント名とコンポーネントのカテゴリ名、アイコンを選択します。
Nameにフィールド名を入力して、Typeでコンポーネントを繰り返し使用するか単一で使用するかを選択します。
これでコンポーネントのフィールドが作成できました。
コンポーネント内で使用するフィールドを追加します。
Add another field to this component をクリックします。
コンポーネント内で使用するフィールドはDynamic Zone以外からの選択になります。
TextとRich Textを追加しました。
コンテンツ登録画面では以下のような表示になります。
クリックすると、コンポーネント内に追加したTextとRich Textのフィールドが入力できます。
コンポーネントを繰り返し使用するようにしていた場合、以下のような表示になります。
ADD NEW ENTRY をクリックすると、複数の入力エリアを追加できます。
右上のアイコンから並び替えも可能です。
ちなみにコンポーネント自体は、左ナビの Content-Types Builder > Component > Create new component からも作成することができます。
Dynamic Zone
コンテンツタイプに複数のコンポーネントを動的に追加できるフィールドです。
先ほどのComponentが１つのコンポーネントの設置や繰り返しができたのに対して、Dynamic Zoneは複数のコンポーネントを自由に配置することができます。
コンポーネントの例として、先ほど追加したコンポーネントのALLカテゴリにコンポーネントを追加してみます。
Create new componentをクリックします。
コンポーネントのカテゴリにallを選択して、コンポーネント名とアイコンを設定します。
フィールドを追加して、以下のようにコンポーネントを作成しました。
これで複数のコンポーネントの準備が完了したので、Dynamic Zoneを試してみます。
フィールド名を設定します。
Dynamic Zoneで使用するコンポーネントを新規で作成するか、既存のコンポーネントを使用するかを選択します。
今回はコンポーネントを追加済みなので、右下のSelect the componentsから使用するコンポーネントを選択します。
コンポーネントの追加ができました。
コンテンツ登録画面では以下のように表示されます。
アイコンをクリックすると、追加するコンポーネントの選択になります。
選択したコンポーネントの入力エリアが追加されます。
同じコンポーネントの繰り返しの追加や、別のコンポーネントの追加も可能です。
ここまで試したフィールドでコンテンツを登録してfindで取得してみると、以下のような内容になりました。
[
{
"id":3,
"test":"テキスト",
"email":"email@example.com",
"rich_text":"リッチテキストのサンプル",
"number":123,
"enumeration":"a",
"date":"XXXXXXXX",
"boolean":true,
"json":{
"hoge":"fuga"
},
"genre":{
"id":1,
"name":"novel",
"published_at":"XXXXXXXX",
"created_at":"XXXXXXXX",
"updated_at":"XXXXXXXX"
},
"uid":"all",
"published_at":"XXXXXXXX",
"created_at":"XXXXXXXX",
"updated_at":"XXXXXXXX",
"component":{
"id":1,
"component_text":"コンポーネントのテキスト",
"component_rich_text":"コンポーネントのリッチテキスト"
},
"dynamic_zone":[
{
"__component":"all.text-and-rich-text",
"id":2,
"component_text":"dynamic zoneのコンポーネントテキスト",
"component_rich_text":"dynamic zoneのコンポーネントのリッチテキスト"
},
{
"__component":"all.text-and-date",
"id":1,
"component_text":"dynamic zoneのテキストと日付",
"component_date":"2021-06-13"
}
],
"media":{
"id":1,
"name":"cat.jpg",
"alternativeText":"",
"caption":"",
"width":481,
"height":360,
"formats":{
"thumbnail":{
"name":"thumbnail_cat.jpg",
"hash":"thumbnail_cat_10afdfa2a0",
"ext":".jpg",
"mime":"image/jpeg",
"width":208,
"height":156,
"size":8.12,
"path":null,
"url":"/uploads/thumbnail_cat_10afdfa2a0.jpg"
}
},
"hash":"cat_10afdfa2a0",
"ext":".jpg",
"mime":"image/jpeg",
"size":35.73,
"url":"/uploads/cat_10afdfa2a0.jpg",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"created_at":"XXXXXXXX",
"updated_at":"XXXXXXXX"
}
}
]
コメントが承認されるまで時間がかかります。