Prott 画面遷移図機能 開発秘話/Prott Interaction Map

Prottが2016年7月にリリースした画面遷移図機能について、開発に至った経緯や実際の流れをご紹介します。

Transcript

1. 1SPUU
   ը໘ભҠਤػೳ
   ։ൃൿ࿩ !ZPTIJLP@QH
2. © 2016 Goodpatch, Inc. All Right Reserved. 2 ࣗݾ঺հ ͸͡Ίʹ ೥౦ژੜ·Εɻதֶ࣌୅ʹΨϥέʔͰϞόΠϧαΠτΛ࡞ͬͨ ͜ͱΛ͖͔͚ͬʹ)5.-$44ίʔσΟϯάͷ໘ന͞Λ஌Γɺ8FC։ ൃͷੈք΁ඈͼࠐΜͰϓϩάϥϛϯάͷָ͠͞ʹ໨֮ΊΔɻݱࡏ͸ג ࣜձࣾάουύονͷϑϩϯτΤϯυΤϯδχΞͱͯ͠ϓϩτλΠϐ ϯάπʔϧʮ1SPUUʯͷ։ൃ΍ɺݸਓͰͷϓϩμΫτ੍࡞ɺΠϕϯτ ొஃͳͲΛ͓͜ͳ͏ɻ
   ஶॻͱͯ͠೥݄ʹʮ)5.-$44
   ϞμϯίʔσΟϯάʯ ʢIUUQXXXBNB[PODPKQEQʣΛग़൛ɻ·ͨɺ ೥݄ʹΦϯϥΠϯಈըֶशαʔϏεʮTDIPPʯʹͯ +BWB4DSJQUͷίʔεतۀΛల։͢ΔͳͲϑϩϯτΤϯυͷָ͠͞Λ ఻͑ΔͨΊʹࣾ಺֎Λ໰Θͣ׆ಈதɻ Α͜͠ʢ.BBTB
   :PTIJEBʣ 1SPUUνʔϜ
   ϑϩϯτΤϯυΤϯδχΞ
3. 3 ೥݄೔
   1SPUU
   ը໘ભҠਤػೳ
   ЌϦϦʔε
4. © 2016 Goodpatch, Inc. All Right Reserved. 4 ໨࣍
   ͸͡Ίʹ  ͳͥը໘ભҠਤػೳΛ࡞Δ͜ͱʹͳͬͨͷ͔ʁ
    ։ൃͷྲྀΕ
    ϦϦʔεͷ൓ڹ
    ࠓޙͷల๬
5. © 2016 Goodpatch, Inc. All Right Reserved. 5 
   ͳͥը໘ભҠਤػೳΛ࡞Δ͜ͱʹͳͬͨͷ͔ʁ ࡞੒ͷഎܠ
6. ը໘ભҠਤΛ࡞੒ © 2016 Goodpatch, Inc. All Right Reserved. 6 ͨ͘͞Μͷ͝ཁ๬ ࡞੒ͷഎܠ εΫϦʔϯը૾Λ࡞੒ ϓϩτλΠϓΛ࡞੒
7. ը໘ભҠਤΛ࡞੒ © 2016 Goodpatch, Inc. All Right Reserved. 6 ͨ͘͞Μͷ͝ཁ๬ ࡞੒ͷഎܠ εΫϦʔϯը૾Λ࡞੒ ϓϩτλΠϓΛ࡞੒ ߋ৽ ߋ৽ ߋ৽ ߋ৽ ߋ৽ ߋ৽
8. ը໘ભҠਤΛ࡞੒ © 2016 Goodpatch, Inc. All Right Reserved. 6 ͨ͘͞Μͷ͝ཁ๬ ࡞੒ͷഎܠ εΫϦʔϯը૾Λ࡞੒ ϓϩτλΠϓΛ࡞੒ ߋ৽ ߋ৽ ߋ৽ ߋ৽ ߋ৽ ߋ৽ ΊΜͲ͍͘͞ʂʂʂ
9. ը໘ભҠਤΛ࡞੒ © 2016 Goodpatch, Inc. All Right Reserved. 7 ཧ૝ͷϑϩʔ ࡞੒ͷഎܠ εΫϦʔϯը૾Λ࡞੒ ϓϩτλΠϓΛ࡞੒
10. ը໘ભҠਤΛ࡞੒ © 2016 Goodpatch, Inc. All Right Reserved. 7 ཧ૝ͷϑϩʔ ࡞੒ͷഎܠ εΫϦʔϯը૾Λ࡞੒ ϓϩτλΠϓΛ࡞੒ ߋ৽ ߋ৽ ߋ৽ ൓ө ൓ө ൓ө
11. ը໘ભҠਤΛ࡞੒ © 2016 Goodpatch, Inc. All Right Reserved. 7 ཧ૝ͷϑϩʔ ࡞੒ͷഎܠ εΫϦʔϯը૾Λ࡞੒ ϓϩτλΠϓΛ࡞੒ ߋ৽ ߋ৽ ߋ৽ ൓ө ൓ө ൓ө εΫϦʔϯը૾΍εΫϦʔϯؒͷભҠͳͲ
    ৗʹ࠷৽ͷঢ়ଶ͕ը໘ભҠਤʹಉظ͞ΕΔ
12. © 2016 Goodpatch, Inc. All Right Reserved. 8 ϢʔβʔϑΥʔϥϜͰҐ ࡞੒ͷഎܠ
13. © 2016 Goodpatch, Inc. All Right Reserved. 9 
    ։ൃͷྲྀΕ
    
14. © 2016 Goodpatch, Inc. All Right Reserved. 10 ϫΠϠʔϑϨʔϜ࡞੒ ։ൃͷྲྀΕ 1SPUUͰ࣮ࡍʹػೳΛ࢖༻ͨ͠ͱ͖ͷ۩ମతͳΠϝʔδ͕Θ͘ϓϩτλΠϓΛ࡞੒
    σβΠϯ͸౰͍ͨͬͯͳ͍͕ɺػೳͷ্ཱͪ͛ํ΍άϧʔϓͷ੾Γସ͑ͳͲɺػೳͷશମ૾ͱભҠͷΠϝʔδΛ࡞੒
15. © 2016 Goodpatch, Inc. All Right Reserved. 11 ΩοΫΦϑ ։ൃͷྲྀΕ 10ɾ1.ɾσβΠφʔɾΤϯδχΞͰΩοΫΦϑ
    ࡞੒ͨ͠ϫΠϠʔϑϨʔϜΛڞ༗
    ը໘ભҠਤػೳΛ࢖ͬͨϢʔβʔ͞Μʹ
    ͲΜͳମݧΛ͍͔ͤͨ͞Λ࿩͠߹ͬͨ
16. © 2016 Goodpatch, Inc. All Right Reserved. 12 ྦͷը໘ભҠਤ ࠓ·ͰϓϩτλΠϓͱը໘ભҠਤΛผʑʹ࡞͍ͬͯͨ1.΍σβΠφʔ͕
    ָ͗ͯ͢ࢥΘͣྦ͢Δ΄ͲͷମݧΛఏڙ͠Α͏ͱ࿩͠߹ͬͨ
17. © 2016 Goodpatch, Inc. All Right Reserved. 13 ࣮૷։࢝
18. © 2016 Goodpatch, Inc. All Right Reserved. 14 ։ൃ؀ڥͷ੔උ ։ൃͷྲྀΕ 1SPUUͷٕज़ߏ੒͸೥ݱࡏ͔Β͢Δͱएׯݹ͘ͳ͍ͬͯΔͷͰɺ
    ৽͍͠8FCඪ४ͷٕज़ʢ&$."4DSJQU ʣΛऔΓೖΕͯ։ൃͰ͖ΔΑ͏ʹ੔උ
    ɾ#BCFM
    ɾ#SPXTFSJGZ
    ɾ&4-JOU
    ্هΛಋೖͨ͜͠ͱͰ৽͍͠ύϫϑϧͳඪ४ػೳΛ࢖ͬͯίʔυΛॻ͘͜ͱ͕Ͱ͖ΔΑ͏ʹͳΓɺ։ൃޮ཰͕61
    ϝϯςφϯε͞Εͳ͘ͳͬͯΏ͘$PGGFF4DSJQUΑΓ΋ण໋ͷ௕͍ίʔυʹ͢Δ͜ͱ͕Ͱ͖ͨ
    ৄ͍͠಺༰͸ͪ͜Βʹ·ͱ·͍ͬͯ·͢
    1SPUU
    'SPOUFOE
    
    IUUQZPTIJLPQHHJUIVCJPTMJEFTGSPOUFOECJ[
19. © 2016 Goodpatch, Inc. All Right Reserved. 15 େ࿮Λ࣮૷ ։ൃͷྲྀΕ ݄
    લ൒
20. © 2016 Goodpatch, Inc. All Right Reserved. 16 ͱΓ͋͑ͣઢΛදࣔͯ͠ΈΔ ݄
    ޙ൒ ։ൃͷྲྀΕ
21. © 2016 Goodpatch, Inc. All Right Reserved. 17
22. © 2016 Goodpatch, Inc. All Right Reserved. 18 ભҠਤͷελΠϧܾΊ ։ൃͷྲྀΕ ͞·͟·ͳελΠϧͷը໘ભҠਤΛҹ࡮͠นʹషΔ
    εΫϦʔϯ͸ͲΜͳॱ൪ͰͲ͏഑ஔ͞Ε͍ͯΔ͔ʁ
    ઢͷܨ͕Δ৔ॴ͸Ͳ͔͜ʁ໼ҹͷܗࣜ͸ʁ
    ͻͱͭͻͱͭ؍࡯͠ͳ͕Β
    1SPUUͷը໘ભҠਤʹ࠷దͳελΠϧΛݕ౼
23. © 2016 Goodpatch, Inc. All Right Reserved. 19 ભҠͷؔ܎Λ౿·͑ͯεΫϦʔϯΛ഑ஔ ݄
    લ൒ ։ൃͷྲྀΕ
24. © 2016 Goodpatch, Inc. All Right Reserved. 20 ઢͷελΠϧΛௐ੔ ݄
    લ൒ ։ൃͷྲྀΕ
25. © 2016 Goodpatch, Inc. All Right Reserved. 21 ۂઢΛ΍Ίɺ໼ҹΛ͚ͭΔ ݄
    લ൒ ։ൃͷྲྀΕ
26. © 2016 Goodpatch, Inc. All Right Reserved. 22 ʢ։ൃνʔϜ͕ʣྦͷը໘ભҠਤ
27. © 2016 Goodpatch, Inc. All Right Reserved. 23 ଞάϧʔϓͷύωϧΛදࣔ ݄
    ޙ൒ ։ൃͷྲྀΕ
28. © 2016 Goodpatch, Inc. All Right Reserved. 24 1/(1%'ग़ྗ ݄
    લ൒ ։ൃͷྲྀΕ
29. © 2016 Goodpatch, Inc. All Right Reserved. 25 ભҠઢͷϦηοτ ݄
    ޙ൒ ։ൃͷྲྀΕ
30. © 2016 Goodpatch, Inc. All Right Reserved. 26 Ұ୴׬੒! ։ൃͷྲྀΕ ݄಄
31. © 2016 Goodpatch, Inc. All Right Reserved. 26 Ұ୴׬੒! ։ൃͷྲྀΕ ݄಄ ʮྦͷը໘ભҠਤʯ͸࣮ݱͰ͖͍ͯΔ͔ʁ" ॳΊͯભҠਤΛݟͨ࣌ͷײಈͱڵฃΛ
    ΋ͬͱσβΠϯ͍ͨ͠ʂ
32. © 2016 Goodpatch, Inc. All Right Reserved. 27 ॳճݶఆΞχϝʔγϣϯͷ࣮૷ ։ൃͷྲྀΕ ݄
    લ൒
33. © 2016 Goodpatch, Inc. All Right Reserved. 28 2"
    2VBMJUZ
    "TTVSBODF ։ൃͷྲྀΕ
34. © 2016 Goodpatch, Inc. All Right Reserved. 29 ϒϩάɾϝʔϧɾ4/4ͳͲ͓஌Βͤͷ࡞੒ ։ൃͷྲྀΕ
35. 30 ೥݄೔
    1SPUU
    ը໘ભҠਤػೳ
    ЌϦϦʔε
36. © 2016 Goodpatch, Inc. All Right Reserved. 31 ϦϦʔεͷ൓ڹ
37. © 2016 Goodpatch, Inc. All Right Reserved. 32 ϒϩάɾϓϨεϦϦʔεͷ֦ࢄ ϦϦʔεͷ൓ڹ
38. © 2016 Goodpatch, Inc. All Right Reserved. 33 ϝσΟΞɾϒϩά΁ͷܝࡌ ϦϦʔεͷ൓ڹ
39. © 2016 Goodpatch, Inc. All Right Reserved. 34 4/4Ͱͷ൓ڹ νϟϓλʔ໊
40. © 2016 Goodpatch, Inc. All Right Reserved. 35 ϩάΠϯ཰ͷ޲্ ϦϦʔεͷ൓ڹ
41. © 2016 Goodpatch, Inc. All Right Reserved. 36 ϦϦʔεͷ൓ڹ ւ֎͔Βͷ൓ڹ
42. © 2016 Goodpatch, Inc. All Right Reserved. 37 ւ֎͔Βͷ൓ڹ ϦϦʔεͷ൓ڹ 6*69Λѻ͏ϝσΟΞͰ͋Δʮઃܭେઉ಄ʯͷ'BDFCPPLΞΧ΢ϯτ͔Β
    ը໘ભҠਤͷϦϦʔεϒϩάͷγΣΞ͕͋Γɺ൓ڹΛݺͿ
43. © 2016 Goodpatch, Inc. All Right Reserved. 38 ϓϥϯͷ͝঺հ ࢀߟ ը໘ભҠਤػೳ͸ɺ1SP
    
    5FBN
    
    &OUFSQSJTF
    ͭͷϓϥϯͰ͝ར༻͍͚ͨͩ·͢ɻ 1SPUUΛ·ͩ࢖ͬͨ͜ͱ͕ͳ͍ํʹ ͸ɺ༗ྉ൛ͱಉ౳ͷτϥΠΞϧΛൃ ߦͰ͖·͢ɻ
    ͓ۙ͘ͷ1SPUUϝϯόʔ·Ͱ͓ؾܰ ʹ͓੠ֻ͚͍ͩ͘͞ʂ
44. © 2016 Goodpatch, Inc. All Right Reserved. 39 ࠓޙͷల๬
45. © 2016 Goodpatch, Inc. All Right Reserved. 40 ը໘ભҠਤΞϯέʔτ ࠓޙͷల๬
46. © 2016 Goodpatch, Inc. All Right Reserved. 41 ࠓޙͷ՝୊ ࠓޙͷల๬ wεΫϦʔϯͷࣗ༝഑ஔ
    wϝϞػೳ
    wભҠઢͷҰׅඇදࣔ
    wग़ྗը࣭ͷ޲্
    wҹ࡮΁ͷ࠷దԽ
    
47. © 2016 Goodpatch, Inc. All Right Reserved. 42 ໨ࢦ͢ΰʔϧ ࠓޙͷల๬
48. © 2016 Goodpatch, Inc. All Right Reserved. 43 ໨ࢦ͢ΰʔϧ ࠓޙͷల๬ ʮྦͷը໘ભҠਤʯୡ੒໨ࢦͯ͠ؤுΓ·͢ʂ
49. © 2016 Goodpatch, Inc. All Right Reserved. 44 ͋Γ͕ͱ͏͍͟͝·ͨ͠