6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JSONスキーマのJSONスキーマを作って簡易作成フォームにしてしまう [jdorn/json-editor]

Last updated at Posted at 2017-07-25

JSONスキーマに触れた誰もが考えそうなネタですが、json-editorでビビっときた人は是非。

JSON schema とは
その名の通りですがJSONの形式を定義するJSONです。XMLで言うWSDLの様なもの(余計わかりづらい?)

jdorn/json-editorとは
JSON schema と拡張定義を用いてJSONの入力フォームを作ることができる仕組みです。

※jdorn/json-editorのJSONスキーマに最適化したJSONスキーマです。JSONスキーマのスキーマなら本家にあるよ・・JSONスキーマと仕様違うよね・・というツッコミは返答に困ってしまいますのでご遠慮ください。

また、oneOf、allOf等、取り込めていない仕様や入力規則がありますが、ちょっとしたフォーム作成・簡単なAPIインターフェース定義はとりあえず作れます。(改善歓迎)

JSONスキーマ作成フォーム
https://rawseq.github.io/json-editor-sb/

例)JSONスキーマ作成フォームで作成したフォーム
https://rawseq.github.io/json-editor-sb/

json
{
	"title": "JSONスキーマ作成 (jdorn/json-editor)",
	"description": "<a href='https://github.com/jdorn/json-editor'>https://github.com/jdorn/json-editor</a><br><a href='https://rawseq.github.io/json-editor-sb/' target='_blank'>https://rawseq.github.io/json-editor-sb/</a><br>右上「項目」ボタンで属性を追加します。",
	"$ref": "#/definitions/property",
	"definitions": {
		"property": {
			"description": "属性情報:右上の「項目」ボタンで属性項目を増減できます。",
			"type": "object",
			"properties": {
				"title": {
					"title": "タイトル",
					"type": "string"
				},
				"type": {
					"title": "種類",
					"type": "string",
					"enum": [
						"string",
						"integer",
						"number",
						"array",
						"object",
						"boolean",
						"null"
					],
					"options": {
						"enum_titles": [
							"文字列(string)",
							"整数(integer)",
							"数値(number)",
							"配列(array)",
							"項目(object)",
							"真偽値 True/False(boolean)",
							"null"
						]
					}
				},
				"format": {
					"title": "形式",
					"type": "string",
					"enum": [
						"text",
						"textarea",
						"number",
						"email",
						"url",
						"tel",
						"date",
						"datetime-local",
						"datetime",
						"month",
						"week",
						"time",
						"range",
						"color",
						"grid",
						"checkbox",
						"table",
						"select",
						"sql",
						"actionscript",
						"batchfile",
						"c",
						"cpp",
						"coffee",
						"csharp",
						"css",
						"dart",
						"django",
						"ejs",
						"erlang",
						"golang",
						"groovy",
						"handlebars",
						"haskell",
						"haxe",
						"html",
						"ini",
						"jade",
						"java",
						"javascript",
						"json",
						"less",
						"lisp",
						"lua",
						"makefile",
						"markdown",
						"matlab",
						"mysql",
						"objectivec",
						"pascal",
						"perl",
						"pgsql",
						"php",
						"python",
						"r",
						"ruby",
						"sass",
						"scala",
						"scss",
						"smarty",
						"sql",
						"stylus",
						"svg",
						"twig",
						"vbscript",
						"xml",
						"yaml"
					]
				},
				"default": {
					"type": "string",
					"title": "規定値"
				},
				"enum": {
					"title": "選択肢",
					"type": "array",
					"items": {
						"title": "選択肢コード",
						"type": "string"
					}
				},
				"properties": {
					"type": "object",
					"title": "項目(object.properties)",
					"description": "右上の「項目」ボタンからコード名を入力して追加してください。",
					"patternProperties": {
						".*": {
							"$ref": "#/definitions/property"
						}
					}
				},
				"patternProperties": {
					"type": "object",
					"title": "パターン項目(object.patternProperties)",
					"description": "右上の「項目」ボタンから正規表現パターンを入力して追加してください。",
					"patternProperties": {
						".*": {
							"$ref": "#/definitions/property"
						}
					}
				},
				"items": {
					"$ref": "#/definitions/property",
					"title": "配列要素(array.items)"
				},
				"readonly": {
					"type": "integer",
					"title": "読み取り専用",
					"enum": [
						0,
						1
					],
					"options": {
						"enum_titles": [
							"いいえ",
							"はい"
						]
					}
				},
				"options": {
					"title": "詳細設定",
					"type": "object",
					"format": "grid",
					"properties": {
						"collapsed": {
							"title": "折り畳んだ状態にする",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"disable_array_add": {
							"title": "配列の追加無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"disable_array_delete": {
							"title": "配列の削除無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"disable_array_reorder": {
							"title": "配列の並べ替え無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"disable_collapse": {
							"title": "折り畳み無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"disable_edit_json": {
							"title": "JSON編集無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"disable_properties": {
							"title": "項目編集無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"no_additional_properties": {
							"title": "項目追加無効",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"hidden": {
							"title": "隠す",
							"type": "boolean",
							"options": {
								"grid_columns": 2
							}
						},
						"grid_columns": {
							"title": "「grid」形式指定時のカラム幅指定(1-12)",
							"type": "integer"
						},
						"enum_titles": {
							"title": "選択肢タイトル(「選択肢コード」と並びを合わせる事)",
							"type": "array",
							"items": {
								"title": "選択肢",
								"type": "string"
							}
						}
					}
				},
				"pattern": {
					"type": "string",
					"title": "入力規則:正規表現"
				},
				"minLength": {
					"type": "string",
					"title": "入力規則(文字列):最小桁数"
				},
				"maxLength": {
					"type": "string",
					"title": "入力規則(文字列):最大桁数"
				},
				"minnum": {
					"type": "string",
					"title": "入力規則(文字列):最小値"
				},
				"maxnum": {
					"type": "string",
					"title": "入力規則(数値):最大値"
				},
				"minItems": {
					"type": "string",
					"title": "入力規則(数値):最小要素数"
				},
				"maxItems": {
					"type": "string",
					"title": "入力規則(配列):最大要素値"
				},
				"uniqueItems": {
					"type": "boolean",
					"title": "入力規則(配列):要素重複拒否"
				},
				"required": {
					"title": "入力規則(項目):必須項目",
					"type": "array",
					"items": {
						"title": "項目コード",
						"type": "string"
					}
				},
				"defaultProperties": {
					"title": "規定表示項目(種類が項目の場合)",
					"type": "array",
					"items": {
						"title": "項目コード",
						"type": "string"
					}
				},
				"description": {
					"title": "説明",
					"type": "string",
					"format": "textarea"
				}
			},
			"defaultProperties": [
				"title",
				"type"
			]
		}
	}
}

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?