環境
OS: Windows 11
Java: OpenJDK 17.0.7
Scala : 3.3.0
Scala.js : 1.13.0
ScalaHTML: 0.1.1
ScalaCSS : 0.8.0-RC1
Akka: 2.7.0
Akka-HTTP: 10.5.2
諸々の設定は下記のようです。
build.sbt
val scala3Version = "3.3.0"
val AkkaVersion = "2.7.0"
val AkkaHttpVersion = "10.5.2"
ThisBuild / organization := "$organization$"
ThisBuild / scalaVersion := scala3Version
ThisBuild / version := "0.1.0-SNAPSHOT"
lazy val root = (project in file(".") withId "$name$")
.aggregate(server, client, shared.jvm, shared.js)
.settings(Compile / bgRun := (server / Compile / bgRun).evaluated)
lazy val server = project
.dependsOn(shared.jvm)
.dependsOn(client)
.enablePlugins(JavaAppPackaging, SbtWeb)
.settings(
libraryDependencies ++= Seq(
"org.scalameta" %% "munit" % "0.7.29" % Test,
"com.typesafe.akka" %% "akka-actor-typed" % AkkaVersion,
"com.typesafe.akka" %% "akka-stream" % AkkaVersion,
"com.typesafe.akka" %% "akka-http" % AkkaHttpVersion
)
)
lazy val client = project
.dependsOn(shared.js)
.enablePlugins(ScalaJSPlugin, ScalaJSWeb)
.settings(
scalaJSUseMainModuleInitializer := true,
libraryDependencies ++= Seq(
"org.scala-js" % "scalajs-dom_sjs1_2.13" % "2.4.0",
"com.raquo" %%% "laminar" % "15.0.0",
"com.github.japgolly.scalacss" %% "core" % "0.8.0-RC1",
"io.github.yrichika" %% "scalahtml" % "0.1.1"
)
)
lazy val shared = crossProject(JSPlatform, JVMPlatform)
.crossType(CrossType.Pure)
.in(file("shared"))
.jsConfigure(_.enablePlugins(ScalaJSWeb))
plugin.sbt
addSbtPlugin("com.github.sbt" % "sbt-native-packager" % "1.9.16")
addSbtPlugin("com.vmunier" % "sbt-web-scalajs" % "1.2.0")
addSbtPlugin("org.portable-scala" % "sbt-scalajs-crossproject" % "1.2.0")
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.0")
addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.5.0")
導入
"com.raquo" %%% "laminar" % "15.0.0"をsbtのlibraryDependenciesに追加します。
Scala.jsのソースコードを書き換えます。
ClientApplication.scala
package com.isageek.hakushimeita.xnote.client
import scala.scalajs.js.annotation._
import org.scalajs.dom
import com.raquo.laminar.api.L.{*, given}
val nameVar = Var(initial = "world")
val rootElement = div(
label("Your name: "),
input(
onMountFocus,
placeholder := "Enter your name here",
onInput.mapToValue --> nameVar
),
span(
"Hello, ",
child.text <-- nameVar.signal.map(_.toUpperCase)
)
)
// In most other examples, containerNode will be set to this behind the scenes
val containerNode = dom.document.getElementById("app")
// render(containerNode, rootElement)
// render(containerNode, test)
@JSExportTopLevel("HelloWorld")
object HelloWorld {
@JSExport
def sayHello(): Unit = {
println("Hello world!")
}
def main(args:Array[String]):Unit ={
//containerNode.innerHTML = "Hello Scala.js"
render(containerNode, rootElement)
sayHello()
}
}
ちなみに、ScalaHTML, ScalaCSS, Akka-HTTPは次のよう
HTML.scala
package com.isageek.hakushimeita.xnote.client
import scalahtml.Tags._
object MyHtml {
val htmlHead = head() {
title(){"ScalaHTML"}
}
val htmlBody = body(){
main_(){
div(){"Hello Scala HTML"} \\
div(attributes("id" -> "app")) {""}
} \\
script(
attributes("src"->"http://localhost:8080/main.js")
) { "" }
}
val html = html5() {
htmlHead \\
htmlBody
}
def render() = html
}
Style.scala
package com.isageek.hakushimeita.xnote.client
import scala.language.postfixOps
import scalacss.DevDefaults._
object MyStyles extends StyleSheet.Standalone {
import dsl._
"div.std" - (
margin(12 px, auto),
textAlign.left,
cursor.pointer,
&.hover -
cursor.zoomIn,
media.not.handheld.landscape.maxWidth(640 px) -
width(400 px),
&("span") -
color.red
)
"h1".firstChild -
fontWeight.bold
for (i <- 0 to 3)
s".indent-$i" -
paddingLeft(i * 2.ex)
def myRender() = this.render.toString
}
Main.scala
/*
@main def hello: Unit =
println("Hello world!")
println(msg)
def msg = "I was compiled by Scala 3. :)"
*/
/*
* Copyright (C) 2020-2023 Lightbend Inc. <https://www.lightbend.com>
*/
//package docs.http.scaladsl
package com.isageek.hakushimeita.xnote.server
import akka.actor.typed.ActorSystem
import akka.actor.typed.scaladsl.Behaviors
import akka.http.scaladsl.Http
import akka.http.scaladsl.model._
import akka.http.scaladsl.server.Directives._
import scala.io.StdIn
import scala.io.Source
import com.isageek.hakushimeita.xnote.client.MyHtml
import com.isageek.hakushimeita.xnote.client.MyStyles
object HttpServerRoutingMinimal {
def main(args: Array[String]): Unit = {
implicit val system = ActorSystem(Behaviors.empty, "my-system")
// needed for the future flatMap/onComplete in the end
implicit val executionContext = system.executionContext
val route =
concat(
path("") {
get {
// complete(HttpEntity(ContentTypes.`text/html(UTF-8)`, "<h1>Say hello to akka-http</h1>"))
complete(HttpEntity(ContentTypes.`text/html(UTF-8)`, MyHtml.render()))
}
},
path("Style.css"){
get {
complete(MyStyles.myRender())
}
},
path("main.js"){
get{
val iter = Source.fromFile(
"C:\\Users\\owken\\Documents\\GitHub\\xnote\\client\\target\\scala-3.3.0\\client-fastopt\\main.js"
).getLines()
var content: String = ""
for(line <- iter) {
content += line
}
complete(content)
}
}
)
val bindingFuture = Http().newServerAt("localhost", 8080).bind(route)
println(s"Server now online. Please navigate to http://localhost:8080/hello\nPress RETURN to stop...")
StdIn.readLine() // let it run until user presses return
bindingFuture
.flatMap(_.unbind()) // trigger unbinding from the port
.onComplete(_ => system.terminate()) // and shutdown when done
}
}
Javascriptファイルを生成
sbt fastLinkJS を実行します。
clientのプロジェクトのtarget/scala-3.3.0/client-fastopt
にmain.jsができます。
後はこれを、リクエストがあったときに、返してあげればOK.
個人的にてこずった点
生成されたmain.jsはHTMLの最後にscriptタグで読み込まないとうまくいきません。
最初、headタグ内でscriptタグで読みこんでいたのですが、上手くいかず、時間をかけてしまいました。
予定
あとは、LaminarとScala.jsでガリガリ書いて、フロントエンドを実装という感じ。
サーバサイドもWEB APIという形式で、処理を書いていきたい。
Slickあたりを使ってDBアクセスできるようになりたいですね。
Akka-HTTPについては、とりあえずは現状のものを使っていく予定です。
商用利用ではないからnon-productとして許されないかな…