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
93
リモートワーク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
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
130
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
250
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
430
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
390
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
NPOでのDevinの活用
codeforeveryone
0
900
AIともっと楽するE2Eテスト
myohei
8
3k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Invisible Side of Design
smashingmag
301
51k
How GitHub (no longer) Works
holman
314
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
What's in a price? How to price your products and services
michaelherold
246
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
GitHub's CSS Performance
jonrohan
1031
460k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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を利用したい場合 には、ネイティブでそれぞれ実装が良い と思っています。