この記事は、「Qiita Engineer Festa 2022」に参加するために執筆した記事です。
TL;DR
- リモートで実機テストができるRemote TestKitを使ってみた
- React Native + expoだと実機デバッグが手間な面もあるが、EAS buildでapkを作成してRemote TestKitと組み合わせるとサクッと実機で確認できる。
- リモートだけでなく自分で持っている端末も同様に操作が可能なので、画面キャプチャや録画が簡単になる。
- React NativeのようなIDEを使わない開発とRemote TestKitを組み合わせるととても便利。
挨拶と前置き
こんにちは、株式会社dottでエンジニャー🐱をしているHALと申します。
会社ではWEBエンジニャーとして働いていますが、プライベートで個人開発をしており、そちらではReact Nativeを用いたスマホアプリ開発を主にやっています。
React NativeではiPhone / Androidのアプリを（ほぼ）同一のソースコードから作れるのが魅力なわけですが、どうしてもiPhoneとAndroidでは動作や表示が異なる部分が出てきます。
そのため、シミュレーターや実機での動作の確認が必要になるのですが、実機の確認が少し問題になります。
当然ながらいくつかの機種で動作の確認をしたいわけですが、手元にそんなにたくさんの端末はありません。
また、端末が複数あったとしても、それぞれにテスト用のアプリをインストールするだけでも手間がかかります。
そんなわけで、正直なところアプリの動作確認は自分で持っている一部の端末のみで、ほとんど実機確認はできていないのが現状です。
今回、Remote TestKitというサービスの存在を知りましたので、その実機確認の部分について、改善できないか試してみようと思います。
Remote TestKitとは
ネットワーク経由で実機上でアプリなどの動作の検証を行えるサービスです。
GoogleのFirebaseで提供されているFirebase Test Labと同様のものになりますが、Remote TestKitは圧倒的な対応機種・バージョンの多さが魅力です。
- Firebase Test Lab：Androidのみ65種類、多いもので８つのOSバージョン（ほとんどが１バージョンのみ提供）
- Remote TestKit：iOS / Androidの全部で1000以上の機種×OSの組み合わせ
ほとんど無い組み合わせは無いと思っていいくらいのラインナップです。
これなら、一部のユーザーでしか発生しないような不具合であっても、対象の端末を借りて再現試験などが実施できますね。
また、Firebase Test Labは基本的には自動テストから利用することを想定していますが、Remote TestKitでは、PCからスマホの画面を見ながら操作することが可能です。
そのため、テストを作るのは難しいような手の混んだパターンなどを画面上で確認していくことも可能です。
さらに、画面キャプチャや画面録画もPC上でそのまま実施できるため、実機でキャプチャしたものを転送する、といった操作も不要になります。
当然ながら自動テストと連携してのテスト実行も可能ですが、何よりも柔軟に多くの実機を利用できる、というところがRemote TestKitの強みではないかと思います。
Remote TestKitのソフトウェア版をインストールする
Remote TestKitにはインストール不要なWeb版とソフトウェア版があります。
機能的な違いがいくつかありますが、Web版はソフトウェア版の一分機能が使えないという感じになります。
基本的にはソフトウェア版を選び、どうしてもインストールができない環境の場合にはWeb版を使う、と考えれば良いと思います。
ソフトウェア版のダウンロードは以下の画面から行います。
Windows版とMac版がありますので必要な方をダウンロードしてインストールします。
ちなみに自分はMac版ですが、M1で動作するかどうかは確認できませんでした。
とりあえず起動するとこんな画面が表示されます。
上の空いているエリアが今自分が使える端末（レンタルした端末＋USB接続している手元の端末）になります。
下に大量に表示されているのがレンタル可能な端末のリストです。
「レンタル状況」が「利用可」になっていればレンタルできます。
「オフライン」や「レンタル中」はレンタルできないので時間を空けて確認してみましょう。
まずは左下の「ログイン」からログインすることでレンタルできる状態になります。
※今回はトライアル用のアカウントを払い出してもらいました。
端末をレンタルしてみる
端末の一覧は各項目でソートも可能なので、発売日の降順などで並び替えて目当ての端末を探してみます。
（やはり、新しい端末はレンタル中や要人気端末パック対象のものが多かったです）
レンタルしたい端末が見つかったら、対象をダブルクリックすると、レンタルダイアログがポップアップします。
ここで利用時間を選択して「レンタル」をクリックすればレンタルできてしまいます。
レンタルされると、上のエリアに対象の端末が表示されるようになります。
また、使用する準備が整うと、端末の画面が表示されます。
あとはもうこの画面をマウスでドラッグしたりクリックしたりすれば、実際に実機を動かすことができる、というわけです。
動かしてみた感想としては、ネットワーク越しなので若干のもたつきは感じるものの、全然問題のないレベルと言えます。
なんならエミュレータの方がもたつくときもあるので、こちらのほうがサクサクできるくらい・・・。
React Native + Expo（EAS build）で作ったアプリを動かしてみる
インストール用ファイルの準備
続いて、実際にReact Nativeで作成したアプリを動かしてみましょう。
React Nativeで作ったアプリをEAS buildでビルドした場合、Expoのサイトからビルドしたアプリをダウンロードすることができます。
ビルド結果の画面の「Download」ボタンからダウンロードすることが可能です。
iPhoneの場合はここからダウンロードしたファイルをそのままインストールが可能です。
ただ、Androidの場合はここでダウンロード可能なのは（標準では）AABファイルになります。
残念ながらRemote TestKitはAPKファイルでのインストールが必要なのでこのファイルは使用できません。
そこで、EAS buildでビルドだけでなくPlay StoreへのSubmitまでやってしまい、Play Consoleからダウンロードしましょう。
※EAS buildでReact NativeアプリをBuild & Submitする方法については、こちらなど参考にしてください。
Play ConsoleでのAPKファイルのダウンロードは以下のような手順です。
- EAS Submitすると「内部テスト」に登録されるので、「内部テスト」を開きます
- 「リリースの詳細を表示」をクリックします
- 「新しいApp Bundle」の→アイコンをクリックします
- 「ダウンロード」タブを開きます。
- 「署名済みのユニバーサル APK」のダウンロードアイコンをクリックします。
これでAABファイルから作成されたAPKファイルをダウンロードできます。
もちろん、Android Studioなどでローカルでビルドしたファイルを使用しても構いません。
ただ、Expo Managed Workflowの場合は、クラウドビルドだとIDE不要でビルドできてしまうので、自分はそちらの方が好きです。
端末へのインストール
端末へのインストールは簡単です。
端末の表示されているウインドウの「アプリ」をタップして、ダウンロードしたAPKファイルを選択してやります。
インストールを始めるとアップロード画面が表示され・・・
インストールが完了するとアプリが起動します。
メニューを見てもアプリのアイコンがちゃんと表示されています。
サクッと終わってしまいました。
あとは借りている時間をたっぷり使って動作確認ができますね。
手元の端末にRemote TestKitで繋ぐ
もう一つ、個人的には目玉機能なのでは？と思っているのが、手元にある端末をRemote TestKitで接続できる機能です。
PCとスマホをデータ転送可能なUSBで接続するだけで、Remote TestKitが端末を検出して接続してくれます。
うまく認識すると、上の一覧に「端末の場所」が「USB」として表示されます。
さらに端末の画面表示も起動します。
（自分の環境だとなぜかウインドウが２つ表示されてしまいますが、一つ閉じれば特に問題はありませんでした）
こちらは手元の端末とPC画面上の表示を並べたものです。
かなりサクサクと表示されますし、操作はPC側で行っていますが、実機側もレスポンス良く動いています。
この状態で一番嬉しいのが、「実機側を操作した結果をPC側にも表示できる」という点です。
操作している画面の録画をしたいという場合に、実機側で録画してPCに転送する、という方法でもいいですが、若干手間です。
また、実機での録画機能はiPhoneではかなり前の機種から使えますが、Androidの場合はAndroid 11以降でないと標準では使えません。
僕の持っているOppo AX7も画面キャプチャは可能ですが、画面録画はできない機種になります。
しかし、Remote TestKitだと、PC側で画面の録画が可能です。
メニューの「記録」から「録画開始」を選ぶことで端末の画面の動画を取ることができます。
つまり、PC上で録画を開始して、実際の操作は実機の方を指で動かして録画する、といったことが可能なわけです。
どうしてもPCのシミュレータ等で録画をすると、マウス＆キーボードでの操作になるため、実際の実機の操作とは異なる操作になってしまうことがあります。
しかしこの方法の場合、録画はPC側で行うものの、操作は実際に利用する場合とどうように行っているところを取ることができます。
さらに録画結果の転送も不要なので手間が軽減されます。
これは結構嬉しいんじゃないかなぁと個人的には思っています。
また、リモートの端末をレンタルした場合も、手元の端末を利用する場合も、同じインターフェースで確認ができるため、自動化を行うようなときにもメリットがあります。
リモートの端末は自動化できるけど、手元の端末は自動化できない、みたいなことになると、せっかく手元にあるのにもったいないです。
そういった問題もRemote TestKitなら解消してくれます。
何より、レンタルはお金がかかりますが、手元の端末はユーザー登録も不要で、ソフトウェア版をインストールしさえすれば無料で利用することができます。
NTTレゾナントさん的には困るかもしれませんが、これを活用しない手はないと思います。
「ちょっとレンタルするにはお金がなぁ・・・」と思うような方も、一度ソフトをダウンロードして手元の端末で何ができるか、確認してみてもいいと思います。
終わりに
Remote TestKitに触ってみて、さらにReact Nativeで作成したアプリをインストールしてみることができました。
Remote TestKitはとても簡単に導入できてしまうので、どうしても用意できない端末でバグが出ているらしい、というようなときに重宝しそうです。
また、React Nativeはその仕組み上IDEを使用せずに開発をすすめることができます。
実機での動作確認に関してはIDEを繋ぐかExpo Goアプリを利用する必要があったりしましたが、EAS buildでビルドしたアプリをRemote TestKitからインストールすることで（クラウドビルドで時間はむしろ増加しますが）手間は軽減可能なことがわかりました。
個人的にはIDE起動せずに開発が完結できるというのがちょっとうれしいです。
サービスの特性上個人開発で採用することはなかなか難しいですが、業務等でスマホアプリ開発をしているような場合、実機での確認作業の負荷を軽減することができるRemote TestKitは、価格相応の価値を提供してくれるサービスだなと感じました。