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

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

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

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

7ce46cdba50db99f3403024fe2519c91?s=128

Masahiko Sakakibara

July 13, 2019
Tweet

Transcript

  1. $BQBDJUPSΛ͔ͭͬͯ
 "OHVMBSΞϓϦͷՄೳੑΛ޿͛Α͏ 6TJOH$BQBDJUPSUP&YQBOEUIF1PUFOUJBMPG"OHVMBS"QQT

  2. *OUSPEVDF .BTBIJLP4BLBLJCBSB $&0
 PG3FMBUJPO%FTJHO-BC $50PG
 "SFB*OOPWBUJPO"MMJBODF *POJD+BQBO6TFS(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$-* "VUPTFU  MJOUcGPSNBUUFScBMJBT JO*POJD1SPKFDU

  6.  <1SPEVDU>UJQTZT

  7. <1SPEVDU>SBCJGZ$%/ FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E *NQSPWFJNBHFEJTQMBZTQFFE
 CZSFTJ[FBOE$%/IPTUJOH

  8. $BQBDJUPS

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

  10. %J⒎FSFODFPG3FBDU/BUJWF/BUJWF4DSJQU

  11. .FDIBOJTNPG3FBDU/BUJWF/BUJWF4DSJQU

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

  13. 6TJOH$BQBDJUPS 8IZ

  14. 1SPHSFTTJWF8FC"QQTͷಈ޲ w .PCJMFUJNFJTPOUIFSJTF w PGOFXTNBSUQIPOFBQQJOTUBMMTBSF NPOUI  w 5PQ4NBSUQIPOF"QQT%PNJOBUF w

    8FCIBTUXJDFBTNVDIUSB⒏DBTTNBSUQIPOFBQQT w #FWJTJUFEPOWBSJPVTXFCTJUFT
  15. 1SPHSFTTJWF8FC"QQTͷར఺ 'PSVTJOHUIFBQQ UIFVTFS ɽ(PUPUIFBQQTUPSF ɽ#ZJOTUBMMJOHUIFBQQMJDBUJPO ɽ*IBWFUPTUBSUUIFBQQMJDBUJPO


  16. 6TJOH$BQBDJUPS 8IZ

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

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

  22. .PUJPOMJOF

  23. 8FCQBZNFOUT1BZNFOU3FRVFTU"1*

  24. lยखʹࢉ൫ɺยखʹ࿦ޠz ौ୔ӫҰ
 &JDIJ4IJCVTBXB /PUPOMZJEFBMTCVUBMTPNBOBHFNFOU .BODBOOPUMJWFPOPOMZUIF "OBMFDUTPG$POGVDJVT BOE UIFBCBDVTBMPOFJTJNQFSGFDU BTBNBO .PSBMQSJODJQMFTBSFSFBMJ[FEJO

    UIFSFBMMJGFPGNBO*UJTB HBNFPGOPUJPOTJOPOFTNJOE UIBUJUJTOPUQPTTJCMFUPMJWF BOJOEFQFOEFOUMJGF BOEUIBU JUJTBOFUIJDBMNPSBMJUZ
  25. )PXUPTUBSU $ ng add @capacitor/angular $ ng build $ npx

    cap add ios $ npx cap open ios $ yarn $ npx cap init
  26. /FFE.PCJMF"QQ6* 'SBNFXPSL
 $PNQBUJCJMJUZ lOPOMJOFBS
 OBWJHBUJPO .PCJMF6* /BWJHBUJPO
 4UBDL

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

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

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

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

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

  32. 'FBUVSFTPG$BQBDJUPS18"&MFNFOUT $ ionic start ng-demo sidemenu --capacitor $ npm install

    @ionic/pwa-elements IUUQTHJUIVCDPNSEMBCPOHKBQBOEFNP IUUQTOHKBQBOEFNPOFUMJGZDPN
  33. 'FBUVSFTPG$BQBDJUPS(JUGSJFOEMZ

  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
  35. 'FBUVSFTPG$BQBDJUPS$PSEPWB1MVHJOTVQQPSU

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

  37. 'FBUVSFTPG$BQBDJUPS/BUJWF4VQQPSU

  38. !SEMBCPDBQBDJUPSGBDFCPPLMPHJO

  39. !SEMBCPDBQBDJUPSBENPC

  40. !SEMBCPDBQBDJUPSGBDFCPPLMPHJOUVUPSJBM

  41. )PXUPTUBSUGPSHFOFSBUFQMVHJO $ npx @capacitor/cli plugin:generate $ npm publish import {

    Plugins } from ‘@capacitor/core'; Plugins.YourPlugin.accessMethod();
  42. 8FCJT.BJO8FC7JFX 8FDBOBDDFTT4XJGUBOE+BWB$PEFGSPN5ZQF4DSJQU 8FDBODSFBUF/BUJWF7JFXBOEUPCFBCMFDPOUSPMGSPN/BUJWF$PEF

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

  44. "OHVMBSJTQMBUGPSN