Newt

無料ではじめる
  • ガイド
  • コンセプト

モデル

Table of contents

モデルとは

モデルとは、コンテンツ管理の骨組みとなるものです。

モデルは、1つ以上のフィールドによって構成されており、それらの組み合わせによってコンテンツのデータ構造や入稿画面のUIが決定されます。

モデルにフィールドを追加する際には、フィールドタイプ、フィールドID、フィールド名を指定する必要があります。ユーザーの目的に応じて、これらのフィールドを適宜追加していくことによってコンテンツのデータ構造を定義する（モデリングする）ことができます。

フィールドタイプ

フィールドタイプとは、モデルに追加するフィールドの種類のことを指します。

フィールドの種類によって、そのフィールドのデータ型や入力画面のUIが決まるため、用途に合わせて適切なフィールドタイプを選択する必要があります。

Newtには、15種類のフィールドがデフォルトで用意されています。

1. テキスト

入力インターフェース

テキストフィールド

サンプルデータ

{
  "title": "Fictitiousをクイックにスタートする方法"
}

入力タイプ

入力タイプ
テキスト（1行）入力インターフェースが、1行のテキストとなります
テキストエリア（複数行）入力インターフェースが、複数行のテキストエリアとなります

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
このフィールドをタイトルに使うNewt管理画面上でコンテンツのタイトルとして扱うフィールドに対して付与します。入力がない場合はコンテンツを保存できなくなります
最大文字数設定した文字数を超えるの文字列を入力した際に、コンテンツの公開（保存して公開）ができなくなります
最小文字数設定した文字数未満の文字列を入力した際に、コンテンツの公開（保存して公開）ができなくなります
一意の文字列（ユニーク）テキスト入力時に他コンテンツの同フィールドに重複する値が設定されている場合に、コンテンツの公開（保存して公開）ができなくなります

2. リッチテキスト

入力インターフェース

リッチテキストフィールド

サンプルデータ

{
  "body": "<p>Hello, World</p>"
}

使用できるフォーマット

リッチテキストフィールドに表示される「太字」「斜体」などのフォーマットのうち、有効にするものを制御できます。

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります

3. マークダウン

入力インターフェース

マークダウンフィールド

サンプルデータ

{
  "body": "<h1>Hello, World.</h1>\n<p>test test</p>"
}

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります

4. 数字

入力インターフェース

数字フィールド

サンプルデータ

{
  "sortOrder": 2
}

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
このフィールドをタイトルに使うNewt管理画面上でコンテンツのタイトルとして扱うフィールドに対して付与します。入力がない場合はコンテンツを保存できなくなります
最大値設定した数値を超えるの数値を入力した際に、コンテンツの公開（保存して公開）ができなくなります
最小値設定した数値未満の数値を入力した際に、コンテンツの公開（保存して公開）ができなくなります

5. 日付

入力インターフェース

日付フィールド

サンプルデータ

{
  "date": "2022-02-22T10:35:02.041Z"
}

入力タイプ

入力タイプ
日付と時刻入力インターフェースに、日付と時刻が表示されます。
保存されるデータはISO8601の形式で、UTCの日時となります。
「2024年1月9日17:00」と入稿した場合は、
「2024-01-09T08:00:00.000Z」となります。
日付のみ入力インターフェースに、日付のみが表示されます。
保存されるデータはISO8601の形式で、UTCの日時となります。
「2024年1月9日」と入稿した場合は、
「2024-01-08T15:00:00.000Z」となります。
時刻のみ入力インターフェースに、時刻のみが表示されます。
保存されるデータは時刻のみとなります。
「17:00」と入稿した場合は、「17:00」となります。

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
このフィールドをタイトルに使うNewt管理画面上でコンテンツのタイトルとして扱うフィールドに対して付与します。入力がない場合はコンテンツを保存できなくなります

6. 画像

入力インターフェース

画像フィールド

メディアライブラリから選択することも可能です
image_field2.png

サンプルデータ

{
  "image": {
    "_id": "610b77253adec80018727d57",
    "src": "https://xxxx.assets.newt.so/v1/5e5f345c-4136-41dd-9be8-4dba160657d6/example.jpeg",
    "fileName": "example.jpeg",
    "fileType": "image/jpeg",
    "fileSize": 2403201,
    "width": 600,
    "height": 400,
    "title": "example",
    "altText": "example image",
    "description": "",
    "metadata": {}
  }
}

