こんにちは、レガシーなプロジェクトが多く、やっとこさOSSの世界にアンテナ張り出した途端、目からマグロの鱗が落ちまくってる20代のおっさんです。
JSON_editorを見つけた
以前もjQueryUIで同じようなものを作ったのですが、もっと華麗にしたいので、新しく考え、Vuejsでテーブルをクリックすると、モーダルで編集すると言うやつを作ろうとしましたが、色々と課題も多く、工数がかかりそうなので、やっぱり別の技術を探索したところ、Githubにjdorn/json-editorというのを見つけました。
JSON Schemaだけ作っちゃえば、後は勝手にやってくれちゃうと言うスグレモノ。JSONで色々画面入力やるなら、かなり良さげ。
ファーストタッチ
ザクッと使った結果、使い物にはなるみたいで、圧倒的にメリットも大きいようなので、日本語化ファイルを作って、動くようにしてみました。もちろん、見つけていないだけで、他にも似たようなものはあるかもしれません。
欠点は、エンドユーザーには多分使えないから、普通にPCが触れる人向けってことでしょうか。今回は社内向けですのでOKです。社内向けに使えば、他の欠点も見えてくるでしょう。そうすれば、自分でゴニョゴニョ作るか、プルリクするか、でしょう。
使ってみた
とりあえず、使いたいWebサイトのスクリプトフォルダにでも置き、インポートします。そんなのはエンジニアなら勝手にやってください。
スキーマを作る
json schemaが必要ですので、作る必要があります。
.NETで使うなら、JSON.NETのメソッドを使うと手っ取り早いです。もちろんNameやRequiredを設定して置くと便利ね。
配列の必須やらの細かい設定とかは足りないみたいなので、スキーマにしてからテキストで調整するといいかも。
こんなメソッドを作って、JSONスキーマにしたいクラスを渡すと、一発ですね。
public static string GenerateSchema(Type type)
{
var generator = new JSchemaGenerator();
generator.ContractResolver = new CamelCasePropertyNamesContractResolver();
JSchema schema = generator.Generate(type);
return schema.ToString();
}
埋め込む
てきとーなDivなりを作ります。
それをめがけて、json_editorを蹴りましょう。ザクッと使えそうな感じの設定は、おおよそこれだけで良いようです。
今回はBootstrap3のテーマです。歌います。自己流でテンプレートとかCSSもアレンジできるようなので、見やすく使いやすくなるか、ちょっと弄ってみます。
var editor = new JSONEditor(jsonEditEl, {
theme: 'bootstrap3',
schema: "ここにスキーマ",
disable_collapse: true,
disable_array_reorder: true,
display_required_only: true,
startval: "ここに初期値のJSON"),
});
細かい設定はGithubを読んでくださいね。
できました。
参考サイト
JSONスキーマのJSONスキーマを作って簡易作成フォームにしてしまう [jdorn/json-editor]
JSON Editor – JSON Schemaから入力検証つきフォーム生成