はじめに
モバイルアプリの動作確認をするとき、ぬけもれなく確認したい、というケースがあると思います。
しかしながら、クライアントとなるモバイルは端末、OS、動作環境、通信環境など、多種多様な要素が組み合わさるため、もれなく確認するということが難しいなと感じています。
そこで、備忘としてモバイルアプリの動作確認方法について簡単にまとめておきます。
動作確認について
デベロッパーコンソールで確認する
おなじみなのが、PC の Web ブラウザに搭載されているデベロッパーコンソールを利用する方法だと思います。
ユーザーエージェントや縦横幅を切り替えて iPhone や Pixel 2 などといった端末に見せかけて確認できるだけでなく、独自にユーザーエージェントを指定して確認することも出来ます。
確認項目例
- レスポンシブな画面の崩れの確認
- ユーザーエージェントによる処理切り替えの確認
シミュレーターで確認する
OS 特有の動作の不具合などを検知するためには、デベロッパーコンソールによる確認だけでは足りないケースもあります。そんなとき、シミュレーターを利用する方法が便利です。
シミュレーターを利用することにより、ある WebView のバージョン特有の不具合といった、デベロッパーコンソールでは確認しきれない部分の確認もすることができるようになります。
確認項目例
- OS バージョン差異による挙動の違いの確認
Android
Android のシミュレーターは、 Android Studio にある AVD Manager から仮想デバイスを作成することで利用することが出来ます。
Android のバージョンも、デバイスを作成するウィザードの途中で System Image を選択する画面が出てくるので、そこで古いバージョンの OS を指定することも可能です。
iOS
iOS のシミュレーターは、xcode に同梱されている Simulator を使うことが出来ます。
また Simulator の上部メニューの [Hardware] - [Device] - [Manage Device] - [Simulator] と遷移していくと、過去バージョンの iOS 端末を指定してシミュレーターを起動することも可能です。
実機で確認する
上記だけでなく、やはり実機でも確認できたほうが良いでしょう。自分の持っているモバイル端末を使っても良いですし、検証機があればそれを使っても良いと思います。
シミュレーターでも確認できないような、実機特有の挙動の確認する際に必要になります。
確認項目例
- 端末のスペック(CPU、メモリ)によるパフォーマンス確認
- 通信環境(Wi-Fi、3G、4G など)の違いによるパフォーマンス確認
- アプリ起動時の電池消費の確認
リモートデバッグについて
モバイルアプリの動作確認を進めて挙動に違和感や不具合が見つかった場合、それを修正するためにデバッグ作業をすることになると思います。
その際、モバイル上の挙動も、PC のデベロッパーコンソールのように見える化できるとデバッグが進めやすくなります。リモートデバッグと呼ばれているようです。
ここでは Chrome と Safari のみの例になりますが、モバイルのリモートデバッグについて簡単にまとめます。
Chrome で確認する
Chrome を利用していれば、Android 上の Chrome や、WebView を使っているアプリに関してリモートデバッグをすることができます。利用方法は以下をご参照下さい。
Android 端末のリモート デバッグを行う | Tools for Web Developers | Google Developers
利用イメージは以下の通りで、PC の Web ブラウザのデベロッパーコンソールと同じような感覚で利用することが出来ます。
Safari で確認する
Simulator 上の Safari も、PC の Safari からデバッグすることが可能です。利用方法は以下のドキュメントをご確認下さい。
Safari Web Inspector Guide - Getting Started
こちらも使用感としては PC の Safari のデベロッパーコンソールと同じ形式で利用できます。
おわりに
一旦思いつく限り書いてみました。他にも観点あれば教えて下さい！