Log.log(work)

いろんな作業メモ

Ionic(Angular)でandroid実機で動作確認

やりたいこと

位置情報を送るアプリをAndroidで動作させてみる。

環境

OS : Windows 8.1
Ionic CLI : 5.4.2
NodeJS : v10.15.3
npm : 4.0.5

さっそく開発

  1. nodistインストール
    インストーラダウンロード
  2. cordovaインストール

    npm install -g cordova ionic

  3. Android Studio / コマンドラインツールのダウンロード
    ダウンロードページからそれぞれのZipファイルをダウンロード

    • Android studio(android-studio-ide-181.5014246-windows.zip)を適当なところに解凍。 例)d:\android配下
    • コマンドラインツール(sdk-tools-windows-4333796.zip)を適当なところに解凍。 例)d:\android\android-sdk配下
  4. Android SDK のセットアップ

    sdkmanager "emulator" "platform-tools" "platforms;android-27" "build-tools;27.0.3" "system-images;android-27;default;x86_64"

  5. Windows Hypervisor Platform (WHPX) インストール

    sdkmanager "extras;intel;Hardware_Accelerated_Execution_Manager"

  6. 新規プロジェクトつくる(位置情報を表示したいだけなのでblankにしておく。他にもtabsとかいろんなオプションがある)

    ionic start myProject blank
    cd myProject

  7. Geolocationプラグインをインストール

    ionic cordova plugin add cordova-plugin-geolocation
    npm install @ionic-native/geolocation

  8. 開発

    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

参考サイト

[Ionic3] 開発環境の構築からAndroid実機デバッグまでの手順まとめ - WESTA

Androidの各種ドライバをインストール | Androidのメモ帳 - 楽天ブログ