Spring+MongoDBでWebアプリケーション入門(+α)
Spring Framework + MongoDBを使用してアンケートWebアプリを作成する、追加の+α回。前回まででアンケートWebアプリ自体は完成したが、画面の見た目がチープなので今回は画面デザイン修正+アンケート項目の見直しを行おう。
完成画面
まず先に、今回修正した後の画面を掲載する。
どうだろうか?前回までの素のhtmlより、いくらか本物のWebアプリっぽくなったのではないだろうか?次章からこの画面になるようWebアプリを修正していこう。
sponsor
jsp/css(画面の作成)
まず画面の修正を行う。主な修正ポイントは以下の4点。
- レスポンシブ対応するため、metaタグでviewpointを定義
- css読み込み
- cssでスタイル変更できるように、質問のタイトルはqtitle、質問本文はqbodyというclassを指定
- アンケート項目を追加
<head> <!-- 1. viewpointの定義 --> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> <!-- 2. cssの読み込み --> <link rel="stylesheet" type="text/css" href="../css/survey.responsive.css"> <title>アンケート回答画面</title> </head> <body> <div id="header"> <p class="headmsg">セミナーアンケート</p> <p>第◯◯回の✕✕セミナーへのご参加ありがとうございました</p> <p>アンケートへのご協力をお願いします</p> <hr> </div> <div id="main"> <form:form action="${pageContext.request.contextPath}/completed" method="post" modelAttribute="surveyForm"> <form:input type="hidden" path="userid" /> <!-- 3. cssで指定できるようにclassを指定 --> <p class="qtitle">Q1:性別</p> <p class="qbody">性別について教えて下さい</p> <ul> <li><form:radiobutton path="survey1answer" label="男性" value="1"/></li> <li><form:radiobutton path="survey1answer" label="女性" value="2"/></li> </ul> <p class="qtitle">Q2:参加したセミナーについて</p> <p class="qbody">どのセミナーに参加しましたでしょうか。教えて下さい。</p> <ul> <li><form:radiobutton path="survey2answer" label="Spring セミナー" value="1"/></li> <li><form:radiobutton path="survey2answer" label="MongoDB セミナー" value="2"/></li> <li><form:radiobutton path="survey2answer" label="Java セミナー" value="3"/></li> </ul> <!-- 4. アンケート項目の追加 --> <p class="qtitle">Q3:セミナーの内容について</p> <p class="qbody">セミナーの内容はいかがでしたでしたでしょうか。教えて下さい。</p> <ul> <li><form:radiobutton path="survey3answer" label="良かった" value="1"/></li> <li><form:radiobutton path="survey3answer" label="普通" value="2"/></li> <li><form:radiobutton path="survey3answer" label="悪かった" value="3"/></li> </ul> <input type="submit" value="送信" /> </form:form> </div> </body>
answer.jspから読み込むsurvey.responsive.cssは以下の通り。ポイントとしては@media screenを指定して480pxを境にheaderとmainのdivタグの見た目を変更していることである。あとはjspで指定したqtitle、qbodyそれぞれのスタイルを指定している。
survey.responsive.css
/* 画面の横幅が481px以上 */ @media screen and (min-width:481px) { #header{ font-size: 14px; max-width: 480px; text-align: center; margin: 0 auto; } #main { max-width: 480px; margin: 0 auto; } } /* 画面の横幅が480px以下 */ @media screen and (max-width:480px) { #header{ font-size: 14px; max-width: 100%; text-align: center; } #main { max-width: 100%; } } .headmsg { font-size: 24px; text-align: center; } .qtitle { font-size: 24px; border-left: 8px solid #283593; padding: 0.6em 0.8em; margin-bottom: 5px; } .qbody { font-size: 16px; } li { display: block; list-stye: none; }
Form/Service/Entity
画面にアンケート項目が追加されたので、WebアプリとしてはForm、Serviceのロジック、Entityも修正しなければならない。
Formの修正は以下の通り。survey3answerという変数を追加してgetter/setterを追加するだけだ。
SurveyForm.java
public class SurveyForm { private String userid; private String survey1answer; private String survey2answer; private String survey3answer; //新規追加 (略) public String getSurvey3answer() { return survey3answer; } public void setSurvey3answer(String survey3answer) { this.survey3answer = survey3answer; } }
Serviceの修正は以下の通り。ロジックでFormを利用するのは、DBinsertするためにEntityに詰めなおしている箇所のみだから、そこに処理を追加する。
SurveyService.java
public class SurveyService { (略) public void insertSurveyAnswer(SurveyForm form) { SurveyAnswerEntity ent = new SurveyAnswerEntity(); ent.setUserid(form.getUserid()); ent.setDate(new Date().toString()); ent.setSurvey1answer(form.getSurvey1answer()); ent.setSurvey2answer(form.getSurvey2answer()); ent.setSurvey3answer(form.getSurvey3answer()); // 新規追加 surveyAnswerRepo.insertEntity(ent); } (略) }
Entityの修正は以下の通り。Formと同じくメンバ変数を追加するだけだ。ここでもしMongoDBでなくRDBを使用していた場合はDBのスキーマ変更が必要になるだろう。このようにDBの構造を変更することなくアプリを修正できる点が、スキーマレスのMongoDBを利用しているメリットだ。もちろんこれはデメリットでもあり、格納されるデータ構造についてDBとして何も担保しないということでもある。
SurveyForm.java
@Document(collection="surveyanswer") public class SurveyAnswerEntity { @Id private String userid; private String date; private String survey1answer; private String survey2answer; private String survey3answer; // 新規追加 public String getSurvey3answer() { return survey3answer; } public void setSurvey3answer(String survey3answer) { this.survey3answer = survey3answer; } (略)
実行
今までと同じく、MongoDBを起動してアプリをTomcat上に配置すればアプリが起動される。http://localhost:8080/SurveyApp/answer/<好きな文字列>でアクセスしてみれば、画面の見た目が変更されていることがわかるはずだ。
まとめ
今回はSpring + MongoDBで作成したアンケートWebアプリの、画面デザイン修正とアンケート項目追加を行った。画面デザイン修正はcssを用意すればよく、アンケート項目修正もMongoDBを使っていたためForm/Entityの修正だけで対応することができた。より動的でリッチな画面を作成するならcssとjqueryを組み合わせて実現するか、MEANスタックのようなjavascriptを全面に使った作りになるだろう。
sponsor