2018-04-03 市ヶ谷Geek★Night #17

1. Scala.js
Web
mogproject Presents
2018/04/03@ Geek Night #17

2. https://mogproject.com
▸ 2
▸ /

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