スマホアプリのいろいろな作り方を整理してみた / Way of creating smartphone app

Transcript

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

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

3. 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）

4. Android/iOSアプリの作り方1 （Native） メリット • 一番安定している（他の作り方も、基本的にここをベースにしている） • それぞれのOS独自のUIを利用できる • OSの最新機能をそのまま使える •

   外部のSDKも、ほぼ漏れなく対応している デメリット • Android/iOSで別々に作成する必要がある ◦ コストが倍増 ◦ 仕様がそれぞれでズレる可能性がある

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

   Cordova Framework アプリ （HTML/JavaScript/CSS）

6. Android/iOSアプリの作り方2 （ハイブリッド） メリット • Web技術で、ワンソースで実装できる • Cordovaには豊富なプラグインがあり、利用することでネイティブ連携が比較的容 易 デメリット •

   WebViewの制限に依存しやすい • プラグインが存在しないものは、自分で記述する必要がある • ネイティブに比べると、オーバーヘッドが大きい

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

   SDK WebView アプリ （HTML/JavaScript/CSS） WebView 配信

8. Android/iOSアプリの作り方3 （ガワネイティブ） メリット • UI更新が容易 • 既存のWebをそのまま利用できる”場合がある” デメリット • WebViewの制限に依存しやすい

   • ネイティブに比べると、オーバーヘッドが大きい • なんだかんだ、Webをそのまま利用できないことが多い

9. Webをそのまま利用できないことが多い？ • 外部サイトのリンクは、外したり、ブラウザ起動にする必要がある ◦ 自由に遷移できると、セキュリティリスクになる • window.openなど、そのまま利用できないJavaScriptメソッドがある • 真っ白画面が表示されるタイミングがある ◦

   SPAだと初期ロードが遅い、 MPAだと画面遷移ごとにロードが必要 • ネイティブとWebで機能差がある場合、条件分岐が増える ◦ 例：ネイティブではカメラ起動ボタンがあるなど

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

    Android SDK iOS SDK Flutter アプリ UI UI 例：Flutterの場合

11. Android/iOSアプリの作り方4 （cross-platform） メリット • ネイティブと遜色ない動作速度 • XamarinならC#、React NativeならWeb技術からコンバートしやすい デメリット •

    比較的情報が少なく、比較的不安定 • 問題があった場合、問題箇所の調査が難しい • ネイティブ機能を利用する場合、結局ネイティブコードが必要となる場合が多い

12. そもそもアプリを作らない Webサイトをアプリ風に使う PWA技術を利用する Android/iOSアプリの作り方5 （Web） サーバ Android OS iOS Browser

    アプリ （HTML/JavaScript/CSS） Browser 配信

13. メリット • Web技術で完結できる • BLEなど、いくつかのネイティブ機能はブラウザ実装が存在する • 随時アップデートが可能 デメリット • アプリストアに配信できない

    ◦ TWAなど、回避策は出始めている • iOSでPUSH通知が送れないなど、アプリと比較して出来ないことがある Android/iOSアプリの作り方5 （Web）

14. 個人の見解 • Webだけで済むのであれば、Webだけが良い ◦ ホーム画面に追加することもできる（ユーザ操作は必要） • アプリストアへの配信、一部のネイティブ機能が必要なら、Flutterが良い ◦ iOSとAndroidで無意味な動作差異（実装ミス）が発生しない •

    性能要件が厳しい、ネイティブ機能をフル活用する、OS毎のUIを利用したい場合 には、ネイティブでそれぞれ実装が良い と思っています。