Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CapacitorをつかってAngularアプリの可能性を広げよう/ngjapan2019-c...
Search
Masahiko Sakakibara
July 13, 2019
Business
0
1.3k
CapacitorをつかってAngularアプリの可能性を広げよう/ngjapan2019-capacitor
ng-japan 2019「CapacitorをつかってAngularアプリの可能性を広げよう」登壇資料です。
Masahiko Sakakibara
July 13, 2019
Tweet
Share
More Decks by Masahiko Sakakibara
See All by Masahiko Sakakibara
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
150
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
290
プライベートプロダクト戦略 - フロントエンドカンファレンス沖縄 / private_product_frontend
rdlabo
3
4.4k
GitHubをCMSとして使う話/ using_github_as_CMS
rdlabo
0
430
JavaScriptから デバイスの力を100%引き出すための Web APIとCapacitor入門 / power_from_javascript
rdlabo
0
540
Capacitor4_release
rdlabo
0
620
Web技術で稼ぐため選択肢を俯瞰しよう/options_to_earn_web_technology
rdlabo
0
130
Ionicモバイルアプリ制作入門/get_started_with_ionic
rdlabo
0
130
JavaScript から デバイスの力を 100%引き出すための Capacitor と Angular でのはじめかた。
rdlabo
2
1.8k
Other Decks in Business
See All in Business
RF会社紹介250605.pdf
shotaroabe
0
230
タケウチグループRecruit
takeuchigroup
0
6.5k
株式会社HRbase_労務開発会社説明資料
hrbase_recruit
0
370
プロジェクトにおける政治について
ichimichi
18
3.9k
Notes on “Camp”
campinc
0
1.7k
Google ADK実用例:Travel Concierge徹底解説
mickey_kubo
0
260
ProductZine Day 2025 「部分最適を超えて、全体を動かす 〜大企業組織変革のためのプロダクトコーチング〜」
muture
PRO
1
110
エンジニア応募者様向け_会社説明資料_202502
brainpadpr
0
2.2k
アジャイル・スクラム研修2025
pokotyamu
0
260
(33枚)絶対達成プライムの特徴と3つの特徴
nyattx
PRO
0
130
20250613_CMC_2025_A3
hideki_ojima
0
150
コーポレートストーリー(新規投資家様向け会社説明資料)
gatechnologies
1
12k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Cult of Friendly URLs
andyhume
79
6.4k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Building Applications with DynamoDB
mza
95
6.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
What's in a price? How to price your products and services
michaelherold
245
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Transcript
$BQBDJUPSΛ͔ͭͬͯ "OHVMBSΞϓϦͷՄೳੑΛ͛Α͏ 6TJOH$BQBDJUPSUP&YQBOEUIF1PUFOUJBMPG"OHVMBS"QQT
*OUSPEVDF .BTBIJLP4BLBLJCBSB $&0 PG3FMBUJPO%FTJHO-BC $50PG "SFB*OOPWBUJPO"MMJBODF *POJD+BQBO6TFS(SPVQ 0SHBOJ[FS
$POUSJCVUF ionic-team/ionic ionic-team/starters ionic-team/ionic-cli ionic-team/ionic-docs ionic-team/ionic-react -conference-app GoogleChrome/lighthouse
$POUSJCVUF
*POJDTVC$-* "VUPTFU MJOUcGPSNBUUFScBMJBT JO*POJD1SPKFDU
<1SPEVDU>UJQTZT
<1SPEVDU>SBCJGZ$%/ FYBNQMFDPNDBUKQH E FYBNQMFDPNDBUKQH E *NQSPWFJNBHFEJTQMBZTQFFE CZSFTJ[FBOE$%/IPTUJOH
$BQBDJUPS
)PXXPSLTPG8FC/BUJWF"QQ w 7JFX-PDBMT8FC4JUFVTJOHB 8FC7JFXDBMMFE"QQ w "1*BWBJMBCMFUPBDDFTT/BUJWF 'VODUJPOT 888
%J⒎FSFODFPG3FBDU/BUJWF/BUJWF4DSJQU
.FDIBOJTNPG3FBDU/BUJWF/BUJWF4DSJQU
/PUGBTUFTU#VUOPUTMPX https://vimeo.com/55486684
6TJOH$BQBDJUPS 8IZ
1SPHSFTTJWF8FC"QQTͷಈ w .PCJMFUJNFJTPOUIFSJTF w PGOFXTNBSUQIPOFBQQJOTUBMMTBSF NPOUI w 5PQ4NBSUQIPOF"QQT%PNJOBUF w
8FCIBTUXJDFBTNVDIUSB⒏DBTTNBSUQIPOFBQQT w #FWJTJUFEPOWBSJPVTXFCTJUFT
1SPHSFTTJWF8FC"QQTͷར 'PSVTJOHUIFBQQ UIFVTFS ɽ(PUPUIFBQQTUPSF ɽ#ZJOTUBMMJOHUIFBQQMJDBUJPO ɽ*IBWFUPTUBSUUIFBQQMJDBUJPO
6TJOH$BQBDJUPS 8IZ
None
None
None
6TFSTXBOUT 18" J04 "OESPJE 2 6,663 1,175
6TFSTQBZNFOUT 18" J04 "OESPJE 0 770 120
.PUJPOMJOF
8FCQBZNFOUT1BZNFOU3FRVFTU"1*
lยखʹࢉ൫ɺยखʹޠz ौӫҰ &JDIJ4IJCVTBXB /PUPOMZJEFBMTCVUBMTPNBOBHFNFOU .BODBOOPUMJWFPOPOMZUIF "OBMFDUTPG$POGVDJVT BOE UIFBCBDVTBMPOFJTJNQFSGFDU BTBNBO .PSBMQSJODJQMFTBSFSFBMJ[FEJO
UIFSFBMMJGFPGNBO*UJTB HBNFPGOPUJPOTJOPOFTNJOE UIBUJUJTOPUQPTTJCMFUPMJWF BOJOEFQFOEFOUMJGF BOEUIBU JUJTBOFUIJDBMNPSBMJUZ
)PXUPTUBSU $ ng add @capacitor/angular $ ng build $ npx
cap add ios $ npx cap open ios $ yarn $ npx cap init
/FFE.PCJMF"QQ6* 'SBNFXPSL $PNQBUJCJMJUZ lOPOMJOFBS OBWJHBUJPO .PCJMF6* /BWJHBUJPO 4UBDL
/FFE.PCJMF"QQ6*.PCJMF6* .PCJMF6TFS*OUFSGBDF
/FFE.PCJMF"QQ6*'SBNFXPSL$PNQBUJCJMJUZ 'SBNFXPSL$PNQBUJCJMJUZʢϓϥοτϑΥʔϜͷޓੑʣ ʮίϯύνϏϦςΟͱɺϋʔυΣΞιϑτΣΞ͕ɺ༷ͷҟͳΔͷʹஔ͖ ͑ΒΕ্ͨͰɺݩ௨Γͷಈ࡞Λ͢Δͱ͍͏ঢ়ଶͷ͜ͱͰ͋Δʯ
/FFE.PCJMF"QQ6*lOPOMJOFBSOBWJHBUJPO lOPOMJOFBSOBWJHBUJPOʢඇઢܗφϏήʔγϣϯʣ
/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-elements IUUQTHJUIVCDPNSEMBCPOHKBQBOEFNP IUUQTOHKBQBOEFNPOFUMJGZDPN
'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 publish import {
Plugins } from ‘@capacitor/core'; Plugins.YourPlugin.accessMethod();
8FCJT.BJO8FC7JFX 8FDBOBDDFTT4XJGUBOE+BWB$PEFGSPN5ZQF4DSJQU 8FDBODSFBUF/BUJWF7JFXBOEUPCFBCMFDPOUSPMGSPN/BUJWF$PEF
8FC 18" /BUJWF BOE.PCJMF IUUQTXXXBGQCCDPNBSUJDMFT
"OHVMBSJTQMBUGPSN