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
340
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
170
ファインディでのGitHub Actions活用事例
puku0x
9
3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
560
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
760
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
790
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
171
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
4 Signs Your Business is Dying
shpigford
182
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Navigating Team Friction
lara
183
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Fireside Chat
paigeccino
34
3.2k
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