100人100通りのフロントエンド

Cybozu Meetup フロントエンド #2

Transcript

1. ਓ௨Γͷ
   ϑϩϯτΤϯυ
   !LPCB
   

   View Slide

2. ࣗݾ঺հ
   w খྛప !LPCB
   
   w ϑϩϯτΤϯυΤΩεύʔτνʔϜ
   w த్ೖࣾ
   

   View Slide

3. View Slide

4. αΠϘ΢ζͷϓϩμΫτ
   

   View Slide

5. αΠϘ΢ζͷϓϩμΫτ
   w ϏδωεΞϓϦ࡞੒Ϋϥ΢υ
   w தݎɺେن໛޲͚άϧʔϓ΢ΣΞ
   w தখن໛޲͚άϧʔϓ΢ΣΞ
   w ෳ਺ਓͰϝʔϧΛڞ༗ɺ؅ཧ
   w νʔϜΛੜΈग़͢άϧʔϓ΢ΣΞ
   

   View Slide

6. https://kintone.cybozu.co.jp/jp/event/hive/
   

   View Slide

7. View Slide

8. https://www.kintone.com/
   

   View Slide

9. νʔϜϫʔΫᷓΕΔࣾձΛ૑Δ
   

   View Slide

10. https://cybozushiki.cybozu.co.jp/articles/m001471.html
    

    View Slide

11. αΠϘ΢ζͷϑϩϯτΤϯυ
    

    View Slide

12. αΠϘ΢ζͷϑϩϯτΤϯυ
    ϓϩμΫτ
    ΢ΣϒαΠτ
    ςετ
    ηΩϡϦςΟ
    σβΠϯ
    ΧελϚΠζ
    %FWFMPQFS
    /FUXPSL
    

    View Slide

13. αΠϘ΢ζͷϑϩϯτΤϯυ
    w େن໛ɺ8FC͕ओઓ৔ɺϓϩμΫτͷण໋͸௕͍
    w 8FCΞϓϦέʔγϣϯΤϯδχΞ͕ϑϩϯτΤϯυ΋ॻ͘
    w ࢖ΘΕ͍ͯΔϥΠϒϥϦ͸༷ʑ
    w ϓϩμΫτͷΤϯδχΞҎ֎ʹ΋ଟ͘ͷਓ͕ؔΘΔ
    w σβΠφʔͱͷؔΘΓํ΋༷ʑ
    w ϓϥοτϑΥʔϜͱͯ͠ͷLJOUPOF (BSPPO
    

    View Slide

14. View Slide

15. ϑϩϯτΤϯυΤΩεύʔτνʔϜ
    w ʙ
    w ϓϩμΫτԣஅతʹϑϩϯτΤϯυʹؔΘΔ͜ͱશͯ
    ͕είʔϓ
    w ϝϯόʔืूதʂʂ
    w ϩΰCZ!LPDIJUBLV
    

    View Slide

16. ϑϩϯτΤϯυΤΩεύʔτνʔϜ
    w ϑϩϯτΤϯυʹؔ࿈͢Δ໰୊ΛҰॹʹղܾ͢Δ
    w ϑϩϯτΤϯυ؀ڥͷ੔උ
    w ৘ใൃ৴
    w ษڧձͷ։࠵
    w ࣾ֎׆ಈʢ044ɺൃදʣ
    

    View Slide

17. ϓϩμΫτνʔϜͱҰॹʹ
    w $MPTVSFͱOQNɺXFCQBDLͷ૊Έ߹ΘͤΛ໛ࡧͨ͠Γ
    w KTDPEFTIJGUͰม׵εΫϦϓτॻ͍ͨΓ
    w &4-JOU TUZMFMJOUͷಋೖΛҰॹʹ΍ͬͨΓ
    w 'MVYԽͷϞϒʹࢀՃͨ͠Γ
    w ϥΠϒϥϦͷόʔδϣϯΞοϓରԠͨ͠Γ
    w LJOUPOF্Ͱࠔ͍ͬͯΔ͜ͱΛݟ͚ͭͨΒҰॹʹ΍Δ
    

    View Slide

18. LJOUPOFϓϥάΠϯ
    w LJOUPOF͸ɺ)5.-$44+BWB4DSJQUͰϓϥάΠϯΛ
    ࡞੒ͯ͠ΧελϚΠζͰ͖Δ
    w ϓϥάΠϯΤίγεςϜ͕޿͕͍ͬͯΔ
    w ύʔτφʔɺ΀Β͙ҕһձ
    w ϓϥοτϑΥʔϜͱͯ͠ͷϑϩϯτΤϯυ
    

    View Slide

