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

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

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

Transcript

1. LJOUPOFͷϑϩϯτΤϯυ ࡮৽ʹ޲͚ͨऔΓ૊Έ $ZCP[V 5FDI
   .FFUVQ
    ଜా ಞ྄
2. • LJOUPOFͱ͸ • ΞʔΫςΫνϟ࡮৽1+ͷ֓ཁ • ϨΨγʔίʔυվળͷي੻ Cybozu Inside Out ‒ kintoneのフロントエンド刷新に向けた取り組み ࠓ೔͓࿩͢͠Δ͜ͱ
3. LJOUPOFͱ͸
4. ։ൃͷ஌͕ࣝͳͯ͘΋ ۀ຿ʹ߹ΘͤͨγεςϜΛ ͔ΜͨΜʹ࡞੒Ͱ͖Δ Ϋϥ΢υαʔϏε Ҿ༻
   αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
5. ౦ূҰ෦্৔اۀͷ ࣾʹ͕ࣾ LJOUPOFΛར༻த ! ! ! ! ※2021年6⽉末時点 Ҿ༻
   αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
6. ੈքதͷνʔϜΛࢧ͑Δ ϓϩμΫτΛ࡞͍ͬͯ·͢ 社数： 1,130 社数： 860 顧客数： 600 中華圏 ASIA US ※2021年6⽉末時点 Ҿ༻
   αΠϘ΢ζ ΤϯδχΞ࠾༻ϐον
7. ΞʔΩςΫνϟ࡮৽1+ͷ֓ཁ
8. ΞʔΩςΫνϟ࡮৽1+ͱ͸ • LJOUPOFͷϑϩϯτΤϯυ࠶ઃܭ͢ΔϓϩδΣΫτ • ࠷ॳ͸LJOUPOFͷ؅ཧը໘Λ৽͍͠ϑϩϯτΤϯυͷ ٕज़ελοΫʹஔ͖׵͍͑ͯΔ • ٕज़࡮৽ʹՃ͑ͯσβΠϯͷ࡮৽΋ಉ࣌ʹਐΊ͍ͯΔ
9. 2ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ ੈքத
10. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ • LJOUPOF͸೥લ͔Β $MPTVSF5PPMT Λ༻͍ͨ։ൃΛ ଓ͚͍ͯΔ • ॏްͳϑϨʔϜϫʔΫނʹɺݱ୅ͷϑϩϯτΤϯυ ΤίγεςϜͱ࿈ܞ͢Δʹ͸Ұ޻෉͢Δඞཁ͕͋Δ
11. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ • ࣮ࡍͷ։ൃʹ໾ཱͭૉ੖Β͍͠੒Ռ • ҰํͰɺࠓޙ΋ $MPTVSF
    5PPMT
    ʹରԠͨ͠πʔϧͷ։ൃɺ ϝϯςφϯεΛܧଓ͍ͯ͘͜͠ͱΛڧ͍ΒΕΔ େن໛ Closure Tools ϓϩδΣΫτʹPrettier Λಋೖ͢Δ·ͰͷಓͷΓ フロントエンド刷新のために DevTools を作って開発を捗らせる
12. ͳͥϑϩϯτΤϯυΛ࡮৽͢Δͷ͔ʁ • ΤϯδχΞΛ૿΍͠ʹ͍͘ • ΦϯϘʔσΟϯάίετ͕ߴ͍ • ϓϩδΣΫτͷܧଓੑʹର͢ΔϦεΫ͕͋Δ
13. ٕज़ελοΫ Closure Tools Ҡߦલ Ҡߦޙ
14. ։ൃମ੍ 管理画⾯ の刷新 (8名) kintone開発チーム フロントエンド エキスパート ⽣産性向上 アクセシビリティ 開発⽀援チーム ٕज़બఆɺٕज़ݕূɺઃܭ౳ͷࢧԉ ۀ຿ͷࣗಈԽ΍ޮ཰Խͷࢧԉ BZ
    ద੾ͳϚʔΫΞοϓͳͲͷࢧԉ フロントエンド 刷新PJ 検証 (3名) デザイナー PM QA ライター
15. ໨ࢦ͢νʔϜ૾ • LJOUPOFͷϑϩϯτΤϯυΛνʔϜ୯ҐͰ෼ׂͯ͠ɺӨڹൣғΛ ݶఆͯ͠ಠཱٕͨ͠ज़બఆɺϝϯςφϯε͕Ͱ͖Δମ੍Λ໨ࢦ͢ • কདྷతʹ͸ಠཱͨ͠νʔϜΛ࡞ͬͯࣗ཯తʹ։ൃͰ͖ΔΑ͏ʹ͢Δ
16. LJOUPOF ͷϑϩϯτΤϯυΛνʔϜ୯ҐͰ෼ׂ͢Δ • OQN XPSLTQBDFT
    Λ࢖༻ͯ͠ɺ νʔϜ୯ҐͰ .POPSFQP Λ࡞Δ • νʔϜؒͰͷύοέʔδ͸ OQN ύοέʔδͱͯ͠ར༻͢Δ • ໌ࣔతʹར༻͢ΔόʔδϣϯΛ ࢦఆͰ͖ΔΑ͏ʹ͢Δ͜ͱͰɺ νʔϜͷಠཱੑΛ୲อ͢Δ σΟϨΫτϦߏ੒ͷΠϝʔδ
17. ϨΨγʔίʔυվળͷي੻
18. ٕज़બఆ • ෳࡶੑ΁ͷରԠ • ܕνΣοΫ΍ίʔυิ׬ɺෳࡶੑΛੜΈʹ͍͘ઃܭʹಋͨ͘Ίͷࢥ૝ ΍"1*ઃܭʹͳ͍ͬͯΔ͔ • ΤίγεςϜͷॆ࣮౓ • ར༻ऀͷଟ͞ɺؔ࿈ϥΠϒϥϦ΍πʔϧͷॆ࣮౓ɺاۀʹΑΔར༻ɺ पลπʔϧͰαϙʔτ͞Ε͍ͯΔ͔ ˠ 3FBDU
    5ZQF4DSJQU
    3FEVY
    Λ࠾༻ͨ͠ ˞
    ೥தࠒ
19. 1SPPG
    PG
    $PODFQU • ༗ࢤϝϯόʔͰिd࣌ؒ΄Ͳ࣌ؒΛ֬อͯ͠ 1P$ Λ࣮ࢪͨ͠ • 1P$ ͷ؍఺ • طଘͷٕज़Ͱ࣮ݱͰ͖͍ͯΔ͜ͱ͕Ҡߦޙͷٕज़ελοΫͰ࣮ݱͰ͖Δͷ͔ʁ • ৽نػೳͷ։ൃͱฒߦٕͯ͠ज़ͷҠߦΛߦ͏࢓૊ΈΛ࡞ΕΔͷ͔ʁ • طଘࢿ࢈ΛͲ͜·Ͱ࢖͍ճ͢͜ͱ͕Ͱ͖Δͷ͔ʁ • ݕূͨ͜͠ͱ • 3FBDU
    ͱ $MPTVSF
    -JCSBSZ
    ͷڞଘ • 3FBDU
    ͔Β $MPTVSF
    -JCSBSZ
    ͷίϯϙʔωϯτΛར༻͢Δ • $MPTVSF
    -JCSBSZ
    ͷίʔυΛ "45
    ϕʔεͰࣗಈͰ 5ZQF4DSJQU
    ʹม׵
20. طଘࢿ࢈ͷ࠶ར༻ • $MPTVSF
    -JCSBSZ
    ੡ͷෳࡶͳίϯϙʔωϯτΛ 3FBDU
    Ͱϥοϓͯ͠࠶ར༻͢Δ • ϦϦʔεΛ༏ઌͨ͠Ұ࣌తͳରԠ • কདྷతʹ͸͢΂ͯ 3FBDU
    Ͱஔ͖׵͑Δ • &&ςετΛ࠶ར༻͢Δ • ผͷςετπʔϧ΋ݕ౼͕ͨ͠ɺ%#
    ΛॳظԽͨ͠ΓϢʔβʔΛ࡞੒ͨ͠ΓͳͲͷ 6*
    Λૢ࡞͢Δલஈ֊ͷॲཧ΋࠶౓࣮૷͢Δඞཁ͕͋ΓɺͦΕΒͷ࠶࣮૷ίετʹݟ ߹͏ϝϦοτ͕ͳ͔ͬͨɻ • ελΠϧΛ࠶ར༻͠ͳ͍ • طଘͷ 4DTT ͕!NJYJO΍!FYUFOEΛଟ༻͍ͯͯ͠ɺ͔ͳΓෳࡶͳঢ়ଶʹͳ͍ͬͯͨ • 4BTT
    Ͱ࡞Γ௚͢ͷ͸ίϯϙʔωϯτԽͷԸܙΛड͚ͮΒ͘ɺ$44
    .PEVMFT ͸ কདྷ EFQSFDBUF ʹͳΔՄೳੑ͕ߴ͘࠾༻ʹϦεΫ͕͋ͬͨͷͰɺ$44
    JO
    +4
    ϥΠϒϥϦͷ TUZMFEDPNQPOFOUT
    Ͱ࡞Γ௚͢
21. ϦϦʔεઓུΛߟ͑Δ • 1.ͱ૬ஊͯ͠ҰॹʹϦϦʔεઓུΛߟ͑ͨ • ஔ͖׵͑ର৅ͷը໘ΛબͿ • LJOUPOF ΧελϚΠζ΁ͷӨڹ͕খ͍͞ • ࡮৽ͱಉ࣌ʹϢʔβʔʹ෇ՃՁ஋ΛఏڙͰ͖Δ FY
    σβΠϯͷ࡮৽ɺύϑΥʔϚϯεվળ • ࠓޙ΋ػೳ௥Ճ΍मਖ਼͕ߦΘΕΔը໘ ˠ
    ؅ཧը໘
22. طଘͷը໘Λஈ֊తʹஔ͖׵͑Δ • ؅ཧը໘͸41"Ͱ͸ͳ͘ɺ̍ը໘͝ͱʹϨϯμϦϯά͢ΔͷͰ ը໘୯ҐͰ 3FBDU
    5ZQF4DSJQU Խ͍ͯ͠Δ
23. ਐ௙ঢ়گ • ·ͣ͸؅ཧը໘ͷϑϩϯτΤϯυ࡮৽ΛऴΘΒͤΔ • ؅ཧը໘ͷஔ͖׵͑͸ׂऴΘ͍ͬͯΔ • LJOUPOF ͷϑϩϯτΤϯυશମͩͱ·ͩ·ͩ࢒͍ͬͯΔ • νʔϜ୯ҐͰͷϑϩϯτΤϯυ෼ׂ΍ɺLJOUPOFΧελϚΠζ ͕ద༻͞ΕΔը໘ͷ࡮৽ͷݕূ΋ਐΊ͍ͯΔ • ໨ඪ͸d೥Ͱ୤$MPTVSF5PPMTɻ͚ͩͲ͜ͷϖʔεͩͱd೥ ͸͔͔Γͦ͏ʜɻڠྗऀΛื͍ͬͯ·͢ʂ
24. ։ൃϝϯόʔืूதͰ͢ʂʂʂ フロントエンドエンジニア （kintoneアーキテクチャ刷新PJ） kintone フロントエンド 採⽤ 検索