Ionic(Angular)でandroid実機で動作確認
やりたいこと
位置情報を送るアプリをAndroidで動作させてみる。
環境
OS : Windows 8.1
Ionic CLI : 5.4.2
NodeJS : v10.15.3
npm : 4.0.5
さっそく開発
- nodistインストール
インストーラをダウンロード cordovaインストール
npm install -g cordova ionic
Android Studio / コマンドラインツールのダウンロード
ダウンロードページからそれぞれのZipファイルをダウンロード- Android studio(
android-studio-ide-181.5014246-windows.zip
)を適当なところに解凍。 例)d:\android
配下 - コマンドラインツール(
sdk-tools-windows-4333796.zip
)を適当なところに解凍。 例)d:\android\android-sdk
配下
- Android studio(
-
sdkmanager "emulator" "platform-tools" "platforms;android-27" "build-tools;27.0.3" "system-images;android-27;default;x86_64"
Windows Hypervisor Platform (WHPX) インストール
sdkmanager "extras;intel;Hardware_Accelerated_Execution_Manager"
新規プロジェクトつくる(位置情報を表示したいだけなのでblankにしておく。他にもtabsとかいろんなオプションがある)
ionic start myProject blank
cd myProjectGeolocationプラグインをインストール
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation開発
unmet peer dependency ionic-native/coreという警告?でビルドが失敗する事象にでくわし、
なんだろうと思っていろいろ調べていたら思ったより時間がかかってしまった。
とりあえずimport { Geolocation } from '@ionic-native/geolocation/
ではなくimport { Geolocation } from '@ionic-native/geolocation/ngx
にしたら解消した。
・myProject\src\app\home\home.page.ts
import { Component } from '@angular/core'; import { Geolocation } from '@ionic-native/geolocation/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { geoLatitude: number; geoLongitude: number; geoAccuracy:number; constructor(private geolocation: Geolocation) {} getGeolocation(){ this.geolocation.getCurrentPosition().then((resp) => { this.geoLatitude = resp.coords.latitude; this.geoLongitude = resp.coords.longitude; this.geoAccuracy = resp.coords.accuracy; }).catch((error) => { alert('Error getting location'+ JSON.stringify(error)); }); } }
・ home.page.html
<ion-header> <ion-toolbar> <ion-title> Geolocation </ion-title> </ion-toolbar> </ion-header> <ion-content padding> <h1>Get Location</h1> <ion-button (click)="getGeolocation()"> Get Location </ion-button> <div *ngIf="geoLatitude"> <p>Latitude : {{geoLatitude}}</p> <p>Longitude : {{geoLongitude}}</p> <p>Accuracy : {{geoAccuracy}}</p> </div> </ion-content>
ブラウザで確認
サーバーを立ち上げて確認
> ionic serve
実機で確認
- ビルド
> ionic cordova build android
- ドライバーを用意する
公式サイトで usbドライバーをダウンロードし、下記の場所に解凍したファイルを置く。
Android SDKをインストールしたフォルダ\extras\google\usb_driver
「コントロールパネル」→「デバイスマネージャー」→ 「ほかのデバイス」を右クリック、でドライバーを更新する。
ドライバーは上記のフォルダを指定する。
- 証明書を作成する
下記のフォルダを証明書を作成してみる。
myProject\keys\android
keytool -genkey -v -keystore debug.keystore -alias [alias名] -storepass [storepass] -keypass [keypass] -keyalg RSA
※keytoolコマンドはJDKが通っていれば使えるハズ
- デバイスが認識したら実行
> adb devices
※adbコマンドはandroid-sdk\platform-tools がpathに入っていれば動作する。
リストに表示されたら、
> ionic cordova run android --livereload
※デバッグしたい場合はChromeブラウザで操作できる。Chromeに下記URLを打ち込み、デバイスのInspectリンクをクリックする。
chrome://inspect/#devices