Elm 開発サンプル

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

Transcript

1. &MN։ൃαϯϓϧ
   &MNೖ໳ϋϯζΦϯʹͯ
   :PTVLF5PSJJ
   

   View Slide

2. ࣗݾ঺հ
   :PTVLF5PSJJ!KJOKPS
   w &MNྺ೥΄Ͳ
   w &MNຊࣥචத
   w *EFJO*ODۈ຿
   ରԠʂʢॏཁʣ
   

   View Slide

3. 
   ϋϯζΦϯ͓ർΕ༷Ͱͨ͠
   

   View Slide

4. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   

   View Slide

5. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   

   View Slide

6. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   ؆୯ͳ50%0ΞϓϦ͸ॻ͚ͨ
   

   View Slide

7. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   ؆୯ͳ50%0ΞϓϦ͸ॻ͚ͨ
   Ͱ΋ʜ
   

   View Slide

8. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
   ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
   ؆୯ͳ50%0ΞϓϦ͸ॻ͚ͨ
   Ͱ΋ʜ
   ·ͱ΋ͳΞϓϦ͕׬੒͢ΔΠϝʔδ͕࣋ͯͳ͍
   

   View Slide

9. ࠓ೔͓఻͍͑ͨ͜͠ͱ
   

   View Slide

10. ࠓ೔͓఻͍͑ͨ͜͠ͱ
    
    &MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ
    

    View Slide

11. ϢʔβʔετʔϦʔϚοϐϯά
    

    View Slide

12. &MNͰ
    ϢʔβʔετʔϦʔϚοϐϯά
    ͷπʔϧΛ࡞ͬͯΈͨ
    

    View Slide

13. TUPSZOPUFTIFSPLVBQQDPN
    4UPSZ/PUFT .71WFS
    
    

    View Slide

14. TUPSZOPUFTIFSPLVBQQDPN
    4UPSZ/PUFT .71WFS
    
    ͬ͘͟Γ͍͏ͱɺετʔϦʔʹԊͬͯ
    ΞϓϦέʔγϣϯͷػೳΛݟੵ΋ΔπʔϧͰ͢
    

    View Slide

15. ܦҢ
    

    View Slide

16. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    

    View Slide

17. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    

    View Slide

18. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    

    View Slide

19. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    w ୭΋෇ᝦΛݟͳ͘ͳͬͨ
    w ੮͔Βԕ͍ϦϞʔτϫʔΫଟ͍
    

    View Slide

20. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    w ୭΋෇ᝦΛݟͳ͘ͳͬͨ
    w ੮͔Βԕ͍ϦϞʔτϫʔΫଟ͍
    w ΦϯϥΠϯͷπʔϧͰ΋࡞ͬͯΈΔ͔
    w ΄΅झຯ
    

    View Slide

21. 
    %&.0
    

    View Slide

22. 
    ղઆ
    

    View Slide

23. ߏ੒
    w %#1PTUHSF42-
    w 4FSWFS/PEFKT &YQSFTT5ZQF4DSJQU
    
    w 'SPOUFOE&MN
    

    View Slide

24. ߏ੒
    w %#1PTUHSF42-
    w 4FSWFS/PEFKT &YQSFTT5ZQF4DSJQU
    
    w 'SPOUFOE&MN
    

    View Slide

25. Ϗϧυ
    w OQNTDSJQUͰେମͲ͏ʹ͔ͳΔ
    w XFCQBDL΋࢖͓͏ͱࢥ͑͹࢖͑Δ
    w EPDLFSDPNQPTF
    

    View Slide

26. σϓϩΠɾͦͷଞ
    w )FSPLV
    w $JSDMF$*
    

    View Slide

27. $44
    w ී௨ͷ$44ϑΝΠϧ DTT
    
    w ΠϯϥΠϯΛਪ঑͍ͯ͠ΔΘ͚Ͱ͸ͳ͍
    w είʔϓ͕ཉ͚͠Ε͹FMNDTTͱ͔΋͋Δ
    

    View Slide

28. ϩάΠϯ
    w ී௨ͷ0"VUI
    w QBTTQPSUϞδϡʔϧ࢖༻
    w GPSNཁૉͰը໘ભҠ
    w DPPLJF
    

    View Slide

29. ಉ࣌ฤू
    

    View Slide

