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
410
Monaca、WKWebViewに移行しようぜ!
kishino
0
900
MonacaアプリをネイティブのUXに近づけるために
kishino
0
880
Sign In with Appleを実装してみた
kishino
0
430
Fluid interfaces for Monaca
kishino
0
240
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
730
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
150
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
380
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
NPOでのDevinの活用
codeforeveryone
0
230
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
240
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Thoughts on Productivity
jonyablonski
69
4.7k
Making Projects Easy
brettharned
116
6.3k
A Tale of Four Properties
chriscoyier
160
23k
The Cult of Friendly URLs
andyhume
79
6.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Language of Interfaces
destraynor
158
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Music & Morning Musume
bryan
46
6.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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
Ͱɺ͘͘։࢝ʂ