サービス

react-jsonschema-form の Playground
あくまで「遊び場」「お試し場」という位置づけなので注意
本格的に使う場合は自サーバーを立てるなどした方が良いかも

特徴

HTMLの入力フォームを使ってJSONを組み立てられる
欲しいJSONフォーマット自体もJSONで定義できる
フォーム入力からリアルタイムでJSONに変換してくれる
リアルタイムにバリデーションをかけて、不正な値はエラーを返してくれる
サーバーへの接続を必要としない
- このPlayground自体はWebサービスとして動いているが、JSONへの変換自体はブラウザのJavascriptでおこなわれる
自作のPlaygroundにURLを割り当てて共有できる
- 共有URLではすべての状態が保たれる ( 後述の3要素すべて )

3つの要素

JSONSchema (JSON定義)
- 生成したいJSONの構造自体をJSONで定義できる
formData (JSON出力)
- HTMLフォームへの入力がここにJSONとして出力される
UISchema (インターフェイス定義)
- HTML的に入力欄の形式を変えたりできる
- オプション要素なので使わなくてもOK

チュートリアル

Example Playground にアクセスする

フォーム入力 => JSONへの変換

First Name に名前を入れてみよう。
"formData" にJSONが生成されるのが分かる。

JSONの編集 => フォームへの反映

逆に formData のJSONを直接編集するとフォームに反映される。

JSON定義の変更

JSON定義 ( JSONSchema. ) にミドルネーム MiddleName を追加してみよう。

{
  "title": "Some Form",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
+    "MiddleName": {
+      "type": "string",
+      "title": "Middle Name"
+    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    }
  }
}

リアルタイムでHTMLフォームに入力欄が表れ、入力可能になる。

Share

フォーマット

次に誕生日を日付フォーマットで入力できるようにしてみよう。
JSONSchema に "birthday" プロパティを追加する。

{
  "title": "Some Form",
  "type": "object",
  "properties": {
+    "birthday": {
+      "type": "string",
+      "format": "date",
+      "title": "Birthday"
+    },
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "MiddleName": {
      "type": "string",
      "title": "Middle Name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    }
  }
}

するとHTMLフォームでも日付型を入力できるようになるのが分かる。

Share

インターフェイス定義を変えてみる

HTMLフォームのインターフェイスにも細かな指定ができる。

ここでは誕生日の入力欄を変更してみる。

UISchema に次のように入力する。

{
+  "birthday": {
+    "ui:widget": "alt-date",
+    "ui:options": {
+      "yearsRange": [
+        2000,
+        2010
+      ]
+    }
+  }
}

年/月/日に分かれた古き良きフォーム形式に変わったのが分かる。
yearsRange が選べる年のラインナップとして反映されている。

Share

共有

Shareボタンからいつでも共有URLをゲット出来る。
共有目的だけではなくて「この状態を保存しておきたい！」というときにも良いかも。

日本語を使うと共有ボタンを押しても反応がなかった。Playground側が英語にしか対応していなかったりするかもしれない。

他の仕様は？

実際に遊んでみよう！ここはPlaygroundだ。

注意

2018/08/13 現在、Playgroundの挙動は完全ではないように思える。

たとえば正しいJSON定義を入力したと思っても、formData に変な値が残っていると、正しくHTMLフォームが出てこなかったりする気がする。

ページをリロードしたり、共有機能をうまく使ったり、白紙のPlaygroud からやり直したりと、色々と工夫は必要かもしれない。

バージョン

Google Chrome 67.0.3396.99（Official Build）
Fire Fox でも動くことを確認

リンク

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter