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
740
Other Decks in Programming
See All in Programming
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
効率的な開発手段として VRTを活用する
ishkawa
0
160
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.7k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
9
3k
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
23
9.6k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
Porting a visionOS App to Android XR
akkeylab
0
680
型で語るカタ
irof
0
700
What's new in AppKit on macOS 26
1024jp
0
150
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Speed Design
sergeychernyshev
32
1k
Building Adaptive Systems
keathley
43
2.7k
Scaling GitHub
holman
460
140k
Six Lessons from altMBA
skipperchong
28
3.9k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
For a Future-Friendly Web
brad_frost
179
9.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Writing Fast Ruby
sferik
628
62k
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
Ͱɺ͘͘։࢝ʂ