LoginSignup
6
7

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