「Elm でユーザーストーリーマッピングのツールを作ってみた」の完全版
&MN։ൃαϯϓϧ&MNೖϋϯζΦϯʹͯ:PTVLF5PSJJ
View Slide
ࣗݾհ:PTVLF5PSJJ!KJOKPSw &MNྺ΄Ͳw &MNຊࣥචதw *EFJO*ODۈରԠʂʢॏཁʣ
ϋϯζΦϯ͓ർΕ༷Ͱͨ͠
ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨϥΠϒϥϦͷυΩϡϝϯτಡΊΔΑ͏ʹͳͬͨ
ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨϥΠϒϥϦͷυΩϡϝϯτಡΊΔΑ͏ʹͳͬͨ؆୯ͳ50%0ΞϓϦॻ͚ͨ
ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨϥΠϒϥϦͷυΩϡϝϯτಡΊΔΑ͏ʹͳͬͨ؆୯ͳ50%0ΞϓϦॻ͚ͨͰʜ
ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨϥΠϒϥϦͷυΩϡϝϯτಡΊΔΑ͏ʹͳͬͨ؆୯ͳ50%0ΞϓϦॻ͚ͨͰʜ·ͱͳΞϓϦ͕͢ΔΠϝʔδ͕࣋ͯͳ͍
ࠓ͓͍͑ͨ͜͠ͱ
ࠓ͓͍͑ͨ͜͠ͱ&MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ
ϢʔβʔετʔϦʔϚοϐϯά
&MNͰϢʔβʔετʔϦʔϚοϐϯάͷπʔϧΛ࡞ͬͯΈͨ
TUPSZOPUFTIFSPLVBQQDPN4UPSZ/PUFT .71WFS
TUPSZOPUFTIFSPLVBQQDPN4UPSZ/PUFT .71WFSͬ͘͟Γ͍͏ͱɺετʔϦʔʹԊͬͯΞϓϦέʔγϣϯͷػೳΛݟੵΔπʔϧͰ͢
ܦҢ
ܦҢw *EFJO*ODͰ։ൃதͷ8FCαʔϏε
ܦҢw *EFJO*ODͰ։ൃதͷ8FCαʔϏεw ్த͔ΒεΫϥϜಋೖ
ܦҢw *EFJO*ODͰ։ൃதͷ8FCαʔϏεw ్த͔ΒεΫϥϜಋೖw ϢʔβʔετʔϦʔϚοϐϯάͰͬͯΈΔ͔
ܦҢw *EFJO*ODͰ։ൃதͷ8FCαʔϏεw ్த͔ΒεΫϥϜಋೖw ϢʔβʔετʔϦʔϚοϐϯάͰͬͯΈΔ͔w ୭ᝦΛݟͳ͘ͳͬͨw ੮͔Βԕ͍ϦϞʔτϫʔΫଟ͍
ܦҢw *EFJO*ODͰ։ൃதͷ8FCαʔϏεw ్த͔ΒεΫϥϜಋೖw ϢʔβʔετʔϦʔϚοϐϯάͰͬͯΈΔ͔w ୭ᝦΛݟͳ͘ͳͬͨw ੮͔Βԕ͍ϦϞʔτϫʔΫଟ͍w ΦϯϥΠϯͷπʔϧͰ࡞ͬͯΈΔ͔w ΄΅झຯ
%&.0
ղઆ
ߏw %#1PTUHSF42-w 4FSWFS/PEFKT &YQSFTT5ZQF4DSJQUw 'SPOUFOE&MN
Ϗϧυw OQNTDSJQUͰେମͲ͏ʹ͔ͳΔw XFCQBDL͓͏ͱࢥ͑͑Δw EPDLFSDPNQPTF
σϓϩΠɾͦͷଞw )FSPLVw $JSDMF$*
$44w ී௨ͷ$44ϑΝΠϧ DTTw ΠϯϥΠϯΛਪ͍ͯ͠ΔΘ͚Ͱͳ͍w είʔϓ͕ཉ͚͠ΕFMNDTTͱ͔͋Δ
ϩάΠϯw ී௨ͷ0"VUIw QBTTQPSUϞδϡʔϧ༻w GPSNཁૉͰը໘ભҠw DPPLJF
ಉ࣌ฤू
ಉ࣌ฤू.PEFM7JFX6QEBUF
ಉ࣌ฤू%#.PEFM7JFX6QEBUF
ಉ࣌ฤू%#.PEFM7JFX6QEBUF.PEFM7JFX6QEBUF
ಉ࣌ฤू%#.PEFM7JFX6QEBUF.PEFM7JFX6QEBUF11
ಉ࣌ฤू%#.PEFM7JFX6QEBUF.PEFM7JFX6QEBUF111
ಉ࣌ฤू%#.PEFM7JFX6QEBUF.PEFM7JFX6QEBUF1111
ಉ࣌ฤू%#.PEFM7JFX6QEBUF.PEFM7JFX6QEBUF11111
ಉ࣌ฤू%#.PEFM6QEBUF1111.PEFM6QEBUF11117JFX7JFX
ಉ࣌ฤू1
ϧʔςΟϯάw ϋογϡͰϫʔΫεϖʔεΓସ͑w Bʜ
ϧʔςΟϯάw ϋογϡͰϫʔΫεϖʔεΓସ͑w Bʜw 3PVUFΛܕͰఆ͓ٛͯ͘͠ͱศར
ϧʔςΟϯάw #SPXTFSBQQMJDBUJPOΛ͏
ϧʔςΟϯά.PEFM7JFX6QEBUF%#
ϧʔςΟϯά.PEFM7JFX6QEBUF%#PO6SM3FRVFTU
ϧʔςΟϯά7JFX6QEBUF%#PO6SM3FRVFTUPO6SM$IBOHF.PEFM
ϧʔςΟϯά7JFX6QEBUF%#PO6SM3FRVFTUPO6SM$IBOHF.PEFM#3322a08…
ϧʔςΟϯά7JFX6QEBUF%#PO6SM3FRVFTUPO6SM$IBOHF.PEFM#3322a08…Workspace“3322a08…”
ϧʔςΟϯά.PEFM7JFX6QEBUF%#PO6SM3FRVFTUPO6SM$IBOHF#3322a08…Workspace“3322a08…”
ϧʔςΟϯά.PEFM6QEBUF%#PO6SM3FRVFTUPO6SM$IBOHF#3322a08…Workspace“3322a08…”7JFX
εΫϩʔϧͷ࣮
εΫϩʔϧͷ࣮6QEBUF.PEFMscroll = { x = .., y = .. }
%SBHBOE%SPQͷ࣮
%SBHBOE%SPQͷ࣮6QEBUF.PEFMtype_ = Note 1start = { x = .., y = .. } current = { x = .., y = .. }
ඳըͷύϑΥʔϚϯεΛߟྀ[ viewBackground backgroundState, viewNotes notes, viewDraggingNote dragState]
ඳըͷύϑΥʔϚϯεΛߟྀ[ lazy viewBackground backgroundState, lazy viewNotes notes, viewDraggingNote dragState]
ඳըͷύϑΥʔϚϯεΛߟྀ[ lazy viewBackground backgroundState, lazy viewNotes notes, viewDraggingNote dragState]1VSF$PNQPOFOUXJUIPVUUIF)FBEBDIF
ෳࡶ͞ʹཱ͔ͪ͏
ෳࡶ͞ʹཱ͔ͪ͏wܕ
ෳࡶ͞ʹཱ͔ͪ͏wܕw ΞΫηε੍ޚ
ෳࡶ͞ʹཱ͔ͪ͏wܕw ΞΫηε੍ޚ%BUB6QEBUFJOUFSGBDF
·ͱΊ
·ͱΊ&MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔw Ұൠతͳ41"ʹඞཁͳಓ۩͋Δw ྗΛೖΕ͍ͨͱ͜ΖҎ֎खΛൈ͍͍͍ͯ
5IBOLZPV!KJOKPS