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
2.1k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
510
Angularコーディングスタイルガイドはいいぞ
puku0x
1
210
Nx CloudでCIを爆速にした話
puku0x
0
650
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.3k
Nxはいいぞ
puku0x
0
700
Other Decks in Technology
See All in Technology
FastAPIでのasync defとdefの使い分け
takashi1029
6
1.8k
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
2
340
【swonet.conf_】NOCメンバーが語るSTMの実態!! ~ShowNetから若者への贈り物~
shownet
PRO
0
230
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
270
C# 13 / .NET 9 の新機能 (RC 1 時点)
nenonaninu
1
1.1k
Efficient zero-copy networking using io_uring
ennael
PRO
0
270
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
3
840
Pythonを活用したLLMによる構造的データ生成の手法と実践
brainpadpr
3
220
virtme-ng
ennael
PRO
0
310
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
200
PREEMPT_RT over the years
ennael
PRO
0
300
Sansanにおける全社横断データ分析基盤の挑戦と未来 / Challenges and Future of Cross-Organizational Data Analytics Platform at Sansan
sansan_randd
2
310
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
Embracing the Ebb and Flow
colly
83
4.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Happy Clients
brianwarren
97
6.6k
Art, The Web, and Tiny UX
lynnandtonic
295
20k
Music & Morning Musume
bryan
46
6.1k
What's in a price? How to price your products and services
michaelherold
243
11k
Done Done
chrislema
181
16k
Faster Mobile Websites
deanohume
304
30k
Infographics Made Easy
chrislema
239
18k
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