Help us understand the problem. What is going on with this article?

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

More than 3 years have 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"
            ]
        }
    }
}

RAWSEQ
NE(のびのびエンジニア)です。よろしくお願いいたします。 50サイト超のECサイトの受託構築に関わっていたら、技術研鑽が疎かになり、浦島太郎状態で焦っているところ。 フロントエンド・デザイナーに敬意と憧れを持つバックエンドWEBエンジニアで、 インフラ回り(今はAWS等のクラウド)からミドルウェア(LINUX系が主)、サービス側アプリ開発、ビヘイビア程度のフロントエンド実装が守備範囲です。
http://ltside.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away