Edited at

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

More than 1 year has passed since last update.

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"
]
}
}
}