どうも開発室所属の @mk2 です。フォームやLP(ランディングページ) をブラウザ画面上で構築するような仕組みを作ろうとした時に、色々と調査した結果をまとめます。
フォームエディターOSSライブラリと、LP(ランディングページ)構築用OSSライブラリの調査結果まとめ
フォームエディター
フォームエディターは結構種類があります。WYSIWYGでフォームを作る需要が結構あるのだろうなーと思います。サンプルサイトがあるものは、記載してあります。
https://github.com/minikomi/Bootstrap-Form-Builder
- WYSIWYG
- DnDでできるので良さそう
- http://minikomi.github.io/Bootstrap-Form-Builder/
https://github.com/christianalfoni/formsy-react
- コード書く系
- react系、コード書かないとだめ
https://github.com/shlomnissan/formbuilder
- WYSIWYG系
- 動作が違和感、こなれていない感あり
- http://www.1bytebeta.com/projects/formbuilder/
https://github.com/shalotelli/form_builder
- WYSIWYG系
- 使いやすそう、ただレイアウト周り弱い
- http://shalotelli.github.io/form_builder/
https://github.com/formly-js/formly-builder
- WYSIWYG系
- Angularと組み合わせて使うもの、完成度高そう
- http://www.spengineeringltd.com/Pages/FormBuilder.aspx#/FormDesign
https://github.com/tonytan4ever/Bootstrap-Form-Builder-V3
- WYSIWYG系
- minikomiベース、Bootstrap V3に対応させたもの
- http://formbuilder.tdjangoy.webfactional.com/
https://github.com/vlio20/angular-material-form-builder
- WYSIWYG系
- angularベース、かつmaterialデザイン適用可能
- http://vlio20.github.io/angular-material-form-builder/
https://github.com/NaturalSolutions/NS.UI.FormBuilder
- WYSIWYG系
- backbone用のフォームを出力できる？
- エラー多発するのですぐには使え無さそう
- http://naturalsolutions.github.io/NS.UI.FormBuilder/
https://github.com/aiop/Bootstrap3-form-builder
- WYSIWYG系
- 相変わらずのbootstrap用、機能的に似てる部分あり？（他のBootstrap用とくらべて）
- http://minikomi.github.io/Bootstrap-Form-Builder/
https://github.com/knipknap/SpiffForm
- WYSIWYG系
- ものすごいシンプル
https://github.com/cihad/formbuilder
- WYSIWYG系
- すごい、アニメーションもあるし、デザインも崩れ無さそう
- http://cihad.github.io/formbuilder/
https://github.com/json-schema-form/json-schema-builder
- WYSIWYGっぽい
- 完成度高い
- DnDでさくさくではないものの、現実的に使いやすいもの
- http://ralphowino.github.io/schema-form-builder/#/builder
https://github.com/Webanywhere/form-builder
- WYSIWYG系
- 完成度は高くないものの、グリッドレイアウトとWYSIWYGが高いレベルで融合していて使いやすい
- その分前提知識も必要になる
- http://webanywhere.github.io/form-builder/
結論
- https://github.com/minikomi/Bootstrap-Form-Builder が安定感ある
- https://github.com/tonytan4ever/Bootstrap-Form-Builder-V3 がBootstrapV3対応したもの
- https://github.com/shalotelli/form_builder が次点か
LP構築
LP構築用のライブラリはかなり数が少ないです。というかプロダクトに使えそうなものはないです。サンプルサイトがあるものは、記載してあります。
https://github.com/ziggi/builder
- WYSIWYG
- すごいけど、ロシア語…
- http://ziggi.org/builder/
https://github.com/ziggi/loppy
- WYSIWYG
- 未完成、しかし思いは伝わってくる(ボタンを色々移動できることとか)
- http://loppy.ziggi.org/
https://github.com/philipnewcomer/page-builder-ui
-
this code should not be considered production-readyとあるのでプロダクションで使うのはやめたほうが良い
https://github.com/OllieTerrance/BootPolish
- WYSIWYGっぽい
- キーボード操作可能
- よくできてる
- http://sandbox.t.allofti.me/boot-polish/
結論
- LP構築を行うという場面が普通はほぼないので、あまり種類がない
- 本気でやるなら自分で構築すべき(LP自体はシンプルなので、そこまで難しくない…はず)