---
title: コンテンツ定義で利用できる項目設定一覧
category: コンテンツ
weight: 1
---
コンテンツは、デフォルトで下の3項目が表示されます。

- コンテンツID/Slug
- 日付
- タイトル

![Image from Gyazo](https://t.gyazo.com/teams/diverta/896deadc334d9607a60ab9c5334ff38b.png)

項目はコンテンツ定義編集で編集/追加できます。

参考: [コンテンツ定義編集](/ja/docs/management/content-structure-topics-group/)

[編集]や[項目追加]をクリックすると、項目の種類や入力制限などを設定できます。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/ed272a7979f66cfac7a22e9021aab2c3.png)

設定できる内容は項目により異なりますので下記参照ください。

## 項目一覧
<!-- textlint-disable -->
<!-- 理由: リストの前後を含めて助動詞にを数えられてしまうため -->
[コンテンツID/Slug](#コンテンツidslug)  
[日付/並び順](#日付並び順)  
[カテゴリ](#カテゴリ)  
[タイトル](#タイトル)  
[内容](#内容)  
[テキスト](#テキスト)  
[テキスト(オートコンプリート)](#テキストオートコンプリート)  
[テキストエリア](#テキストエリア)  
[WYSIWYG](#wysiwyg)  
[HTML](#html)   
[単一選択](#単一選択)  
[複数選択可](#複数選択可)  
[日付フォーマット](#日付フォーマット)  
[マスタ形式](#マスタ形式)  
[マスタ(チェックボックス)](#マスタチェックボックス)  
[関連情報選択](#関連情報選択)  
[真偽値](#真偽値)  
[画像(Kurocofilesにアップロード)](#画像kurocofilesにアップロード)  
[ファイル(Kurocofilesにアップロード)](#ファイルkurocofilesにアップロード)  
[ファイル(GCSにアップロード)](#ファイルgcsにアップロード)  
[ファイル(S3にアップロード)](#ファイルs3にアップロード)  
[ファイル(ファイルマネージャーから)](#ファイルファイルマネージャーから)  
[動画ファイル(Vimeo)](#動画ファイルvimeo)  
[APIフィールド](#apiフィールド)  
[カウンター](#カウンター)  
[リンク](#リンク)  
[サブ項目(JSON)](#サブ項目json)  
[数値](#数値)  
[表組み(テーブル)](#表組みテーブル)  
[地図](#地図)  
[ブロックエディタ](#ブロックエディタ) 
<!-- textlint-enable -->

:::tip
Kurocoをお申込みいただいたタイミングによっては、各項目のレスポンスが`ext_X`ではなく、`ext_col_XX`となる場合があります。  
うまくいかない場合は Swagger UIでレスポンスをご確認ください。
:::

## デフォルト項目
### コンテンツID/Slug
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d1a7ec425f0c2a6463443e5394965939.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/31181b0831c6716bcd418ba536f729e1.png)

|項目 |説明 |
| :--- | :--- |
|項目名|`コンテンツID/Slug`が表示されます。編集できません。|
|Slug|`topics_id/slug`が表示されます。編集できません。|
|自動発行する|有効にするとSlugが空欄でコンテンツが追加された場合にSlugを自動発行します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0a81004f9f59ae0b658a10ab4837a2f8.png)

|項目 |説明 |
| :--- | :--- |
|必須|有効にすると必須入力になります。|
|入力制限|入力できる文字列を制限することができます。|
|正規表現|入力制限で[正規表現]を選択した場合は正規表現を記入します。|
|文字数制限|最小・最大の文字数を設定します。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/07d32467e80cbeae646f65a7fbde9ca4.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "topics_id": id,
    "slug": "slug",
},
```

### 日付/並び順
#### コンテンツ編集画面の表示
`日付を使う` を選択時
![Image from Gyazo](https://t.gyazo.com/teams/diverta/44d004709c9b9af8e1c2a96fe0e79bc8.png)

`並び順を使う` を選択時
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cd9fadedc4484abdc8153c7f02dd4e1d.png)

#### 項目設定 - 全般
`日付を使う` を選択時
![Image from Gyazo](https://t.gyazo.com/teams/diverta/34f31367a5499fc21cff5f5c000d2081.png)

`並び順を使う` を選択時
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3757bc4fa0c168570ae9fef7757ec222.png)

|項目 |説明 |
| :--- | :--- |
|項目名|`日付`または`並び順`が表示されます。編集できません。|
|Slug|`ymd` または `order_no`が表示されます。編集できません。|
|項目設定|`日付を使う`　または　`並び順を使う`　を選択します。|
|投稿時間も設定する|有効にすると時間の設定ができるようになります。<br/>項目設定で `日付を使う` を選択した場合に設定できます。|
|投稿時間と秒も設定する|有効にすると時間と秒の設定ができるようになります。<br/>項目設定で `日付を使う` を選択した場合に設定できます。|
|注釈|注釈を入力します。|

### カテゴリ
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4b04ba2dc11a71b6417023d2fcb3040b.png)

:::info
カテゴリが複数登録されている時のみ表示されます。
:::

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/59c5dfc43798be3244f927a6cea10ebc.png)

|項目 |説明 |
| :--- | :--- |
|項目名|`カテゴリ`が表示されます。編集できません。|
|Slug|`contents_type`が表示されます。編集できません。|
|注釈|注釈を入力します。|

#### JSONレスポンス
```json
details: {
    "ymd": "2024-01-11",
    "order_no": 10,
},
```

### タイトル
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/81ce1aa6bd868ee909e0f58daf0f0fe9.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4757cef84db3e6c3a6214b7b10f8c2ab.png)

|項目 |説明 |
| :--- | :--- |
|項目名|`タイトル`が表示されます。編集できません。|
|Slug|`subject`が表示されます。編集できません。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/65db45e1bdce1cb58cc8624fa5d495b4.png)

|項目 |説明 |
| :--- | :--- |
|入力制限|入力できる文字列を制限することができます。|
|正規表現|入力制限で[正規表現]を選択した場合は正規表現を記入します。|
|文字数制限|最小・最大の文字数を設定します。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "subject": "title",
},
```

### 内容
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9b389a05d2b7e831c81d9393b46e107c.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a1928485e85a9f5c7ff48ed40f4d4e02.png)

|項目 |説明 |
| :--- | :--- |
|項目名|`内容`が表示されます。編集できません。|
|Slug|`contents`が表示されます。編集できません。|
|本文の入力方法|本文の入力方法を「WYSIWYG」「テキストエリア」「利用しない」から選択します。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/5314c2fcbc8d31369435f23b3b28ece0.png)

|項目 |説明 |
| :--- | :--- |
|wysiwyg_options|追加のCSSやカラーコードを指定するときに使用します。|

#### JSONレスポンス
```json
details: {
    "contents": "text",
},
```

## テキスト関連
### テキスト
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ac00001bf79d353b159ec9df9b3a8045.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3cd090407570ea57e6788ce3655155e4.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|Placeholder|プレースホルダを入力します。|
|デフォルト値|デフォルト値を入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/2af8b2beaec0802bf36151fdeb2a0296.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/70981add6fb3b856deff2e93fa19a9d1.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|文字数制限|最小・最大の文字数を設定します。|
|入力制限|選択した入力種別により、入力できる文字列を制限することができます。|
|正規表現|入力制限で[正規表現]を選択した場合は正規表現を記入します。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": "テキスト",
},
```

### テキスト(オートコンプリート)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/6c6e47c657ac055100010d810915a1cc.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1bf9e4ae649514515650b47f8c1e1d0d.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|コンテンツ定義ID|オートコンプリート表示するコンテンツ定義グループIDを設定します|
|Field|オートコンプリート表示する拡張番号を設定します <br/>例:`subject`,`ext->>'1'`,`ext_1`|
|Placeholder|プレースホルダを入力します。|
|デフォルト値|項目のデフォルト値を入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X":"テストブログ",
},
```

### テキストエリア
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/89584ec8fcc12e65d43f52e9eee3d1c0.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/8a3a7c573c16528b49510f86f0d94bdf.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|Placeholder|プレースホルダを入力します。|
|デフォルト値|デフォルト値を入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7774b8a35d2d434e8dd4aa4aab3cf616.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|文字数制限|最小・最大の文字数を設定します。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0172a8d20ccc1bc9e81641c2ef741a00.png)

|項目 |説明 |
| :--- | :--- |
|入力欄のサイズ|表示するテキストエリアの横幅と縦幅を設定します。<br/>例：`200`<br/>px指定となります。<br/>単位を指定しての設定も可能です。例：`200px`, `50%`|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": "テキストエリア",
},
```

### WYSIWYG
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0beed13e0e37e70fc85c3dc95399c8a8.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/dc091117f6770fae4125f8a1adb3f476.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/817f74bd4bea26ebe20ae4054c8ef3cb.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|リソースを指定|パスを入力すると、ckfinder起動時に表示するディレクトリパスを指定できます。<br/>例: /files/user/test|
|API出力時にiframelyを利用するコードに自動変換|有効にするとエディタ内で使用された`<oembed>`のタグをIframelyで自動変換して、iframeのコードに自動変換します。|
|トークンを自動で付与する|有効にすると、動的アクセストークンのセキュリティでAPIリクエストを送った際、KurocoFiles(閲覧制限)(`/files/ltd/`)に保存したファイルのURLに`t=・・・`の認証パラメータが自動で追加されます。<br/>動的アクセストークンでWysiwyg内にltdフォルダのファイルを使用する場合は設定してください。|
|WYSIWYG プレースホルダー|プレースホルダーにする文字列をカンマ区切りで入力します。プレースホルダーを任意の文字列に変換するカスタム処理を作成して利用します。|
|デフォルト値|デフォルト値を入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/5a85a85ae95fbd638cc2917984d2f081.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7cfb1adee4ab012bf8ab9c4c088fabe1.png)


|項目 |説明 |
| :--- | :--- |
|入力欄のサイズ|フィールドの横幅と縦幅を設定します。<br/>例：`200px`, `50%`<br/>単位の指定が無い場合はpxとして動作します。|
|シンプルなツールバー|有効にするとシンプルなツールバーになります。|
|大きなカラーパレット|有効にすると16色以上のカラーコードの設定が可能になります。|
|フォントサイズをpx指定|有効にするとフォントサイズをpx指定するようになります。|
|段落挿入ボタン|有効にすると、ブロック要素(div/section/article)の前後に段落挿入ボタンを表示します。<br/>改行やWYSIWYG専用テンプレートをブロック要素の外に挿入したい場合に有効にしてください。|
|削除するプラグイン|不要なブラグインを記入します。<br/>設定方法の詳細は[WYSIWYGエディタの使用方法](/ja/docs/reference/wysiwyg/)を参照ください|
|カスタムカラー|カラーパレットに設定するカラーコードを設定します。<br/>設定方法の詳細は[WYSIWYG カスタムカラーの設定方法](/ja/docs/reference/wysiwyg-custom-color-settings/)を参照ください。|
|カスタマイズCSS|CSSのURLをセットすると、指定したCSSをエディタ内で読み込みます。|
|マークダウン使用|有効にするとソースモードの入力形式がマークダウンになります。|
|出力フォーマット|マークダウン使用を有効にしている場合に、APIからのレスポンス時の出力フォーマットを選択します。|
|WYSIWYG オプション|WYSIWYGの追加オプションを利用する場合に使用します。<br/>現在有効なオプションは以下になります。<ul><li>`subscript::1`：上付き・下付きアイコンを追加します。</li></ul>|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
"details": {
    "ext_X": "<p><strong>Wysiwyg</strong> テキストエリア</p>",
},
```

:::info
WYSIWYGエディタでは、空のタグが消される、scriptタグが消される、不明なタグが補完されるなど、HTMLのタグに自動で修正が入る場合があります。
HTMLを厳密に管理したい場合は[HTML](#html)の項目を利用してください。
:::

### HTML
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0c64abe52e4f109ebc97b874862d5e35.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/046d3840a67c6a3c7da3be2488c9fb60.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|デフォルト値|項目のデフォルト値を入力します。<br/>※全てのタグを許可するを有効にしていてもデフォルト値に`<script>`タグの利用はできません。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3b70be96f7a1b0ef90fd35acc2fda919.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|全てのタグを許可する|有効にすると全てのタグが利用可能になります。<br/>無効にした状態で利用できるタグは以下を参照してください。|

##### デフォルトで利用できるタグ一覧

```
<blockquote>,<ruby>,<sup>,<sub>,<em>,<code>,<a>,<u>,<s>,<base>,<address>,<label>,<link> <center>,
<font>,<hr>,<ul>,<ol>,<li>,<strong>,<br>,<p>,<frame>,<noframes>,<b>,<i>,<rt>,<rb> <big>,<small>,
<img>,<b>,<photo>,<table>,<tr>,<td>,<th>,<thead>,<tbody>,<span>,<noembed>,<oembed>,<q> <style>,
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<div>,<object>,<param>,<marquee>,<pre> <embed>,<map>,<area>,<dl>,
<dt>,<dd>,<iframe>,<input>,<select>,<option>,<textarea>,<noscript>,<form>,<>,<br/>,<hr/>,<abbr>,
<dfn>,<cite>,<button>,<ins>,<del> <caption>,<col>,<colgroup>,<tfoot>,<optgroup> <fb:activity>,
<fb:add-profile-tab>,<fb:bookmark>,<fb:comments>,<fb:friendpile>,<fb:like>,<fb:like-box>,
<fb:live-stream>,<fb:login-button>,<fb:pronoun>,<fb:recommendations>,<fb:serverFbml>,<fb:profile-pic>,
<fb:user-status>,<fb:comments-count> <g:plusone>,<gcse:search>,<gcse:searchresults-only>,
<gcse:searchbox-only>,<video>,<header>,<footer>,<nav>,<section>,<article> <aside>,<audio>,
<datalist>,<details>,<figcaption>,<figure>,<hgroup>,<keygen>,<mark>,<meter>,<output>,<progress>,
<rp>,<rt>,<source>,<picture>,<summary>,<time>,<wbr>,<main>
```

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/69b7b5550c626679b768f6a8065ca04f.png)

|項目 |説明 |
| :--- | :--- |
|入力欄のサイズ|フィールドの横幅と縦幅を設定します。<br/>例：`200`<br/>px指定となります。<br/>単位を指定しての設定も可能です。例：`200px`, `50%`|
|シンプルなテキストエリアを利用する|有効にするとhtmlの入力欄がシンプルなテキストエリアになります。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X":  "<div>\r\nhtml <p>テキストエリア</p>\r\n</div>",
},
```

## セレクション関連
### 単一選択
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/4c23dc4cf597843e5c2aaa20f3c8d4cf.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/876185dc70ba84d83f7dd9adeca9b68d.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|選択項目|選択項目のキーと値を設定します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/53bdb4323ef43baed072eb645f226a76.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/26e613ab31800966d5b1941ab0565edf.png)

|項目 |説明 |
| :--- | :--- |
|ラジオボタンを利用する|有効にするとコンテンツ編集画面の表示がラジオボタンになります。|
|セパレーター|各ラジオボタンを区分するための文字列を入力します。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

### 複数選択可
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/75f068b2c23bbaf314892f5f8258e6f0.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/048e165e642e643fb91966716d3fb30d.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|選択項目|選択項目のキーと値を設定します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/889708a2bbbc02e251ec4283de9dcf81.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3804eab0d0d8f9699255f9e38304b8e3.png)

|項目 |説明 |
| :--- | :--- |
|マルチセレクトを使用する|有効にするとチェックボックスの代わりにマルチセレクトを使用します。<br/>選択肢の数が多い場合に有効にしてください。選択肢の数が50を超える場合は自動でマルチセレクトが使用されます。|
|セパレーター|各ラジオボタンを区分するための文字列を入力します。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": [
        {
            "key": "1",
            "label": "複数選択_選択肢1"
        },
        {
            "key": "2",
            "label": "複数選択_選択肢2"
        }
    ],
},
```

### 日付フォーマット
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0dfa48c5c0dbcc4cb746a47fe3c51cbd.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/90931a1676c4a9b8e156fde696d311f5.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|Placeholder|プレースホルダを入力します。|
|デフォルト値|デフォルト値を入力します。<br/>[PHPのstrtotime関数](https://www.php.net/manual/ja/datetime.formats.php#datetime.formats.relative)で利用できる指定方式で相対的な日付が指定可能です。 例）today / -12 hours|
|時間(hh:mm)も設定する|有効にすると時間の設定ができるようになります。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X":"2021-06-04",
},
```

### マスタ形式
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/8da7352ff3d20d323d267f2fffbb1715.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3808b2a35e968781af538d9e420beba5.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|マスタ|利用するマスタのIDの指定します。|
|キー|キーとして使用する列番号を指定します。|
|値|値として使用する列番号を指定します。|
|デフォルト値|初期遷移時に選択済みにしたい値を指定します。|
|親ID|親IDを指定します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": { 
        "key": "key",
        "label": "0"
     },
},
```

### マスタ(チェックボックス)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/25d937c40bc8ac613df70e1a73170066.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ba2750bee0afa73835a86a014c0f64c1.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|マスタ|利用するマスタのIDの指定します。|
|キー|キーとして使用する列番号を指定します。|
|値|値として使用する列番号を指定します。|
|デフォルト値|初期遷移時に選択済みにしたいキーをカンマ区切りで指定します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": [
        {
            "key": "key1",
            "label": "label1"
        },
        {
            "key": "key2",
            "label": "label2"
        }
    ],
},
```

### 関連情報選択
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f12384e3bdcf7cd428202bf7d09f5e65.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/fb2ce264418e71dfe39e66bcd18fe61b.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|モジュール|関連情報として選択させる機能を指定します。|
|並び順|並び順を設定します。<br/>`topics_id=ASC`のように指定してください。組み合わせで指定したい場合は`subject=ASC,topics_id=ASC`のように指定できます。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
        "module_type": "topics",
        "module_id": 959
    },
},
```

### 真偽値
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/dd43ac53d5768675264c7e6e75fc56a6.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0608f54f300fb8f8526af46855212936.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|デフォルト値|設定されるデフォルト値をtrue/falseから選択します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/f97071568c7818be1c0cc68df1e7e126.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
なし

#### JSONレスポンス
```json
details: {
    "ext_X": false
},
```

## ファイル関連
### 画像(KurocoFilesにアップロード)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/2c65592832e58a5b016f4fcddeabf919.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/957531e65c7878c3278eab5fae2d4fa2.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/2116c196c8f439811c4af211ee323842.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|許可する拡張子|アップロードを許可する画像の拡張子を指定します。<br/>例：`png`,`jpg`<br/>注意:`jpg`等を指定した場合、ファイル選択ダイアログでは`jpg`と同じMIMEタイプを持つ`jpeg`,`jpe`,`jif`,`jfif`も選択できるようになります。アップロードは指定した拡張子のみに制限されます。<br/><br/>指定が無い場合は次の拡張子が許可されます。`jpg`,`jpeg`,`gif`,`png`,`svg`,`webp`|
|最大アップロードファイルサイズ(MB)|アップロード可能な画像のサイズに制限をかけます。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a6a038e9ae330f624f827655258cc50f.png)

|項目 |説明 |
| :--- | :--- |
|キャプション入力欄を非表示|有効にすると、コンテンツ編集画面で画像の説明の入力欄を非表示にします。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
        "id": "sample_0",
        "url": "https://sample.g.kuroco-img.app/v=1623673449/files/topics/sample.png",
        "desc": "",
        "url_org": "https://hasebetest.g.kuroco-img.app/files/topics/sample.png"
    },
},
```

### ファイル(KurocoFilesにアップロード)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/fa33c61c6e715e40fbc4d56e6004b45b.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/9fed2be019c141df9f3d9bec051cef4d.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/8b1a5b27931b52ebaf717b51afe1ea38.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|許可する拡張子|アップロードを許可するファイルの拡張子を指定します。<br/>例：`png`,`jpg`<br/>注意:`jpg`等を指定した場合、ファイル選択ダイアログでは`jpg`と同じMIMEタイプを持つ`jpeg`,`jpe`,`jif`,`jfif`も選択できるようになります。アップロードは指定した拡張子のみに制限されます。<br/><br/>指定が無い場合は全ての拡張子が許可されます。<br/>参考：[ファイルマネージャーで利用できるファイルの種類を教えてください](/ja/docs/faq/what-file-formats-does-the-file-manager-support/)|
|最大アップロードファイルサイズ(MB)|アップロード可能なファイルのサイズに制限をかけます。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/28865d8061d3a7dae85a6bc65018a4e0.png)

|項目 |説明 |
| :--- | :--- |
|入力欄を非表示|有効にすると、コンテンツ編集画面でファイル名の入力欄を非表示にします。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
      "id": "sample_0",
      "url": "https://sample.g.kuroco-img.app/v=1623673449/files/topics/sample_0.pdf",
      "url_org": "https://sample.g.kuroco-img.app/files/topics/sample_0.pdf",
      "dl_link": "https://sample.g.kuroco.app/direct/topics/topics_file_download/?topics_id=960&ext_no=09&index=0",
      "desc": "test"
    },
},
```

### ファイル(GCSにアップロード)
ファイル(GCS)はFirebaseとの連携後に利用可能です。  
Firebaseとの連携方法は以下のドキュメントを参考にしてください。  
[Firebaseと連携して、Storageにファイルを保存する](/ja/docs/tutorials/firebase/)

#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ed4c0df948b6f34fcd039a496fa32b51.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/66aa94d5a826571633d975c3a94f2d02.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|インライン|有効にすると、管理画面からコンテンツをクリックした際にブラウザで表示されます。APIのレスポンスは変わりません。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/66c8a0ee5cc04f29646e088593de1ea5.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|許可する拡張子|アップロードを許可するファイルの拡張子を指定します。<br/>例：`png`,`jpg`<br/>注意:`jpg`等を指定した場合、ファイル選択ダイアログでは`jpg`と同じMIMEタイプを持つ`jpeg`,`jpe`,`jif`,`jfif`も選択できるようになります。アップロードは指定した拡張子のみに制限されます。<br/><br/>指定が無い場合は全ての拡張子が許可されます。<br/>参考：[ファイルマネージャーで利用できるファイルの種類を教えてください](/ja/docs/faq/what-file-formats-does-the-file-manager-support/)|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/aa0c62731e9e8f333418c83fc3824697.png)

|項目 |説明 |
| :--- | :--- |
|入力欄を非表示|有効にすると、コンテンツ編集画面でファイル名の入力欄を非表示にします。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
      "id": "sample_0",
      "url": "https://storage.googleapis.com/kuroco-test.appspot.com/files/topics/sample.png?X-Goog-Algorithm=xxxxx",
      "desc": ""
    },
},
```

### ファイル(S3にアップロード)
ファイル(S3)はAmazon S3との連携後に利用可能です。  
Amazon S3との連携方法は以下のドキュメントを参考にしてください。  
[Amazon S3と連携して、Storageにファイルを保存する](/ja/docs/tutorials/amazon-s3/)

#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/c77fbd9036d4b4b6053be9111c13d61c.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0c7f4aea1cc2d579cc4b72833736ba63.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|インライン|有効にすると、管理画面からコンテンツをクリックした際にブラウザで表示されます。APIのレスポンスは変わりません。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d88a6f57e14f3f354720d9e3a6ed7de5.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|許可する拡張子|アップロードを許可するファイルの拡張子を指定します。<br/>例：`png`,`jpg`<br/>注意:`jpg`等を指定した場合、ファイル選択ダイアログでは`jpg`と同じMIMEタイプを持つ`jpeg`,`jpe`,`jif`,`jfif`も選択できるようになります。アップロードは指定した拡張子のみに制限されます。<br/><br/>指定が無い場合は全ての拡張子が許可されます。<br/>参考：[ファイルマネージャーで利用できるファイルの種類を教えてください](/ja/docs/faq/what-file-formats-does-the-file-manager-support/)|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/65946bacdab1d0ff7381950d79c19574.png)

|項目 |説明 |
| :--- | :--- |
|入力欄を非表示|有効にすると、コンテンツ編集画面でファイル名の入力欄を非表示にします。|
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
      "id": "sample_0",
      "url": "https://kuroco-sample.s3.ap-northeast-1.amazonaws.com/files/topics/sample_0.jpeg?response-content-disposition=xxxxx",
      "desc": ""
    },
},
```

### ファイル(ファイルマネージャーから)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7621f14ad32829ab1b9503b64c06a80b.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/18a21e702d6688800b46bb6c74da6c03.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|リソースを指定|ckfinder起動時に表示したいディレクトリパス指定します。<br/>例: `/files/user/`|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/574dbfddf17686db7243b3f0e9b49f73.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/07d32467e80cbeae646f65a7fbde9ca4.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X":"https://sample.g.kuroco-img.app/v=1621239477/files/user/sample.png",
},
```

### 動画ファイル(Vimeo)
動画ファイル(Vimeo)はFirebaseおよびVimeoとの連携後に利用可能です。  
利用方法は以下のドキュメントを参考にしてください。  
[Vimeoと連携して動画をアップロードする](/ja/docs/tutorials/how-to-connect-to-vimeo/)

#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/229e2badacf3645416bc5e6b693f2fea.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cd91f6029b0a2fc1e7031f941293df21.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/caf21ff7ce716d4ea841429248a42a2f.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|許可する拡張子|アップロードを許可するファイルの拡張子を指定します。<br/>例：`mp4`<br/><br/>指定が無い場合、Kuroco側での制限はありません。ただし、Vimeoで利用できる拡張子は基本的には次のようになります。`3GP`、`AVI`、`MOV`、`MP4`、`MPG`、`MTS`、`M2TS`|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/07d32467e80cbeae646f65a7fbde9ca4.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_col_14": {
      "id": "sample_0",
      "url": "https://player.vimeo.com/video/xxxxxxxxx",
      "desc": "",
      "image_url": "https://sample.g.kuroco-img.app/v=1234567890/files/topics/sample_0.jpg"
    },
}
```

## その他
### APIフィールド
APIフィールドは指定したエンドポイントからのレスポンスデータを使うために利用します。  
詳しい設定方法は[OpenWeatherMapを利用して現在の天気を入力するAPIフィールドを設定する](/ja/docs/tutorials/setting-up-api-field-for-current-weather-input-with-openweathermap/)を参考にしてください

#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3d48f33a7a2743dbd5a252f6b8317d8c.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/48675702f79332c9de10de1917a3ebdf.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/7704287137ad742ee8475b7605299449.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|ポップアップタイトル|ポップアップウィンドウ内に表示されるメインタイトルを指定します。|
|[pop_up]ウェブフック|ポップアップウィンドウを表示した際に指定したURLにウェブフックを送信し、レスポンスに格納されたdataの値でカラム選択状態を作ります。<br/>送信する項目は以下です。<br/>・topics_id:Strings<br/>・hash:Strings<br/>・value:Strings<br/>レスポンスは`{"data":["127", "18", "628"]}`の形式で受け取り、配列の値が各カラムの「保存する値」で指定した値となるようにしてください。|
|[on_select]ウェブフック|最終カラムの選択時に指定したURLにウェブフックを送信します。<br/>送信する項目は以下です。<br/>・topics_id:Strings<br/>・hash:Strings<br/>・selected_date:Array<br/>・value_list:Array|
|[on_save]ウェブフック|[選択]をクリックした際に指定したURLにウェブフックを送信し、「保存する値」の代わりにwebhookからのdataの値を保存します。<br/>送信する項目は以下です。<br/>・topics_id:Strings<br/>・hash:Strings<br/>・selected_date:Array<br/>・value_list:Array<br/>レスポンスは`{"data":{"value":"668","display_value":"668"}}`の形式で受け取るようにしてください。|
|API設定-タイトル|ポップアップウィンドウ内の項目タイトルを指定します。|
|API設定-URL|ポップアップウィンドウ内で使用するエンドポイントを指定します。`%key%`の形式で前カラムのレスポンスデータを使用できます。|
|API設定-データ一覧パス|レスポンスデータのうち、使用するフィールドを指定します。|
|API設定-保存する値|[選択]をクリックした際に保存されるデータを設定します。`%key%`の形式でレスポンスデータを使用できます。|
|API設定-表示形式|ポップアップウィンドウ内に表示されるデータを設定します。`%key%`の形式でレスポンスデータを使用できます。|
|API設定-プレビュー URL |プレビュー表示に使用するURLを指定します。`%key%`の形式でレスポンスデータを使用できます。URLはiframeでの表示を許可されている必要があります。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/574dbfddf17686db7243b3f0e9b49f73.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/07d32467e80cbeae646f65a7fbde9ca4.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### ポップアップウィンドウ例
![Image from Gyazo](https://t.gyazo.com/teams/diverta/34c470b7e658a53b3cd4e0384c1abdbb.png)

#### JSONレスポンス
```json
details: {
    "ext_X":"選択された値",
},
```

### カウンター
カウンターは Topics::increment のエンドポイントを叩くことで値を増減させることができます。  
PV数を設定する用途等で利用します。  
[GoogleAnalyticsのPV数を元にアクセスランキングを実装する方法](/ja/docs/tutorials/how-to-implement-ranking-with-google-analytics/)

#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d72f55b46985ea3bb0cea583b92d8f40.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/94c0f08f44696da4ddea9da03cdc1674.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
なし

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
なし

#### JSONレスポンス
```json
details: {
    "ext_X": X,
},
```

### リンク
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/081bc01cf7dda5c93d491c4e51807059.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/5d58280bb19aa7c99d7fcbc7eceb3436.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/574dbfddf17686db7243b3f0e9b49f73.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/07d32467e80cbeae646f65a7fbde9ca4.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": { 
        "url": "https://kuroco.app/",
        "title": "Kuroco"
    },
},
```

### サブ項目(JSON)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/08f5f578cad630eb99ca061563b3291f.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/14e861d99047e125062cdab4f3f42616.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|JSONデータ定義からUIを構成する|有効にするとJSONデータ定義を元にサブ項目(JSON)のUIが作成されます。|
|デフォルト値|デフォルト値を入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1b1702ccc04772e7328784c838b61e1e.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|JSONデータ定義|JSONスキーマを設定します。<br/>例：<br/>`{"number": 123, "street_name": "MyStreet"}`形式のJSONに制限する<pre><code>{ "type": "object",<br/> "properties": {<br/> "number": { "type": "number" },<br/> "street_name": { "type": "string" } <br/> },<br/> "additionalProperties": false,<br/> "required": ["number", "street_name"] <br/>}</code></pre><br/>JSONスキーマの構文については[JSON Schemaパターンサンプル](/ja/docs/reference/json-column-schema/)を参照してください。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/dbd551ba957d4f460da0a9fa15442978.png)

|項目 |説明 |
| :--- | :--- |
|入力欄のサイズ|フィールドの横幅と縦幅を設定します。<br/>例：`200`<br/>px指定となります。<br/>単位を指定しての設定も可能です。<br/>例：`200px`, `50%`|

#### JSONレスポンス
```json
details: {
    "ext_X": 入力されたJSONデータ
},
```

### 数値
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/1fcf4af69d29e5cedec909c924e9bd09.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/ca01328fa93df0d36153448e24cd7840.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/bc01c31f7e029c253b31f42d3fdf867f.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|
|数値の範囲|最小・最大の値を設定します。|
|入力制限|入力できる数値を制限することができます。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。|

#### 項目設定 - カスタムテンプレート
なし

#### JSONレスポンス
```json
details: {
    "ext_X":123,
},
```

### 表組み(テーブル)
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/5f697e46782a1b410601cd00706fdbb1.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/bbe3c447caa45dc8f180bf97c4dbf60d.jpg)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|行の数|テーブルの行の数を指定します。|
|列の数|テーブルの列の数を指定します。|
|セルの設定|セルの値を入力します。<br/>上から2行目、左から3列目のセルを指定する場合は`2-3`と記述します。<br/>自動で追加されるヘッダ行が0行目になります。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/574dbfddf17686db7243b3f0e9b49f73.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/07d32467e80cbeae646f65a7fbde9ca4.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
      "1": {
        "1": "1-1",
        "2": "1-2",
        "3": "1-3"
      },
      "2": {
        "1": "2-1",
        "2": "2-2",
        "3": "2-3"
      }
    },
},
```

### 地図
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/45ba7275cbba0f137033569baec083db.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/b0c52f5cc349640fb442d5f4b1715105.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5b38184e71bfd0431798677840932983.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|
|デフォルト|地図のデフォルト表示を設定します。|
|注釈|注釈を入力します。|

#### 項目設定 - 入力制限
![Image from Gyazo](https://t.gyazo.com/teams/diverta/53bdb4323ef43baed072eb645f226a76.png)

|項目 |説明 |
| :--- | :--- |
|必須設定|有効にすると必須入力になります。|

#### 項目設定 - 検索設定
![Image from Gyazo](https://t.gyazo.com/teams/diverta/cdced07ac5f22feb4eddb78dd4e5ce1e.png)

|項目 |説明 |
| :--- | :--- |
|インデックス付与|有効にするとデータベースにインデックスが貼られ、検索結果が速くレスポンスされるようになります。||

#### 項目設定 - カスタムテンプレート
![Image from Gyazo](https://t.gyazo.com/teams/diverta/581b4e2e66b4c5dd26413943fa8c237c.png)

|項目 |説明 |
| :--- | :--- |
|テンプレート編集|コンテンツ編集画面の表示を変更したい場合に使用します。|

#### JSONレスポンス
```json
details: {
    "ext_X": {
      "gmap_x": "139.7435938",
      "gmap_y": "35.7009012",
      "gmap_zoom": "16",
      "gmap_type": "roadmap",
      "gmap_place_id": "ChIJbSFfyl2MGGARIoFxX2bg0hE",
      "jp_lon": "139.0.11.2",
      "jp_lat": "34.59.48.2"
    },
},
```

## レイアウト
### ブロックエディタ
<!--
#### コンテンツ編集画面の表示
![Image from Gyazo](https://t.gyazo.com/teams/diverta/0c64abe52e4f109ebc97b874862d5e35.png)
-->
#### 項目設定 - グループ設定
ブロックエディタはグループ化した項目のトップに設置して利用します。  
ブロックとして利用したい項目種別をグループに含めるように設定してください。  
また、グループの繰り返し回数が設定できるブロックの数となります。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a5b355421e17419380ca03df6957ed40.png)

#### 項目設定 - 全般
![Image from Gyazo](https://t.gyazo.com/teams/diverta/d85921b528d6f83b84f9ee5f9296687f.png)

|項目 |説明 |
| :--- | :--- |
|項目名|コンテンツ編集画面の表示名を入力します。|
|Slug|Slugを入力します。|

#### 項目設定 - 入力制限
設定なし

#### 項目設定 - カスタムテンプレート
設定なし

#### JSONレスポンス
```json
details: {
    "block_editor": [
      {
        "block": "ext_26",
        "h1": "H1 text",
        "h2": "",
        "image": {},
        "p": ""
      },
      {
        "block": "ext_28",
        "h1": "",
        "h2": "",
        "image": {},
        "p": "content"
      },
      ・
      ・
},
```