2014-04-16

Play Frameworkに挑戦（Java編　その５）　～JSON／ jQuery／CoffeeScriptを使用する

前回の続き

前回ではモデルの登録処理を実装した。

今回は登録したエンティティを取得し画面に表示する処理である。イントロダクション動画では13:00～終わりまで。
Introduction to Play Framework for Java developers on Vimeo

JSONでデータを返す

最近ではAjaxなどのデータ転送に使われるデータフォーマットととして、XML形式に代わってJSON形式が使用されることが多いようだ。
データベースに保存した全エンティティを取得しJSON形式で取得するために次のようにコードを追加する。

conf/routes に下記追加

GET		/bars		controllers.Application.getBars()

controllers/Application.java に下記追加。

import java.util.List;
import play.db.ebean.Model;
import static play.libs.Json.toJson;

    public static Result getBars() {
    	List<Bar> bars = new Model.Finder(String.class, Bar.class).all();
    	return ok(toJson(bars));
    }

ブラウザから localhost:9000/bars にアクセスしてみると、下記のようにJSON形式のデータが返されていることが分かる。

f:id:FryingHighAgain:20140317223822p:plain

CoffeeScriptでjQueryを使う

いまさら言うまでもないことであるが、ブラウザで動作するプログラミング言語いわゆるクライアントサイドスクリプトとしての絶対的地位にあり、AjaxやHTML5により益々重要度の増しているのがJavaScript(ECMAScript)であり、最新のプログラミング言語ランキング*1では、Javaを抜いて１位だという調査結果もあるほどである。
しかし、重要ではあるが皆が皆JavaScriptという言語を気に入っているというわけではないようである。JavaScriptへの変換を前提とした言語が複数生み出されており、その一つがCoffeeScriptという言語だそうだ。

views/index.scala.html を下記のように変更。

@(message: String)

@main("Welcome to Play") {

	<script src='@routes.Assets.at("javascripts/index.js")'></script>

	<ul id="bars"></ul>

	<form action="@routes.Application.addBar()" method="post">
		<input name="name">
		<input type="submit">
	</form>

}

<ul>タグの部分は、jQueryで操作することになるHTML要素だ。
javascripts/index.js は次のCoffeeScriptのソースファイルが変換されたJavaScriptファイルだ。

assets/javascripts/index.coffee

# ->
	$.get "/bars", (data) ->
		$.each data, (index, bar) ->
			$("#bars").append $("<li>").text bar.name

さて、今一度ブラウザから localhost:9000/ のページをリフレッシュすると
入力フォームの上部に、登録した名前の一覧が表示される。
f:id:FryingHighAgain:20140318000333p:plain

念のためHTMLソースも確認。
f:id:FryingHighAgain:20140318000402p:plain

記述したCoffeeScriptはこのようにJavaScriptへ変換されたようだ。
f:id:FryingHighAgain:20140318000415p:plain

今回のまとめ

５回にわたりPlay Frameworkのほんの触りの部分をイントロダクション動画をもとに挑戦してみたが、正直Webアプリ開発バリバリの人にとっては、これといって特に目新しいこともない退屈な内容ではなかったかと思う。だが、門外漢な私にとってはORマッピングや自動テストフレームワークなど普段ほとんど使ってこなかった現代的開発に触れることができ、「一から開発技術を鍛え直す」というブログタイトル通りのよいお勉強になったと満足している。

*1:The RedMonk Programming Language Rankings: January 2014 – tecosystems

2014-04-09

Play Frameworkに挑戦（Java編　その４）　～モデルの作成と登録処理～

Play Framework

前回の続き

前回ではPlay Frameworkでの自動テストを実行してみた。

今回は前々回ででてきたＭＶＣモデルの残りのＭ（モデル）についての解説ということになる。イントロダクション動画では8:00～13:00のあたりまで。
Introduction to Play Framework for Java developers on Vimeo

モデルの作成

モデル (models/Bar.java)

モデルについてはPlay Frameworkでは初期プロジェクトになにも作成されていない状態なので、自分で一から作っていくようだ。

動画の8:00～9:00あたりでBarクラスというエンティティクラスを作成している。
動画ではIntelliJ IDEAが使われており、素晴らしい補完機能によりサクサクとコーディングされて行く様子がみられるが、Eclipseを使ってもほぼ同様に作成していくことができる。

models/Bar.java

package models;

import javax.persistence.Entity;
import javax.persistence.Id;
import play.db.ebean.Model;

@Entity
public class Bar extends Model {

	@Id
	public String id;

	public String name;
}

登録機能の追加

データベースの利用 (conf/application.conf)

インメモリデータベース*1を使用するために、下記の部分のコメントを外す。

