ガイド
コンセプト

モデル

モデルとは
フィールドタイプ
1. テキスト
2. リッチテキスト
3. マークダウン
4. 数字
5. 日付
6. 画像
7. ファイル
8. 選択
9. チェックボックス
10. カラー
11. 絵文字
12. 地図
13. 参照
14. 埋め込み
15. マルチタイプ
カスタムフィールドタイプ
制約
タイトルフィールド
タイトルフィールドの設定方法
JSONプレビュー
プレビュー設定
プレーンプレビュー
プレビューURL
プレビューなし
モデルのラベル設定

モデルとは

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

モデルは、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://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
}

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. 埋め込み

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

オプション設定

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

制約

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

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

タイトルフィールド

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

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

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

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

JSONプレビュー

定義したモデルからコンテンツを作成した際に、コンテンツがどのような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 となります。

プレビューなし

プレビューを必要としないコンテンツには、プレビューなしを設定することができます。プレビューなしを設定した場合、コンテンツ編集ページのヘッダーにプレビューボタンが表示されなくなり、コンテンツ編集ページをよりシンプルにすることができます。

モデルのラベル設定

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

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

モデルのラベル設定

モデル

Table of contents

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

許可するファイルタイプ

オプション設定

入力インターフェース

子要素タイプ

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

入力インターフェース

カラーパレット

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

参照先モデル

サンプルデータ

オプション設定

入力インターフェース

サンプルデータ

オプション設定

入力インターフェース

使用できるフィールドタイプ

表示タイプ

サンプルデータ

オプション設定

オプション設定

テンプレート構文の仕様