Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

フロントエンド初心者の大学生が Scala.js で Web アプリを作ってみた話

467 views

Published on

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

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

フロントエンド初心者の大学生が Scala.js で Web アプリを作ってみた話

  1. 1. Scala.js Web mogproject Presents 2018/04/03@ Geek Night #17
  2. 2. https://mogproject.com ▸ 2 ▸ /
  3. 3. Why North Carolina? ▸ ▸ : IBM, SAS, Red Hat, Cisco, ... ▸ ▸ ▸ ▸ ▸ © TripAdvisor
  4. 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. 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. 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. 7. ‣ Shogi Playground Shogi Playground Shogi Playground Agenda
  8. 8. Shogi Playground ▸ (Firefox / Chrome /Safari ) URL 
 https://play.mogproject.com ▸ ▸ ▸ ▸ ▸
  9. 9. Shogi Playground ▸ ▸ ▸ ( / )
  10. 10. Shogi Playground ▸ Flash ▸ : Web 
 http://www.shogi.pl/level-1-shogi-course/lesson-two-the-pieces/
  11. 11. Shogi Playground ‣ Shogi Playground Shogi Playground Agenda
  12. 12. Shogi Playground ▸ ▸ Scala ▸ ▸ SAM ▸ ( ) ▸ ▸ ▸ (SVG) ( )
  13. 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. 14. Shogi Playground ▸ (GitHub Pages ) ▸ ▸ No ▸ ▸ 
 https://github.com/mogproject/mog-playground/wiki/Query-Parameters
  15. 15. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ URL ~ ~ 1 ~ 2 [ …] . 1 ][ 2 …] . [ . 1 ][ 2 …] . [
  16. 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. 17. Shogi Playground USEN (Url Safe sfen-Extended Notation) ▸ ▸ ▸ : 1 - 1 ▸ : . 1 ][ 2 …]. [
  18. 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. 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. 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. 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. 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. 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. 24. Shogi Playground ▸ ▸ 
 ▸ JVM / JS ▸ ( ) 
 & ▸ LocalStorage
  25. 25. Shogi Playground Shogi Playground ‣ Shogi Playground Agenda
  26. 26. Shogi Playground (1) ▸ ▸ URI 2000 ▸ / Google URL Shortener ▸ ▸ ( ) ▸ /
  27. 27. Shogi Playground (2) ▸ ( / ) ▸ ▸ ▸ YouTube (YouTuber !?)
  28. 28. ▸ Scala.js 
 Web ▸ / Scala ▸ JavaScript ▸ SAM ( )
  29. 29. Thank you! ▸ Shogi Playground
 
 https://play.mogproject.com ▸ ▸ Twitter -> https://twitter.com/mogproject ▸ GitHub Issues -> https://github.com/mogproject/mog-playground/issues

×