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
Ionicあらまし@okayama-js
Search
Daisuke Kishino
February 15, 2020
Programming
0
1.1k
Ionicあらまし@okayama-js
Daisuke Kishino
February 15, 2020
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
430
Monaca、WKWebViewに移行しようぜ!
kishino
0
910
MonacaアプリをネイティブのUXに近づけるために
kishino
0
900
Sign In with Appleを実装してみた
kishino
0
430
Fluid interfaces for Monaca
kishino
0
250
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
750
Other Decks in Programming
See All in Programming
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
160
iOSでSVG画像を扱う
kishikawakatsumi
0
160
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.2k
CSC305 Lecture 10
javiergs
PRO
0
220
Developer Joy - The New Paradigm
hollycummins
1
340
What's new in Spring Modulith?
olivergierke
1
160
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.4k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
100
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Visualization
eitanlees
149
16k
What's in a price? How to price your products and services
michaelherold
246
12k
Balancing Empowerment & Direction
lara
5
700
Automating Front-end Workflow
addyosmani
1371
200k
Code Review Best Practice
trishagee
72
19k
KATA
mclloyd
PRO
32
15k
Site-Speed That Sticks
csswizardry
13
920
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Faster Mobile Websites
deanohume
310
31k
Designing for Performance
lara
610
69k
Transcript
kishisuke@okayama-js 2020.02.15 Ionic͋Β·͠
Ionicͱ • WebϕʔεͷϞόΠϧΞϓϦ։ൃͷπʔϧ܈ • iOS/AndroidʹରԠͨ͠UIίϯϙʔωϯτ • ϑϨʔϜϫʔΫ(Angular/React/Vue.js)ͱͷ࿈ܞ • ϏϧυɺςετɺσϓϩΠΛߦ͏CLIπʔϧ •
ωΠςΟϒΞϓϦ։ൃͷΤίγεςϜʢCordovaɺCapacitorɺPWAʣ • ࠷ۙɺIonic 5͕ϦϦʔε͞Ε·ͨ͠
؆୯ʹݴ͏ͱ Webٕज़ͰεϚϗΞϓϦ࡞ΔͨΊ ͷ౷߹։ൃڥ
UIίϯϙʔωϯτ • iOS/Androidͷඪ४ͬΆ͍UIίϯϙʔωϯτΛఏڙ • UIΠϯλϥΫγϣϯiOS/AndroidฒΈ • ಉྨʹOnsen UIɺFramework7ͳͲ • Ionicͷํ͕࠶ݱߴ͍ؾ͕͢Δ
αϯϓϧ • https://kfug2019.ionicframework.jp/ • http://localhost:8082/ʢhttps://github.com/ionic-team/ ionic-vue-conference-appʣ • https://ionicframework.com/jp/docs/components
ϑϨʔϜϫʔΫͱͷ࿈ܞ • AngularɺReactʢɺVue.jsʣʹରԠʢIonic4͔Βʣ • ίΞ࣮Web ComponentsʢCustom ElementsɺShadow DOMʣ • ݩʑAngularґଘͩͬͨͷͰɺAngular͕1൪࣮ɾใྔଟΊ
• Vue.jsBeta൛ʢVue 3.0ͪΒ͍͠ʣ • ֤ϑϨʔϜϫʔΫͷURLϧʔςΟϯάʢVue RouterͳͲʣʹରԠ
CLIπʔϧ • ϓϩδΣΫτͷܗ࡞ • ϩʔΧϧ։ൃαʔόʔͷ࣮ߦʢserveʣ • iOS/AndroidͰ࣮ߦ • ޙड़ͷCordovaCapacitorͱ࿈ܞ
CordovaɺCapacitor • WebΞϓϦΛiOS/AndroidͰಈ࡞ͤ͞ΔͨΊͷϑϨʔϜϫʔΫ • WebView͕ϕʔε • ωΠςΟϒSDKͷΞΫηεϓϥάΠϯܦ༝ • CapacitorIonicνʔϜ͕։ൃͨ͠৽͍͠Cordova •
CordovaͷϨΨγʔͳઃܭ͔Βͷ٫ • CordovaͷϓϥάΠϯରԠ͍ͯ͠ΔͳͲɺஈ֊తͳҠߦ͕Մೳ
PWA • ΞϓϦͬΆ͍ৼΔ͍Λ͢ΔWebΞϓϦ • ΠϯετʔϧͰ͖ΔʢWeb App Manifestʣ • ΦϑϥΠϯͰಈ͘ʢCache APIʣ
• αʔόʔPush௨ʢPush APIʣ • IonicతʹɺPWAߏͷςϯϓϨʔτͷఏڙͱɺUIɾϧʔςΟϯά໘ ͔Βαϙʔτ
ݸਓతʹࢥ͍ͬͯΔ͜ͱ • ࣄͰMonaca+Onsen UIͰωΠςΟϒΞϓϦΛ։ൃ • े࣮༻త͕ͩɺPWAͳͲݟਾ͑Δͱɺଞͷख๏ Γ͍ͨˠIonicྑͦ͞͏ • ʢ༨ஊʣผͷΓޱͱͯ͠ɺFlutterษڧத
Monacaͱͷൺֱ ࣌ؒ Ionicʢʹ౷Ұ͢ΔͳΒʣ Monaca UIίϯϙʔωϯτ Ionic Onsen UI͕ϝΠϯ ϑϨʔϜϫʔΫ AngularɺReactʢɺVueʣ
AngularɺReactɺVue CLI Ionic CLI Monaca CLI ωΠςΟϒڥ CordovaɺCapacitorɺPWA CordovaʢɺPWAʣ Ϋϥυ Ionic Appflow MonacaΫϥυ ֶशίετ ߴΊ Ί ϦϦʔεස ଟΊ গͳΊ
αϯϓϧ࡞ͬͨͷͰ • ҰॹʹίʔυΛݟ·͠ΐ͏ʢVue.jsͰ͕͢ʣ • https://github.com/kishino/ionic-vue-sample • ࣮ߦํ๏ > git clone
https://github.com/kishino/ionic-vue-sample.git > cd ionic-vue-sample > npm i > npm serve
ެࣜαΠτ • ݁ߏɺຊޠ༁͞ΕͯΔ • https://ionicframework.com/jp/docs/intro
Ͱɺ͘͘։࢝ʂ