モバイルアプリ開発の技術をどう選ぶ？ 各手法の特徴と選択のポイントを解説 2022 / 6 /16 NCDC株式会社 本田 大悟

プレゼンター紹介 2 エンジニア 本田 大悟 宮崎大学大学院 工学研究科工学専攻修了 大学院終了後は富士通グループのソフトウェア開 発会社に入社。主にインフラ関連のSEとして、シ ステム開発プロジェクトに参画した。 その後、コードを書くことで課題解決を行うこと に注力するためNCDCに参画。 現在はフロントエンドエンジニアとして、React やReact Native, Swift UIなどのモダンな技術で開 発を行う。

Business 事業領域の推進 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション NCDCのサービス体系 3

私たちにできること l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています。 l スモールスタートでの検証から、本開発・継続的な改善までサポートします。 4 ワークショップを中⼼とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に⾏い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の⾼いプロジェクト ではMVP（Minimum Viable Product）を⽤いた検証を⾏ うなど、⽬的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを⽤意してユーザの 評価を確認します。 ユーザとのタッチポイントとなる各種デバ イスのフロントエンドデザインから、クラ ウドサービスを駆使したバックエンドの開 発まで。多様なテクノロジーをインテグ レーションします。 l AI / IoT / AR l モバイル・ウェブ アプリ開発 l クラウドインテグレーション l システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善

モバイルアプリ開発の技術をどう選ぶ？ 各手法の特徴と選択のポイントを解説 2022 / 6 /16 NCDC株式会社 本田 大悟

はじめに

前提 l 本セミナーの対象者 l スマホで動作するアプリを作成するプロジェクトがあるが、どのよう な方法でアプリを作成するか決めかねているIT企画の方及びビジネス サイドの方 l 対象としない内容 l 各技術の詳しい実装内容 7

目次 8 1. スマホで動作するアプリの全体像の確認 2. モバイルアプリかWebアプリかの選択 3. ネイティブアプリかクロスプラットフォームアプリかの選択 4. クロスプラットフォーム内の実装方式の選択 5. Webアプリのモバイル化について

スマホで動作するアプリの全体像

スマホで動作するアプリの全体像 10 スマホで 動作するアプリ モバイルアプリ ネイティブ アプリ iOS Swift Android Kotlin クロスプラット フォームアプリ ネイティブUI型 React Native 独自レンダー型 Flutter WebView型 (ハイブリッド アプリ) Apache Cordova ガワアプリ Webアプリ PWA PWA以外の Webアプリ 種類が多すぎる...。何がどう違うのか分からない。

モバイルアプリとWebアプリの検討

モバイルアプリとWebアプリの違い l モバイルアプリとWebアプリの違いは、プログラムが置かれている場所 12 モバイルアプリ 事前に実行プログラムを DLする Webアプリ ブラウザを起動 サーバへ プログラムを要求 デバイスから起動 ストアからアプリをDLして、Home画面にアプリが置かれるかどうか

モバイルアプリとWebアプリの違い 13 モバイルアプリ Webアプリ 定義 アプリケーションのプログラムを事前にモバイル デバイス上で保持するアプリ ブラウザ上で動作し、webの技術で動作するアプリ メリット • スマホの独自の機能(ネイティブ機能)を使用す ることができる • Home画面にアプリのアイコンが置かれる • オフラインでの実行が可能 • 処理性能がwebアプリに比べて高い • ストア経由の課金の処理などを簡単に行うこと ができる • ストアを通さずにアプリを実行できる • どんなOSでも動作する (レスポンシブデザイン対応は行う必要あり) • PCと同じソースでスマホでも動作することができ る • アプリのUpdateが容易 デメリット • ストアからDLする必要がある • ストアの審査に通らないとユーザに配信するこ とができない(簡単にUpdateできない) • 課金を行う場合、ストアへの手数料が発生する • Home画面にアプリが置かれない • オフラインでの実行ができない • スマホ独自の機能を使用することができない (通知やヘルスケアの情報取得など) • 処理性能が制限されているため、あまり重い処理 を実行するとUXが悪化する