オプション設定

概要
複数値有効化時に、複数の画像を入力できるようになります
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
最大アイテム数（複数値が有効時）設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります
最小アイテム数（複数値が有効時）設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります

7. ファイル

入力インターフェース

スクリーンショット2022-06-2311.15.26.png

メディアライブラリから選択することも可能です
スクリーンショット2022-06-2311.14.35.png

サンプルデータ

{
  "file": {
    "_id": "610b77253adec80018727d57",
    "src": "https://xxxx.assets.newt.so/v1/3e5f145c-4136-41dd-9be8-4dba160657d6/example.csv",
    "fileName": "sample.csv",
    "fileType": "text/csv",
    "fileSize": 3450634,
    "width": null,
    "height": null,
    "title": "sample",
    "altText": "sample csv",
    "description": "",
    "metadata": {}
  }
}

許可するファイルタイプ

画像、書類、音声、動画、その他 の5つの選択肢からアップロードを許可するファイルタイプを指定することができます。何も指定しなかった場合、全てのファイルタイプがアップロード可能となります。

オプション設定

概要
複数値有効化時に、複数の画像を入力できるようになります
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
最大アイテム数（複数値が有効時）設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります
最小アイテム数（複数値が有効時）設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります

8. 選択

入力インターフェース

選択フィールド

子要素タイプ

子要素として、テキストまたは数字を選択できます。

サンプルデータ

{
  "select": "optionA"
}

オプション設定

概要
複数値有効化時に、複数の選択肢を選択できるようになります
新規作成有効化時に、入力画面から選択肢を作成できるようになります
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
最大アイテム数（複数値が有効時）設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります
最小アイテム数（複数値が有効時）設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります

9. チェックボックス

入力インターフェース

チェックボックスフィールド

サンプルデータ

{
  "check": true
}

入力タイプ

入力タイプ
チェックボックス入力インターフェースが、チェックボックスとなります
ラジオボタン入力インターフェースが、ラジオボタンとなります

有効時のラベル・無効時のラベル

入力タイプが「チェックボックス」の場合、チェックボックスには「有効時のラベル」が表示されます。「有効時のラベル」が設定されていない場合、フィールド名が表示されます。

入力タイプが「ラジオボタン」、ラジオボタンには「有効時のラベル」「無効時のラベル」が表示されます。「有効時のラベル」はデフォルトで「TRUE」、「無効時のラベル」はデフォルトで「FALSE」となります。

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります

10. カラー

入力インターフェース

カラーフィールド

サンプルデータ

{
  "color": "#ff0000"
}

カラーパレット

入力時に候補として表示されるカラーを追加します。

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります

11. 絵文字

入力インターフェース

絵文字フィールド

サンプルデータ

{
  "type": "emoji",
  "value": "😀"
}

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります

12. 地図

入力インターフェース

map.jpg

サンプルデータ

{
  "map": {
    "lat": 43.9114751,
    "lng": 144.6709359
  }
}

オプション設定

概要
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
デフォルトビュー設定した中心座標とズームレベルが、入力時のデフォルト表示となります

13. 参照

入力インターフェース

参照フィールド

サンプルデータ

{
  "reference": {
    "_id": "620a204682f1f8001828b16a",
    "_sys": {
      "createdAt": "2022-02-14T09:26:30.291Z",
      "updatedAt": "2022-02-14T09:27:07.785Z",
      "customOrder": 15,
      "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"
      }
    },
    "name": "Donna Thomason"
  }
}

参照先モデル

入力時に選択される参照先のモデルを指定します。

オプション設定

概要
複数値有効化時に、複数の参照を入力できるようになります
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
最大アイテム数（複数値が有効時）設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります
最小アイテム数（複数値が有効時）設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります

14. 埋め込み

※ 埋め込みカードの生成には Iframely を利用しています

入力インターフェース

スクリーンショット2023-02-0310.48.12.png

サンプルデータ

