ng-japan 2019「CapacitorをつかってAngularアプリの可能性を広げよう」登壇資料です。
$BQBDJUPSΛ͔ͭͬͯ "OHVMBSΞϓϦͷՄೳੑΛ͛Α͏6TJOH$BQBDJUPSUP&YQBOEUIF1PUFOUJBMPG"OHVMBS"QQT
View Slide
*OUSPEVDF.BTBIJLP4BLBLJCBSB$&0 PG3FMBUJPO%FTJHO-BC$50PG "SFB*OOPWBUJPO"MMJBODF*POJD+BQBO6TFS(SPVQ 0SHBOJ[FS
$POUSJCVUFionic-team/ionicionic-team/startersionic-team/ionic-cliionic-team/ionic-docsionic-team/ionic-react -conference-appGoogleChrome/lighthouse
$POUSJCVUF
*POJDTVC$-*"VUPTFU MJOUcGPSNBUUFScBMJBTJO*POJD1SPKFDU
<1SPEVDU>UJQTZT
<1SPEVDU>SBCJGZ$%/FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E*NQSPWFJNBHFEJTQMBZTQFFE CZSFTJ[FBOE$%/IPTUJOH
$BQBDJUPS
)PXXPSLTPG8FC/BUJWF"QQw 7JFX-PDBMT8FC4JUFVTJOHB8FC7JFXDBMMFE"QQw "1*BWBJMBCMFUPBDDFTT/BUJWF'VODUJPOT888
%J⒎FSFODFPG3FBDU/BUJWF/BUJWF4DSJQU
.FDIBOJTNPG3FBDU/BUJWF/BUJWF4DSJQU
/PUGBTUFTU#VUOPUTMPXhttps://vimeo.com/55486684
6TJOH$BQBDJUPS8IZ
1SPHSFTTJWF8FC"QQTͷಈw .PCJMFUJNFJTPOUIFSJTFw PGOFXTNBSUQIPOFBQQJOTUBMMTBSF NPOUIw 5PQ4NBSUQIPOF"QQT%PNJOBUFw 8FCIBTUXJDFBTNVDIUSB⒏DBTTNBSUQIPOFBQQTw #FWJTJUFEPOWBSJPVTXFCTJUFT
1SPHSFTTJWF8FC"QQTͷར'PSVTJOHUIFBQQ UIFVTFSɽ(PUPUIFBQQTUPSFɽ#ZJOTUBMMJOHUIFBQQMJDBUJPOɽ*IBWFUPTUBSUUIFBQQMJDBUJPO
6TFSTXBOUT18" J04 "OESPJE2 6,663 1,175
6TFSTQBZNFOUT18" J04 "OESPJE0 770 120
.PUJPOMJOF
8FCQBZNFOUT1BZNFOU3FRVFTU"1*
lยखʹࢉ൫ɺยखʹޠzौӫҰ &JDIJ4IJCVTBXB/PUPOMZJEFBMTCVUBMTPNBOBHFNFOU.BODBOOPUMJWFPOPOMZUIF"OBMFDUTPG$POGVDJVT BOEUIFBCBDVTBMPOFJTJNQFSGFDUBTBNBO.PSBMQSJODJQMFTBSFSFBMJ[FEJOUIFSFBMMJGFPGNBO*UJTBHBNFPGOPUJPOTJOPOFTNJOEUIBUJUJTOPUQPTTJCMFUPMJWFBOJOEFQFOEFOUMJGF BOEUIBUJUJTBOFUIJDBMNPSBMJUZ
)PXUPTUBSU$ ng add @capacitor/angular$ ng build$ npx cap add ios$ npx cap open ios$ yarn$ npx cap init
/FFE.PCJMF"QQ6*'SBNFXPSL $PNQBUJCJMJUZlOPOMJOFBS OBWJHBUJPO.PCJMF6*/BWJHBUJPO 4UBDL
/FFE.PCJMF"QQ6*.PCJMF6*.PCJMF6TFS*OUFSGBDF
/FFE.PCJMF"QQ6*'SBNFXPSL$PNQBUJCJMJUZ'SBNFXPSL$PNQBUJCJMJUZʢϓϥοτϑΥʔϜͷޓੑʣʮίϯύνϏϦςΟͱɺϋʔυΣΞιϑτΣΞ͕ɺ༷ͷҟͳΔͷʹஔ͖͑ΒΕ্ͨͰɺݩ௨Γͷಈ࡞Λ͢Δͱ͍͏ঢ়ଶͷ͜ͱͰ͋Δʯ
/FFE.PCJMF"QQ6*lOPOMJOFBSOBWJHBUJPOlOPOMJOFBSOBWJHBUJPOʢඇઢܗφϏήʔγϣϯʣ
/FFE.PCJMF"QQ6*/BWJHBUJPO4UBDL/BWJHBUJPOTUBDLʢφϏήʔγϣϯελοΫʣ
*POJD'SBNFXPSL$ ng add @ionic/angular$ ng update @ionic/angular
'FBUVSFTPG$BQBDJUPS18"&MFNFOUT$ ionic start ng-demo sidemenu --capacitor$ npm install @ionic/pwa-elementsIUUQTHJUIVCDPNSEMBCPOHKBQBOEFNPIUUQTOHKBQBOEFNPOFUMJGZDPN
'FBUVSFTPG$BQBDJUPS(JUGSJFOEMZ
'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
'FBUVSFTPG$BQBDJUPS$PSEPWB1MVHJOTVQQPSU
'FBUVSFTPG$BQBDJUPS6*/BUJWF4IFMM/BUJWFͱ8FC7JFXͷ༥߹.JYJOH/BUJWF6*BOE8FCXBDSPTTQMBUGPSN6*
'FBUVSFTPG$BQBDJUPS/BUJWF4VQQPSU
!SEMBCPDBQBDJUPSGBDFCPPLMPHJO
!SEMBCPDBQBDJUPSBENPC
!SEMBCPDBQBDJUPSGBDFCPPLMPHJOUVUPSJBM
)PXUPTUBSUGPSHFOFSBUFQMVHJO$ npx @capacitor/cli plugin:generate$ npm publishimport { Plugins } from ‘@capacitor/core';Plugins.YourPlugin.accessMethod();
8FCJT.BJO8FC7JFX8FDBOBDDFTT4XJGUBOE+BWB$PEFGSPN5ZQF4DSJQU8FDBODSFBUF/BUJWF7JFXBOEUPCFBCMFDPOUSPMGSPN/BUJWF$PEF
8FC 18" /BUJWF BOE.PCJMFIUUQTXXXBGQCCDPNBSUJDMFT
"OHVMBSJTQMBUGPSN