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

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

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

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

Want more?

Transcript