スマホごとのWebページの見え方を確認したいときの選択肢として、AWS Device Farmを検討してみた
はじめに
React等でWebページを作成する際、PCだけでなくスマホでの閲覧も前提にしているサイトは多いかと思います。
しかしながら、スマホでの実機検証までしているかどうかはマチマチだと思いますので、今回は「スマホを用いた実機検証がどうして重要なのか」と「手元にスマホがない場合の手軽な実機検証方法としてAWS Device Farmが使えそうかどうか」を紹介します。
実機検証はなぜ必要か？
スマホでのWebページの見え方を確認したい場合、一般的にはブラウザの開発者ツールを用います。
ブラウザのデフォルト機能でさくっと様々な機種での見え方を確認できるため、こちらの機能はとても便利です。
しかしながら、あくまでも開発者ツールは「仮想的にスマホの見え方を再現している」にすぎません。利用しているOSやブラウザによって細かい挙動が変わる箇所があるため、実機検証はとても重要です。
参考までに、過去にどのようなことが発生したかを2パターン紹介します。
Safariの仕様と、Androidの仕様は微妙に違う
ほとんどの実装はSafariでもAndroidでも同じように動きます。しかしながら、中には仕様が異なるケースがあります。
例えば、下記スクショをご覧ください。左がiphone実機で右がAndroid実機です。iPhoneのSafariでは、ボタンのデフォルトの文字色が青色になります。そのため、Androidでは白色の文字が青色になっています。
また、このサイトではフォント指定をしていなかったため、スマホごとのシステムフォントが文字に適用されています。
古いスマホでは、対応していない記法がある
PCとスマホで画面レイアウトを変える際に、メディアクエリを活用するかと思います。
このメディアクエリ、近頃は比較演算子を用いて書くこともできるようになりました。
しかし最新の書き方は、新しいブラウザでは機能しますが、古いブラウザでは動かないことがあります。
メディアクエリのブラウザの互換性状況は下記の通りです。
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari on iOS | |
|---|---|---|---|---|---|---|
| メディアクエリが利用できる最古バージョン | 1 | 12 | 1 | 3 | 18 | 1 |
| メディアクエリで比較演算子が利用できる最古バージョン | 104 | 104 | 64 | 16.4 | 104 | 16.4 |
| 記事執筆時（2024/5/1）の最新安定バージョン（※最新情報はリンク先をご確認ください） | 124 | 124 | 125 | 14.4.1 | 124 | 17.4.1 |
ここで大事なポイントとして、iOSをアップデートしないと、Safariのバージョンもあげられません。そして、かなり古いスマホはiOSを新しいものにあげられません。
参考までに、iOS16（Safari16）に対応しているデバイス一覧をのせておきます。これより、iphone7や初代iphone SEは一覧にないため、「iOS16にバージョンアップできない＝メディアクエリで比較演算子が利用できない」ことがわかります。
実機検証の難しい点
とはいえ、実機検証は難しいです。
スマホの機種やOSのバージョンを揃えるのは大変
Webサイトの開発を専門としている企業や、モバイルアプリも手掛けている会社さんは多くのスマホを保有しているかと思いますが、一般の企業が自社のランディングページだけ自作している場合やフリーランスの方の場合は検証用スマホを何台も用意できないケースも多々あるかと思われます。
また、特に古いスマホに関しては、販売が終了しているものも多いため、調達はさらに困難を極めます。
開発環境を整備するのが大変なケースがある
例えば企業によっては、スマホと業務用PCとUSBで接続できないようにキッティングされているケースがあるかと思います。
また、検証用のWebページが社内ネットワークからしかアクセスできない場合、調達したスマホを社内環境にアクセスできるようセッティングするのが申請等で時間がかかる企業もあるのではないでしょうか。
AWS Device Farmの特徴と使い方
そこで、こちらのサービスに着目してみました。AWS Device Farmは、AWSクラウド上でホストされているスマホを遠隔で操作することで、Webサイトの挙動を確認できます。（本記事では紹介しませんが、Webサイトだけでなく、モバイルアプリに関しても挙動を確認できます。）
このサービスを利用すると、幅広いスマホの機種やOSのバージョンで検証できます。また、WebサイトをS3+Cloudfrontにデプロイしている場合であれば、同じAWSアカウント内のサービスを使うことになるため、開発環境の整備の手間なく検証ができます。
使い方はシンプルです。
ステップ１：「Device Farm」のページにアクセスし、「Mobile Device: Projects」から新規プロジェクトを作成
ステップ２：作成したプロジェクトを選択後、「Remote access」タブにて「Start a new session」を押下し、実機検証したいスマホを選択
選択できるスマホは多岐にわたります。
かなり古いiphoneにも対応しております。
ステップ３：選択したスマホデバイスのリクエストが受理されたら、操作開始
スマホデバイスを遠隔で自由に操作できるため、該当Webサイトにアクセスして操作します。
Web上に既にデプロイされているサイトであれば、ブラウザを開いてURLにアクセスします。このとき、Ctrl＋CでコピーしたURLを、スマホ内にCtrl＋Vでペーストできます。
AWS Device Farmの気になった点
海外にあるスマートフォンを遠隔操作するため、タイムラグがかなりあります。そのため、連打すると挙動がおかしくなるので、お気をつけください。
また、動作が不安定で何度も下記スクショの通り真っ黒な画面で待たされることもしばしばありました。
そのため、「スマホの調達を辞めて、AWS Device Farmで動作検証を行う」ことは現時点ではできなさそうです。
ちなみに、AWS Device Farmでは自動テストも可能です。複雑な挙動をするサイトの場合に指定したスマホでのデグレテストを自動でできるのは有用だなと感じております。（自動テストであれば、タイムラグを気にせずに遠隔操作を放置しておけばよいので）
さいごに
手元にないスマホに対しても「モーダルやスクロールバーの挙動はどうなるか」「ライトモード、ダークモードでの見え方はどうなるか」といった細かい内容で実機検証ができるサービスは、コンセプトとしてとても重宝される存在かと思います。
また、サービスの利用料金も、スマホの実機を調達するよりもかなり安価です。
そのため、もう少しリリースを待ってみて、動作が速くなったり安定したりするのを待とうと思います。
ちなみに、類似製品としてはBrowserStackというサービスがあります。遠隔操作時のタイムラグが気になる方は、有償サービスを検討してみても良いかもしれません。
Discussion