Webアプリで操作できるネイティブ機能 14 ネイティブ機能 実装の可否 補足 カメラ △ 写真撮影のみだけなら可能 写真の加工機能や顔認識を行う場合は難しい マイク・オーディオ ○ 使用することができる push通知 × push通知を受信することはできない ヘルスケア情報 △ AndroidのGoogle fitは取得可能 iOSのヘルスキットへはアクセスすることはできない 生体認証 × スマホアプリのようには使用することはできない FIDOという別の技術を使用することで可能になるが、事前にスマホを登 録しておくことなど技術的に取り扱いが難しい 位置情報 ○ 使用することができる Bluetooth × Androidでは一部機能が使用できるが、iOSでは動作しない。 また、実験的機能となっているため、使用は控えた方が良い。 バックグラウンド処理 × Webアプリはブラウザが閉じると処理を継続することができない 課金 × ストアを通した課金を行うことはできない。 クレジットカードを登録して、処理するなど独自の実装が必要 これらは現時点で使用できないものであり、 今後Webの進化によって対応される可能性が高い。 また、ブラウザによっては○でも対応していないものを存在する

選択の際のポイント 15 l モバイルアプリの選択ポイント l 機能 l オフラインで実行する必要がある l Webアプリで対応できないネイティブ機能を使用する必要がある l アプリのアイコンをHome画面に置きたい l 対応デバイス l PCでの動作を考えない l ビジネス l 課金の手数料を支払ってもビジネスとして成立する l Webアプリの選択のポイント l モバイルアプリの選択のポイントで１つでもNoと答える場合

ネイティブアプリとクロスプラットフォームアプリの検討

スマホで動作するアプリの全体像 17 スマホで 動作するアプリ モバイルアプリ ネイティブ アプリ iOS Swift Android Kotlin クロスプラット フォームアプリ ネイティブUI型 React Native 独自レンダー型 Flutter WebView型 (ハイブリッド アプリ) Apache Cordova ガワアプリ Webアプリ PWA PWA以外の Webアプリ

ネイティブアプリとクロスプラットフォームアプリの違い l ネイティブアプリとクロスプラットフォームアプリの違いは、対応する OSの数 18 ネイティブアプリ クロスプラットフォームアプリ Androidユーザ iOSユーザ Androidユーザ iOSユーザ

ネイティブアプリとクロスプラットフォームアプリの違い 19 ネイティブアプリ クロスプラットフォームアプリ 定義 OS 固有のアプリを開発するために用意されたツー ルで開発されたアプリ 1つのコードでAndroidとiOSのアプリを作成すること ができる技術を用いて作成されたアプリ メリット • OSの最新の機能を使用できる (ネイティブの場合、最新OSがリリースされる前 にベータ版として最新機能を使用することがで きる) • 処理性能(パフォーマンス)が高い • 両OSのアプリを同時に開発できるため開発コスト が半減する デメリット • 両OSに対応しようとすると、同じアプリを違う 言語で2つ作成する必要があり、開発コストが2 倍になる • 保守運用も2倍となる • iOSならSwift、androidならKotlin , Javaと特定の技 術で作成しなければならず、技術者を集めるこ とが難しい。 • OSの最新機能を動かすことができない • 凝ったネイティブ機能を使用する場合は、対応で きない場合がある (一部だけネイティブコードを埋め込むことができ るため、完全に対応することができないというわ けではない。)

クロスプラットフォームアプリで操作できるネイティブ機能 20 ネイティブ機能 実装の可否 補足 カメラ △ 写真撮影は可能 顔認識し、リアルタイムで加工して表示するなどの細かなカスタマイズ が必要な場合はネイティブが向いている マイク・オーディオ ○ 使用することができる push通知 ○ 使用することができる ヘルスケア情報 ○ 使用することができる 生体認証 ○ 使用することができる 位置情報 ○ 使用することができる Bluetooth ○ 使用することができる バックグラウンド処理 △ 使用できるが、一部機能については使用不可 課金 ○ 使用することができる 一般的な対応であって、フレームワークによって ネイティブ機能の対応状況には違いがある。

選択の際のポイント 21 l ネイティブアプリの選択のポイント l 機能 l OSの最新の機能を使用する必要がある l 画像解析、データ解析などの計算量が多い処理を行う必要がある l 前ページで△であったネイティブ機能を使用する必要がある l 対応デバイス l iOS, Androidの片方のOSに対応するだけで良い l クロスプラットフォームアプリの選択ポイント l 機能 l OSの最新の機能を使用する必要がない l 対応デバイス l iOS, Androidの両方のOSに対応する必要がある

クロスプラットフォームアプリの開発技術の検討

