Cloudant
node-red
ibmcloud

IBM Cloudでアンケートアプリを作成

IBM CloudのPaaS(旧Bluemix)をつかって、アンケートを収集するアプリを作ってみました。

こちらの記事を参考に、プログラミングとしてはHTMLのみの記述でつくってみました。HTMLさえかければ、アンケートが簡単に取れます。

(番外編)Node-REDで簡単アンケート回答Webページを作る - Qiita
https://qiita.com/manamana/items/6a699b82982c909367ad#%E3%82%BD%E3%83%BC%E3%82%B9

環境
・IBM Cloud
・Node-Red
・Cloudant

IBM Cloudにログインし、ボイラープレートからNode-RED Starterを作成します。
image.png

アプリ名を適当に決めて、アンケートデータの保存先になるCloudantも作成します。
image.png

アプリが稼働中のステータスになったら、アプリURLのリンクをクリックしてhttp://<yourhost>.mybluemix.netにアクセスします。

image.png

Node-REDのインスタンスの設定をします。
image.png

Node-REDのエディターに接続するユーザー・パスワードを指定します。
image.png

Nextで進みます。
image.png

Finishで完了します。
image.png

Node-REDのフローエディターを起動します。
image.png

クリップボードから以下のコードを読み込みます
image.png

[{"id":"f90eea27.81a6d8","type":"http in","z":"96a29fe6.71796","name":"/answerget","url":"/answerget","method":"get","upload":false,"swaggerDoc":"","x":100,"y":80,"wires":[["57fd3ef.fea74c","f80ef032.065e1"]]},{"id":"57fd3ef.fea74c","type":"debug","z":"96a29fe6.71796","name":"","active":true,"console":"false","complete":"true","x":254,"y":31.5,"wires":[]},{"id":"a38b9036.4c4b2","type":"http response","z":"96a29fe6.71796","name":"","x":623,"y":101.5,"wires":[]},{"id":"f80ef032.065e1","type":"template","z":"96a29fe6.71796","name":"質問回答ページ","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n<html lang=\"ja\">\n<head>\n\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=\"UTF-8\">\n\t<title>アンケート</title>\n</head>\n<body>\n<h1>アンケート</h1>\nアンケートへのご協力をお願いいたします。<BR>\n<BR>\n<form id=\"answerform\" method=\"POST\" action=\"answerpost\">\n  お名前:<input type=\"text\" name=\"uname\" size=\"20\"><BR>\n  email:<input type=\"text\" name=\"email\" size=\"20\"><BR>\n\n<!-- Q1 Begin --><p>\n【 1 】 <strong>講演1<BR></strong>\n</p>\n<table>\n<tbody>\n<tr>\n<td align=\"left\">理解: </td>\n<td align=\"center\">よく理解できた </td>\n<td align=\"center\">まあ理解できた </td>\n<td align=\"center\">やや理解できず </td>\n<td align=\"center\">全く理解できず </td>\n</tr>\n\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_1\" value=\"1\" checked=\"checked\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_1\" value=\"2\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_1\" value=\"3\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_1\" value=\"4\"></td>\n</tr>\n\n<tr>\n<td align=\"left\">講義評価: </td>\n<td align=\"center\">良い</td>\n<td align=\"center\">やや良い</td>\n<td align=\"center\">あまり良くない</td>\n<td align=\"center\">良くない</td>\n</tr>\n\n<tr>\n<td align=\"center\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_2\" value=\"1\" checked=\"checked\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_2\" value=\"2\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_2\" value=\"3\"></td>\n<td align=\"center\"><input type=\"radio\" name=\"q1_2\" value=\"4\"></td>\n</tr>\n\n</tbody>\n</table>\n\nご感想<BR>\n<textarea name=\"q1_3\" rows=\"3\" cols=\"80\" tabindex=\"0\"></textarea>\n<br>\n<!-- Q1 End -->\n\n\n<br>\n<input type=\"submit\" value=\"送信\" style=\"width:100px; height:50px\">\n\n</form>\n</body>\n</html>\n","x":283,"y":105.5,"wires":[["a38b9036.4c4b2"]]},{"id":"41da8c22.9a5124","type":"debug","z":"96a29fe6.71796","name":"","active":true,"console":"false","complete":"false","x":610,"y":200,"wires":[]},{"id":"3d52ac10.087ee4","type":"http in","z":"96a29fe6.71796","name":"/answerpost","url":"/answerpost","method":"post","upload":false,"swaggerDoc":"","x":89.5,"y":197.5,"wires":[["2a1ffb9f.d06d24"]]},{"id":"2a1ffb9f.d06d24","type":"json","z":"96a29fe6.71796","name":"","pretty":false,"x":255.5,"y":251,"wires":[["5f32e321.e58fec","41da8c22.9a5124","a5140bd5.852b98"]]},{"id":"5f32e321.e58fec","type":"cloudant out","z":"96a29fe6.71796","name":"qastore","cloudant":"3454d350.9a689c","database":"qastore","service":"questionnairenr-cloudantNoSQLDB","payonly":true,"operation":"insert","x":645.5,"y":292.5,"wires":[]},{"id":"a5140bd5.852b98","type":"template","z":"96a29fe6.71796","name":"ありがとうページ","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n<html lang=\"ja\">\n<head>\n\t<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n\t<title>データ解析に関するセミナーのアンケート(IBM)</title>\n</head>\n<body>\n<br><br>\n<h1>アンケートへのご協力ありがとうございました<BR>\n</h1>\n</body>\n</html>","output":"str","x":438.5,"y":337,"wires":[["210066ad.68a65a"]]},{"id":"210066ad.68a65a","type":"http response","z":"96a29fe6.71796","name":"","statusCode":"","headers":{},"x":613.5,"y":358.5,"wires":[]},{"id":"3454d350.9a689c","type":"cloudant","z":"","host":"216cca88-870d-4821-a6be-1c15891dff6c-bluemix.cloudant.com","name":"cloudant-db07"}]

