サービス
- 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フォームに入力欄が表れ、入力可能になる。
フォーマット
次に誕生日を日付フォーマットで入力できるようにしてみよう。
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フォームでも日付型を入力できるようになるのが分かる。
インターフェイス定義を変えてみる
HTMLフォームのインターフェイスにも細かな指定ができる。
ここでは誕生日の入力欄を変更してみる。
UISchema に次のように入力する。
{
+ "birthday": {
+ "ui:widget": "alt-date",
+ "ui:options": {
+ "yearsRange": [
+ 2000,
+ 2010
+ ]
+ }
+ }
}
年/月/日に分かれた古き良きフォーム形式に変わったのが分かる。
yearsRange が選べる年のラインナップとして反映されている。
共有
Shareボタンからいつでも共有URLをゲット出来る。
共有目的だけではなくて「この状態を保存しておきたい！」というときにも良いかも。
- 日本語を使うと共有ボタンを押しても反応がなかった。Playground側が英語にしか対応していなかったりするかもしれない。
他の仕様は？
実際に遊んでみよう！ ここはPlaygroundだ。
注意
2018/08/13 現在、Playgroundの挙動は完全ではないように思える。
たとえば正しいJSON定義を入力したと思っても、formData に変な値が残っていると、正しくHTMLフォームが出てこなかったりする気がする。
ページをリロードしたり、共有機能をうまく使ったり、 白紙のPlaygroud からやり直したりと、色々と工夫は必要かもしれない。
バージョン
- Google Chrome 67.0.3396.99（Official Build）
- Fire Fox でも動くことを確認
リンク
- Gist — Build JSON by HTML input form with pre defined JSON schema ( react-jsonschema-form playground )
- mozilla-services/react-jsonschema-form: A React component for building Web forms from JSON Schema.
- Medium
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。