フロントエンド初心者の大学生が Scala.js で Web アプリを作ってみた話
3 likes1,581 views
This document summarizes a presentation about the Shogi Playground website and application. It discusses how the application was built using Scala.js and JavaScript, with Scala handling backend logic and JavaScript managing frontend interactions. It also overviewed the State-Action-Model architecture used to structure application state updates and processing user actions. The document provided links to the application and source code repositories for further details.
![Shogi Playground
USEN (Url Safe sfen-Extended Notation)
▸
▸ URL
~ ~ 1 ~ 2
[ …]
. 1 ][ 2 …] .
[
. 1 ][ 2 …] .
[](https://image.slidesharecdn.com/shogiplayground-180403020006/85/Scala-js-Web-15-320.jpg)
![Shogi Playground
USEN (Url Safe sfen-Extended Notation)
▸
▸
▸ : 1 - 1
▸ :
. 1
][ 2
…].
[](https://image.slidesharecdn.com/shogiplayground-180403020006/85/Scala-js-Web-17-320.jpg)
![Shogi Playground
USEN (Url Safe sfen-Extended Notation)
▸
▸
▸ ( * 81 + ) * 2 + ( 1)
▸ 3 36 ([0-9a-z])
▸
▸ : 0 (1 ) 80 (9 )
▸ : 81 + ( ->10, ->11, ->12, ->13, ->9, ->14, ->15,
->8, ->2, ->3, ->4, ->5, ->6, ->7)
▸ : 0 (1 ) 80 (9 )](https://image.slidesharecdn.com/shogiplayground-180403020006/85/Scala-js-Web-18-320.jpg)
![Shogi Playground
JavaScript
1. jQuery / Bootstrap
2. Google APIs Client Library for JavaScript
‣ URL Shortener
3. clipboard.js
‣
4. FileSaver.js
‣
5. lz-string.js
‣ /
6. ecl_new.js
‣ ( )
Scala JS
( )
package com.mogproject.mogami.frontend.api
import org.scalajs.dom.{Element, NodeListOf}
import scala.scalajs.js
import scala.scalajs.js.annotation.JSGlobal
import scala.scalajs.js.|
@js.native
@JSGlobal("Clipboard")
class Clipboard(selector: String | Element | NodeListOf[Element] = js.native,
options: Clipboard.Options = js.native) extends js.Object {
def on(`type`: String, handler: js.Function): Clipboard = js.native
def destroy(): Unit = js.native
}
@js.native
@JSGlobal("Clipboard")
object Clipboard extends js.Object {
@js.native
trait Options extends js.Object {
var action: js.Function1[Element, String] = js.native
var target: js.Function1[Element, Element] = js.native
var text: js.Function1[Element, String] = js.native
}
@js.native
trait Event extends js.Object {
var action: String = js.native
var text: String = js.native
var trigger: Element = js.native
def clearSelection(): Unit = js.native
}
}
https://github.com/mogproject/mog-frontend/blob/master/src/main/scala/
com/mogproject/mogami/frontend/api/Clipboard.scala](https://image.slidesharecdn.com/shogiplayground-180403020006/85/Scala-js-Web-20-320.jpg)
![Shogi Playground
SAM
▸ State: Model View
trait SAMState[M <: SAMModel] {
def model: M
def view: SAMView
def render(newModel: M): (SAMState[M], Option[SAMAction[M]])
}](https://image.slidesharecdn.com/shogiplayground-180403020006/85/Scala-js-Web-22-320.jpg)
{
def doAction(action: SAMAction[M]): Unit = {
val result: Option[M] = action.execute(state.model)
result match {
case Some(nextModel) =>
val (nextState, nextAction) = state.render(nextModel)
state = nextState
nextAction match {
case Some(a) => doAction(a)
case None =>
}
case None =>
}
}
}
: https://github.com/mogproject/mog-frontend/blob/master/src/main/scala/com/mogproject/mogami/frontend/sam/SAM.scala](https://image.slidesharecdn.com/shogiplayground-180403020006/85/Scala-js-Web-23-320.jpg)
フロントエンド初心者の大学生が Scala.js で Web アプリを作ってみた話
- 1. Scala.js Web mogproject Presents 2018/04/03@ Geek Night #17
- 3. Why North Carolina? ▸ ▸ : IBM, SAS, Red Hat, Cisco, ... ▸ ▸ ▸ ▸ ▸ © TripAdvisor
- 4. (1) ▸ Facility Location Problems: the p-median problem ▸ (p) ▸ NP ▸ Linear Programming ▸ p-median ▸ Dr. Matthias F. Stallmann / Dr. Aissa Oudjit @ North Carolina State University
- 5. (2) ▸ IBM Watson ▸ Abstract ▸ : / IBM ▸ ICACON 2018 (5/24-26 ) https://www.ibm.com/solutions/education/cloudacademy/us/en/cloud_academy_conference_2018.html
- 6. ▸ Shogi Playground ▸ https://play.mogproject.com/ ▸ / / ▸ Shogi Playground Live! ▸ https://live.mogproject.com/ ▸ / ▸ Shogi Bot ▸ https://www.facebook.com/shogibot/ ▸ Facebook Messenger Scala.js Scala Scala.js Scala Shogi Bot
- 7. ‣ Shogi Playground Shogi Playground Shogi Playground Agenda
- 8. Shogi Playground ▸ (Firefox / Chrome /Safari ) URL https://play.mogproject.com ▸ ▸ ▸ ▸ ▸
- 9. Shogi Playground ▸ ▸ ▸ ( / )
- 10. Shogi Playground ▸ Flash ▸ : Web http://www.shogi.pl/level-1-shogi-course/lesson-two-the-pieces/
- 11. Shogi Playground ‣ Shogi Playground Shogi Playground Agenda
- 12. Shogi Playground ▸ ▸ Scala ▸ ▸ SAM ▸ ( ) ▸ ▸ ▸ (SVG) ( )
- 13. Shogi Playground Scala ▸ I/O (mog-core-scala) ▸ / mog-core-scala mog-frontend mog-fb-bot mog-live Shogi Playground Shogi Playground Live! Shogi Bot Scala.js Scala ScalaScala.js Scala.js Scala https://github.com/mogproject/mog-core-scala https://github.com/mogproject/mog-frontend https://github.com/ mogproject/mog-playground mog-playground Scala.js
- 14. Shogi Playground ▸ (GitHub Pages ) ▸ ▸ No ▸ ▸ https://github.com/mogproject/mog-playground/wiki/Query-Parameters
- 15. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ URL ~ ~ 1 ~ 2 [ …] . 1 ][ 2 …] . [ . 1 ][ 2 …] . [
- 16. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ -> "" ( ) ▸ -> SFEN ▸ '/' -> '_', ' ' ( ) -> '.', '+' -> 'z' ▸ : lnsgk2nl_1r4gs1_p1pppp1pp_1p4p2_7P1_2P6_PP1PPPP1P_1SG4R1_LN2KGSNL.b.Bb https://en.wikipedia.org/wiki/Shogi_notation#SFEN
- 17. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ ▸ : 1 - 1 ▸ : . 1 ][ 2 …]. [
- 18. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ ▸ ( * 81 + ) * 2 + ( 1) ▸ 3 36 ([0-9a-z]) ▸ ▸ : 0 (1 ) 80 (9 ) ▸ : 81 + ( ->10, ->11, ->12, ->13, ->9, ->14, ->15, ->8, ->2, ->3, ->4, ->5, ->6, ->7) ▸ : 0 (1 ) 80 (9 )
- 19. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ : "i" ▸ : "r" ▸ : "t" ▸ : "p" ▸ : "j" ▸ USEN : ~0.7ku36e7bq0rs83q0io9lo4be8uc31u9us1sc7ga1im8la09o8cm20u88231s8hc46u7lw5bu7gc2jm9cm2sq6ti bgu8pu1bs6gs6cd8uc05m5oi0dm7ls09k8ko0nabfs41cbfc30w60x1weby62xa61s21w40hbzebtc4ae10y35q2 4w2k60vubds7h88vh5as2r845v1scbj80i22rr1j441d2f20s8a4e2sq9y8boqbmmbca67s8gs1ek3xobao4wsc381 n67cb2vobim9q87ga1i4bgqboo3t6517bp092i6bi2n4bv08443k21e22f20ek3k42em.r -> https://goo.gl/QXZJkP
- 20. Shogi Playground JavaScript 1. jQuery / Bootstrap 2. Google APIs Client Library for JavaScript ‣ URL Shortener 3. clipboard.js ‣ 4. FileSaver.js ‣ 5. lz-string.js ‣ / 6. ecl_new.js ‣ ( ) Scala JS ( ) package com.mogproject.mogami.frontend.api import org.scalajs.dom.{Element, NodeListOf} import scala.scalajs.js import scala.scalajs.js.annotation.JSGlobal import scala.scalajs.js.| @js.native @JSGlobal("Clipboard") class Clipboard(selector: String | Element | NodeListOf[Element] = js.native, options: Clipboard.Options = js.native) extends js.Object { def on(`type`: String, handler: js.Function): Clipboard = js.native def destroy(): Unit = js.native } @js.native @JSGlobal("Clipboard") object Clipboard extends js.Object { @js.native trait Options extends js.Object { var action: js.Function1[Element, String] = js.native var target: js.Function1[Element, Element] = js.native var text: js.Function1[Element, String] = js.native } @js.native trait Event extends js.Object { var action: String = js.native var text: String = js.native var trigger: Element = js.native def clearSelection(): Unit = js.native } } https://github.com/mogproject/mog-frontend/blob/master/src/main/scala/ com/mogproject/mogami/frontend/api/Clipboard.scala
- 21. Shogi Playground SAM (State - Action - Model) ▸ http://sam.js.org/ by Jean-Jacques Dubray ▸ ▸ V = f(M) ▸ Model(M): ▸ State(S): Model View Action ▸ Action(A): API
- 22. Shogi Playground SAM ▸ State: Model View trait SAMState[M <: SAMModel] { def model: M def view: SAMView def render(newModel: M): (SAMState[M], Option[SAMAction[M]]) }
- 23. Shogi Playground SAM ▸ View : SAM.doAction(SomeAction(data)) class SAM[M <: SAMModel](private[this] var state: SAMState[M]){ def doAction(action: SAMAction[M]): Unit = { val result: Option[M] = action.execute(state.model) result match { case Some(nextModel) => val (nextState, nextAction) = state.render(nextModel) state = nextState nextAction match { case Some(a) => doAction(a) case None => } case None => } } } : https://github.com/mogproject/mog-frontend/blob/master/src/main/scala/com/mogproject/mogami/frontend/sam/SAM.scala
- 24. Shogi Playground ▸ ▸ ▸ JVM / JS ▸ ( ) & ▸ LocalStorage
- 25. Shogi Playground Shogi Playground ‣ Shogi Playground Agenda
- 26. Shogi Playground (1) ▸ ▸ URI 2000 ▸ / Google URL Shortener ▸ ▸ ( ) ▸ /
- 27. Shogi Playground (2) ▸ ( / ) ▸ ▸ ▸ YouTube (YouTuber !?)
- 28. ▸ Scala.js Web ▸ / Scala ▸ JavaScript ▸ SAM ( )
- 29. Thank you! ▸ Shogi Playground https://play.mogproject.com ▸ ▸ Twitter -> https://twitter.com/mogproject ▸ GitHub Issues -> https://github.com/mogproject/mog-playground/issues