Slide 1

Slide 1 text

スマホアプリの いろいろな作り方を 整理してみた kanazawa.rb meetup #88 @noboru_i

Slide 2

Slide 2 text

https://qiita.com/noboru_i/items/240ffcb2 036f3b5cbc3b に書いたことのまとめ直し

Slide 3

Slide 3 text

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)

Slide 4

Slide 4 text

Android/iOSアプリの作り方1 (Native) メリット ● 一番安定している(他の作り方も、基本的にここをベースにしている) ● それぞれのOS独自のUIを利用できる ● OSの最新機能をそのまま使える ● 外部のSDKも、ほぼ漏れなく対応している デメリット ● Android/iOSで別々に作成する必要がある ○ コストが倍増 ○ 仕様がそれぞれでズレる可能性がある

Slide 5

Slide 5 text

Android/iOSアプリの作り方2 (ハイブリッド) Cordovaや、Cordovaベースのフレームワークを利用 基本的には、HTMLやJavaScriptをアプリ内に格納し、 それによってUIを構築する。 IonicやMonacaもこの仲間。 Android SDK iOS SDK Cordova Framework アプリ (HTML/JavaScript/CSS)

Slide 6

Slide 6 text

Android/iOSアプリの作り方2 (ハイブリッド) メリット ● Web技術で、ワンソースで実装できる ● Cordovaには豊富なプラグインがあり、利用することでネイティブ連携が比較的容 易 デメリット ● WebViewの制限に依存しやすい ● プラグインが存在しないものは、自分で記述する必要がある ● ネイティブに比べると、オーバーヘッドが大きい

Slide 7

Slide 7 text

サーバから配信されるWebページをWebViewで表示する 作り方2と同様に、Web技術でUIを構築 ただし、サーバサイドで動作を変更することができる。 (Cordovaでもできるはず?) サーバ Android/iOSアプリの作り方3 (ガワネイティブ) Android SDK iOS SDK WebView アプリ (HTML/JavaScript/CSS) WebView 配信

Slide 8

Slide 8 text

Android/iOSアプリの作り方3 (ガワネイティブ) メリット ● UI更新が容易 ● 既存のWebをそのまま利用できる”場合がある” デメリット ● WebViewの制限に依存しやすい ● ネイティブに比べると、オーバーヘッドが大きい ● なんだかんだ、Webをそのまま利用できないことが多い

Slide 9

Slide 9 text

Webをそのまま利用できないことが多い? ● 外部サイトのリンクは、外したり、ブラウザ起動にする必要がある ○ 自由に遷移できると、セキュリティリスクになる ● window.openなど、そのまま利用できないJavaScriptメソッドがある ● 真っ白画面が表示されるタイミングがある ○ SPAだと初期ロードが遅い、 MPAだと画面遷移ごとにロードが必要 ● ネイティブとWebで機能差がある場合、条件分岐が増える ○ 例:ネイティブではカメラ起動ボタンがあるなど

Slide 10

Slide 10 text

クロスプラットフォーム環境を利用する React Native / Xamarin / Flutterあたりがメジャー それぞれ、言語・スタック方法が異なる Android/iOSアプリの作り方4 (cross-platform) Android SDK iOS SDK Flutter アプリ UI UI 例:Flutterの場合

Slide 11

Slide 11 text

Android/iOSアプリの作り方4 (cross-platform) メリット ● ネイティブと遜色ない動作速度 ● XamarinならC#、React NativeならWeb技術からコンバートしやすい デメリット ● 比較的情報が少なく、比較的不安定 ● 問題があった場合、問題箇所の調査が難しい ● ネイティブ機能を利用する場合、結局ネイティブコードが必要となる場合が多い

Slide 12

Slide 12 text

そもそもアプリを作らない Webサイトをアプリ風に使う PWA技術を利用する Android/iOSアプリの作り方5 (Web) サーバ Android OS iOS Browser アプリ (HTML/JavaScript/CSS) Browser 配信

Slide 13

Slide 13 text

メリット ● Web技術で完結できる ● BLEなど、いくつかのネイティブ機能はブラウザ実装が存在する ● 随時アップデートが可能 デメリット ● アプリストアに配信できない ○ TWAなど、回避策は出始めている ● iOSでPUSH通知が送れないなど、アプリと比較して出来ないことがある Android/iOSアプリの作り方5 (Web)

Slide 14

Slide 14 text

個人の見解 ● Webだけで済むのであれば、Webだけが良い ○ ホーム画面に追加することもできる(ユーザ操作は必要) ● アプリストアへの配信、一部のネイティブ機能が必要なら、Flutterが良い ○ iOSとAndroidで無意味な動作差異(実装ミス)が発生しない ● 性能要件が厳しい、ネイティブ機能をフル活用する、OS毎のUIを利用したい場合 には、ネイティブでそれぞれ実装が良い と思っています。