kintoneのフロントエンド刷新に向けた取り組み

「Cybozu Tech Meetup ［9/29］kintoneのフロントエンド刷新に向けた取り組み」の発表資料です。

https://cybozu.connpass.com/event/225411/

Transcript

1. LJOUPOFͷϑϩϯτΤϯυ
   ࡮৽ʹ޲͚ͨऔΓ૊Έ
   $ZCP[V 5FDI.FFUVQ
   ଜా ಞ྄
   

   View Slide

2. • LJOUPOFͱ͸
   • ΞʔΫςΫνϟ࡮৽1+ͷ֓ཁ
   • ϨΨγʔίʔυվળͷي੻
   Cybozu Inside Out ‒ kintoneのフロントエンド刷新に向けた取り組み
   ࠓ೔͓࿩͢͠Δ͜ͱ
   

   View Slide

3. LJOUPOFͱ͸
   

   View Slide

4. ։ൃͷ஌͕ࣝͳͯ͘΋
   ۀ຿ʹ߹ΘͤͨγεςϜΛ
   ͔ΜͨΜʹ࡞੒Ͱ͖Δ
   Ϋϥ΢υαʔϏε
   Ҿ༻αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
   

   View Slide

5. ౦ূҰ෦্৔اۀͷ
   ࣾʹ͕ࣾ LJOUPOFΛར༻த
   ! ! ! !
   ※2021年6⽉末時点
   Ҿ༻αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
   

   View Slide

6. ੈքதͷνʔϜΛࢧ͑Δ
   ϓϩμΫτΛ࡞͍ͬͯ·͢
   社数：
   1,130 社数：
   860 顧客数：
   600
   中華圏 ASIA US
   ※2021年6⽉末時点
   Ҿ༻αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
   

   View Slide

7. ΞʔΩςΫνϟ࡮৽1+ͷ֓ཁ
   

   View Slide

8. ΞʔΩςΫνϟ࡮৽1+ͱ͸
   • LJOUPOFͷϑϩϯτΤϯυ࠶ઃܭ͢ΔϓϩδΣΫτ
   • ࠷ॳ͸LJOUPOFͷ؅ཧը໘Λ৽͍͠ϑϩϯτΤϯυͷ
   ٕज़ελοΫʹஔ͖׵͍͑ͯΔ
   • ٕज़࡮৽ʹՃ͑ͯσβΠϯͷ࡮৽΋ಉ࣌ʹਐΊ͍ͯΔ
   

   View Slide

9. 2ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ
   ੈքத
   

   View Slide

10. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ
    • LJOUPOF͸೥લ͔Β $MPTVSF5PPMT Λ༻͍ͨ։ൃΛ
    ଓ͚͍ͯΔ
    • ॏްͳϑϨʔϜϫʔΫނʹɺݱ୅ͷϑϩϯτΤϯυ
    ΤίγεςϜͱ࿈ܞ͢Δʹ͸Ұ޻෉͢Δඞཁ͕͋Δ
    

    View Slide

11. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ
    • ࣮ࡍͷ։ൃʹ໾ཱͭૉ੖Β͍͠੒Ռ
    • ҰํͰɺࠓޙ΋ $MPTVSF5PPMTʹରԠͨ͠πʔϧͷ։ൃɺ
    ϝϯςφϯεΛܧଓ͍ͯ͘͜͠ͱΛڧ͍ΒΕΔ
    େن໛ Closure Tools ϓϩδΣΫτʹPrettier Λಋೖ͢Δ·ͰͷಓͷΓ フロントエンド刷新のために DevTools を作って開発を捗らせる
    

    View Slide

12. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ
    • ΤϯδχΞΛ૿΍͠ʹ͍͘
    • ΦϯϘʔσΟϯάίετ͕ߴ͍
    • ϓϩδΣΫτͷܧଓੑʹର͢ΔϦεΫ͕͋Δ
    

    View Slide

13. ٕज़ελοΫ
    Closure Tools
    Ҡߦલ Ҡߦޙ
    

    View Slide

14. ։ൃମ੍
    管理画⾯
    の刷新
    (8名)
    kintone開発チーム
    フロントエンド
    エキスパート
    ⽣産性向上
    アクセシビリティ
    開発⽀援チーム
    ٕज़બఆɺٕज़ݕূɺઃܭ౳ͷࢧԉ
    ۀ຿ͷࣗಈԽ΍ޮ཰Խͷࢧԉ
    BZ ద੾ͳϚʔΫΞοϓͳͲͷࢧԉ
    フロントエンド
    刷新PJ
    検証
    (3名)
    デザイナー
    PM QA
    ライター
    

    View Slide

15. ໨ࢦ͢νʔϜ૾
    • LJOUPOFͷϑϩϯτΤϯυΛνʔϜ୯ҐͰ෼ׂͯ͠ɺӨڹൣғΛ
    ݶఆͯ͠ಠཱٕͨ͠ज़બఆɺϝϯςφϯε͕Ͱ͖Δମ੍Λ໨ࢦ͢
    • কདྷతʹ͸ಠཱͨ͠νʔϜΛ࡞ͬͯࣗ཯తʹ։ൃͰ͖ΔΑ͏ʹ͢Δ
    

    View Slide

16. LJOUPOF ͷϑϩϯτΤϯυΛνʔϜ୯ҐͰ෼ׂ͢Δ
    • OQN XPSLTQBDFTΛ࢖༻ͯ͠ɺ
    νʔϜ୯ҐͰ .POPSFQP Λ࡞Δ
    • νʔϜؒͰͷύοέʔδ͸
    OQN ύοέʔδͱͯ͠ར༻͢Δ
    • ໌ࣔతʹར༻͢ΔόʔδϣϯΛ
    ࢦఆͰ͖ΔΑ͏ʹ͢Δ͜ͱͰɺ
    νʔϜͷಠཱੑΛ୲อ͢Δ
    σΟϨΫτϦߏ੒ͷΠϝʔδ
    

    View Slide

17. ϨΨγʔίʔυվળͷي੻
    

    View Slide

18. ٕज़બఆ
    • ෳࡶੑ΁ͷରԠ
    • ܕνΣοΫ΍ίʔυิ׬ɺෳࡶੑΛੜΈʹ͍͘ઃܭʹಋͨ͘Ίͷࢥ૝
    ΍"1*ઃܭʹͳ͍ͬͯΔ͔
    • ΤίγεςϜͷॆ࣮౓
    • ར༻ऀͷଟ͞ɺؔ࿈ϥΠϒϥϦ΍πʔϧͷॆ࣮౓ɺاۀʹΑΔར༻ɺ
    पลπʔϧͰαϙʔτ͞Ε͍ͯΔ͔
    ˠ 3FBDU 5ZQF4DSJQU 3FEVYΛ࠾༻ͨ͠
    ˞೥தࠒ
    

    View Slide

19. 1SPPGPG$PODFQU
    • ༗ࢤϝϯόʔͰिd࣌ؒ΄Ͳ࣌ؒΛ֬อͯ͠ 1P$ Λ࣮ࢪͨ͠
    • 1P$ ͷ؍఺
    • طଘͷٕज़Ͱ࣮ݱͰ͖͍ͯΔ͜ͱ͕Ҡߦޙͷٕज़ελοΫͰ࣮ݱͰ͖Δͷ͔ʁ
    • ৽نػೳͷ։ൃͱฒߦٕͯ͠ज़ͷҠߦΛߦ͏࢓૊ΈΛ࡞ΕΔͷ͔ʁ
    • طଘࢿ࢈ΛͲ͜·Ͱ࢖͍ճ͢͜ͱ͕Ͱ͖Δͷ͔ʁ
    • ݕূͨ͜͠ͱ
    • 3FBDUͱ $MPTVSF-JCSBSZͷڞଘ
    • 3FBDU͔Β $MPTVSF-JCSBSZͷίϯϙʔωϯτΛར༻͢Δ
    • $MPTVSF-JCSBSZͷίʔυΛ "45ϕʔεͰࣗಈͰ 5ZQF4DSJQUʹม׵
    

    View Slide

20. طଘࢿ࢈ͷ࠶ར༻
    • $MPTVSF-JCSBSZ੡ͷෳࡶͳίϯϙʔωϯτΛ 3FBDUͰϥοϓͯ͠࠶ར༻͢Δ
    • ϦϦʔεΛ༏ઌͨ͠Ұ࣌తͳରԠ
    • কདྷతʹ͸͢΂ͯ 3FBDUͰஔ͖׵͑Δ
    • &&ςετΛ࠶ར༻͢Δ
    • ผͷςετπʔϧ΋ݕ౼͕ͨ͠ɺ%#ΛॳظԽͨ͠ΓϢʔβʔΛ࡞੒ͨ͠ΓͳͲͷ
    6*Λૢ࡞͢Δલஈ֊ͷॲཧ΋࠶౓࣮૷͢Δඞཁ͕͋ΓɺͦΕΒͷ࠶࣮૷ίετʹݟ
    ߹͏ϝϦοτ͕ͳ͔ͬͨɻ
    • ελΠϧΛ࠶ར༻͠ͳ͍
    • طଘͷ 4DTT ͕!NJYJO΍!FYUFOEΛଟ༻͍ͯͯ͠ɺ͔ͳΓෳࡶͳঢ়ଶʹͳ͍ͬͯͨ
    • 4BTTͰ࡞Γ௚͢ͷ͸ίϯϙʔωϯτԽͷԸܙΛड͚ͮΒ͘ɺ$44.PEVMFT ͸
    কདྷ EFQSFDBUF ʹͳΔՄೳੑ͕ߴ͘࠾༻ʹϦεΫ͕͋ͬͨͷͰɺ$44JO+4
    ϥΠϒϥϦͷ TUZMFEDPNQPOFOUTͰ࡞Γ௚͢
    

    View Slide

21. ϦϦʔεઓུΛߟ͑Δ
    • 1.ͱ૬ஊͯ͠ҰॹʹϦϦʔεઓུΛߟ͑ͨ
    • ஔ͖׵͑ର৅ͷը໘ΛબͿ
    • LJOUPOF ΧελϚΠζ΁ͷӨڹ͕খ͍͞
    • ࡮৽ͱಉ࣌ʹϢʔβʔʹ෇ՃՁ஋ΛఏڙͰ͖Δ
    FYσβΠϯͷ࡮৽ɺύϑΥʔϚϯεվળ
    • ࠓޙ΋ػೳ௥Ճ΍मਖ਼͕ߦΘΕΔը໘
    ˠ؅ཧը໘
    

    View Slide

22. طଘͷը໘Λஈ֊తʹஔ͖׵͑Δ
    • ؅ཧը໘͸41"Ͱ͸ͳ͘ɺ̍ը໘͝ͱʹϨϯμϦϯά͢ΔͷͰ
    ը໘୯ҐͰ 3FBDU 5ZQF4DSJQU Խ͍ͯ͠Δ
    

    View Slide

23. ਐ௙ঢ়گ
    • ·ͣ͸؅ཧը໘ͷϑϩϯτΤϯυ࡮৽ΛऴΘΒͤΔ
    • ؅ཧը໘ͷஔ͖׵͑͸ׂऴΘ͍ͬͯΔ
    • LJOUPOF ͷϑϩϯτΤϯυશମͩͱ·ͩ·ͩ࢒͍ͬͯΔ
    • νʔϜ୯ҐͰͷϑϩϯτΤϯυ෼ׂ΍ɺLJOUPOFΧελϚΠζ
    ͕ద༻͞ΕΔը໘ͷ࡮৽ͷݕূ΋ਐΊ͍ͯΔ
    • ໨ඪ͸d೥Ͱ୤$MPTVSF5PPMTɻ͚ͩͲ͜ͷϖʔεͩͱd೥
    ͸͔͔Γͦ͏ʜɻڠྗऀΛื͍ͬͯ·͢ʂ
    

    View Slide

24. ։ൃϝϯόʔืूதͰ͢ʂʂʂ
    フロントエンドエンジニア
    （kintoneアーキテクチャ刷新PJ）
    kintone フロントエンド 採⽤ 検索
    

    View Slide