スマホで動作するアプリの全体像 23 スマホで 動作するアプリ モバイルアプリ ネイティブ アプリ iOS Swift Android Kotlin クロスプラット フォームアプリ ネイティブUI型 React Native 独自レンダー型 Flutter WebView型 (ハイブリッド アプリ) Apache Cordova ガワアプリ Webアプリ PWA PWA以外の Webアプリ

クロスプラットフォーム開発技術 ネイティブUI型 24 l アプリのUI描画処理をモバイルOSが持つネイティブレンダーに処理を任せているアプリ l 代表的なフレームワーク: React Native モバイル OS アプリ カメラ ストレージ 生体認証 ネイティブ 機能 ネイティブ レンダー プログラム UI描画処理

クロスプラットフォーム開発技術 独自レンダー型 25 l アプリのUI描画処理をアプリが持つ独自レンダーで処理を行なっているアプリ l 代表的なフレームワーク: Flutter カメラ ストレージ 生体認証 ネイティブ 機能 独自 レンダー プログラム UI描画処理 アプリ モバイル OS

ネイティブUI型と独自レンダー型の違い 26 ネイティブUI型 独自レンダー型 定義 UI作成時にネイティブレンダーを使用するアプリ UI作成時に独自のレンダーを使用するアプリ メリット • OSにあったUIで描画されるためユーザが操作し やすくなる • OSに依存しないUIを作成することができる デメリット • 同一のコードですが、各OSでUIが異なる • デザインを統一することが難しいので、OS毎に 個別に設定するコードが発生する • OSにあったUIで描画されないため、ユーザが操作 に迷ってしまう可能性がある React Native Flutter 解説 Meta社(旧Facebook)が作成したネイティブUI型アプ リ作成フレームワーク 開発言語: JavaScript Google社が作成した独自レンダー型アプリ作成フ レームワーク 開発言語: Dart メリット • JavaScriptで開発できるため、Webエンジニアで 開発することができ、比較的にエンジニアを集 めやすい Reactの経験者であれば、すぐに開発することが 可能 • OTA Updateを行うことができる (※Expoを使用する想定) • Google社が注力しており、Androidでの機能はいち 早く開発される可能性が高い • Material デザインに準拠したUIであれば、開発速 度を高めることができる • Windows , Macとその他のOSにも拡張することがで きる • React Nativeに比べ処理が高速 • DartはJavaScript, Javaと言語仕様が似ているため比 較的学習コストが低い • 現時点で人気が高い デメリット • Webエンジニアだけで開発を進めるのは難しい (ストアの知識やネイティブ機能の知識が必要) • Dart言語を学習する必要がある • ファイルサイズが大きくなる

選択の際のポイント 27 l ネイティブUI型(React Native)の選択のポイント l UI l 各OSに沿ったUIでアプリを作成する必要がある。 l 開発 l OTA Updateを行う必要がある l 開発者の多くがJavaScript経験者である (ストアなどの知識がある方も必要) l 独自レンダー型(Flutter)の選択のポイント l UI l UIを統一したアプリを作成する必要がある l デザインにこだわりが無い l 対応デバイス l Windows , Mac などその他のOSにも対応する必要がある

クロスプラットフォーム開発技術 WebView型 28 l アプリ内でブラウザを起動し、Webアプリを動作させるアプリ l Webアプリ自体はSPAで作成する必要がある l WebView型ではPluginを使用することによって、Webアプリからスマホのネイティブな機能を実行することが できる l 代表的なフレームワーク: Apache Cordova WebView Webアプリ カメラ ストレージ WebView型 フレームワークPlugin カメラ ストレージ 生体認証 生体認証 ストレージ カメラ 生体認証 ネイティブ機能 アプリ モバイル OS

クロスプラットフォーム開発技術 ガワアプリ 29 l アプリ内でブラウザを起動し、サーバ上にあるWebアプリを表示する WebView Webアプリ ストレージ カメラ 生体認証 ネイティブ機能 アプリ モバイル OS サーバへ プログラムを要求 独自のコード Flutter , React Nativeなど Webアプリ カメラの 起動 ストレージ 生体認証 Webアプリ カメラの 起動 ストレージ 生体認証 サーバが配信している webアプリをコピー 生体認証 カメラ ストレージ

