5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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です。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?