この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
最新のplay2.0の状況
今年中のβリリースを目標に開発されているPlay framework 2.0ですが、最近も毎日のように新機能が追加されています。 playのgithub ※1上で更新履歴をみると、どのような機能が追加されているか詳細にわかるので、ぜひ確認してみてください。 先日のコミットではlessとCoffeeScriptが追加されたようです。 less ※2とはCSSを拡張するためのメタ言語です。 lessを使用すると、大規模になってくると複雑になりがちなCSSの構文において、 変数を使ったりネスト構造にできたりと、より簡潔に記述することができるようになります。 CoffeeScript ※3はruby/pythonライクな構文でjavascriptを記述できる中間言語です。 playの場合、Coffeescriptで記述したファイルを配置しておくと自動でjsファイルにコンパイルしてくれるので、手動でコンパイルする手間が省けます。
ソースのHEADを取得してセットアップ
CoffeeScriptのサポートは10月3日にコミットされたようなので、githubからソースを取得して自分でビルドする必要があります。 まずはgithubからplay2.0のソースを取得しましょう。
$ git clone https://github.com/playframework/Play20.gitこれで現状のソースを取得できます。 githubにはビルド方法も記述してありますので、そのとおりにビルドしてみましょう。
$ cd Play20/framework
$ ./build
> build-repositoryこれで準備ができました。サンプルアプリケーションを作成してためしてみましょう。
サンプルアプリケーション作成
Play20/samplesの下に、coffeeという名前のディレクトリを作成しましょう。
$ cd Play20/samples
$ mkdir coffee
$ cd coffee
$ ../../play newこれでプロジェクトが作成されます。
そのうちデフォルトで対応すると思いますが、現時点では少し修正しなければいけません。 まずconf/routesファイルを修正します。
GET /public/*file controllers.Assets.at(path="/public", file)上記記述箇所を下記のように修正してください。
GET /assets/*file controllers.Assets.at(path="/public", file)現在静的ファイルはpublicの下に配置されていますが、これは使用しないので削除してしまってください。
次にappディレクトリの下にassets/scriptsディレクトリとassets/stylesheetsディレクトリを作成します。 assets/scriptsディレクトリにtest.coffeeファイルを下記内容で作成してください。
root = exports ? this
root.hello = (name) ->
alert nameCoffeeScriptでhello関数を定義します。単純に、アラートで渡された文字列を表示するだけです。 次にCSSをlessで作成します。assets/stylesheetsディレクトリに_fn.lessファイルを作成します。
a {
color: red;
}もう一つファイルを作成します。assets/stylesheetsディレクトリにstyles.lessファイル作成します。
@import "_fn.less";
@nice-blue: #5B83AD;
h1 {
color: @nice-blue;
}最後にapp/views/index.scala.htmlを編集します。
@(name:String)
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" type="image/png" href="http://www.playframework.org/public/images/favicon.png">
<link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("stylesheets/styles.css")">
<script src="@routes.Assets.at("scripts/test.js")" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>@name</h1>
<input type='button' value='push' onclick='hello("@name")'/>
</body>
</html>assetsディレクトリ内容を読み込んでいます。 ボタンを押すとtest.coffeeがコンパイルされた結果のjsファイルに定義されているhello関数を呼び出しています。
では実行してみましょう。
$ cd samples/coffee
$ ../../play
> runlocalhost:9000にアクセスし、ボタンを押すと、test.coffeeで定義した関数によってアラートが表示されます。 ブラウザ上のソースと確認してみると、scriptタグは下記のようにjsファイルへのリンクへ変換されています。
<script src="/assets/scripts/test.js" type="text/javascript" charset="utf-8"></script>test.jsの内容は下記のようになっています。
(function() {
var root;
root = typeof exports !== "undefined" && exports !== null ? exports : this;
root.hello = function(name) {
return alert(name);
};
}).call(this);test.coffeeが自動でコンパイルされ、jsファイルに変換されているのがわかります。
まとめ
play2.0ではScalaテンプレート＋CoffeeScript + lessで、快適なコーディングができそうですね。 github上のソースは、日々更新されているので、たまに確認してみるとおもしろいと思います。
2
