Edited at

ユーザーにJSONの編集をさせたい時に使えるJSONエディタ

More than 1 year has passed since last update.

こんにちは、レガシーなプロジェクトが多く、やっとこさ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から入力検証つきフォーム生成