$30 off During Our Annual Pro Sale. View Details »

CapacitorをつかってAngularアプリの可能性を広げよう/ngjapan2019-capacitor

 CapacitorをつかってAngularアプリの可能性を広げよう/ngjapan2019-capacitor

ng-japan 2019「CapacitorをつかってAngularアプリの可能性を広げよう」登壇資料です。

Masahiko Sakakibara

July 13, 2019
Tweet

More Decks by Masahiko Sakakibara

Other Decks in Business

Transcript

  1. $BQBDJUPSΛ͔ͭͬͯ

    "OHVMBSΞϓϦͷՄೳੑΛ޿͛Α͏
    6TJOH$BQBDJUPSUP&YQBOEUIF1PUFOUJBMPG"OHVMBS"QQT

    View Slide

  2. *OUSPEVDF
    .BTBIJLP4BLBLJCBSB
    $&0

    PG3FMBUJPO%FTJHO-BC
    $50PG

    "SFB*OOPWBUJPO"MMJBODF
    *POJD+BQBO6TFS(SPVQ

    0SHBOJ[FS

    View Slide

  3. $POUSJCVUF
    ionic-team/ionic
    ionic-team/starters
    ionic-team/ionic-cli
    ionic-team/ionic-docs
    ionic-team/ionic-react

    -conference-app
    GoogleChrome/lighthouse

    View Slide

  4. $POUSJCVUF

    View Slide

  5. *POJDTVC$-*
    "VUPTFU MJOUcGPSNBUUFScBMJBT
    JO*POJD1SPKFDU

    View Slide


  6. <1SPEVDU>UJQTZT

    View Slide

  7. <1SPEVDU>SBCJGZ$%/
    FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E
    *NQSPWFJNBHFEJTQMBZTQFFE

    CZSFTJ[FBOE$%/IPTUJOH

    View Slide

  8. $BQBDJUPS

    View Slide

  9. )PXXPSLTPG8FC/BUJWF"QQ
    w 7JFX-PDBMT8FC4JUFVTJOHB
    8FC7JFXDBMMFE"QQ
    w "1*BWBJMBCMFUPBDDFTT/BUJWF
    'VODUJPOT
    888

    View Slide

  10. %J⒎FSFODFPG3FBDU/BUJWF/BUJWF4DSJQU

    View Slide

  11. .FDIBOJTNPG3FBDU/BUJWF/BUJWF4DSJQU

    View Slide

  12. /PUGBTUFTU#VUOPUTMPX
    https://vimeo.com/55486684

    View Slide

  13. 6TJOH$BQBDJUPS
    8IZ

    View Slide

  14. 1SPHSFTTJWF8FC"QQTͷಈ޲
    w .PCJMFUJNFJTPOUIFSJTF
    w PGOFXTNBSUQIPOFBQQJOTUBMMTBSF NPOUI

    w 5PQ4NBSUQIPOF"QQT%PNJOBUF
    w 8FCIBTUXJDFBTNVDIUSB⒏DBTTNBSUQIPOFBQQT
    w #FWJTJUFEPOWBSJPVTXFCTJUFT

    View Slide

  15. 1SPHSFTTJWF8FC"QQTͷར఺
    'PSVTJOHUIFBQQ UIFVTFS
    ɽ(PUPUIFBQQTUPSF
    ɽ#ZJOTUBMMJOHUIFBQQMJDBUJPO
    ɽ*IBWFUPTUBSUUIFBQQMJDBUJPO


    View Slide

  16. 6TJOH$BQBDJUPS
    8IZ

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. 6TFSTXBOUT
    18" J04 "OESPJE
    2 6,663 1,175

    View Slide

  21. 6TFSTQBZNFOUT
    18" J04 "OESPJE
    0 770 120

    View Slide

  22. .PUJPOMJOF

    View Slide

  23. 8FCQBZNFOUT1BZNFOU3FRVFTU"1*

    View Slide

  24. lยखʹࢉ൫ɺยखʹ࿦ޠz
    ौ୔ӫҰ

    &JDIJ4IJCVTBXB
    /PUPOMZJEFBMTCVUBMTPNBOBHFNFOU
    .BODBOOPUMJWFPOPOMZUIF
    "OBMFDUTPG$POGVDJVT BOE
    UIFBCBDVTBMPOFJTJNQFSGFDU
    BTBNBO
    .PSBMQSJODJQMFTBSFSFBMJ[FEJO
    UIFSFBMMJGFPGNBO*UJTB
    HBNFPGOPUJPOTJOPOFTNJOE
    UIBUJUJTOPUQPTTJCMFUPMJWF
    BOJOEFQFOEFOUMJGF BOEUIBU
    JUJTBOFUIJDBMNPSBMJUZ

    View Slide

  25. )PXUPTUBSU
    $ ng add @capacitor/angular
    $ ng build
    $ npx cap add ios
    $ npx cap open ios
    $ yarn
    $ npx cap init

    View Slide

  26. /FFE.PCJMF"QQ6*
    'SBNFXPSL

    $PNQBUJCJMJUZ
    lOPOMJOFBS

    OBWJHBUJPO
    .PCJMF6*
    /BWJHBUJPO

    4UBDL

    View Slide

  27. /FFE.PCJMF"QQ6*.PCJMF6*
    .PCJMF6TFS*OUFSGBDF

    View Slide

  28. /FFE.PCJMF"QQ6*'SBNFXPSL$PNQBUJCJMJUZ
    'SBNFXPSL$PNQBUJCJMJUZʢϓϥοτϑΥʔϜͷޓ׵ੑʣ
    ʮίϯύνϏϦςΟͱ͸ɺϋʔυ΢ΣΞ΍ιϑτ΢ΣΞ͕ɺ࢓༷ͷҟͳΔ΋ͷʹஔ͖
    ׵͑ΒΕ্ͨͰ΋ɺݩ௨Γͷಈ࡞Λ͢Δͱ͍͏ঢ়ଶͷ͜ͱͰ͋Δʯ

    View Slide

  29. /FFE.PCJMF"QQ6*lOPOMJOFBSOBWJHBUJPO
    lOPOMJOFBSOBWJHBUJPOʢඇઢܗφϏήʔγϣϯʣ

    View Slide


  30. /FFE.PCJMF"QQ6*/BWJHBUJPO4UBDL
    /BWJHBUJPOTUBDLʢφϏήʔγϣϯελοΫʣ

    View Slide


  31. *POJD'SBNFXPSL
    $ ng add @ionic/angular
    $ ng update @ionic/angular

    View Slide

  32. 'FBUVSFTPG$BQBDJUPS18"&MFNFOUT
    $ ionic start ng-demo sidemenu --capacitor
    $ npm install @ionic/pwa-elements
    IUUQTHJUIVCDPNSEMBCPOHKBQBOEFNP
    IUUQTOHKBQBOEFNPOFUMJGZDPN

    View Slide

  33. 'FBUVSFTPG$BQBDJUPS(JUGSJFOEMZ

    View Slide

  34. 'FBUVSFTPG$BQBDJUPSDPSFQMVHJOT
    • "QQ
    • #BDLHSPVOE5BTL
    • #SPXTFS
    • $BNFSB
    • $MJQCPBSE
    • $POTPMF
    • %FWJDF
    • 'JMFTZTUFN
    • (FPMPDBUJPO
    • )BQUJDT
    • ,FZCPBSE
    • -PDBM/PUJpDBUJPOT
    • .PEBMT
    • .PUJPO
    • /FUXPSL
    • 1VTI/PUJpDBUJPOT
    • 4IBSF
    • 4QMBTI4DSFFO
    • 4UBUVT#BS
    • 4UPSBHF
    • 5PBTU

    View Slide

  35. 'FBUVSFTPG$BQBDJUPS$PSEPWB1MVHJOTVQQPSU

    View Slide

  36. 'FBUVSFTPG$BQBDJUPS6*/BUJWF4IFMM
    /BUJWFͱ8FC7JFXͷ༥߹
    .JYJOH/BUJWF6*BOE8FCXBDSPTTQMBUGPSN6*

    View Slide

  37. 'FBUVSFTPG$BQBDJUPS/BUJWF4VQQPSU

    View Slide

  38. !SEMBCPDBQBDJUPSGBDFCPPLMPHJO

    View Slide

  39. !SEMBCPDBQBDJUPSBENPC

    View Slide

  40. !SEMBCPDBQBDJUPSGBDFCPPLMPHJOUVUPSJBM

    View Slide

  41. )PXUPTUBSUGPSHFOFSBUFQMVHJO
    $ npx @capacitor/cli plugin:generate
    $ npm publish
    import { Plugins } from ‘@capacitor/core';
    Plugins.YourPlugin.accessMethod();

    View Slide

  42. 8FCJT.BJO8FC7JFX
    8FDBOBDDFTT4XJGUBOE+BWB$PEFGSPN5ZQF4DSJQU
    8FDBODSFBUF/BUJWF7JFXBOEUPCFBCMFDPOUSPMGSPN/BUJWF$PEF

    View Slide

  43. 8FC 18" /BUJWF BOE.PCJMF
    IUUQTXXXBGQCCDPNBSUJDMFT

    View Slide

  44. "OHVMBSJTQMBUGPSN

    View Slide