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
370
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
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
900
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
220
ファインディでのGitHub Actions活用事例
puku0x
9
3.4k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
600
Angularコーディングスタイルガイドはいいぞ
puku0x
1
350
Nx CloudでCIを爆速にした話
puku0x
0
870
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
870
Other Decks in Technology
See All in Technology
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.5k
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
220
Amazon Qで2Dゲームを作成してみた
siromi
0
180
AIに頼りすぎない新人育成術
cuebic9bic
3
340
結局QUICで通信は速くなるの?
kota_yata
9
7.5k
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
550
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
170
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1k
React Server ComponentsでAPI不要の開発体験
polidog
PRO
1
350
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
20k
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
670
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
210
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Why Our Code Smells
bkeepers
PRO
338
57k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
The World Runs on Bad Software
bkeepers
PRO
70
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making Projects Easy
brettharned
117
6.3k
Building an army of robots
kneath
306
45k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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