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
420
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
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
210
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
160
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Laravel Boost 超入門
fire_arlo
3
220
アセットのコンパイルについて
ojun9
0
130
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Cache Me If You Can
ryunen344
2
3k
AIコーディングAgentとの向き合い方
eycjur
0
270
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
🔨 小さなビルドシステムを作る
momeemt
4
690
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Scaling GitHub
holman
463
140k
Visualization
eitanlees
148
16k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
A designer walks into a library…
pauljervisheath
207
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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
Ͱɺ͘͘։࢝ʂ