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

ユーザーに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から入力検証つきフォーム生成

blue-ossan
嫁さん一番、仕事は二番、三児のオヤジ。 徳島のとある里山に移住。古民家DIY改修中。 プログラミング16年、PHP+Laravelは相棒。javascriptは愛人。 良いプログラミングをするには良い食事で頭作りから!
https://pochaneco.space
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした