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
スマホアプリのいろいろな作り方を整理してみた / Way of creating smartp...
Search
noboru ishikura
December 21, 2019
Programming
1
93
スマホアプリのいろいろな作り方を整理してみた / Way of creating smartphone app
noboru ishikura
December 21, 2019
Tweet
Share
More Decks by noboru ishikura
See All by noboru ishikura
2024年買ったもの
noboru
0
25
スマホアプリエンジニアが3Dプリンターを買って1ヶ月が経ちました
noboru
0
24
pigeonでネイティブ連携
noboru
0
110
スマホアプリ開発を支えるRuby / Ruby supports smartphone app development
noboru
2
2.5k
我が家のネットワーク構成紹介 / My house network
noboru
0
92
リモートワークAndroidエンジニアの作業場(2018夏)
noboru
1
400
How to use SlideViewer
noboru
0
100
jQueryを使った怖い話
noboru
0
390
Androidのコードを自動で解析し、GitHubのpull requestにコメントする
noboru
1
270
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
790
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
770
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
720
童醫院敏捷轉型的實踐經驗
cclai999
0
210
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
5つのアンチパターンから学ぶLT設計
narihara
1
160
XP, Testing and ninja testing
m_seki
3
230
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Embracing the Ebb and Flow
colly
86
4.7k
The Cult of Friendly URLs
andyhume
79
6.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Site-Speed That Sticks
csswizardry
10
680
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf 2023
tenderlove
30
1.1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Making Projects Easy
brettharned
116
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Transcript
スマホアプリの いろいろな作り方を 整理してみた kanazawa.rb meetup #88 @noboru_i
https://qiita.com/noboru_i/items/240ffcb2 036f3b5cbc3b に書いたことのまとめ直し
Android/iOSアプリの作り方1 (Native) 一番オーソドックスな作り方 • Android SDK / iOS SDKを利用 •
Kotlin or Java / Swift or Objective-Cで処理を記述 • XML / Storyboard or xibでUIを構築 ◦ Jetpack Compose / SwiftUIや、コードでの実装も可能 Android SDK iOS SDK アプリ (Kotlin) アプリ (Swift)
Android/iOSアプリの作り方1 (Native) メリット • 一番安定している(他の作り方も、基本的にここをベースにしている) • それぞれのOS独自のUIを利用できる • OSの最新機能をそのまま使える •
外部のSDKも、ほぼ漏れなく対応している デメリット • Android/iOSで別々に作成する必要がある ◦ コストが倍増 ◦ 仕様がそれぞれでズレる可能性がある
Android/iOSアプリの作り方2 (ハイブリッド) Cordovaや、Cordovaベースのフレームワークを利用 基本的には、HTMLやJavaScriptをアプリ内に格納し、 それによってUIを構築する。 IonicやMonacaもこの仲間。 Android SDK iOS SDK
Cordova Framework アプリ (HTML/JavaScript/CSS)
Android/iOSアプリの作り方2 (ハイブリッド) メリット • Web技術で、ワンソースで実装できる • Cordovaには豊富なプラグインがあり、利用することでネイティブ連携が比較的容 易 デメリット •
WebViewの制限に依存しやすい • プラグインが存在しないものは、自分で記述する必要がある • ネイティブに比べると、オーバーヘッドが大きい
サーバから配信されるWebページをWebViewで表示する 作り方2と同様に、Web技術でUIを構築 ただし、サーバサイドで動作を変更することができる。 (Cordovaでもできるはず?) サーバ Android/iOSアプリの作り方3 (ガワネイティブ) Android SDK iOS
SDK WebView アプリ (HTML/JavaScript/CSS) WebView 配信
Android/iOSアプリの作り方3 (ガワネイティブ) メリット • UI更新が容易 • 既存のWebをそのまま利用できる”場合がある” デメリット • WebViewの制限に依存しやすい
• ネイティブに比べると、オーバーヘッドが大きい • なんだかんだ、Webをそのまま利用できないことが多い
Webをそのまま利用できないことが多い? • 外部サイトのリンクは、外したり、ブラウザ起動にする必要がある ◦ 自由に遷移できると、セキュリティリスクになる • window.openなど、そのまま利用できないJavaScriptメソッドがある • 真っ白画面が表示されるタイミングがある ◦
SPAだと初期ロードが遅い、 MPAだと画面遷移ごとにロードが必要 • ネイティブとWebで機能差がある場合、条件分岐が増える ◦ 例:ネイティブではカメラ起動ボタンがあるなど
クロスプラットフォーム環境を利用する React Native / Xamarin / Flutterあたりがメジャー それぞれ、言語・スタック方法が異なる Android/iOSアプリの作り方4 (cross-platform)
Android SDK iOS SDK Flutter アプリ UI UI 例:Flutterの場合
Android/iOSアプリの作り方4 (cross-platform) メリット • ネイティブと遜色ない動作速度 • XamarinならC#、React NativeならWeb技術からコンバートしやすい デメリット •
比較的情報が少なく、比較的不安定 • 問題があった場合、問題箇所の調査が難しい • ネイティブ機能を利用する場合、結局ネイティブコードが必要となる場合が多い
そもそもアプリを作らない Webサイトをアプリ風に使う PWA技術を利用する Android/iOSアプリの作り方5 (Web) サーバ Android OS iOS Browser
アプリ (HTML/JavaScript/CSS) Browser 配信
メリット • Web技術で完結できる • BLEなど、いくつかのネイティブ機能はブラウザ実装が存在する • 随時アップデートが可能 デメリット • アプリストアに配信できない
◦ TWAなど、回避策は出始めている • iOSでPUSH通知が送れないなど、アプリと比較して出来ないことがある Android/iOSアプリの作り方5 (Web)
個人の見解 • Webだけで済むのであれば、Webだけが良い ◦ ホーム画面に追加することもできる(ユーザ操作は必要) • アプリストアへの配信、一部のネイティブ機能が必要なら、Flutterが良い ◦ iOSとAndroidで無意味な動作差異(実装ミス)が発生しない •
性能要件が厳しい、ネイティブ機能をフル活用する、OS毎のUIを利用したい場合 には、ネイティブでそれぞれ実装が良い と思っています。