WebView型とガワアプリの違い 30 WebView型 ガワアプリ 定義 アプリ内でWebViewを起動し、Webアプリを動作 させるアプリ アプリ内でWebViewを起動し、サーバ上のWebアプ リを描画するアプリ メリット • Webエンジニアでもモバイルアプリの開発がで きる • 既存のwebアプリをモバイルアプリとして動作さ せることができる • アプリの更新が容易 (更新の度、ストアの審査に出す必要がない) デメリット • パフォーマンスが低い • ネイティブ機能を使用できるが、限定的な機能 しか使用できない • パフォーマンスが低い • ネイティブ機能の使用をする際のコーディングが 難しくなる。 ディープリンクやWebViewのアクセスの監視など 一般的なモバイルアプリ開発とは違った実装が必 要がになる。 そのため仕様によっては実装できないことも多い

選択の際のポイント 31 l WebView型の選択のポイント l 機能 l 長いリストを扱うようなパフォーマンスが必要な処理を実行しない l オフラインでも機能する必要がある l 開発 l すでに既存のWebアプリがあり、モバイルアプリ用に一部修正して転用することを考えて いる l ガワアプリの選択のポイント l 機能 l 長いリストを扱うようなパフォーマンスが必要な処理を実行しない l オフライン時での起動を想定していない l 開発 l すでにWebアプリが存在し、そのまま転用したい。

webアプリのモバイルアプリ化 (PWAについて)

スマホで動作するアプリの全体像 33 スマホで 動作するアプリ モバイルアプリ ネイティブ アプリ iOS Swift Android Kotlin クロスプラット フォームアプリ ネイティブUI型 React Native 独自レンダー型 Flutter WebView型 (ハイブリッド アプリ) Apache Cordova ガワアプリ Webアプリ PWA PWA以外の Webアプリ

モバイルアプリとWebアプリの違い 34 PWAという技術を使用すると一部のデメリットを克服し、 Webアプリを使用することができる モバイルアプリ Webアプリ 定義 アプリケーションのプログラムを事前にモバイル デバイス上で保持するアプリ ブラウザ上で動作し、webの技術で動作するアプリ メリット • スマホの独自の機能を使用することができる • Home画面にアプリのアイコンが置かれ、ユーザ の目につきやすい • オフラインでの実行が可能 • 処理性能がwebアプリに比べて高い • 課金の処理などを簡単に行うことができる • ストアを通さずにアプリを実行できる • PCと同じソースでスマホでも動作することができ る • どんなモバイルのOSでも動作する (レスポンシブデザイン対応は行う必要あり) • アプリのUpdateが容易 デメリット • ストアからDLする必要がある • ストアの審査に通らないとユーザに配信するこ とができない(簡単にUpdateできない) • 課金を行う場合、ストアへの手数料が発生する • Home画面にアプリが置かれない • オフラインでの実行ができない • スマホ独自の機能を使用することができない (通知やヘルスケアの情報取得など) • 処理性能が制限されているため、あまり重い処理 を実行するとUXが悪化する

Webアプリ PWA 35 PWA( Progressive Web App) 定義 Webアプリをモバイルアプリのように使用するための技術 メリット • アプリのアイコンをHome画面に配置することができる • ストアに通さずにブラウザから直接アプリをインストールす ることができる • オフラインで実行することができる • 既存のWebアプリに少しの設定を書き込むだけで使用するこ とができる デメリット • OS,ブラウザによって使用できる機能に違いがある 特にiOSでは未対応の部分が多い。push通知などはiOS15の時 点では未対応 • 実施事例が少なく、情報が少ない • 認知度が低いため、ユーザがインストールしてくれない可能 性がある

選択の際のポイント 36 l PWAを選択するポイント l 機能 l 各OSでのネイティブ機能の対応状況を調査できるエンジニアの方がいる l UX l Home画面にアプリを置いて、ユーザの注意を引きたい l 開発コスト l すでにWebアプリがあるので、開発コストをできるだけ少なくしたい 未だ、発展途上であり、 OSやブラウザによって対応状況が異なるため、 使用する際にはよく調査する必要がある。 また、アプリをユーザにインストールさせるため、 webアプリ上で適切な誘導を行う必要がある。

まとめ

まとめ 38 l モバイルアプリ開発の技術をどう選ぶ？ l モバイルアプリかWebアプリかの選択 l p.15を参照してください l ネイティブアプリかクロスプラットフォームアプリかの選択 l p.21を参照してください l クロスプラットフォーム内の実装方式の選択 l p.27,p31を参照してください l 最後に l 外部のベンダーにモバイルアプリの開発をお願いする際は、実装方式 の相談に乗ってくれるベンダーを選定された方が良いと思います。