はじめに
webアプリケーションを開発中に、モバイル端末向けのページを作成する機会がありました。
ローカル環境で開発中に、実際にモバイル端末で操作してデバッグする方法をご紹介します。
Android端末
Android端末の場合、ローカル環境でのデバッグ作業は比較的簡単です。
Android端末は比較的オープンなプラットフォームのため、browser stackを使用したり、USBデバッグ機能を有効にすることでPCからの操作が可能になります。
しかし、USBデバッグ機能が誤って有効になっていると、マルウェアなどの不正なアプリがデバイスにアクセスする可能性があります。
Browser Stackを使用する
利用するためにはユーザー登録（サインアップ）します。
ログイン後、web > Live から任意の端末を選択するとブラウザ上で実機が立ち上がります。
選択した実機からさらにどのブラウザを使用するかも選択できます。
立ち上げたシュミレータからPCブラウザ利用時と同様にlocalhost:3000へアクセスすれば端末を用いてデバッグを行うことができます。
USBデバックを使用する
確認方法
-
Android端末の「開発者向けオプション」を有効にします。
-
「USB デバッグ」オプションを有効にします。
-
USBケーブルでPCと端末を接続します。
-
PCのブラウザからlocalhost:ポート番号にアクセスすることで、ローカル環境でのデバッグが可能になります。
iOS端末
iOSはクローズドなプラットフォームで、セキュリティが厳しく設計されています。
しかし、iOSシュミレータ起動 > webブラウザ※からlocalhostを開くことができればデバッグをiOS端末を用いて行うことができます。
※Safariを使用する場合は、http接続間でcookieが保持されないのでsecure属性をfalseに変更する必要があります。
const options: CookieSerializeOptions = {
path: "/",
maxAge: 30 * 24 * 60 * 60,
httpOnly: true,
secure: false, ←ローカルで確認したい時はここを変更する
sameSite: true
}確認方法
-
Xcodeをインストールし、iOSシュミレータを起動させる
-
PCブラウザ利用時と同様に、iOS上のブラウザからlocalhost:3000へアクセスする
まとめ
ローカル環境で開発中、iOS端末でデバッグしたい時になかなかいい方法がなかったのですが上記の方法ですぐ確認することができました。
シュミレータを起動させて確認することができたので、開発のスピードが上がりました！