19. LJOUPOFϓϥάΠϯ
    https://krew.grapecity.com/article/case-management.htm
    

    View Slide

20. ͜Ε·Ͱ
    αϯϓϧϓϥάΠϯΛίϐʔ͢Δ͔ɺࣗ෼Ͱ࡞Δ
    wNBOJGFTUKTPOΛਓྗͰฤू
    QMVHJOTELQBDLBHFTIΛ࢖ͬͯ[JQ
    LJOUPOFʹ[JQΛΞοϓ͢Δ
    w Τϥʔ͕͋Ε͹मਖ਼
    

    View Slide

21. ͭͬͨ͘΋ͷ
    @kintone/plugin-packer … pluginΛzipʹ
    
    @kintone/plugin-manifest-validator … pluginͷmanifest.jsonΛvalidate
    @kintone/plugin-uploader … pluginΛkintoneʹࣗಈΞοϓϩʔυ
    
    @kintone/webpack-plugin-kintone-plugin … plugin-packer ʴ webpack
    @kintone/create-plugin … inspired by create-react-app
    

    View Slide

22. ͍·
    $ npx @kintone/create-plugin awesome-plugin
    :
    
    ࣭໰ʹ౴͑Δ
    
    :
    
    $ cd awesome-plugin
    $ npm start
    :
    
    Succeeded: dist/plugin.zip
    
    ? Input your kintone's domain (example.cybozu.com): example.cybozu.com
    
    ? Input your username: xxx
    
    ? Input cybozu's password: [hidden]
    :
    
    dist/plugin.zip has been uploaded!
    

    View Slide

23. https://developer.cybozu.io/hc/ja
    

    View Slide

24. ؀ڥͷ੔උ
    w !DZCP[VFTMJOUDPOpHͷ࡞੒
    w 1SFUUJFSಋೖͷυΩϡϝϯτ࡞੒ɺ&4-JOUରԠ
    w OQNύοέʔδͷߋ৽؅ཧͷௐࠪ
    w ͜ͷޙɺ!UFQQFJT͕ൃද͠·͢
    

    View Slide

25. View Slide

26. ৘ใൃ৴
    

    View Slide

27. 'SPOUFOE#BS
    

    View Slide

28. $BTVBM'SPOUFOE#BS
    

    View Slide

29. ϑϩϯτΤϯυϥϯν
    Thanks to JSer.info!!
    

    View Slide

30. 044
    w جຊతʹ͸ɺͲΜͲΜ(JU)VCͰެ։͍ͯ͘͠ελΠϧ
    w 044ͷϥΠϒϥϦʹରͯ͠΋ɺࣾ಺͔ΒͷϑΟʔυόο
    Ϋ΍ෆ۩߹͕͋Ε͹13ૹͬͯमਖ਼͢Δ
    w 044ͱͷڑ཭Λ͚ۙͮΔ
    w ࣾ಺ʹͯ044ϙϦγʔͷࡦఆ΋ਐΜͰ͍Δ
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. ࠓޙ
    

    View Slide

37. ࠓޙ
    w ϓϥάΠϯपΓͷ͞ΒͳΔ%9վળ
    w มԽΛड͚ೖΕΒΕΔϑϩϯτΤϯυͷߏங
    w ϓϥάΠϯΛ҆શʹ࣮ߦ͢ΔͨΊͷαϯυϘοΫε
    w 8FCύϑΥʔϚϯε΁ͷऔΓ૊Έ
    w ϦονςΩετΤσΟλ
    w σβΠϯγεςϜ
    w ϞόΠϧ8FC 18" (SBQI2-ʜ
    

    View Slide

38. ·ͱΊ
    w ϑϩϯτΤϯυͱ͍ͬͯ΋ѻ͏ൣғʹ੍ݶ͸ͳ͍
    w ϑϩϯτΤϯυʹؔΘ͍ͬͯΔਓʢνʔϜʣ͕ͨ͘͞
    Μ͋Δ
    w αΠϘ΢ζͷϑϩϯτΤϯυʹ͸ٕज़త௅ઓ͕ͨ͘͞
    Μ͋Δ
    w ϑϩϯτΤϯυʹઐ໳తʹऔΓ૊ΉνʔϜ͕Ͱ͖ͨ
    

    View Slide

39. 8F"SF)JSJOH
    XXXXBOUFEMZDPNQSPKFDUT
    ͋ͳͨͷ
    ϑϩϯτΤϯυΛ
    αΠϘ΢ζͰ
    ࣮ݱ͠·ͤΜ͔ʁ
    

    View Slide

40. "OZ2VFTUJPOT
    

    View Slide