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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

*OUSPEVDF .BTBIJLP4BLBLJCBSB $&0  PG3FMBUJPO%FTJHO-BC $50PG  "SFB*OOPWBUJPO"MMJBODF *POJD+BQBO6TFS(SPVQ  0SHBOJ[FS

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

$POUSJCVUF

Slide 5

Slide 5 text

*POJDTVC$-* "VUPTFU MJOUcGPSNBUUFScBMJBT JO*POJD1SPKFDU

Slide 6

Slide 6 text

<1SPEVDU>UJQTZT

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

$BQBDJUPS

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

%J⒎FSFODFPG3FBDU/BUJWF/BUJWF4DSJQU

Slide 11

Slide 11 text

.FDIBOJTNPG3FBDU/BUJWF/BUJWF4DSJQU

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

6TJOH$BQBDJUPS 8IZ

Slide 14

Slide 14 text

1SPHSFTTJWF8FC"QQTͷಈ޲ w .PCJMFUJNFJTPOUIFSJTF w PGOFXTNBSUQIPOFBQQJOTUBMMTBSF NPOUI w 5PQ4NBSUQIPOF"QQT%PNJOBUF w 8FCIBTUXJDFBTNVDIUSB⒏DBTTNBSUQIPOFBQQT w #FWJTJUFEPOWBSJPVTXFCTJUFT

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

6TJOH$BQBDJUPS 8IZ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

6TFSTQBZNFOUT 18" J04 "OESPJE 0 770 120

Slide 22

Slide 22 text

.PUJPOMJOF

Slide 23

Slide 23 text

8FCQBZNFOUT1BZNFOU3FRVFTU"1*

Slide 24

Slide 24 text

lยखʹࢉ൫ɺยखʹ࿦ޠz ौ୔ӫҰ  &JDIJ4IJCVTBXB /PUPOMZJEFBMTCVUBMTPNBOBHFNFOU .BODBOOPUMJWFPOPOMZUIF "OBMFDUTPG$POGVDJVT BOE UIFBCBDVTBMPOFJTJNQFSGFDU BTBNBO .PSBMQSJODJQMFTBSFSFBMJ[FEJO UIFSFBMMJGFPGNBO*UJTB HBNFPGOPUJPOTJOPOFTNJOE UIBUJUJTOPUQPTTJCMFUPMJWF BOJOEFQFOEFOUMJGF BOEUIBU JUJTBOFUIJDBMNPSBMJUZ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

/FFE.PCJMF"QQ6* 'SBNFXPSL  $PNQBUJCJMJUZ lOPOMJOFBS  OBWJHBUJPO .PCJMF6* /BWJHBUJPO  4UBDL

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

'FBUVSFTPG$BQBDJUPS(JUGSJFOEMZ

Slide 34

Slide 34 text

'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

Slide 35

Slide 35 text

'FBUVSFTPG$BQBDJUPS$PSEPWB1MVHJOTVQQPSU

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

'FBUVSFTPG$BQBDJUPS/BUJWF4VQQPSU

Slide 38

Slide 38 text

!SEMBCPDBQBDJUPSGBDFCPPLMPHJO

Slide 39

Slide 39 text

!SEMBCPDBQBDJUPSBENPC

Slide 40

Slide 40 text

!SEMBCPDBQBDJUPSGBDFCPPLMPHJOUVUPSJBM

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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