音楽サーバ"Mopidy"のフロントエンドを作る：13 モバイルデバイスでデバッグする
音楽サーバ"Mopidy"のフロントエンド「Mopidy.Finder」が出来るまで、第13回です。
今回は、iOSとAndroidでのデバッグ方法を追っていきます。
iOSは、エミュレータでお手軽に
iOSでのデバッグは、macさえあれば、とてもお手軽に出来ます。
Xcodeをインストールすると、各種iOSデバイスのエミュレータが付いてきます。
まずはSafariを起動し、開発者ツールを有効にします。
Safariのメニューから、環境設定を選んで...
「詳細」メニューの一番下、「メニューバーに"開発"メニューを表示」にチェック。
すると、Safariのメニューに"開発"が追加されます。
このエミュレータの中のSafariを起動して、デバッグするURLを入力します。
デバッグするアプリの画面が出てきたところで...
mac上のSafariに戻り、"開発"メニューから「Simulator」を選ぶと。
現在エミュレータで表示中のURLが出てきます。
これを選択すれば、Safariの開発者ツールが出てきます。
ツール上でDOMを選択すると、エミュレータ画面上でハイライトしてくれますね。
お手軽ですね！
「macを買わなきゃいけない」という、Windowsユーザーにとっては大変高いハードルを、乗り越えさえすれば...。
Appleさんは、ご自身のご商売をきちんと分かっていらっしゃいますねぇ。
Androidは、まず環境づくりから
一方、AndroidはWindowsでもデバッグ可能です。
Androidの場合、エミュレータよりも実機を使う方が手軽です。
ただし、あらかじめAndroid SDKをインストールしておく必要があるようです。
以前の記事でVisual Studioのセットアップフローを書きましたが、Visual Studio Installerの機能選択時に「.NETによるモバイル開発」(=Xamarin)を選んでいる方は、既にインストールされています。
もし入れていらっしゃらないようなら、Android Studioをインストールすると、GUIのSDK管理ツールも一緒に入ってきます。
ダウンロードはこちらから。
https://developer.android.com/studio/index.html?hl=ja
インストールして起動すると、起動画面の"Configure"メニューに、Android SDKの管理用GUIツールがあります。
ここで、お手元のAndroid機のOSバージョンに合わせてSDKを選びます。
選んでから、下の「Apply」ボタンを押すと、SDKがインストールされます。
Android機の準備
開発PC側の準備が出来たら、次はAndroidデバイスの準備です。
最近のAndroid機では標準で非表示の、「開発者向けオプション」を表示させます。
デバイスの設定を開き、"端末情報"を選びます。
その中の、"ソフトウェア情報"を選択。
ここに出てくる、"ビルド番号"。これを、連打します。
7回タップすると、開発者モードに切り替わります。
設定メニューに戻ってみると、"開発者向けオプション"が表示されています。
デバイスのメーカーやOSバージョンによって、若干表記が異なります。
例えばこちらは、AmazonのFireTablet-2015年版。
設定メニューから、"端末オプション"に入ります。
その中の、"シリアル番号"を連打すると、開発者モードになります。
MediaPadM5では、"設定"→"システム"→"タブレット情報"の中の、"ビルド番号"でした。
また古いAndroid機では、最初から"開発者向けオプション"が出ているものも。
一度"開発者向けオプション"を出してしまえば、あとはどの端末でも同じです。
"開発者向けオプション"を開き、"USBデバッグ"のチェックをONにします。
ONにするとき、こんな警告が出てきます。
Android機で、いざデバッグ
Android機の準備が出来たところで、USBケーブルでPCにデバイスを繋げます。
最近のデバイスでは、PCに接続した際にドライバがインストールされます。
そして、デバイスでChromeを起動し、デバッグするURLを開きます。
次に、PCでChromeを起動します。
そしてURLに、下記を入力します。
chrome://inspect/#devices
すると、PCのChromeはこんな画面になります。
またAndroid機の方では、こんな警告が出てきます。
Android機の警告を許可すると、PC側のChromeで、デバイスがリストされます。
※デバイスが出て来ない場合は、PCのChromeをリロードしてみてください。
※どうやってもデバイスが出て来ない場合は、ADBドライバが入っていないことが考えられます。
※その場合は、メーカーのドライバ配布ページからADBドライバを貰ってきてインストールしてください。
この中の「inspect」リンクをクリックすると...
はい！まいどお馴染みの、Chrome開発者ツールが出てきます！
FireTabletでは、AmazonアプリストアにChromeが出てきません。
仕方がないので、こちらから最新版のapkを貰ってきました。
https://androidapksfree.com/chrome/com-android-chrome/old/
本体に転送し、インストール。
FireTabletをPCに接続し、Chromeを起動してみると。
ばっちし、リモートデバッガが動きました。
XperiaVLはAndroid4.1と古いため、GooglePlayストアにChromeが出てきません。
やはり同じところから、今度は古めのChrome ver61.0のapkを貰ってきます。
またこちらはADBドライバが無かったため、PC側に発売当時のツールをインストール。
すると、Android4.1機でもデバッガを認識してくれました。
