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
100
スマホアプリのいろいろな作り方を整理してみた / 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
30
スマホアプリエンジニアが3Dプリンターを買って1ヶ月が経ちました
noboru
0
32
pigeonでネイティブ連携
noboru
0
120
スマホアプリ開発を支えるRuby / Ruby supports smartphone app development
noboru
2
2.6k
我が家のネットワーク構成紹介 / My house network
noboru
0
100
リモートワークAndroidエンジニアの作業場(2018夏)
noboru
1
410
How to use SlideViewer
noboru
0
110
jQueryを使った怖い話
noboru
0
400
Androidのコードを自動で解析し、GitHubのpull requestにコメントする
noboru
1
270
Other Decks in Programming
See All in Programming
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
個人軟體時代
ethanhuang13
0
330
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Kiroで始めるAI-DLC
kaonash
2
630
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
Designing Experiences People Love
moore
142
24k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Thoughts on Productivity
jonyablonski
70
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Into the Great Unknown - MozCon
thekraken
40
2k
A Tale of Four Properties
chriscoyier
160
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Writing Fast Ruby
sferik
628
62k
Embracing the Ebb and Flow
colly
87
4.8k
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を利用したい場合 には、ネイティブでそれぞれ実装が良い と思っています。