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

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

koba04
June 21, 2018

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

Cybozu Meetup フロントエンド #2

koba04

June 21, 2018
Tweet

More Decks by koba04

Other Decks in Programming

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. 044

    View Slide

  33. 044

    View Slide

  34. 044

    View Slide

  35. 044

    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