こんにちは！アイスタイルでフロントエンドエンジニアをやってますsakaguchiiです。
今年はほぼリモートワークの年となり、業務の進め方に色々と変化がありました。
そのうちの一つとして実機検証の方法に変化があったな…と思い返しています?
社内に検証端末が用意されているので、リモート以前は借ります宣言をして手に取る形でしたが、
リモートワークになった今は
・社内の検証端末にリモート接続して確認したり…
・本番リリース前に実機で確認をする必要がある場合は出勤して確認したり…
・IDEを使ったり…
と様々な方法がとれるようになりました。
私が現在担当しているプロジェクトでAndroidだけで想定外の動きをするバグが発生した時にリモートワークの環境でどう対応したのかについて今回は書こうかなと思います?
（なので具体的なバグ潰しの内容については書きません?）
■ 起きていたこと
特定のWEBページで下部に表示されるナビゲーションがページ最下部に到達したとき消えて欲しいのにAndroidだけ消えてくれない…?
■ 結論
最下部に来た時のスクロール量を取得し、最下部かどうかを整数で判定して非表示の対応を入れていたが、
Androidは小数点まで取得していたため判定から外れていた?
（結論だけ述べるとなんだそんなことかということではあるのですがAndroidだけと聞いたときは困ったな…
?という気持ちでした）
■ 検証に使ったもの
✨ Android Studio ✨
実機でテストをしてくれた方からバグの報告を受け、事象を確認するためにAndroid アプリ開発用の公式の統合開発環境（IDE）のAndroid Studioを使用しました。
https://developer.android.com/studio/intro?hl=ja
このツールはネイティブアプリの確認なども出来るそうなのですが、今回はWEBページの確認をしたいので仮想デバイス（AVD manager）を起動して事象の確認を進めていきます。
AVD managerから使いたい端末を起動するとエミュレータが表示されるので、
後は実機で触るように、ブラウザを開いて…URLを入れて…ページを表示させて…と使うことが出来ます?
※ 表示している画像のWEBページは実際に修正した画面とは異なります。
エミュレータで無事Androidでのみバグが起きていることは確認できました?
判定の値がうまくいっていないんだろうな、というアタリはついていたので、判定に使っている値を追うために開発ツールを開きます。
◆ PC側のChromeの開発ツールから「More tools」＞「Remote devices」を選択
chrome://inspect/#devices のパネルが表示されるので、ここから仮想デバイスで開いているWEBページの開発ツールを開きます?
「inspect」のリンクを選択すると選択したページの開発ツールが表示されます
あとは普段ブラウザ上でやっているように開発ツールが使用できるので、コンソールを見ながら修正を進めます！
※ ちなみに、例えばopen tab with urlのところにURLを入れて「Open」を押すとページが追加され、
こんな感じでエミュレータ側にも追加されて、表示させることができます。
エミュレータ側でURL手打ちをするのが地味に面倒なので楽ですね?
おわりに
リモートの環境になる前は、Androidだけ…と言われたら社内の実機で見ながら修正していたため、こういったツールを使う機会は初めてだったのですが使ってみるとかなり便利だな～と感じました?
以上です。ありがとうございました！
