Elm 開発サンプル

「Elm でユーザーストーリーマッピングのツールを作ってみた」の完全版

Transcript

1. &MN
   ։ൃαϯϓϧ 
   &MNೖ໳ϋϯζΦϯʹͯ
   :PTVLF
   5PSJJ
2. ࣗݾ঺հ :PTVLF
   5PSJJ
   !KJOKPS
   w &MN
   ྺ
   ೥΄Ͳ
   w &MN
   ຊ
   ࣥචத
   w *EFJO
   *OD
   ۈ຿ ରԠʂʢॏཁʣ
3. ϋϯζΦϯ͓ർΕ༷Ͱͨ͠
4. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   
5. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   
6. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   ؆୯ͳ
   50%0
   ΞϓϦ͸ॻ͚ͨ
   
7. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   ؆୯ͳ
   50%0
   ΞϓϦ͸ॻ͚ͨ
   Ͱ΋ʜ
   
8. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   ؆୯ͳ
   50%0
   ΞϓϦ͸ॻ͚ͨ
   Ͱ΋ʜ
   ·ͱ΋ͳΞϓϦ͕׬੒͢ΔΠϝʔδ͕࣋ͯͳ͍
9. ࠓ೔͓఻͍͑ͨ͜͠ͱ
10. ࠓ೔͓఻͍͑ͨ͜͠ͱ &MN
    Ͱී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ
11. ϢʔβʔετʔϦʔϚοϐϯά
    
12. &MN
    Ͱ
    ϢʔβʔετʔϦʔϚοϐϯά
    ͷπʔϧΛ࡞ͬͯΈͨ
13. TUPSZOPUFTIFSPLVBQQDPN 4UPSZ/PUFT
    .71
    WFS
14. TUPSZOPUFTIFSPLVBQQDPN 4UPSZ/PUFT
    .71
    WFS ͬ͘͟Γ͍͏ͱɺετʔϦʔʹԊͬͯ
    ΞϓϦέʔγϣϯͷػೳΛݟੵ΋ΔπʔϧͰ͢
15. ܦҢ
16. ܦҢ w *EFJO
    *OD
    Ͱ։ൃதͷ
    8FC
    αʔϏε
17. ܦҢ w *EFJO
    *OD
    Ͱ։ൃதͷ
    8FC
    αʔϏε
    w ్த͔ΒεΫϥϜಋೖ
18. ܦҢ w *EFJO
    *OD
    Ͱ։ൃதͷ
    8FC
    αʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
19. ܦҢ w *EFJO
    *OD
    Ͱ։ൃதͷ
    8FC
    αʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    w ୭΋෇ᝦΛݟͳ͘ͳͬͨ
    w ੮͔Βԕ͍
    
    ϦϞʔτϫʔΫଟ͍
20. ܦҢ w *EFJO
    *OD
    Ͱ։ൃதͷ
    8FC
    αʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    w ୭΋෇ᝦΛݟͳ͘ͳͬͨ
    w ੮͔Βԕ͍
    
    ϦϞʔτϫʔΫଟ͍
    w ΦϯϥΠϯͷπʔϧͰ΋࡞ͬͯΈΔ͔
    w ΄΅झຯ
21. %&.0
22. ղઆ
23. ߏ੒ w %#
    1PTUHSF42-
    w 4FSWFS
    /PEFKT
    &YQSFTT
    
    5ZQF4DSJQU
    w 'SPOUFOE
    &MN
24. ߏ੒ w %#
    1PTUHSF42-
    w 4FSWFS
    /PEFKT
    &YQSFTT
    
    5ZQF4DSJQU
    w 'SPOUFOE
    &MN
25. Ϗϧυ w OQN
    TDSJQU
    ͰେମͲ͏ʹ͔ͳΔ
    w XFCQBDL
    ΋࢖͓͏ͱࢥ͑͹࢖͑Δ
    w EPDLFSDPNQPTF
26. σϓϩΠɾͦͷଞ w )FSPLV
    w $JSDMF$*
27. $44 w ී௨ͷ
    $44
    ϑΝΠϧ
    DTT
    w ΠϯϥΠϯΛਪ঑͍ͯ͠ΔΘ͚Ͱ͸ͳ͍
    w είʔϓ͕ཉ͚͠Ε͹
    FMNDTT
    ͱ͔΋͋Δ
28. ϩάΠϯ w ී௨ͷ
    0"VUI
    w QBTTQPSU
    Ϟδϡʔϧ࢖༻
    w GPSN
    ཁૉͰը໘ભҠ
    w DPPLJF
