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

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

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