Try .NET Core

.NET Coreを動かした、試した記録を書き残します。

音楽サーバ"Mopidy"のフロントエンドを作る:13 モバイルデバイスでデバッグする

音楽サーバ"Mopidy"のフロントエンド「Mopidy.Finder」が出来るまで、第13回です。
完成版Mopidy.Finderのライブデモはこちら。

今回は、iOSAndroidでのデバッグ方法を追っていきます。

iOSは、エミュレータでお手軽に

iOSでのデバッグは、macさえあれば、とてもお手軽に出来ます。
Xcodeをインストールすると、各種iOSバイスエミュレータが付いてきます。

まずはSafariを起動し、開発者ツールを有効にします。
Safariのメニューから、環境設定を選んで... f:id:try_dot_net_core:20190814194746p:plain

「詳細」メニューの一番下、「メニューバーに"開発"メニューを表示」にチェック。
f:id:try_dot_net_core:20190814194925p:plain

すると、Safariのメニューに"開発"が追加されます。
f:id:try_dot_net_core:20190814195149p:plain

次に、Xcodeを開きます。そしてエミュレータを起動。
f:id:try_dot_net_core:20190814195324p:plain

エミュレータ上のiOSが起動し終わると、こんな感じです。
f:id:try_dot_net_core:20190814195512p:plain

このエミュレータの中のSafariを起動して、デバッグするURLを入力します。
f:id:try_dot_net_core:20190814195619p:plain

デバッグするアプリの画面が出てきたところで...
f:id:try_dot_net_core:20190814195702p:plain

mac上のSafariに戻り、"開発"メニューから「Simulator」を選ぶと。
現在エミュレータで表示中のURLが出てきます。 f:id:try_dot_net_core:20190814195845p:plain

これを選択すれば、Safariの開発者ツールが出てきます。
f:id:try_dot_net_core:20190814200011p:plain

ツール上でDOMを選択すると、エミュレータ画面上でハイライトしてくれますね。
f:id:try_dot_net_core:20190814200133p:plain

お手軽ですね!
macを買わなきゃいけない」という、Windowsユーザーにとっては大変高いハードルを、乗り越えさえすれば...。
Appleさんは、ご自身のご商売をきちんと分かっていらっしゃいますねぇ。

Androidは、まず環境づくりから

一方、AndroidWindowsでもデバッグ可能です。
Androidの場合、エミュレータよりも実機を使う方が手軽です。
ただし、あらかじめAndroid SDKをインストールしておく必要があるようです。

以前の記事でVisual Studioのセットアップフローを書きましたが、Visual Studio Installerの機能選択時に「.NETによるモバイル開発」(=Xamarin)を選んでいる方は、既にインストールされています。
f:id:try_dot_net_core:20190814202403p:plain

もし入れていらっしゃらないようなら、Android Studioをインストールすると、GUISDK管理ツールも一緒に入ってきます。
ダウンロードはこちらから。
https://developer.android.com/studio/index.html?hl=ja

インストールして起動すると、起動画面の"Configure"メニューに、Android SDKの管理用GUIツールがあります。
f:id:try_dot_net_core:20190814203133p:plain

ここで、お手元のAndroid機のOSバージョンに合わせてSDKを選びます。
f:id:try_dot_net_core:20190814203518p:plain
選んでから、下の「Apply」ボタンを押すと、SDKがインストールされます。
f:id:try_dot_net_core:20190814203709p:plain

Android機の準備

開発PC側の準備が出来たら、次はAndroidバイスの準備です。
最近のAndroid機では標準で非表示の、「開発者向けオプション」を表示させます。

バイスの設定を開き、"端末情報"を選びます。 f:id:try_dot_net_core:20190814204812j:plain

その中の、"ソフトウェア情報"を選択。
f:id:try_dot_net_core:20190814204858j:plain

ここに出てくる、"ビルド番号"。これを、連打します。
f:id:try_dot_net_core:20190814205003j:plain

7回タップすると、開発者モードに切り替わります。
f:id:try_dot_net_core:20190814205155j:plain

設定メニューに戻ってみると、"開発者向けオプション"が表示されています。
f:id:try_dot_net_core:20190814205329j:plain

バイスのメーカーやOSバージョンによって、若干表記が異なります。
例えばこちらは、AmazonのFireTablet-2015年版。
設定メニューから、"端末オプション"に入ります。 f:id:try_dot_net_core:20190814205829j:plain

その中の、"シリアル番号"を連打すると、開発者モードになります。
f:id:try_dot_net_core:20190814210150j:plain

MediaPadM5では、"設定"→"システム"→"タブレット情報"の中の、"ビルド番号"でした。
f:id:try_dot_net_core:20190814211451j:plain

また古いAndroid機では、最初から"開発者向けオプション"が出ているものも。
f:id:try_dot_net_core:20190814210521j:plain

一度"開発者向けオプション"を出してしまえば、あとはどの端末でも同じです。
"開発者向けオプション"を開き、"USBデバッグ"のチェックをONにします。
f:id:try_dot_net_core:20190814211954j:plain

ONにするとき、こんな警告が出てきます。
f:id:try_dot_net_core:20190814212137j:plain

Android機で、いざデバッグ

Android機の準備が出来たところで、USBケーブルでPCにデバイスを繋げます。
最近のデバイスでは、PCに接続した際にドライバがインストールされます。

そして、デバイスChromeを起動し、デバッグするURLを開きます。
f:id:try_dot_net_core:20190814212811j:plain

次に、PCでChromeを起動します。
そしてURLに、下記を入力します。

chrome://inspect/#devices

すると、PCのChromeはこんな画面になります。
f:id:try_dot_net_core:20190814213138j:plain

またAndroid機の方では、こんな警告が出てきます。
f:id:try_dot_net_core:20190814213454j:plain

Android機の警告を許可すると、PC側のChromeで、デバイスがリストされます。 f:id:try_dot_net_core:20190814213651j:plain
※デバイスが出て来ない場合は、PCのChromeをリロードしてみてください。
※どうやってもデバイスが出て来ない場合は、ADBドライバが入っていないことが考えられます。
※その場合は、メーカーのドライバ配布ページからADBドライバを貰ってきてインストールしてください。

この中の「inspect」リンクをクリックすると... f:id:try_dot_net_core:20190814213928p:plain

はい!まいどお馴染みの、Chrome開発者ツールが出てきます! f:id:try_dot_net_core:20190814214159p:plain

FireTabletでは、AmazonアプリストアにChromeが出てきません。
仕方がないので、こちらから最新版のapkを貰ってきました。
https://androidapksfree.com/chrome/com-android-chrome/old/

本体に転送し、インストール。
f:id:try_dot_net_core:20190814215436j:plain

FireTabletをPCに接続し、Chromeを起動してみると。
f:id:try_dot_net_core:20190814215631j:plain
ばっちし、リモートデバッガが動きました。

XperiaVLはAndroid4.1と古いため、GooglePlayストアにChromeが出てきません。
やはり同じところから、今度は古めのChrome ver61.0のapkを貰ってきます。
またこちらはADBドライバが無かったため、PC側に発売当時のツールをインストール。
f:id:try_dot_net_core:20190814221131j:plain

すると、Android4.1機でもデバッガを認識してくれました。
f:id:try_dot_net_core:20190814221358j:plain

以上、モバイルデバイスデバッグしてみるおはなし、でした!