以下のようにフローが作成されます。

image.png

「質問回答ページ」のノードにHTMLでアンケートのページを記述しています。
image.png

「qastore」のノードにボイラープレートで作成したCloudantのインスタンスを割り当て、適当なDB名をつけます。

image.png

デプロイをクリックします。これでアンケートアプリは完成です。
image.png

http://<yourhost>.mybluemix.net/answergetにアクセスします。以下のようにHTMLが表示されます。

image.png

このanswergetのURLは以下で定義されています。

image.png

テストデータ入力をして送信ボタンをクリックします。
image.png

以下のようにありがとうページが表示されます。
image.png

このHTMLは「ありがとうページ」のノードに記述されたHTMLを表示しています。
image.png

テストデータがCloudantに入力されたことを確認します。
IBM CloudのCloud Foundryのアプリの画面に戻り、接続をクリックしてアプリが接続しているCloudantDBを開きます。
image.png

LAUCHボタンをクリックしてCloudantのダッシュボードを開きます。
image.png

アンケートの回答を保存したDBを開きます。
image.png

このDB名はqastoreノードのDatabaseの項目で指定したものです。回答が入力されるとDBが自動的に作られます。
image.png

JSON形式でみてみるとHTMLのFORMで入力したアンケート回答が保存されているのがわかります。
image.png

アンケートの内容を変更したい場合は「質問回答ページ」ノードの中のHTMLを変更してください。NOSQLのCloudantに保存するのでFORM内の項目が増えても減ってもかまいません。HTML内のFORMの変更だけで独自の項目のアンケートを作ることができます。

image.png

収集後のデータはJSONではなく表形式にしたいときには以下の記事などを参考にDb2 Warehouse on Cloud(旧dashDB)にレプリカをとるとCSVなどにして取り回しやすくなります。

<参考>Bluemix 環境で Cloudant のデータを dashDB に格納する : まだプログラマーですが何か?
http://dotnsf.blog.jp/archives/1050869794.html

別のアンケートをとる場合にはフローをコピーして、GETとPOSTのURLおよび保存先のCloudantDBを変更すればOKです。