SEチャンネル

ITについてできる限り書くメモ

Spring+MongoDBでWebアプリケーション入門(+α)

Spring Framework + MongoDBを使用してアンケートWebアプリを作成する、追加の+α回。前回まででアンケートWebアプリ自体は完成したが、画面の見た目がチープなので今回は画面デザイン修正+アンケート項目の見直しを行おう。

完成画面

まず先に、今回修正した後の画面を掲載する。

f:id:tkmtys:20151012151244p:plain

どうだろうか?前回までの素のhtmlより、いくらか本物のWebアプリっぽくなったのではないだろうか?次章からこの画面になるようWebアプリを修正していこう。

sponsor

jsp/css(画面の作成)

まず画面の修正を行う。主な修正ポイントは以下の4点。

  1. レスポンシブ対応するため、metaタグでviewpointを定義
  2. css読み込み
  3. cssでスタイル変更できるように、質問のタイトルはqtitle、質問本文はqbodyというclassを指定
  4. アンケート項目を追加

実際に修正したanswer.jspは以下のようになる。

answer.jsp

<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の修正だけで対応することができた。より動的でリッチな画面を作成するならcssjqueryを組み合わせて実現するか、MEANスタックのようなjavascriptを全面に使った作りになるだろう。

sponsor