{
  "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つ以上のフィールドによって構成されるオブジェクト型のフィールドタイプです。いくつかのデフォルトフィールドタイプと他のカスタムフィールドタイプを組み合わせることで、カスタムフィールドタイプを作ることができます。

表示タイプ

入力インターフェースの表示形式を指定します。
アコーディオンを選択した場合、各タイプのデータを折りたたんで表示できるようになります。フラットを選択した場合、各タイプのデータが折りたたまれずに表示されます。

オプション設定

概要
複数値有効化時に、複数のタイプを入力できるようになります
必須フィールド有効化時に、入力がない場合はコンテンツの公開（保存して公開）ができなくなります
最大アイテム数（複数値が有効時）設定したアイテム数を超えた場合に、コンテンツの公開（保存して公開）ができなくなります
最小アイテム数（複数値が有効時）設定したアイテム数未満の場合に、コンテンツの公開（保存して公開）ができなくなります

デフォルト値

値を設定していない場合、各フィールドには以下の値が設定されます。
複数値の設定ができないフィールドには「なし」と記載しています。

フィールドデフォルトの値（単数）デフォルトの値（複数）
テキスト""なし
リッチテキスト""なし
マークダウン""なし
数字0なし
日付""なし
画像null[]
ファイルnull[]
選択（テキスト）""[]
選択（数字）0[]
チェックボックスfalseなし
カラー""なし
絵文字{ "type": "emoji", "value": null }なし
地図nullなし
参照null[]
埋め込みnullなし
カスタムフィールド任意のオブジェクト[]
マルチタイプ{ "_id": "...", "type": "", "data": null }[]

任意のデフォルト値を設定する

モデルに追加した全てのフィールドに対して、任意のデフォルト値を設定できます。設定したデフォルト値は、コンテンツ新規作成時の各フィールドの初期値として利用されます。

デフォルト値は、 App設定 > 対象モデル > フィールド設定 より設定できます。

※任意のデフォルト値が適用されるのは、管理画面からコンテンツを新規作成する場合のみです。作成済みのコンテンツや、Appインポート等によって作成されたコンテンツに対しては、デフォルト値は適用されません。

制約

モデルの設定には以下の制約があります。

  • マルチタイプに設定できるフィールドタイプは以下のフィールドタイプに限定されます
    • テキスト、リッチテキスト、マークダウン、数字、日付、画像、チェックボックス、絵文字、カスタムフィールドタイプ
  • カスタムフィールドタイプでは、マルチタイプを使用できません
  • カスタムフィールドタイプでは、参照を含むカスタムフィールドタイプを使用できません
  • カスタムフィールドタイプでは、カスタムフィールドを含むカスタムフィールドを使用できません

タイトルフィールド

モデルには必ず1つのタイトルフィールドを設定する必要があります。タイトルフィールドは、管理画面上でコンテンツを表示する際に、コンテンツのタイトルとして強調表示を行うために必要となります。

タイトルフィールドの設定方法

  1. テキストフィールドを選択し、オプションの「このフィールドをタイトルに使う」にチェックをつけます
  2. モデルを保存します

タイトルフィールドの設定方法

JSONプレビュー

定義したモデルからコンテンツを作成した際に、コンテンツがどのようなJSONデータとなるか確認できます。コンテンツを入稿する前に、各フィールドが実際にどのようなJSONデータとなるか確認することで、手戻りの少ないモデル定義が可能です。
※ 表示されるデータはダミーデータとなります。

JSONプレビュー

プレビュー設定

コンテンツエディタから確認するプレビューについて設定できます。
model-preview.jpg

一般的なヘッドレスCMSは、ウェブサイトのフロントエンドを持たないため、プレビューを表示するための実装を自前で行う必要がありますが、Newtでは「プレーンプレビュー」と「サイト上でプレビュー」という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 となります。

モデルのラベル設定

モデルを作成する際に、モデルにラベルを設定することができます。モデルのラベルとは、そのモデルによって作成されたコンテンツを管理画面上でどのように呼ぶかを設定するためのものです。

コンテンツを「投稿」と呼ぶのが適切な場合もあれば、「メンバー」と呼んだり「タグ」と呼んだ方が適切な場合もあります。こうしたコンテンツの呼称をコンテンツに合わせて設定することで、より直感的なコンテンツの管理を可能にしています。

モデルのラベル設定

NewtMade in Newt