db.default.driver=org.h2.Driver
db.default.url="jdbc:h2:mem:play"

またEbean*2が対象とするクラスを指定するため？下記の部分もコメントを外す。

ebean.default="models.*"

登録処理の追加

conf/routesファイルに下記記述を追加

POST	/bars			controllers.Application.addBar()

controllers/Application.javaにメソッド追加

import models.Bar;
import play.data.Form;

    public static Result addBar() {
    	Bar bar = Form.form(Bar.class).bindFromRequest().get();
    	bar.save();
    	return redirect(routes.Application.index());
    }

上記コードを解釈してみると

フォームで入力された値を受け取りBarエンティティを作成。
エンティティをデータベースへ保存。
アプリケーションのルートであるindexへリダイレクト

ということのようだ。

入力フォームの作成
views/index.scala.htmlを変更

@(message: String)

@main("Welcome to Play") {

	<form action="@routes.Application.addBar()" method="post">
		<input name="name">
		<input type="submit">
	</form>

}

動作確認

ブラウザからページをリフレッシュしてみると、下記のようなページが表示される。

f:id:FryingHighAgain:20140317011918p:plain

まだオブジェクトにマッピングされるテーブルが存在しないために、このようなページが表示される。わざわざテーブル作成のスクリプトを自動生成してくれるご親切。

こういうところを見ると『オブジェクトが主でリレーショナルが従。テーブルはあくまでオブジェクトの永続化の先の一つ』という思想を感じられる気がする。

「Apply this script now!」　というボタンを押すと、実際にテーブルを作成してくれ次のような画面が表示される。
「送信」ボタンを押すと内容が登録されるようだが、この時点ではまだ本当に登録できたのか確認できない。

f:id:FryingHighAgain:20140317020719p:plain

今回はここまで。

*1:今流行りのインメモリデータベース。H2というJavaで記述されたデータベースのようだ。 H2 Database Engine

*2:EbeanとはここのORマッピングツールのことらしい。 Avaje Ebean ORM Peristence Layer (Java) - Compare to JPA

2014-04-02

Play Frameworkに挑戦（Java編　その３）　～修正と自動テスト～

Play Framework

前回の続き

前回ではPlay Frameworkのソース構成について確認した。

さて今回はイントロダクション動画の3:30～8:00あたりまで、簡単なソースの修正と自動テストについて確認してみよう。
Introduction to Play Framework for Java developers on Vimeo

動画の3:30～6:00のように
ビューに渡すパラメータを変更したり、ビューの内容を変更しても
ソースを保存してブラウザからリフレッシュすれば、自動的にリコンパイルされ更新内容が反映される。

f:id:FryingHighAgain:20140316001731p:plain

自動テスト

Play Frameworkで作成された初期プロジェクトには
test/ApplicationTest.java と
test/IntegrationTest.java というサンプルコードが作成されている。

>play test

と実行することで自動テストの結果を得ることができる。
すべてのテストが通れば次のような感じになる。

f:id:FryingHighAgain:20140316010555p:plain

Play Frameworkでは
JUnit と Selenium - Web Browser Automation
を利用しいろいろなテストがサポートされるようで*1、
ユニットテスト程度の知識しかない私にとっては、踏み込んだ勉強が必要な部分だ。

今回はこの辺まで。

*1:Java開発によるテストについてはhttp://www.playframework-ja.org/documentation/2.1.5/JavaTestを参照のこと。

2014-03-26

Play Frameworkに挑戦（Java編　その２）　～構造を理解する～

Play Framework

前回の続き

前回はPlay Frameworkで作成された初期ページの確認までをした。

さて今回はイントロダクション動画の2:00～6:00あたりのソースの構造について確認してみよう。
Introduction to Play Framework for Java developers on Vimeo

ルーティング設定（conf/routes）

routesファイルにはクライアントからのHTTPリクエストとそれを処理するControllerのメソッドが記述されている。

GET     /                           controllers.Application.index()

書式は

HTTPメソッド | URI | 呼び出されるメソッド

コントローラー　（controllers/Application.java）

    public static Result index() {
        return ok(index.render("Your new application is ready."));
    }

MVCモデルのコントローラー(C)にあたる部分。

コードの okメソッドは、play.mvc.Controllerクラスのスーパークラスであるplay.mvc.Resultsクラスのメソッドで、HTTPステータス 200 OK を返すようだ。

index.render()の部分は、次のindex.scala.htmlというビューのレンダリングを行っている様子。

ビュー　（views/index.scala.html , main.scala.html）

MVCモデルのビュー(V)にあたる部分。

「scala.html」という拡張子のファイルはPlay Frameworkのテンプレートファイルだそうだ。

index.scala.html

@(message: String)

