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
870
Ionicあらまし@okayama-js
Daisuke Kishino
February 15, 2020
Tweet
Share
More Decks by Daisuke Kishino
See All by Daisuke Kishino
Flutterコンテストを開催した話
kishino
1
340
Monaca、WKWebViewに移行しようぜ!
kishino
0
750
MonacaアプリをネイティブのUXに近づけるために
kishino
0
680
Sign In with Appleを実装してみた
kishino
0
330
Fluid interfaces for Monaca
kishino
0
200
Vue.jsの特徴
kishino
0
600
Monacaでアプリ名の多言語化
kishino
0
580
Other Decks in Programming
See All in Programming
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
Elm 0.19.0 Changes
bkuhlmann
0
490
Fast JSX: Don't clone props object #28768
yossydev
1
130
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Git Lint
bkuhlmann
4
750
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
GitHub Copilotのススメ
marcy731
1
200
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
Anthropic Cookbook のおすすめレシピ
schroneko
7
980
Featured
See All Featured
Done Done
chrislema
178
15k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Building Applications with DynamoDB
mza
88
5.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
What's in a price? How to price your products and services
michaelherold
237
11k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Web development in the modern age
philhawksworth
202
10k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
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
Ͱɺ͘͘։࢝ʂ