30. ಉ࣌ฤू
    .PEFM
    7JFX
    6QEBUF
    

    View Slide

31. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    

    View Slide

32. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    

    View Slide

33. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    

    View Slide

34. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    1
    

    View Slide

35. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    1
    1
    

    View Slide

36. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    1
    1
    1
    

    View Slide

37. ಉ࣌ฤू
    %#
    .PEFM
    6QEBUF
    1
    1
    1
    1
    .PEFM
    6QEBUF
    1
    1
    1
    1
    7JFX
    7JFX
    

    View Slide

38. ಉ࣌ฤू
    1
    

    View Slide

39. ϧʔςΟϯά
    w ϋογϡͰϫʔΫεϖʔε੾Γସ͑
    w Bʜ
    

    View Slide

40. ϧʔςΟϯά
    w ϋογϡͰϫʔΫεϖʔε੾Γସ͑
    w Bʜ
    w 3PVUFΛܕͰఆ͓ٛͯ͘͠ͱศར
    

    View Slide

41. ϧʔςΟϯά
    w #SPXTFSBQQMJDBUJPOΛ࢖͏
    

    View Slide

42. ϧʔςΟϯά
    w #SPXTFSBQQMJDBUJPOΛ࢖͏
    

    View Slide

43. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    

    View Slide

44. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    

    View Slide

45. ϧʔςΟϯά
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    .PEFM
    

    View Slide

46. ϧʔςΟϯά
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    .PEFM
    #3322a08…
    

    View Slide

47. ϧʔςΟϯά
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    .PEFM
    #3322a08…
    Workspace
    “3322a08…”
    

    View Slide

48. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    #3322a08…
    Workspace
    “3322a08…”
    

    View Slide

49. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    #3322a08…
    Workspace
    “3322a08…”
    

    View Slide

50. ϧʔςΟϯά
    .PEFM
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    #3322a08…
    Workspace
    “3322a08…”
    7JFX
    

    View Slide

51. εΫϩʔϧͷ࣮૷
    

    View Slide

52. εΫϩʔϧͷ࣮૷
    

    View Slide

53. εΫϩʔϧͷ࣮૷
    6QEBUF
    .PEFM
    scroll = { x = .., y = .. }
    

    View Slide

54. εΫϩʔϧͷ࣮૷
    6QEBUF
    .PEFM
    scroll = { x = .., y = .. }
    

    View Slide

55. %SBHBOE%SPQͷ࣮૷
    

    View Slide

56. %SBHBOE%SPQͷ࣮૷
    6QEBUF
    .PEFM
    type_ = Note 1
    start = { x = .., y = .. }

    current = { x = .., y = .. }
    

    View Slide

57. ඳըͷύϑΥʔϚϯεΛߟྀ
    [ viewBackground backgroundState
    , viewNotes notes
    , viewDraggingNote dragState
    ]
    

    View Slide

58. ඳըͷύϑΥʔϚϯεΛߟྀ
    [ lazy viewBackground backgroundState
    , lazy viewNotes notes
    , viewDraggingNote dragState
    ]
    

    View Slide

59. ඳըͷύϑΥʔϚϯεΛߟྀ
    [ lazy viewBackground backgroundState
    , lazy viewNotes notes
    , viewDraggingNote dragState
    ]
    1VSF$PNQPOFOUXJUIPVUUIF)FBEBDIF
    

    View Slide

60. ෳࡶ͞ʹཱͪ޲͔͏
    

    View Slide

61. ෳࡶ͞ʹཱͪ޲͔͏
    wܕ
    

    View Slide

62. ෳࡶ͞ʹཱͪ޲͔͏
    wܕ
    w ΞΫηε੍ޚ
    

    View Slide

63. ෳࡶ͞ʹཱͪ޲͔͏
    wܕ
    w ΞΫηε੍ޚ
    %BUB
    6QEBUF
    JOUFSGBDF
    

    View Slide

64. 
    ·ͱΊ
    

    View Slide

65. ·ͱΊ
    &MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ
    w Ұൠతͳ41"ʹඞཁͳಓ۩͸͋Δ
    w ྗΛೖΕ͍ͨͱ͜ΖҎ֎͸खΛൈ͍͍͍ͯ
    

    View Slide

66. 5IBOLZPV
    !KJOKPS
    

    View Slide