- ガイド
- コンセプト
モデル
モデルとは
モデルとは、コンテンツ管理の骨組みとなるものです。
モデルは、1つ以上のフィールドによって構成されており、それらの組み合わせによってコンテンツのデータ構造や入稿画面のUIが決定されます。
モデルにフィールドを追加する際には、フィールドタイプ、フィールドID、フィールド名を指定する必要があります。ユーザーの目的に応じて、これらのフィールドを適宜追加していくことによってコンテンツのデータ構造を定義する（モデリングする）ことができます。
フィールドタイプ
フィールドタイプとは、モデルに追加するフィールドの種類のことを指します。
フィールドの種類によって、そのフィールドのデータ型や入力画面のUIが決まるため、用途に合わせて適切なフィールドタイプを選択する必要があります。
Newtには、15種類のフィールドがデフォルトで用意されています。
1. テキスト
入力インターフェース
サンプルデータ
{
"title": "Fictitiousをクイックにスタートする方法"
}
オプション設定
| 概要 | |
|---|---|
| このフィールドをタイトルに使う | Newt管理画面上でコンテンツのタイトルとして扱うフィールドに対して付与します。入力がない場合はコンテンツを保存できなくなります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大文字数 | 設定した文字数を超えるの文字列を入力した際に、コンテンツの公開（保存して公開）ができなくなります |
| 最小文字数 | 設定した文字数未満の文字列を入力した際に、コンテンツの公開（保存して公開）ができなくなります |
| 一意の文字列（ユニーク） | テキスト入力時に他コンテンツの同フィールドに重複する値が設定されている場合に、コンテンツの公開（保存して公開）ができなくなります |
2. リッチテキスト
入力インターフェース
サンプルデータ
{
"body": "<p>Hello, World</p>"
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
3. マークダウン
入力インターフェース
サンプルデータ
{
"body": "<h1>Hello, World.</h1>\n<p>test test</p>"
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
4. 数字
入力インターフェース
サンプルデータ
{
"sortOrder": 2
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大値 | 設定した数値を超えるの数値を入力した際に、コンテンツの公開（保存して公開）ができなくなります |
| 最小値 | 設定した数値未満の数値を入力した際に、コンテンツの公開（保存して公開）ができなくなります |
5. 日付
入力インターフェース
サンプルデータ
{
"date": "2022-02-22T10:35:02.041Z"
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
6. 画像
入力インターフェース
メディアライブラリから選択することも可能です
サンプルデータ
{
"image": {
"_id": "610b77253adec80018727d57",
"src": "https://storage.googleapis.com/example.jpeg",
"fileType": "image/jpeg",
"fileName": "example.jpeg",
"fileSize": 2403201,
"width": 600,
"height": 400
}
}
オプション設定
| 概要 | |
|---|---|
| 複数値 | 有効化時に、複数の画像を入力できるようになります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大アイテム数（複数値が有効時） | 設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります |
| 最小アイテム数（複数値が有効時） | 設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります |
7. ファイル
入力インターフェース
メディアライブラリから選択することも可能です
サンプルデータ
{
"file": {
"_id": "610b77253adec80018727d57",
"src": "https://storage.googleapis.com/example.csv",
"fileType": "text/csv",
"fileName": "sample.csv",
"fileSize": 3450634,
"width": null,
"height": null
}
}
許可するファイルタイプ
画像、書類、音声、動画、その他 の5つの選択肢からアップロードを許可するファイルタイプを指定することができます。何も指定しなかった場合、全てのファイルタイプがアップロード可能となります。
オプション設定
| 概要 | |
|---|---|
| 複数値 | 有効化時に、複数の画像を入力できるようになります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大アイテム数（複数値が有効時） | 設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります |
| 最小アイテム数（複数値が有効時） | 設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります |
8. 選択
入力インターフェース
子要素タイプ
子要素として、テキストまたは数字を選択できます。
サンプルデータ
{
"select": "optionA"
}
オプション設定
| 概要 | |
|---|---|
| 複数値 | 有効化時に、複数の選択肢を選択できるようになります |
| 新規作成 | 有効化時に、入力画面から選択肢を作成できるようになります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大アイテム数（複数値が有効時） | 設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります |
| 最小アイテム数（複数値が有効時） | 設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります |
9. チェックボックス
入力インターフェース
サンプルデータ
{
"check": true
}
10. カラー
入力インターフェース
カラーパレット
入力時に候補として表示されるカラーを追加します。
サンプルデータ
{
"color": "#ff0000"
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
11. 絵文字
入力インターフェース
サンプルデータ
{
"type": "emoji",
"value": "😀"
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
12. 地図
入力インターフェース
サンプルデータ
{
"map": {
"lat": 43.9114751,
"lng": 144.6709359
}
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| デフォルトビュー | 設定した中心座標とズームレベルが、入力時のデフォルト表示となります |
13. 参照
入力インターフェース
参照先モデル
入力時に選択される参照先のモデルを指定します。
サンプルデータ
{
"reference": {
"_id": "620a204682f1f8001828b16a",
"_sys": {
"raw": {
"createdAt": "2022-02-14T09:26:30.291Z",
"updatedAt": "2022-03-07T10:16:41.633Z",
"firstPublishedAt": "2022-02-14T09:26:30.291Z",
"publishedAt": "2022-03-07T10:16:41.633Z"
},
"createdAt": "2022-02-14T09:26:30.291Z",
"updatedAt": "2022-02-14T09:27:07.785Z"
},
"name": "Donna Thomason"
}
}
オプション設定
| 概要 | |
|---|---|
| 複数値 | 有効化時に、複数の参照を入力できるようになります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大アイテム数（複数値が有効時） | 設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります |
| 最小アイテム数（複数値が有効時） | 設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります |
14. 埋め込み
※ 埋め込みフィールドはProfessionalプランからご利用いただけます
※ 埋め込みカードの生成には Iframely を利用しています
入力インターフェース
サンプルデータ
{
"youtube": {
"html": "<div><div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><iframe src=\"//cdn.iframe.ly/api/iframe?_start=&_end=&_cc_load_policy=false&click_to_play=1&playerjs=1&url=https%3A%2F%2Fyoutu.be%2FfCcT6-PqL1Q&key=878c5bef402f0b2911bf6d4ce6261abd\" style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;\" allowfullscreen scrolling=\"no\" allow=\"autoplay *; accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;\"></iframe></div></div>",
"url": "https://youtu.be/fCcT6-PqL1Q"
}
}
オプション設定
| 概要 | |
|---|---|
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
15. マルチタイプ
入力インターフェース
使用できるフィールドタイプ
入力時に選択可能なフィールドタイプを指定します。
表示タイプ
入力インターフェースの表示形式を指定します。
アコーディオンを選択した場合、各タイプのデータを折りたたんで表示できるようになります。フラットを選択した場合、各タイプのデータが折りたたまれずに表示されます。
サンプルデータ
{
"multiType": {
_id: "620a204682f1f8001828b16a",
type: "TEXT",
data: "aaa"
}
}
オプション設定
| 概要 | |
|---|---|
| 複数値 | 有効化時に、複数のタイプを入力できるようになります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大アイテム数（複数値が有効時） | 設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります |
| 最小アイテム数（複数値が有効時） | 設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります |
カスタムフィールドタイプ
Newtでは、15種類のフィールドタイプの他に、ユーザー自身がフィールドタイプを作成することもできます。カスタムフィールドタイプは、1つ以上のフィールドによって構成されるオブジェクト型のフィールドタイプです。いくつかのデフォルトフィールドタイプと他のカスタムフィールドタイプを組み合わせることで、カスタムフィールドタイプを作ることができます。
オプション設定
| 概要 | |
|---|---|
| 複数値 | 有効化時に、複数のタイプを入力できるようになります |
| 必須フィールド | 有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります |
| 最大アイテム数（複数値が有効時） | 設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります |
| 最小アイテム数（複数値が有効時） | 設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります |
制約
モデルの設定には以下の制約があります。
- マルチタイプに設定できるフィールドタイプは以下のフィールドタイプに限定されます
- テキスト、リッチテキスト、マークダウン、数字、日付、画像、チェックボックス、絵文字、カスタムフィールドタイプ
- カスタムフィールドタイプでは、マルチタイプを使用できません
- カスタムフィールドタイプでは、参照を含むカスタムフィールドタイプを使用できません
- カスタムフィールドタイプでは、カスタムフィールドを含むカスタムフィールドを使用できません
タイトルフィールド
モデルには必ず1つのタイトルフィールドを設定する必要があります。タイトルフィールドは、管理画面上でコンテンツを表示する際に、コンテンツのタイトルとして強調表示を行うために必要となります。
タイトルフィールドの設定方法
- テキストフィールドを選択し、オプションの「このフィールドをタイトルに使う」にチェックをつけます
- モデルを保存します
JSONプレビュー
定義したモデルからコンテンツを作成した際に、コンテンツがどのようなJSONデータとなるか確認できます。コンテンツを入稿する前に、各フィールドが実際にどのようなJSONデータとなるか確認することで、手戻りの少ないモデル定義が可能です。
※ 表示されるデータはダミーデータとなります。
プレビュー設定
コンテンツエディタから確認するプレビューについて設定できます。
一般的なヘッドレスCMSは、ウェブサイトのフロントエンドを持たないため、プレビューを表示するための実装を自前で行う必要がありますが、NewtではプレーンプレビューとプレビューURLという2つの選択肢を用意することでこの問題に対応しています。
プレーンプレビュー
プレーンプレビューとは、Newtで作成したコンテンツをNewtの管理画面上でプレビューすることのできる機能です。スタイルなどが極力当たっていないプレーンな状態でプレビューを行うことから、プレーンプレビューと呼んでいます。
プレーンプレビューを利用することによって、ユーザーが自前でプレビューを実装しなくても、コンテンツのプレビューを簡易的に確認することが可能になります。
プレビューURL
ユーザーが自前で実装したプレビュー用のURLを設定します。URLにコンテンツごとに異なる文字列が含まれる場合は、https://preview-page.com/article/{slug} といった風にテンプレート構文を利用することでコンテンツ毎に動的なプレビューURLを生成することができます。
テンプレート構文の仕様
モデルで定義しているフィールドと _id は、テンプレート構文で展開できます。
例えば、モデルのフィールドIDが slug で、あるコンテンツのslugに introduction が入力されていたとします。
この時、プレビューURLに https://preview-page.com/article/{slug} が指定されていると、生成されるURLは https://preview-page.com/article/introduction となります。
プレビューなし
プレビューを必要としないコンテンツには、プレビューなしを設定することができます。プレビューなしを設定した場合、コンテンツ編集ページのヘッダーにプレビューボタンが表示されなくなり、コンテンツ編集ページをよりシンプルにすることができます。
モデルのラベル設定
モデルを作成する際に、モデルにラベルを設定することができます。モデルのラベルとは、そのモデルによって作成されたコンテンツを管理画面上でどのように呼ぶかを設定するためのものです。
コンテンツを「投稿」と呼ぶのが適切な場合もあれば、「メンバー」と呼んだり「タグ」と呼んだ方が適切な場合もあります。こうしたコンテンツの呼称をコンテンツに合わせて設定することで、より直感的なコンテンツの管理を可能にしています。
