公開されている
A Comparison of User Experience in Progressive Web Apps and Cross-platform
Framework Apps
のキモ部分を読んで、勉強してみたいと思います。
概要
モバイルアプリケーションでは、クラスプラットフォームでの開発が進んでいる。
クロスプラットフォームのフレームワークは、数多くある。
Progressive Web Appでのアプローチは、数好きない。
Progressive Web Appは、オフラインでも利用できるもので、
ブラウザで動作することで、クロスプラットフォームを実現する。
しかし、利用者には、普通のアプリに見える。
この年休は、クロスプラットフォームとProgressive Web Appでの
UXの違いを、パフォーマンス、機能評価、外観の違いから比較する。
また、起動時間、バッテリーの使用、アプリのサイズ、機能のロード時間
を測定した。そして、カメラ、シェア、通知、認証などの見た目や機能を
評価した。
評価のため、2つのアプリケーションを作成した。
Progressive Web Appは、Reactで、クロスプラットフォームは、
React Nativeで作成した。両方のアプリが同じ機能を実装する。
この2つのパフォーマンス、外観、機能を、AndroidとiOSで比較する。
結果、低スペックの端末では、React Nativeのアプリが、
Progressive Web Appsを上回り、見た目や機能性も、より、
ネイティブアプリに近いことが示された。
ただし、その差は小さい場合が多く、クロスプラットフォーム開発においては、
Progressive Web Appも有効な選択肢となる。
しかし、伝統的なWeb appには、いくつか制限がある。
ブラウザで動かすこととなるため、スクリーンには、
アドレスバーが現れる。
また、ハードウェアへのアクセス、ハードウェアが提供する機能、
ローカルストレージの利用、通知などに制約がある。
Progressive Web Apps(PWAs)は、これらの制限を克服するための機能を
Web appに導入するもの。
PWAは、オフラインでも利用できる。
Webからインストールでき、普通のアプリのように動作するが、
app storeは、必要ない。
PWAでクロスプラットフォームのappを開発する時は、OSが提供する
いくつかの機能とUIを使うことができるため、
ネイティブアプリのような外観が実現できる。
この研究は、ReactでつくったPWAと、React Nativeでつくった
アプリとのUXの比較である。
問題
マルチプラットフォームのアプリを開発する場合、PWAを利用するか、
クロスプラットフォームのフレームワークを利用するかの選択肢がある。
この選択肢は、1つのcodebaseで、複数のプラットフォームへ対応する
ニーズから出ている。
この研究のリサーチクエスチョンは、次である。
RQ1:Reactで作られたPWAsとReact Nativeで作られたアプリで、
起動時間、バッテリーの利用、アプリのサイズ、機能のロード時間が、
どのように異なるか?
起動時間、バッテリーの利用、アプリのサイズなどのパフォーマンスは、
UXにとって重要である。ユーザ入力後のレスポンスタイムも重要である。
RQ2:Reactで作られたPWAsとReact Nativeで作られたアプリは、
機能や見た目がどう異なってくるのか。
OSが提供するUIと似たものになれば、UXに大きなインパクトを与える。
目的
PWAとクロスプラットフォームのappの間のUXの差異には、どのような
要素があるかを評価する。
1.Reactを使ったPWAとReact Nativeを使った、同じシンプルな
アプリを作る。
2.2つのアプリから、パフォーマンス、外観、機能に関するデータを得る。
3.2つのアプリの類似点や差異を抽出する。
モバイル開発
Native
ネイティブアプリを開発する伝統的な方法は、OSに合わせた手法である。
OS特有のSDKや言語を利用する。OSが提供するAPIを利用して、
OSの機能を直接利用する。
これにより、Look&Feelは、一般性があるものとなる。
それぞれのOSは、独自のAPIを持つため、それぞれのOSをターゲットとした、
codebaseが必要となる。
Androidのアプリケーションは、Androidのフレームワークを利用して、
Javaあるいは、kotlinでプログラムされる。
一方iOSでは、Appleのフレームワークを利用し、
objective-cあるいは、swiftでプログラミングされる。
異なるSDKやフレームワークに対応した複数のcodebaseを開発、維持していくのは、
コスト高につながる。
そこに1つのcodebaseで複数のプラットフォームに対応できる
クロスプラットフォーム開発のメリットがある。
クロスプラットフォーム開発
クロスプラットフォーム開発は、1つのアプリケーションで、
複数のプラットフォームに対応するもの。
複数のプラットフォームに対して、同一のcode baseで対応することができる。
クロスプラットフォーム用のフレームワークを利用する。
フレームワークは、各ブラットフォームのAPIをラップする抽象化レイヤを作る。
この抽象化レイアが、プラットフォームの違いを吸収する。
Web App
単一のcode baseで、クロスプラットフォームを実現することは、
モバイルデバイス上のWebブラウザでwebアプリを実行することで、
達成できる。
このアプリは、HTML、CSS、JavaScriptで作られ、
モバイルデバイス用に最適化されている。
このアプローチには、欠点もある。ブラウザーの
アドレスバーなどに大きな面積をとられること、
デバイスやシステムが提供する機能へのアクセスに制限があること、
オフラインでは利用できないこと、である。
Progressive Web Apps
PWAsは、webアプリケーションで、Web APIを利用することで、
アプリのようなUIを実現するもの。
PWAは、ネイティブアプリの利点と、Webアプリの利点の両方を実現するもの。
インストールでき、オフラインでも利用でき、デバイスやシステムの機能に
アクセスできる。webを通じて得ることができ、アプリストアが必要ない。
単一のcode baseで、いくつかのプラットフォーム上で稼働する。
webサイト同様、PWAはURLを通じて、アクセスできる。
app manifestが、インストールに必要な情報を提供する。
インストールされると、PWAは他のアプリと同じように見える。
アイコンがスクリーン上に現れ、フルスクリーンで開き、
アプリケーションのスイッチャ上に現れる。
PWAは、ブラウザーで動いてはいるものの、ユーザには、
他のアプリと変わりない。
Service workerを使うことで、PWAは、オフラインでも利用できる。
また、push通知なども実現できる。
PWAのインストール
PWAは、ブラウザーからインストールすることができ、
アプリストアが必要ない。
ブラウザでURLへアクセすることで、PWAにアクセスできる。
そして、普通のアプリとして利用できる。
App Manifest
PWAのエッセンシャルな部分に、app manifestがある。
app manifestは、JSON形式でアプリの外観と振る舞いを記述するもの。
アプリの名前、アイコンなどを指定する。
React
Reactは、Webアプリを開発するオープンソースのJavaScriptのライブラリ。
UI、ロジック、外観についてのコンポーネントを扱う。
Reactのアプリケーションを作るためには、React projectのセットアップツール
を利用する。そこで使われるテンプレートは、PWAsをサポートする。
App Manifestファイルと、キャッシュのロジックを実装する
サービスワーカーfileを含む。
デフォルトのままでも、静的なアセットはキャッシュされ、PWAが
オフラインでも利用できるようになる。
React Native and Expo
React Nativeは、オープンソースのプラットフォーム
開発用のフレームワーク。
Reactに基礎を置き、クロスプラットフォームのために、
JavaScriptを利用する。
React Nativeは、アプリのUIや機能を作るためのコンポーネントと、
APIを含む。開発者は、コンポーネントやAPIをJavaScriptで利用し、
デバイスでは、JavaScriptがネイティブプラットフォームにアクセスする。
この方法で、プラットフォームSDKをコンポーネントやAPIに隠蔽する。
React Nativeプロジェクトでは、Expoという追加のプラットフォームが、
活用できる。
Expoの一部に、ExpoSDKがあり、React Nativeに含まれないコンポーネント
ライブラリを活用できる。
--つづきます---
