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
350
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
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
190
ファインディでのGitHub Actions活用事例
puku0x
9
3.2k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
580
Angularコーディングスタイルガイドはいいぞ
puku0x
1
300
Nx CloudでCIを爆速にした話
puku0x
0
820
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
820
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Other Decks in Technology
See All in Technology
エンジニアリングで組織のアウトカムを最速で最大化する!
ham0215
1
280
もう難しくない!誰でもカンタンDocker入門 〜30分であなたのPCにアプリを立ち上げる〜
devops_vtj
0
180
DjangoCon Europe 2025 Keynote - Django for Data Science
wsvincent
0
370
AI-in-the-Enterprise|OpenAIが公開した「AI導入7つの教訓」——ChatGPTで変わる企業の未来とは?
customercloud
PRO
0
100
勝手に!深堀り!Cloud Run worker pools / Deep dive Cloud Run worker pools
iselegant
4
620
2025-04-14 Data & Analytics 井戸端会議 Multi tenant log platform with Iceberg
kamijin_fanta
0
170
CodeRabbitと過ごした1ヶ月 ─ AIコードレビュー導入で実感したチーム開発の進化
mitohato14
1
230
AIエージェント開発手法と業務導入のプラクティス
ykosaka
9
2.6k
テストって楽しい!開発を加速させるテストの魅力 / Testing is Fun! The Fascinating of Testing to Accelerate Development
aiandrox
0
160
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
ozawa
3
160
クラウドネイティブ環境の脅威モデリング
kyohmizu
1
250
ここはMCPの夜明けまえ
nwiizo
32
13k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to train your dragon (web standard)
notwaldorf
91
6k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.5k
Automating Front-end Workflow
addyosmani
1370
200k
How GitHub (no longer) Works
holman
314
140k
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