概要
JavaScript などで Web アプリケーションを作成するときに、アンケートフォームなどを作成したい場合などはありませんでしょうか?
簡単にアンケートフォームを作成したい場合、Google スプレッドシートを使用したり外部サービスを使用することもあるでしょうが、自前で作成したいという方もいらっしゃるでしょう。
そんなときは、アンケートフォームを作成・表示するための OSS「SurveyJS」を使用されてみてはいかがでしょうか?
SurveyJS を使用することで簡単にアンケートフォームを作成できますが、初めて使用する際にはやはりテンプレートなどが欲しいですよね。
本題ですが、今回本記事で紹介する OSS は SurveyJS のテンプレートライブラリ「SurveyJS-Library」になります。
こちらを参照することで JavaScript の Web アプリフレームワークで有名どころである Angular、JQuery、KnockoutJS、 React、Vue で使用できるテンプレートを紹介してくれます!
それでは早速使い方についてみてみましょう!
利用手順
SurveyJS-Library を利用するには、以下の GitHub のリポジトリをクローンして、ローカルサーバー上で動作させることでテンプレートを見ることができます。
- リポジトリをクローン
git clone https://github.com/surveyjs/survey-library.git cd survey-library
- 依存関係をインストール
npm install -g karma-cli npm install
- ライブラリを構築
npm run build_prod
- サンプル実行
npm start
実行後は http://localhost:7777/ でローカルサーバーにアクセスしてテンプレート一覧を参照することができます。
使用感
早速 SurveyJS のテンプレート集 SurveyJS-Library をローカルサーバー上で動作してライブラリ一覧を見てみました。
ちなみに、自分は React を普段使用しているので、 React のテンプレート一覧を見てみました。
上図のように既にテンプレートが出来上がったものがあるので、アンケートフォームを Web アプリ上で作成したい場合はこちらの中から真似することで簡単に作成することができそうですね。
ちなみに、SurveyJS で作成したデータは専用の JavaScript ファイルによってアンケートフォームに変換されるようです。
入力したデータの保存は別途ロジックなどで考える必要がありますが、柔軟なアンケートフォームを必要とする際に便利ですね。
まとめ
今回は SurveyJS のテンプレートライブラリ「SurveyJS-Library」をご紹介しました。
JavaScript で Web アプリを作成している方にとって、アンケートフォームを作成することは多々あると思いますので、自前で作成したい方にとっては素晴らしい OSS ではないでしょうか?
Web アプリを開発している方などは、ぜひ一度こちらの OSS を参照してみて自前のアンケートフォームを作成されてみてはいかがでしょうか?