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でモバイルアプリ開発のむずかしいを簡単に
Search
puku0x
October 02, 2019
Technology
0
330
Ionicでモバイルアプリ開発のむずかしいを簡単に
Re:Build×diffeasy ITのむずかしいを簡単にする会 - LT会 #6
https://diffeasy.connpass.com/event/147217/
puku0x
October 02, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
2k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
500
Angularコーディングスタイルガイドはいいぞ
puku0x
1
200
Nx CloudでCIを爆速にした話
puku0x
0
640
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.2k
Nxはいいぞ
puku0x
0
690
Other Decks in Technology
See All in Technology
不動産 x AIことはじめ~データの真価を拓くために
estie
0
100
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
1
1.1k
EitherT_with_Future
aoiroaoino
1
1.2k
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
160
Functional TypeScript
naoya
11
4.7k
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
150
Estrategias de escalabilidade para projetos web
jessilyneh
2
240
サプライチェーン攻撃に備える
ryunen344
0
190
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
100
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
380
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4.1k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Fireside Chat
paigeccino
31
2.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
GraphQLとの向き合い方2022年版
quramy
43
13k
Designing for humans not robots
tammielis
248
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
600
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
For a Future-Friendly Web
brad_frost
174
9.3k
What's new in Ruby 2.0
geeforr
340
31k
Transcript
Ionicでモバイルアプリ開発の むずかしいを簡単に のむずかしいを簡単にする会 会
Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2
Mobile Apps 3
Native Mobile Apps • High performance • Different platforms and
languages ◦ Android: Kotlin/Java ◦ iOS: Swift/Objective-C ◦ Your code cannot be shared 4
HTML5 Mobile Apps • Multi platform • Built with HTML/CSS/JavaScript
◦ You can share your code across platforms ☺ 5
Difficulties • Performance (Note: HTML5 apps are performant in most
use cases) • Design system ◦ Android: Material design ◦ iOS: Human Interface Guidelines 6
How can we make it easy? 7
https://ionicframework.com/ 8
Ionic • Mobile UI framework • Supports both iOS and
Android • Built with Web Components (v4〜) ◦ Framework agnostic 9
<ion-app> <ion-header> <ion-toolbar> <ion-title>Page</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-button>Button</ion-button> </ion-content> </ion-app>
Template 10
11 Android iOS
• Better code splitting & rendering performance • Archiving 60fps
with <ion-virtual-scroll /> • Perceived performance improvement with skeltons Performance 12
13 https://ionicframework.com/blog/hot-take-dark-mode/ https://startrack-ng.firebaseapp.com/ Dark Mode
14
Ionic CLI $ npm install -g ionic $ ionic start
my-app $ cd my-app $ ionic serve $ ionic cordova build android --prod --release 15
• Mobile debugger • Plugins included ◦ Camera, Geolocation, BLE,
Media, InAppBrowser, AdMob, ... $ ionic serve --devapp Ionic DevApp https://ionicframework.com/docs/appflow/devapp/ 16
import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; constructor(private camera: Camera)
{} ... const options: CameraOptions = { destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, } this.camera.getPicture(options).then(imageData => { let base64Image = 'data:image/jpeg;base64,' + imageData; }); Ionic Native 17
• Mobile friendly • Performance • Portability • Plugin support
• Better tooling Why use Ionic? 18
Ionic is awesome! 19
Recap • Ionic makes mobile app development easy ◦ Supports
famous frameworks ◦ “One code base, any platform” • Join Slack team https://ionic-jp.herokuapp.com/ • Try it now! 20 $ npm -g ionic && ionic start
21 https://frontend-conf.fukuoka.jp/
Thank you! @puku0x Noriyuki Shinpuku