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

JSON Formでフォームや質問がお手軽に生成できますよ! Webディレクターさん!

More than 5 years have passed since last update.

こんにちは、Livesense Advent Calendar 2014 14日目です。
皆さん、年末用のゲームはもう決めましたか?
おすすめはDragon Age InquistionとMETRO Reduxです。

日々要件が変わっていくアンケートフォーム

今年は業務ツールを作り続ける1年でした。
自分の所属する事業部では日々クライアント様やユーザ様の使い勝手や精度向上のために電話やメール等によるヒアリングを行っています。

と、なるとヒアリング内容をDBに入力するような作業が発生します。
もちろんこの項目は日々ブラッシュアップされていく訳で
新しくこういう項目を入力する場所が欲しいとか、逆にアレはもういらないとか発生します。

その度「じゃあ来季スプリントで検討しますのでチケットを作って下さい! リリース? まぁ見てて下さい。 来月の頭にはなんとかしますよ!!」では現場のスピード感的にも合いません。
「リリースされるまではメモ欄に隅括弧で〜」みたいなパワフルな運用が行われてしまいます。

JSON Form

https://github.com/joshfire/jsonform
JSON Formはjson schemaを渡すとフォームを生成してくれるjQuery pluginです。
angularjsと連携したangular-schema-formなんてのもあります。
動作サンプルはangularのコレなんかがわかりやすいと思います。

<script type="text/javascript" src="deps/jquery.min.js"></script>
<script type="text/javascript" src="deps/underscore.js"></script>
<script type="text/javascript" src="deps/opt/jsv.js"></script>
<script type="text/javascript" src="lib/jsonform.js"></script>
<script type="text/javascript">
$('form').jsonForm({
  schema: {
    name: {
      type: 'string',
      title: 'Name',
      required: true
    },
    age: {
      type: 'number',
      title: 'Age'
    }
  }
});
</script>

form.png
上の例ではこんなフォームができるわけですね
ちゃんとNameはrequiredだし、Ageは数字じゃないとバリデートされます。

よし!あとは適当なデータからjsonさえ生成できればOKだ

ドキュメントを見ればinput:text以外のプルダウンやらチェックボックスやらテキストエリアやらなんでも作れることがわかります。

あとはもう楽勝ですね。
「クライアントへのヒアリング内容を保存するフォームに『使い勝手はどうでしたか?』という項目を追加したいです。
プルダウン形式で『未回答』『よい』『ふつう』『わるい』を選択できるようにして下さい」
みたいな依頼もこんな風に入力して、
inputform.png
それをいい感じにjson schemaに変換して

question1: {
    title: "使い勝手はどうでしたか?",
    type: "string",
    enum: [
        "未回答",
        "良い",
        "普通",
        "悪い"
    ]
}

jsonformに食わせたらこんなformが表示されます。
outputform.png
この「フォームの項目が増える程度でコードを触る必要ないだろ? schemaはデータだ」感が素敵です。

とはいえ問題も結構……

jsなので悪意を持って弄くられたらどうにもなりません。
あと、上の例だとバリデーションがされてません。
細かく設定しようと思うと項目を追加するフォームをごちゃごちゃさせるか、
もしくは項目を追加する人がjson schemaを書ける必要があるのでお手軽運用できるか微妙です。
更に、DB schemaとJSON schemaはもちろん対応してないのでデータの保存はkeyvalueとかスキーマレスな感じになってしまいます。
結局分析する時に大変だったりして……、それ、SurveyMonkeyでいいんじゃないか……。

スピードが重要だったり項目がコロコロ変わる場合などで、社内で限定的に使う分にはお手軽でよいなぁーと思ってます。
時間があればちゃんと作った方が良いですね。

raamen
からあげとらーめんがすきなwebエンジニア
livesense
求人情報サイト「マッハバイト」「転職ナビ」「転職会議」「転職ドラフト」および不動産情報サイト「IESHIL」などを開発・運営しています。
https://www.livesense.co.jp/
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