こんにちは、Webプログラマの篠田です。
先日、ALAKIでは「修正依頼」をWeb上で簡単に作成できるサービス「MONJI」をリリースしました。
公開されているWebサイトや、PCやスマートフォンにある画像などをアップして、修正指示を作成することができます。
この「MONJI」の開発にも役立ったのが、今回ご紹介する「Android端末」を「Chrome」で検証する方法です。
今回ご紹介する環境
下記の環境をもとに、ご紹介します。
・HUAWEI P10 lite (Android 7.0)
・Mac OSX 10.11.6
Android端末の設定
まずは、Android端末のデバックモードを利用するための設定を行います。
デバックモードを利用するには、「開発者モード」に切り替える必要があります。
「HUAWEI」の開発者モードの切り替え方
下記の手順で、「開発者モード」に切り替えます。
（１）「設定」を開く。
（２）「端末情報」を開く。
（３）「ビルド番号」を複数回タップする。
これで、「開発者モード」に切り替わります。
切り替わると、「設定」画面の「詳細設定」と「システム更新」の項目の間に「開発者向けオプション」という項目が追加されます。
USBデバックを有効にする
次に、「開発者向けオプション」に入り、「USBデバッグ」をONにします。
これで、Android端末をPCにUSBでつなげることで、デバッグを行うことができます。
端末データへのアクセスを許可する
次に、USBケーブルで接続した際に「端末データへのアクセスの許可」を求められます。
問題がなければ、「はい（アクセスを許可）」を選択しましょう。
Chromeでデバッグしたいページを開ける
最後に、デバッグを行いたいWebページを、Chromeで開ければ準備は完了です！
PC側設定
PC側の設定は、Chromeを開けるだけでOKです。
ただし、特殊なURLを入力する必要があります。
Chromeのアドレスバーに下記のアドレスを入力します。
chrome://inspect/#devices
上記で、接続しているAndroid端末に接続することができます。
接続すると、下記のような画面が表示されます。
Android端末で表示している、Chromeのタブ情報が一覧で表示されます。
その中から、デバッグを行いたいWebページが開いているタブの「inspect」をクリックします。
そうすることで、Android端末のChromeとPC側のChromeが同期を行い、見慣れたコンソール画面が表示されます。
あとは、普段どおり「console.log」やイベントリスナーの情報をPCで見ながら、Androidを操作すればデバッグが可能となります。
まとめ
思いもよらない問題が実機で発見されることがあります。
ですが、実機では細かなエラーを確認することが難しいですが、PCと同期させることで問題点の把握が容易になります。
ぜひ、Androidでも使いやすいサービス開発の役に立てていただけると幸いです。
現場の業務フローに寄り添ったWebシステムをお求めなら、私たちALAKIにご相談ください。
ALAKIは経営者様が感じている問題点と、実際にWebシステムを利用される現場スタッフ様が直面している課題を、弊社システムエンジニアが丁寧に聞き取り、お客様と共にシステムを作り上げていきます。
業務改善が実現できるWebシステムをお求めの方は、是非ALAKIにご相談ください。