@main("Welcome to Play") {

    @play20.welcome(message, style = "Java")

}

よくはわからないが、mainという別のビューを呼び出しているらしい。

main.scala.html

@(title: String)(content: Html)

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <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>

モデル

まだこの時点ではMVCモデルのモデル(M)にあたる部分はない。
動画では8:00あたりから説明があるので、次々回あたりに触れることになりそう。

とりあえず、今回はこれまで。

2014-03-19

Play Frameworkに挑戦（Java編　その１）～とりあえず動かしてみる～

Play Framework

Play FrameworkというScala/JavaのWebフレームワークを試してみたいと思う。

次のサイトから現時点で最新の2.2.2をダウンロードした。
http://www.playframework.com/

とりあえずトップページにあるイントロダクション動画の通りにやってみたいと思う。
Introduction to Play Framework for Java developers on Vimeo
（しゃべっている英語はよくわからないけど、まあなんとかなるでしょう）
今回はこの動画の～2:00までをやってみる。

まずはプロジェクト作成

>play new foobar

途中JavaにするかScalaにするか尋ねられるが、今回は動画の通りしてみたいのでJavaを選択。

プロジェクト作成後、使用するIDE用のプロジェクトに変換。
動画ではIntelliJ IDEAを使っているが、今回はEclipseを使うことにする。

>cd foobar
>play eclipse

貧弱なマシン環境のためメモリ不足が発生したり少し手間取ったが
なんとかEclipseプロジェクトが出来上がった。

f:id:FryingHighAgain:20140315193117p:plain

サーバーを起動してみる。この日はなぜかデフォルトの9000番ポートで起動しないので
8080番を指定して起動。

>play "run 8080"

ブラウザから localhost:8080/ にアクセスしてみる。
f:id:FryingHighAgain:20140315195428p:plain

今回はこの辺まで。

今後の予定記事

Play Frameworkに挑戦（Java編　その１）　～とりあえず動かしてみる～　3/19
Play Frameworkに挑戦（Java編　その２）　～構造を理解する～　3/26予定
Play Frameworkに挑戦（Java編　その３）　～修正と自動テスト～　4/2予定
Play Frameworkに挑戦（Java編　その４）　～モデルの作成と登録処理～　4/9予定
Play Frameworkに挑戦（Java編　その５）　～JSON／ jQuery／CoffeeScriptを使用する～　4/16予定

2014-03-15

Scala に挑戦

Scala

ここ最近Scalaという言語が人気なようで*1、ちょいと触ってみたいと思う。

ではまずはScalaのインストール。
今回は次のサイトから 2.10.3をインストールした。
http://www.scala-lang.org/download

Scalaの特徴として、オブジェクト指向言語と関数型言語のハイブリッド言語であることが挙げられるそうな。
それぞれの特徴をみてみよう。

オブジェクト指向のサンプル

非常に簡単なクラスのサンプルコードを書いてみる。

// Person.scala

class Person(name: String)
{
    def greet() = println(s"My name is $name.")
}

var aPerson = new Person("Bob")
aPerson.greet()

実行結果は

>scala Person.scala
My name is Bob.

関数型のサンプル

非常に簡単なリスト操作を書いてみる。
面倒なので対話型インタープリタにて確認した。

Scala

scala> List(20, 14, 3, 15, 6, 18).filter(_ >= 10)
res0: List[Int] = List(20, 14, 15, 18)

また比較として他の関数型言語であるHaskellとScheme(Gauche)のコードも書いてみる。

Haskell

Prelude> filter (>=10) [20, 14, 3, 15, 6, 18]
[20,14,15,18]

Scheme

gosh> (filter (lambda(x) (>= x 10)) '(20 14 3 15 6 18))
(20 14 15 18)

本日のまとめ

静的型付け言語でありながらも
型推論と関数型のために非常にコードがシンプルでよい。
今回試していないがパターンマッチングも使えるようだ。

ただきちんと使いこなすには、まだまだ勉強が必要だ。

*1:2014年1月のプログラミング言語ランキングでScalaは13位 The RedMonk Programming Language Rankings: January 2014 – tecosystems

JSONでデータを返す

CoffeeScriptでjQueryを使う

今回のまとめ

モデルの作成

モデル (models/Bar.java)

登録機能の追加

データベースの利用 (conf/application.conf)

登録処理の追加

動作確認

自動テスト

ルーティング設定 （conf/routes）

コントローラー （controllers/Application.java）

ビュー （views/index.scala.html , main.scala.html）

モデル

今後の予定記事

オブジェクト指向のサンプル

関数型のサンプル

本日のまとめ

ルーティング設定（conf/routes）

コントローラー　（controllers/Application.java）

ビュー　（views/index.scala.html , main.scala.html）