Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
20190707Ionic_Meetup.pdf
Yosuke Onoue
July 07, 2019
0
290
20190707Ionic_Meetup.pdf
Yosuke Onoue
July 07, 2019
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
Think About Front-end Web Development with Rust
likr
2
370
Yewにおけるoff-the-main-thread
likr
1
470
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
100
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
23
10k
Web-based Data Visualization with Rust and WebAssembly
likr
4
4.2k
Introduction to Graph Drawing
likr
0
260
About the end of the web
likr
2
390
Rust + WebAssemblyで広がるWebの未来
likr
15
6k
Ionic + WebAssembly
likr
1
630
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
213
7.5k
It's Worth the Effort
3n
172
25k
Automating Front-end Workflow
addyosmani
1351
200k
Building an army of robots
kneath
299
40k
We Have a Design System, Now What?
morganepeng
35
2.9k
Become a Pro
speakerdeck
PRO
3
790
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
Design by the Numbers
sachag
271
17k
4 Signs Your Business is Dying
shpigford
169
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Transcript
͓ͷ͏͑ʢ!@MJLSʣ *POJD3FBDUGSPN4DSBUDI *POJD.FFUVQ5PLZP +VMZ
w ඌ্༸հʢ:PTVLF0OPVFʣ w "TTPDJBUF1SPGFTTPSBUUIF%FQBSUNFOUPG*OGPSNBUJPO 4DJFODF $PMMFHFPG)VNBOJUJFTBOE4DJFODFT /JIPO6OJWFSTJUZ w 3FTFBSDI*OGPSNBUJPO7JTVBMJ[BUJPO
w )PCCZ8FC%FWFMPQNFOU w *POJD#FHJOOFS "CPVU.F
*POJD3FBDU w IUUQTXXXOQNKTDPNQBDLBHF!JPOJDSFBDU w *POJDDPNQPOFOUMJCSBSZGPS3FBDUKT w $VSSFOUMZCFUBSFMFBTF w -BUFTUWFSTJPO EBZTBHP
)PXUPTUBSU*POJD3FBDU w $SFBUFOFXQSPKFDU w JPOJDDMJ SFDPNNFOEFE w DSFBUFSFBDUBQQ w
GSPNTDSBUDI w XFCQBDL ˡUPEBZ w QBSDFM
1VSQPTFPGUIJTUBML w *OUSPEVDF*POJD3FBDU w -FBSOIPXUPTFUVQ*POJD3FBDU XJUINJOJNBMTFUUUJOHT w *OUSPEVDFTPNF$PNQPOFOUTJO*POJD3FBDU
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
1SFSFRVJTJUF,OPXMFEHF w /FDFTTBSZCVOEMFSTFUUJOHT w !JPOJDDPSF JOUFSOBMJNQMFNFOUBUJPOPG*POJD OFFETTPNF$44BTTFUT w JPOJDPOTMPBET47(BTTFUTVTJOHJNQPSUTZOUBY
w JPOJDDMJDSFBUFT3FBDUBQQUFNQMBUFCBTFEPODSFBUF SFBDUBQQ w /FDFTTBSZQBSUPGJUTTFUUJOHTOFFEUPCFVTFE
*OTUBMMBUJPO $ npm init -y $ npm i @ionic/react react
react-dom \ react-router react-router-dom $ npm i -D @babel/core @babel/preset-react @svgr/webpack \ babel-loader css-loader style-loader url-loader \ webpack webpack-cli webpack-dev-server
XFCQBDLDPOpHKT const path = require('path') const options = { module:
{ rules: [ // write our loader settings here ] }, entry: { bundle: './src/index' }, output: { path: path.join(__dirname, 'public'), filename: '[name].js' }, devServer: { historyApiFallback: true, contentBase: path.join(__dirname, 'public'), port: 8080 }, mode: process.env.NODE_ENV || 'development' } if (process.env.NODE_ENV !== 'production') { Object.assign(options, { devtool: 'inline-source-map' }) } module.exports = options
CBCFM { test: /\.js$/, use: { loader: 'babel-loader', options: {
presets: ['@babel/preset-react'] } }, include: [path.resolve(__dirname, 'src')] },
-PBEJOH$44 import '@ionic/core/css/core.css' import '@ionic/core/css/ionic.bundle.css' "OE JOZPVSFOUSZQPJOU { test: /\.css$/,
use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } } ] },
-PBEJOH*DPOT { test: /\.svg$/, use: ['@svgr/webpack', 'url-loader'] } TWHS w
5SBOTGPSN47(TJOUP3FBDUDPNQPOFOUT IUUQTHJUIVCDPNTNPPUIDPEFTWHS w VTFEJODSFBUFSFBDUBQQ import React from 'react' import { IonIcon } from '@ionic/react' import { logoTwitter } from 'ionicons/icons' export const IconExample = () => <IonIcon icon={logoTwitter} /> *OZPVSBQQ
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDU w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
)FMMP 8PSME import React from 'react' import { render }
from 'react-dom' import { IonApp, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react' const App = () => { return ( <IonApp> <IonPage> <IonHeader> <IonToolbar> <IonTitle>Title</IonTitle> </IonToolbar> </IonHeader> <IonContent className='ion-padding'> <h1>Hello, Ionic React</h1> </IonContent> </IonPage> </IonApp> ) } render(<App />, document.querySelector('#content'))
3PVUJOH import React from 'react' import { render } from
'react-dom' import { Route } from 'react-router' import { IonApp, IonPage, IonReactRouter, IonRouterOutlet } from '@ionic/react' import RootPage from './pages/root' const App = () => { return ( <IonApp> <IonReactRouter> <IonPage> <IonRouterOutlet> <Route path='/' component={RootPage} exact /> </IonRouterOutlet> </IonPage> </IonReactRouter> </IonApp> ) } render(<App />, document.querySelector('#content'))
*PO.PEBM const ModalExample = () => { const [showModal, setShowModal]
= React.useState(false) return ( <> <IonContent> <IonButton onClick={() => { setShowModal(true) }} > Show Modal </IonButton> </IonContent> <IonModal isOpen={showModal}> <IonPage> <IonHeader> <IonToolbar> <IonTitle>Modal Example</IonTitle> <IonButtons slot='end'> <IonButton onClick={() => { setShowModal(false) }} > Close </IonButton> </IonButtons> </IonToolbar> </IonHeader> <IonContent className='ion-padding'> <p>Modal opened</p> </IonContent> </IonPage> </IonModal> </> ) }
6TJOH3FEVY import React from 'react' import { render } from
'react-dom' import { Route, Switch } from 'react-router-dom' import { Provider } from 'react-redux' import { IonApp, IonPage, IonReactRouter } from '@ionic/react' import store from './store' import RootPage from './pages/root' const App = () => { return ( <Provider store={store}> <IonApp> <IonReactRouter> <IonPage> <Switch> <Route path='/' component={RootPage} /> </Switch> </IonPage> </IonReactRouter> </IonApp> </Provider> ) } render(<App />, document.querySelector('#content'))
#VJMEJOHJ04"QQXJUI$BQBDJUPS w IUUQTDBQBDJUPSJPOJDGSBNFXPSLDPNEPDTHFUUJOH TUBSUFE $ npm install --save @capacitor/core @capacitor/cli
$ npx cap init --web-dir public $ npx cap add ios $ npx cap open ios $ npx webpack --mode production $ npx cap copy 1SFQBSBUJPO 3FCVJME
%FNP"QQ w $VUFEPHJNBHFWJFXFS w IUUQTEPHWETMBCKQ w 6TJOH%PH"1* IUUQTEPHDFPEPHBQJ w TPVSDFDPEF
IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS
$POUFOUT w *OUSPEVDUJPO w .JOJNBMTFUVQGPS*POJD3FBDUBOEXFCQBDL w #VJMEJOH"QQXJUI*POJD3FBDU w 4VNNBSZ
*DPNQMFUFMZVOEFSTUPPE *POJD3FBDU
.Z*NQSFTTJPO w &BTZUPMFBSOGPS3FBDUVTFST w 3FBMMZOJDFDPNQPOFOUMJCSBSZ w 6TFGVMGPSCPUIDSFBUJOHOFXBQQBOEFNCFEEJOH FYJTUJOH3FBDUBQQ w #VU
NBOZCVHTGPSOPX w 8FSFMPPLJOHGPSXBSEUPP⒏DJBMSFMFBTF
4VNNBSZ w 5IJTUBMLJOUSPEVDFT*POJD3FBDU w *GZPVBSFB3FBDUVTFS MFUTUSZOPX w %FNPTPVSDFDPEF IUUQTHJUIVCDPNMJLSTBOECPYEPHWJFXFS w
4FFBMTP ࠷খߏͰ࢝ΊΔ!JPOJDSFBDU IUUQTRJJUBDPN@MJLSJUFNTB