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](https://qiita-image-store.s3.amazonaws.com/0/223763/636e10fb-560c-702f-16c7-6bf5dde407eb.png)

アプリ名を適当に決めて、アンケートデータの保存先になるCloudantも作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/67e2f9ca-7247-ab50-e97c-0cfe2d2b33c4.png)

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


![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/0e65e153-c1ca-3621-7589-08f07a2dcb8c.png)

Node-REDのインスタンスの設定をします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/57a1a4ce-7247-6977-1d4e-3004d4942cbf.png)

Node-REDのエディターに接続するユーザー・パスワードを指定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/a0d5b3b4-ee19-a302-0b79-40a848db02f1.png)

Nextで進みます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/0caa9eb7-8ccb-2bb9-9897-99a4066907c3.png)

Finishで完了します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/7602365a-3209-486c-7c8a-361f2f684c91.png)

Node-REDのフローエディターを起動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/0df2be46-91a2-0003-688c-3669d05bef61.png)

クリップボードから以下のコードを読み込みます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/c18d69a2-3094-a50d-e32a-33ac432cb371.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【 １ 】　<strong>講演１<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](https://qiita-image-store.s3.amazonaws.com/0/223763/4224272d-8d08-97ac-7536-d45f3dca27ab.png)

「質問回答ページ」のノードにHTMLでアンケートのページを記述しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/95d28a1e-8614-0677-a932-c868b9060ce4.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/0af2fd56-3e86-054b-6a9a-86be16eec22d.png)


デプロイをクリックします。これでアンケートアプリは完成です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/1aaef095-5fa5-fe5b-d13b-79c2cc80b2b1.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/91ec736a-d767-9988-e60d-91798f822b4b.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/2c4c0be1-547d-d751-eb2e-695de78a2e89.png)

テストデータ入力をして送信ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/fa9e12a1-7679-fcf6-33b6-9cbfc201d213.png)

以下のようにありがとうページが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/e0f5905c-baad-0787-43c8-9d0066d623c4.png)

このHTMLは「ありがとうページ」のノードに記述されたHTMLを表示しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/cb81a9d6-bafc-e9f2-a612-d3d261ff37f2.png)

テストデータがCloudantに入力されたことを確認します。
IBM CloudのCloud Foundryのアプリの画面に戻り、接続をクリックしてアプリが接続しているCloudantDBを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/9424c7eb-1716-263b-4a5d-c504e71ba556.png)

LAUCHボタンをクリックしてCloudantのダッシュボードを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/e18c9807-9107-662b-9277-95621d4575fe.png)

アンケートの回答を保存したDBを開きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/6fc9bb11-1d9d-3b31-47a7-fb1524284396.png)

このDB名はqastoreノードのDatabaseの項目で指定したものです。回答が入力されるとDBが自動的に作られます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/28ecddde-5307-a8ba-c83d-69902363e62b.png)


JSON形式でみてみるとHTMLのFORMで入力したアンケート回答が保存されているのがわかります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/134965ef-1ac2-0430-48ef-8a7bf4992113.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/223763/bcd621d1-49b7-3ee1-5a50-692217d6001f.png)

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

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


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