簡単アプリの開発（1）
開発前の準備作業が完了したので、ソースコードの実装に入ります。
（1）イベント登録機能 －初期表示－
イベント登録機能は画面から「イベントID」と「イベント名」を入力し「登録」ボタンを押下すると、入力した内容がDBの「EVENT」テーブルに登録されるというシンプルな機能にします。最初に、処理の流れを解説します。
-
Router：WebブラウザからのHTTPリクエストを受け、URLに対応するControllerを呼び出す。
例）「http://<サーバ>/event/create/create」へのPOSTリクエストを受けると、「EventCreate」というコントローラの「create」メソッドを呼び出す。 -
Controller：HTTPリクエストを受けてModel、Viewの呼び出しを行う。
例）「create」メソッドは、POSTされた入力データを渡しModelを呼び出す。処理結果を元にViewを呼び出す。 -
Model：DBに対する処理を行う。
例）POSTされたデータをControllerから受け取り、DBに登録する。 -
View：画面を表示する。
例）Controllerから受け取った処理結果を画面に表示する。
イベント登録画面の初期表示は「EventCreate」オブジェクトの「index」で行い、登録は「create」で行います。
まず、イベント登録画面の初期表示機能を実装します。routesファイルに次のように初期表示用のURLを定義します。
routes（/conf）
GET /event/create/ controllers.event.EventCreate.index
「/event/create/」にGETリクエストがあると、「controllers.event.EventCreate.index」を呼び出します。
「/event/create/」で呼び出される「EventCreate」オブジェクトを「controllers.event」パッケージに作成します。「EventCreate」オブジェクトには「index」メソッドと画面の入力項目を移送するフォームを実装します。
［Controller］EventCreate.scala（/app/controllers/event）
package controllers.event
import play.api._
import play.api.mvc._
import play.api.data.Form
import play.api.data.Forms._
import models.EventForm
object EventCreate extends Controller {
/** イベントフォーム */
val eventForm = Form(
mapping(
"eventId" -> text,
"eventNm" -> text)(EventForm.apply)(EventForm.unapply))
/** 初期表示 */
def index = Action {
Ok(views.html.event.eventCreate(eventForm))
}
}
「index」はイベント登録画面を初期表示するため「eventCreate.scala.html」でHTMLを生成し、「Ok」でステータスコード200のレスポンスを返します。フォーム「eventFrom」は「eventId」と「eventNm」をケースクラス「EventForm」にマッピングします。
次に、ケースクラスを作成します。コンストラクタの引数にはControllerでマッピング指定した「eventId」と「eventNm」をString型で定義します。ケースクラスは「equals」や「copy」などのメソッドやコンパニオンオブジェクトを自動生成するクラスです。
［Model］Form.scala（/app/models）
package models case class EventForm(eventId: String, eventNm: String)
次に、イベント登録画面のHTMLテンプレートファイルを作成します。Play2にはPlay Scalaテンプレートエンジンがバンドルされており、「scala.html」という拡張子で作成したテンプレートファイルにはHTMLとScalaのコードを組み合わせて記述することができます。
［View］eventCreate.scala.html（/app/views/event）
@(eventForm: Form[EventForm])
@import helper._
@main("イベント登録") {
@helper.form(action = controllers.event.routes.EventCreate.index()){
<div class="container">
<fieldset>
<legend>イベントの情報</legend>
@helper.inputText(eventForm("eventId"))
@helper.inputText(eventForm("eventNm"))
<input type="submit" value="登録" class="btn btn-primary">
</fieldset>
</div>
}
}
テンプレートファイルには、「@」を使ってScalaのコードを記述することができます。引数にはControllerから「EventForm」を受け取り、6行目のように、「form」タグは「@helper.form」という形でヘルパーを使用して記述します。「helper.form」はScalaの関数で、HTMLの「form」タグを生成します。「form」の「action」属性に「登録」ボタン押下時にSubmitするURLを指定しますが、まだ登録用のメソッドを作成していませんので、ここでは「routes」に定義した初期表示の「controllers.event.routes.EventCreate.index()」を指定します。また、10、11行目のように、テキストボックス（「input type="text"」）は「@helper.inputText」で記述できます。
では、「activator run」でアプリケーションを起動し、ブラウザから「 http://localhost:9000/event/create/」にアクセスしてイベント登録画面を表示してみましょう。
イベント登録画面が表示されました。ここで、見栄えがよくなるようにBootstrapを適用しておきます。Bootstrapは、「main.scala.html」で「bootstrap.min.css」にリンク設定を行い、HTMLでインポートする「helper」パッケージをBootstrap用の「helper.twitterBootstrap」に変更します。
［View］main.scala.html（/app/views）
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
<script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
</head>
<body>
@content
</body>
</html>
［View］eventCreate.scala.html（/app/views/event）
@(eventForm: Form[EventForm])
@import helper.twitterBootstrap._
@main("イベント登録") {
もう一度イベント登録画面を表示すると、Bootstrapが適用されていることが分かります。ただし、完全にはBootstrap3.1.1のスタイルは適用されていません。実用的なアプリでは、Bootstrap3に対応させるために「twitterBootstrapFieldConstructor.scala.html」のカスタマイズが必要になりますが、今回のサンプルの実装には支障がありませんので、このまま進めることにします。しかし、Play2.3より、Bootstrapのフィールドコンストラクタは非推奨メソッドとなりましたので、その対策やカスタマイズの方法は次回以降の記事で紹介します。