29. ಉ࣌ฤू
30. ಉ࣌ฤू .PEFM 7JFX 6QEBUF
31. ಉ࣌ฤू %# .PEFM 7JFX 6QEBUF
32. ಉ࣌ฤू %# .PEFM 7JFX 6QEBUF .PEFM 7JFX 6QEBUF
33. ಉ࣌ฤू %# .PEFM 7JFX 6QEBUF .PEFM 7JFX 6QEBUF 1 1
34. ಉ࣌ฤू %# .PEFM 7JFX 6QEBUF .PEFM 7JFX 6QEBUF 1 1 1
35. ಉ࣌ฤू %# .PEFM 7JFX 6QEBUF .PEFM 7JFX 6QEBUF 1 1 1 1
36. ಉ࣌ฤू %# .PEFM 7JFX 6QEBUF .PEFM 7JFX 6QEBUF 1 1 1 1 1
37. ಉ࣌ฤू %# .PEFM 6QEBUF 1 1 1 1 .PEFM 6QEBUF 1 1 1 1 7JFX 7JFX
38. ಉ࣌ฤू 1
39. ϧʔςΟϯά w ϋογϡͰϫʔΫεϖʔε੾Γସ͑
    w Bʜ
40. ϧʔςΟϯά w ϋογϡͰϫʔΫεϖʔε੾Γସ͑
    w Bʜ
    w 3PVUF
    ΛܕͰఆ͓ٛͯ͘͠ͱศར
41. ϧʔςΟϯά w #SPXTFSBQQMJDBUJPO
    Λ࢖͏
    
42. ϧʔςΟϯά w #SPXTFSBQQMJDBUJPO
    Λ࢖͏
    
43. ϧʔςΟϯά .PEFM 7JFX 6QEBUF %#
44. ϧʔςΟϯά .PEFM 7JFX 6QEBUF %# PO6SM3FRVFTU
45. ϧʔςΟϯά 7JFX 6QEBUF %# PO6SM3FRVFTU PO6SM$IBOHF .PEFM
46. ϧʔςΟϯά 7JFX 6QEBUF %# PO6SM3FRVFTU PO6SM$IBOHF .PEFM #3322a08…
47. ϧʔςΟϯά 7JFX 6QEBUF %# PO6SM3FRVFTU PO6SM$IBOHF .PEFM #3322a08… Workspace “3322a08…”
48. ϧʔςΟϯά .PEFM 7JFX 6QEBUF %# PO6SM3FRVFTU PO6SM$IBOHF #3322a08… Workspace “3322a08…”
49. ϧʔςΟϯά .PEFM 7JFX 6QEBUF %# PO6SM3FRVFTU PO6SM$IBOHF #3322a08… Workspace “3322a08…”
50. ϧʔςΟϯά .PEFM 6QEBUF %# PO6SM3FRVFTU PO6SM$IBOHF #3322a08… Workspace “3322a08…” 7JFX
51. εΫϩʔϧͷ࣮૷
52. εΫϩʔϧͷ࣮૷
53. εΫϩʔϧͷ࣮૷ 6QEBUF .PEFM scroll = { x = .., y = .. }
54. εΫϩʔϧͷ࣮૷ 6QEBUF .PEFM scroll = { x = .., y = .. }
55. %SBH
    BOE
    %SPQ
    ͷ࣮૷
56. %SBH
    BOE
    %SPQ
    ͷ࣮૷ 6QEBUF .PEFM type_ = Note 1 start = { x = .., y = .. }
 current = { x = .., y = .. }
57. ඳըͷύϑΥʔϚϯεΛߟྀ [ viewBackground backgroundState , viewNotes notes , viewDraggingNote dragState ]
58. ඳըͷύϑΥʔϚϯεΛߟྀ [ lazy viewBackground backgroundState , lazy viewNotes notes , viewDraggingNote dragState ]
59. ඳըͷύϑΥʔϚϯεΛߟྀ [ lazy viewBackground backgroundState , lazy viewNotes notes , viewDraggingNote dragState ] 1VSF$PNQPOFOU
    XJUIPVU
    UIF
    )FBEBDIF
60. ෳࡶ͞ʹཱͪ޲͔͏
61. ෳࡶ͞ʹཱͪ޲͔͏ wܕ
    
62. ෳࡶ͞ʹཱͪ޲͔͏ wܕ
    w ΞΫηε੍ޚ
63. ෳࡶ͞ʹཱͪ޲͔͏ wܕ
    w ΞΫηε੍ޚ %BUB 6QEBUF JOUFSGBDF
64. ·ͱΊ
65. ·ͱΊ &MN
    Ͱී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ w Ұൠతͳ
    41"
    ʹඞཁͳಓ۩͸͋Δ
    w ྗΛೖΕ͍ͨͱ͜ΖҎ֎͸खΛൈ͍͍͍ͯ
66. 5IBOL
    ZPV !KJOKPS