Play FrameworkでScala.jsを使うためのセットアップ手順です。
play-scala-scalajsというテンプレートがあるので利用する。
activator new new-ui play-scala-scalajs
次のファイルが作成される。
.
├── LICENSE
├── README.md
├── activator
├── activator-launch-1.3.2.jar
├── build.sbt
├── play ... Play Frameworkのプロジェクト
│ ├── app
│ │ ├── controllers
│ │ │ └── Application.scala
│ │ └── views
│ │ ├── index.scala.html
│ │ └── main.scala.html
│ ├── conf
│ │ ├── application.conf
│ │ └── routes
│ ├── public
│ │ ├── images
│ │ │ └── favicon.png
│ │ ├── javascripts
│ │ │ └── hello.js
│ │ └── stylesheets
│ │ └── main.css
│ └── test
│ ├── ApplicationSpec.scala
│ └── IntegrationSpec.scala
├── project
│ ├── build.properties
│ └── plugins.sbt
└── scalajs ... Scala.jsのプロジェクト
└── src
└── main
└── scala
└── hello.scala
作られたプロジェクトでactivatorを起動する。
cd ./new-ui
./activator
ライブラリのダウンロードが行われるので終わるまでしばらく待つ。ダウンロードが完了したら早速サーバを立ち上げてみる。
run
コンパイルに少々時間がかかる。コンパイルが終わったら、 http://localhost:9000/ をブラウザで開く。
テンプレートでScala.jsを呼び出している部分
main.scala.htmlの@playscalajs.html.scripts("scalajsclient")がScala.jsを読み込んでいる部分です。
play/app/views/main.scala.html
@(title: String)(content: Html)
@import play.api.Play
<!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")">
@playscalajs.html.scripts("scalajsclient")
</head>
<body>
@content
</body>
</html>
HTMLではこのようにレンダリングされています。
<script src="/assets/scalajsclient-fastopt.js" type="text/javascript"></script>
<script src="/assets/scalajsclient-launcher.js" type="text/javascript"></script>
JavaScriptのコードはどこに生成されるか？
上のHTMLの<script>タグからファイル名を手がかりに探してみると、play/target/web/public/mainに生成されていることが分かります。
% find . -name scalajsclient-fastopt.js
./play/target/web/public/main/scalajsclient-fastopt.js
./scalajs/target/scala-2.11/scalajsclient-fastopt.js
Scala.jsは自動でコンパイルされる
activatorでrunしている状態であれば、Scala.jsに書いたコードは自動的にJavaScriptにコンパイルされて配置されます。
new-ui/scalajs/src/main/scala/hello.scala
import scala.scalajs.js
import scala.scalajs.js.Dynamic.global
object Hellp extends js.JSApp {
def main(): Unit ={
if (!js.isUndefined(global.window.console)) {
global.console.log("Welcome to your Play application's JavaScript!")
global.console.log("書き換えてみた！") // この行を追加
}
}
}
この状態で、 http://localhost:9000/ を開き、インスペクタのコンソールを見ると「書き換えてみた！」が表示されているはずです。