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

Transcript

1. $BQBDJUPSΛ͔ͭͬͯ
 "OHVMBSΞϓϦͷՄೳੑΛ޿͛Α͏
   
   6TJOH
   $BQBDJUPS
   UP
   &YQBOE
   UIF
   1PUFOUJBM
   PG
   "OHVMBS
   "QQT

2. *OUSPEVDF .BTBIJLP
   4BLBLJCBSB $&0
 PG
   3FMBUJPO
   %FTJHO
   -BC $50
   PG
   
 "SFB
   *OOPWBUJPO
   "MMJBODF *POJD
   +BQBO
   6TFS
   (SPVQ
   
 0SHBOJ[FS

3. $POUSJCVUF ionic-team/ionic ionic-team/starters ionic-team/ionic-cli ionic-team/ionic-docs ionic-team/ionic-react
 -conference-app GoogleChrome/lighthouse

4. $POUSJCVUF

5. *POJDTVC
   $-* "VUP
   TFU
   
   
   MJOU
   c
   GPSNBUUFS
   c
   BMJBT
   
   JO
   *POJD
   1SPKFDU

6. 
   <1SPEVDU>
   UJQTZT

7. <1SPEVDU>
   SBCJGZ
   $%/ FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E *NQSPWF
   JNBHF
   EJTQMBZ
   TQFFE
 CZ
   SFTJ[F
   BOE
   $%/
   IPTUJOH

8. $BQBDJUPS

9. )PX
   XPSLT
   PG
   8FC
   /BUJWF
   "QQ w 7JFX
   -PDBMT
   8FC
   4JUF
   VTJOH
   B
   8FC7JFX
   DBMMFE
   "QQ
   w "1*
   BWBJMBCMF
   UP
   BDDFTT
   /BUJWF
   'VODUJPOT 888

10. %J⒎FSFODF
    PG
    3FBDU/BUJWF/BUJWF4DSJQU

11. .FDIBOJTN
    PG
    3FBDU/BUJWF/BUJWF4DSJQU

12. /PU
    GBTUFTU
    #VU
    OPU
    TMPX https://vimeo.com/55486684

13. 6TJOH
    $BQBDJUPS 8IZ

14. 1SPHSFTTJWF
    8FC
    "QQTͷಈ޲ w .PCJMF
    UJNF
    JT
    PO
    UIF
    SJTF
    w 
    PG
    OFX
    TNBSUQIPOF
    BQQ
    JOTUBMMT
    BSF
    
    
    NPOUI
    w 5PQ
    
    4NBSUQIPOF
    "QQT
    %PNJOBUF
    w

    8FC
    IBT
    UXJDF
    BT
    NVDI
    USB⒏D
    BT
    TNBSUQIPOF
    BQQT
    w #F
    WJTJUFE
    PO
    WBSJPVT
    XFCTJUFT

15. 1SPHSFTTJWF
    8FC
    "QQTͷར఺ 'PS
    VTJOH
    UIF
    BQQ
    UIF
    VTFS
    ɽ(P
    UP
    UIF
    BQQ
    TUPSF
    ɽ#Z
    JOTUBMMJOH
    UIF
    BQQMJDBUJPO
    ɽ*
    IBWF
    UP
    TUBSU
    UIF
    BQQMJDBUJPO


16. 6TJOH
    $BQBDJUPS 8IZ

17. None
18. None
19. None

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

21. 6TFST
    QBZNFOUT 18" J04 "OESPJE 0 770 120

22. .PUJPO
    MJOF

23. 8FC
    QBZNFOUT1BZNFOU
    3FRVFTU
    "1*
    

24. lยखʹࢉ൫ɺยखʹ࿦ޠz
    ौ୔ӫҰ
    
 &JDIJ
    4IJCVTBXB /PU
    POMZ
    JEFBMT
    CVU
    BMTP
    NBOBHFNFOU .BO
    DBOOPU
    MJWF
    PO
    POMZ
    UIF
    "OBMFDUT
    PG
    $POGVDJVT
    BOE
    UIF
    BCBDVT
    BMPOF
    JT
    JNQFSGFDU
    BT
    B
    NBO
    .PSBM
    QSJODJQMFT
    BSF
    SFBMJ[FE
    JO
    

    UIF
    SFBM
    MJGF
    PG
    NBO
    *U
    JT
    B
    HBNF
    PG
    OPUJPOT
    JO
    POFT
    NJOE
    UIBU
    JU
    JT
    OPU
    QPTTJCMF
    UP
    MJWF
    BO
    JOEFQFOEFOU
    MJGF
    BOE
    UIBU
    JU
    JT
    BO
    FUIJDBM
    NPSBMJUZ

25. )PX
    UP
    TUBSU $ ng add @capacitor/angular $ ng build $ npx

    cap add ios $ npx cap open ios $ yarn $ npx cap init

26. /FFE
    .PCJMF
    "QQ
    6* 'SBNFXPSL
    
 $PNQBUJCJMJUZ lOPOMJOFBS
    
 OBWJHBUJPO .PCJMF
    6* /BWJHBUJPO
 4UBDL

27. /FFE
    .PCJMF
    "QQ
    6*
    
    .PCJMF
    6* .PCJMF
    6TFS
    *OUFSGBDF

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

29. /FFE
    .PCJMF
    "QQ
    6*
    
    lOPOMJOFBS
    OBWJHBUJPO lOPOMJOFBS
    OBWJHBUJPOʢඇઢܗφϏήʔγϣϯʣ

30. 
    /FFE
    .PCJMF
    "QQ
    6*
    
    /BWJHBUJPO
    4UBDL /BWJHBUJPO
    TUBDLʢφϏήʔγϣϯελοΫʣ

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

32. 'FBUVSFT
    PG
    $BQBDJUPS
    
    18"
    &MFNFOUT $ ionic start ng-demo sidemenu --capacitor $ npm install

    @ionic/pwa-elements IUUQTHJUIVCDPNSEMBCPOHKBQBOEFNP IUUQTOHKBQBOEFNPOFUMJGZDPN

33. 'FBUVSFT
    PG
    $BQBDJUPS
    
    (JU
    GSJFOEMZ

34. 'FBUVSFT
    PG
    $BQBDJUPS
    
    DPSF
    QMVHJOT • "QQ
    • #BDLHSPVOE
    5BTL
    • #SPXTFS
    • $BNFSB
    •

    $MJQCPBSE
    • $POTPMF
    • %FWJDF
    • 'JMFTZTUFN
    • (FPMPDBUJPO
    • )BQUJDT
    • ,FZCPBSE
    • -PDBM
    /PUJpDBUJPOT
    • .PEBMT
    • .PUJPO
    • /FUXPSL
    • 1VTI
    /PUJpDBUJPOT
    • 4IBSF
    • 4QMBTI
    4DSFFO
    • 4UBUVT
    #BS
    • 4UPSBHF
    • 5PBTU

35. 'FBUVSFT
    PG
    $BQBDJUPS
    
    $PSEPWB
    1MVHJO
    TVQQPSU

36. 'FBUVSFT
    PG
    $BQBDJUPS
    
    6*
    /BUJWF
    4IFMM /BUJWFͱ8FC
    7JFXͷ༥߹
    .JYJOH
    /BUJWF
    6*
    BOE
    8FC
    X
    B
    DSPTT
    QMBUGPSN
    6*

37. 'FBUVSFT
    PG
    $BQBDJUPS
    
    /BUJWF
    4VQQPSU

38. !SEMBCPDBQBDJUPSGBDFCPPLMPHJO

39. !SEMBCPDBQBDJUPSBENPC

40. !SEMBCPDBQBDJUPSGBDFCPPLMPHJOUVUPSJBM

41. )PX
    UP
    TUBSU
    GPS
    HFOFSBUF
    QMVHJO $ npx @capacitor/cli plugin:generate $ npm publish import {

    Plugins } from ‘@capacitor/core'; Plugins.YourPlugin.accessMethod();

42. 8FC
    JT
    .BJO
    8FC
    7JFX 8F
    DBO
    BDDFTT
    4XJGU
    BOE
    +BWB
    $PEF
    GSPN
    5ZQF4DSJQU
    8F
    DBO
    DSFBUF
    /BUJWF
    7JFX
    BOE
    UP
    CF
    BCMF
    DPOUSPM
    GSPN
    /BUJWF
    $PEF

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

44. "OHVMBS
    JT
    QMBUGPSN