Upgrade to Pro — share decks privately, control downloads, hide ads and more …

kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜

kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜

2021/10/08
Cybozu Tech Meetup #16

Hajime Mugishima

October 08, 2021
Tweet

More Decks by Hajime Mugishima

Other Decks in Technology

Transcript

  1. $ZCP[V5FDI.FFUVQ
    LJOUPOFϑϩϯτΤϯυ࡮৽
    ʙ৽نࢀՃ̑ϲ݄͔ΒݟΔϦΞϧʙ
    αΠϘ΢ζגࣜձࣾ
    ϑϩϯτΤϯυΤΩεύʔτνʔϜ
    ഴౡҰ[email protected]

    View Slide

  2. ࣗݾ঺հ
    ഴౡҰ
    Ή͗͠·͸͡Ί
    [email protected]
    ɾத్ೖࣾ
    ɾϑϩϯτΤϯυΤΩεύʔτνʔϜ
    ɾϑϧϦϞʔτ ෋ࢁ

    View Slide

  3. ࿩͢͜ͱ
    ˔LJOUPOFͷ͝঺հ
    ˔LJOUPOFϑϩϯτΤϯυ࡮৽
    ˔ೖࣾ̑ϲ݄͔ΒݟͨϦΞϧ

    ˔๊͑Δ՝୊ͱղܾࡦ

    ˔ΤϯδχΞͱͯ͠ಘΒΕΔ΋ͷ

    View Slide

  4. LJOUPOF

    View Slide

  5. LJOUPOF
    🔗αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU

    View Slide

  6. LJOUPOF
    🔗αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU

    View Slide

  7. LJOUPOF
    🔗αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU

    View Slide

  8. LJOUPOFϑϩϯτΤϯυ࡮৽

    View Slide

  9. LJOUPOFϑϩϯτΤϯυ࡮৽
    ྺ࢙͕௕͍αʔϏεˠਐΉϨΨγʔԽ
    ɾ$MPTVSF5PPMTओମͷίʔυϕʔε
    ɾओྲྀͳϑϩϯτΤϯυࣄ৘ͱͷဃ཭
    ɾֶशΛؚΉ։ൃϝϯςφϯείετ
    ɾ࠾༻ΛؚΉະདྷ΁ͷӨڹ

    View Slide

  10. LJOUPOFϑϩϯτΤϯυ࡮৽
    ΞʔΩςΫνϟΛ࡮৽த
    ˣ
    5ZQF4DSJQU3FBDUͳͲʹঃʑʹஔ͖׵͑

    View Slide

  11. ϑϩϯτΤϯυΤΩεύʔτνʔϜ

    LJOUPOFϑϩϯτΤϯυ࡮৽

    View Slide

  12. ϑϩϯτΤϯυΤΩεύʔτνʔϜ
    େ͖̏࣠͘ͰϑϩϯτΤϯυ࡮৽ʹڠྗ
    ˔3FBDUԽͷ࣮࡞ۀΛਐΊΔνʔϜ
    ˔೉қ౓͕ߴ͍ՕॴͷࣄલݕূΛߦ͏νʔϜ
    ˔ϚΠΫϩαʔϏεԽͷࢪࡦݕ౼Λߦ͏νʔϜ
    ˠLJOUPOF։ൃνʔϜͱͷϞϒ
    ˠϓϩτλΠϓ࡞੒ͳͲͷઌճΓରԠ
    ˠະདྷͷཧ૝Λݟਾ͑ͨݕূ

    View Slide

  13. ݱࡏͷਐḿ
    ؅ཧը໘
    🏁ΰʔϧ
    ϦεΫ௿Ίͷ؅ཧը໘Ͱׂ̓΄Ͳ׬ྃ

    View Slide

  14. ؅ཧը໘ ೉қ౓͕ߴ͍਺ʑͷը໘
    ϦεΫ௿Ίͷ؅ཧը໘Ͱׂ̓΄Ͳ׬ྃ
    ˣ
    ·ͩઌ͸௕͍
    🏁ΰʔϧ
    ݱࡏͷਐḿ

    View Slide

  15. ΋ͬͱ஌Γ͍ͨํ͸
    🎥IUUQTXXXZPVUVCFDPNXBUDI W;YFK;+6D

    View Slide

  16. 🔥ೖࣾ̑ϱ݄ࢹ఺ͰͷϦΞϧͳ࿩🔥

    View Slide

  17. ೖࣾલͷؾ࣋ͪ
    ɾϑϩϯτΤϯυͷϨΨγʔվળͷܦݧ͸͋ͬͨ
    ୤ϨΨγʔΛςʔϚʹࣥච΋ͨ͠

    ɾͻͱΓͰ΋όϦόϦվળͯ͠΍Δͧʙ👍👍👍

    View Slide

  18. ݱ࣮
    ɾେن໛ϑϩϯτΤϯυͷน
    ɾίʔυΛ௥͏͚ͩͰ΋Ұۤ࿑
    ɾԿ͔ΒखΛ෇͚Ε͹ʜʁʁ

    View Slide

  19. ͳʹ͕ҧ͏ͷ͔ʁ
    ɾݸਓPSগਓ਺Ͱ΍ΕΔൣғ͕޿͍
    ɾҰਓͷྗͰڧҾʹରॲͰ͖Δ͜ͱ΋͋Δ
    ˔খʙதن໛
    ˔େن໛
    ɾҰఆਓ਺Ҏ্ͷνʔϜͰͷରॲ͕લఏ
    ɾݸਓͰ΍ΕΔൣғ͸ݶք͕͋Δ
    ˠݸਓͷྗνʔϜΛՃ଎ͤ͞Δ޻෉ɾࢪࡦ͕ඞཁ

    View Slide

  20. LJOUPOFϑϩϯτΤϯυ࡮৽ͷ՝୊ͱղܾࡦ

    View Slide

  21. 🔥ίʔυཧղͷίετͷߴ͞
    ๲େͳίʔυྔ
    ɾສߦΛ௒͑Δ+4ίʔυ
    ɾը໘ಡΜͰ͍͚ͩ͘Ͱ΋Ұۤ࿑

    View Slide

  22. 🔥ίʔυཧղͷίετͷߴ͞
    $MPTVSF5PPMT
    ɾੈͷதͰͷ৘ใͷগͳ͞

    (PPHMFݕࡧΑΓࣾ಺φϨοδͷ΄͏͕๛෋

    ɾ&WFOU1VC4VCʹΑΔδϟϯϓ
    ɾը໘ͱͷಥ͖߹Θͤͷखؒ

    View Slide

  23. 💡೔ৗతͳϞϒɾϖΞ࡞ۀ
    جຊతʹ͸ϞϒɾϖΞͰ࡞ۀ͢Δ
    ɾ࡞ۀϓϥϯχϯάͷஈ֊͔Βෳ਺ਓͰ࡞ۀ
    ɾඇಉظͷίϛϡχέʔγϣϯίετΛ཈͑Δ
    ɾ༗ࣝऀ͔ΒμΠϨΫτʹ஌ݟΛٵऩ͢Δ

    View Slide

  24. 🔥LJOUPOFطଘ։ൃϓϩηεͱͷ૬ੑ
    ௨ৗͷLJOUPOF։ൃͱಉ͡ϓϩηεͰ࡞ۀ͍ͯͨ͠
    ɾεΫϥϜXFFLεϓϦϯτ
    ɾόοΫϩάˠϦϦʔεՄೳͳҙຯͷ͋Δ୯Ґ
    ˠܧଓతʹ҆ఆͨ͠Ձ஋ΛఏڙͰ͖Δͷ͕ར఺

    View Slide

  25. 🔥LJOUPOFطଘ։ൃϓϩηεͱͷ૬ੑ
    ϨΨγʔվળͱ͸૬ੑ͕ѱ͍෦෼͕͋Δ
    ɾͦ΋ͦ΋ϦϦʔεαΠΫϧ͕ҟͳΔ
    ɾҰ෦εΫϥϜΠϕϯτّ͕ࣜతͳࢀՃʹͳΔ
    ɾҙࢥܾఆͷ଴͕ͪൃੜ͢Δ

    View Slide

  26. 💡։ൃϓϩηεͷݟ௚͠
    ΑΓਐΊ΍͍͢ܗʹมߋ
    ɾΠϕϯτࢀՃ͸ඞཁͳ΋ͷͷΈʹߜΔ
    ɾҙࢥܾఆΛLJOUPOF։ൃͱ͸ಠཱͯ͠ߦ͏
    ɾίϛϡχέʔγϣϯʹ4MBDLΛ׆༻

    αΠϘ΢ζશମͰ͸LJOUPOF͕ओྲྀ

    ˠ͍·Ͱ΋೔ʑվળத

    View Slide

  27. ৽نϝϯόʔͱͯ͠ײͨ͡՝୊ͱ΍ͬͨ͜ͱ

    View Slide

  28. ׳Ε΁ͷґଘ
    ɾ՝୊ʹରͯ͠׳ΕΕ͹େৎ෉͕ղܾࡦͳ͜ͱ͕͋Δ

    ྫ$MPTVSF5PPMTͷίϯϙʔωϯτͱରԠը໘͸׳ΕΕ͹֮͑Δ
    ɾ׳Εʹ͸࠶ݱੑ͕ͳ͘ݸਓ͕ࠩେ͖͍
    ɾେن໛ϑϩϯτΤϯυ࡮৽͸ରԠظؒ΋௕͍
    ؔΘΔϝϯόʔ΋ଟ͘ͳΔ
    ɾ׳ΕΔ·Ͱͷίετ͸Կ౓΋܁Γฦ͞ΕΔ

    View Slide

  29. ͳʹΛ͢΂͖͔ʁΛߟ͑Δ🤔

    View Slide

  30. ׳Ε΁ͷґଘΛݮΒ͢
    ɾ׳Εͯ͠·ͬͨਓʹͱͬͯ͸՝୊Ͱ͸ͳ͘ͳΔ
    ˠ৽نϝϯόʔͱͯ͠ײͨ͡՝୊Λ
    ɹࣗ෼͕৽نϝϯόʔͷ͏ͪʹղܾ͢Δ
    ɾ׳Ε͸ଐਓੑͱ΋ղऍͰ͖Δ
    ׳Ε͍ͯͳͯ͘΋Ͱ͖Δ͕ཧ૝

    View Slide

  31. ৘ใΛࢹ֮Խ
    ࣗ෼͕٧·ͬͨՕॴΛࢿྉԽͯ͠࢒͢
    ܧঝਤ ॳظԽϑϩʔ ίϯϙʔωϯτରԠਤ

    View Slide

  32. $MPTVSF5PPMT%FW5PPMTΛ࡞੒
    3FBDU%FW5PPMTͷΑ͏ͳ
    $ISPNF֦ுΛ࡞੒
    🔗$ZCP[V*OTJEF0VUϑϩϯτΤϯυ࡮৽ͷͨΊʹ%FW5PPMTΛ࡞ͬͯ։ൃΛḿΒͤΔIUUQTCMPHDZCP[VJPFOUSZ
    ˠίʔυཧղΛՃ଎

    View Slide

  33. αΠϘ΢ζͱ͍͏૊৫ͷ෩౔
    ɾ໋ྩ΍ࢦࣔ͸ͳ͍ʢϗϯτʹແ͍ʣ
    ɾϑϩϯτΤϯυ࡮৽ͱ͍͏໨ඪʹରͯ͠
    ɹ֤͕ࣗʮඞཁͩʂʯͱࢥ͑Δ͜ͱΛ΍ΕΔ
    ɾͦ͜ʹ৽نϝϯόʔ͔Ͳ͏͔ͷڥք͸ແ͍

    View Slide

  34. 🎓ΤϯδχΞͱͯ͠ಘΒΕΔ΋ͷ
    ݸਓͷݟղΛؚΈ·͢

    View Slide

  35. ୤ϨΨγʔܦݧࣗମͷՁ஋
    ɾϨΨγʔվળ͸ಛผͳ΋ͷͰ͸ͳ͍
    ͍·͸ϞμϯͰ΋͕࣌ؒܦͯ͹ϨΨγʔʹ
    ɾΤϯδχΞΛଓ͚͍ͯͯආ͚ଓ͚Δͷ͸೉͍͠
    ɾ୤ϨΨγʔࣗମʹৗʹҰఆͷधཁ͕͋Δ
    ɾܦݧ஋ͱ͓ͯ࣋ͬͯ͘͠ϝϦοτ͸͋Δ

    View Slide

  36. ػձʹ͸όϥ͖͕ͭ͋Δ
    ɾখ͍͞վળ͸ػձ΋ଟ͘ɺݸਓɾগਓ਺ͰऔΓ૊ΊΔ
    ɾେن໛ͳ࡮৽͸ػձࣗମ͕௝͍͠
    ˠҙࢥܾఆͷλΠϛϯά͕গͳ͍

    View Slide

  37. େن໛͔ͩΒͦ͜ಘΒΕΔ΋ͷ
    ɾΞʔΩςΫνϟબఆ
    ɾσΟϨΫτϦߏ଄
    ɾ໋໊نଇ
    ɾίʔυͷ෼ׂ୯Ґ
    ɾςετཻ౓
    ˠେن໛ͳ΋ͷͩͱؔΘΔػձࣗମ͕ك
    ॳظஈ֊͔ΒઃܭʹؔΘΕΔ

    View Slide

  38. େن໛͔ͩΒͦ͜ಘΒΕΔ΋ͷ
    ٕज़τϨϯυͱ͸ҟͳΔֶͼ΋ಘΒΕΔ
    ɾվળʹ͓͚Δ։ൃϓϩηεͷࡦఆ
    ɾνʔϜ࡞Γ
    ɾφϨοδӡ༻
    ɾ࡞ۀޮ཰޲্ͷͨΊͷπʔϧͷબఆ΍࡞੒
    ˠ௕ظతʹ༗༻ͳ஌ݟɾεΩϧʹܨ͕Δ

    View Slide

  39. αΠϘ΢ζͰͷվળͰಘΒΕΔ΋ͷ
    ɾBZपΓͷ஌ݟΛଟֶ͘΂Δ
    ɾαΠϘ΢ζʹ͸BZͷઐ໳νʔϜ͕ଘࡏ͢Δ
    ɾBZୡ੒ج४Λຬͨ͢6*ίϯϙʔωϯτΛ
    ɹνʔϜͰڠྗͯ͠࡞੒

    View Slide

  40. ·ͱΊ
    ˔LJOUPOFϑϩϯτΤϯυ࡮৽͸·ͩ·ͩଓ͘
    ˔՝୊͸ଟ͘؆୯ͳ΋ͷ͹͔ΓͰ΋ͳ͍͕ɺ
    վળαΠΫϧΛճ͢౔৕͸͋Δ
    ˔νʔϜΛՃ଎͢ΔͨΊͷऔΓ૊Έ͕ඞཁͰɺ

    ɹͦͷͨΊʹ৽نϝϯόʔͷࢹ఺΋ॏཁ
    ˔୤ϨΨγʔͷܦݧ͸ΩϟϦΞ্༗༻ ͩͱࢥ͏


    ͔ͭେن໛ͳΒͰ͸ͷֶͼ΋ଟ͍

    View Slide

  41. 8FBSFIJSJOH

    View Slide

  42. ϑϩϯτΤϯυΤΩεύʔτνʔϜ΋
    8FBSFIJSJOH

    View Slide