プログラミング
>
Cordova
2016.6.24
2017.5.25

ハイブリッドアプリ開発環境の構築

ハイブリッドアプリの利点は、WebViewというコンポーネントを使うことで、iOSやAndroidといった異なるプラットフォームに依存することなく、HTML/CSS/JavaScriptといったWebの技術を駆使することで、ソースを共有することでき、アプリの開発工数・規模を少なくすることができる点です。欠点としては、ネイティブアプリに比べ、どうしてもアプリの実行速度が遅くなってしまう点があげられます。

クロスプラットフォーム開発としては他にマイクロソフト提供のXamarinがあり、こちらはネイティブアプリを一つの環境で開発することが可能です。2016年春頃から無料で利用できるようになったらしいので、これはこれでいずれ試してみたいですね。

今回は、ハイブリッドアプリがどれくらい使えるものかを確かめたかったことや、Web関連の技術ならば多少はかじっているのでそこまでハマらないだろう、との安易な考えもあり（モバイルアプリの開発自体したことがなかったので、色々とハマりました...）XamarinではなくCordovaを利用することにして、また、GoogleMapを利用してみたかったので（これもはまった原因のひとつ）、その辺りの環境を構築してみました。

目次

  • 「Visual Studio」と「Apache Cordova」のインストール
  • Android用デバッグ環境の構築
  • iOS用デバッグ環境の構築
  • 感想

「Visual Studio」と「Apache Cordova」のインストール

ハイブリッドアプリの開発環境として、「Visual Studio Community 2015」と「Apache Cordova」を利用する予定で、調べたら目的のインストール手順が書かれた記事が簡単にヒット。

Visual Studio＋Apache Cordovaで始めるiOS／Androidアプリ開発：第1回 Apache Cordovaでできること

これに関しては上記の記事に書かれていた手順で問題なくインストール完了。

Android用デバッグ環境の構築

「Visual Studio」と「Apache Cordova」をインストールしただけでは、デバッグでRippleエミュレーターしか利用できません。Rippleはブラウザ表示と同等なので、実際の表示とは異なる場合があり、最終的な確認には向かないので、Androidの場合、Ripple以外でデバッグ時に利用できるものとしては以下のものがあります。

  • Visual Studio Emulator for Android (Hyper-V)
  • Android エミュレーター
  • Genymotion エミュレーター
  • コンピューターに接続された Android デバイス

詳しくはこちら（Android での Apache Cordova アプリの実行）を参照。

Hyper-VはWindows8から搭載された仮想マシン環境ですが、エディションがPro以上でなければ使えないので、Hyper-Vを利用する「Visual Studio Emulator for Android」は、自宅のマシン（Windows 10 Home）では使えませんでした。よって、今回はAndroid エミュレーターを利用すべくAndroid SDKのインストールを実施します。

Android SDKのインストールについてはこちら（2015年 1月最新版 Android SDKインストール手順（Windows8対応））を参照。

Android SDKのダウンロードについてはこちら（Download Android Studio and SDK Tools | Android Studio）を参照。（Windowsであれば下記サイト内の「installer_r24.4.1-windows.exe」をダウンロードする。）

Android SDK Managerを利用して各バージョンのAPIをインストールする場合、このManagerアプリを右クリックからのメニューで「管理者として実行」を選んで起動しないと、下記のようにアクセスが拒否されてインストールに失敗します。

Downloading SDK Platform Android N, API 24, revision 1
URL not found: C:\Program Files (x86)\Android\android-sdk\temp\platform-24_r01.zip (アクセスが拒否されました。)

GoogleMapを利用する場合は、SDK Managerの「Google APIs ～」というAPIをインストールします。

Androidエミュレータ―を起動するには、インストールしたAndroid SDKのフォルダ（C:\Program Files (x86)\Android\android-sdk）配下に「AVD Manager.exe」というファイルがあるので、これを起動します。

「AVD Manager.exe」起動後、「Android Virtual Devices」タブの「Create」をクリックして、エミュレーターを以下のように設定します。

  • AVD Name：任意のエミュレータ―名
  • Device：デバッグしたいモバイル端末
  • Target：デバッグしたいAndroidのバージョン
  • CPU/ABI：デバッグしたいCPU

Androidエミュレータ―の場合、HAXMに対応させないと動作が極端に遅いので、可能ならば利用します。高パフォーマンスの HAXM ドライバー利用する場合の条件は以下の通り。詳しくはこちら（Android SDK の高速エミュレータ、使ってますか？ | OPTPiX Labs Blog）を参照。

  • SDK ManagerからExtras - Intel x86 Emulator Accelerator(HAXM installer)をインストール
  • 開発マシンがIntel製CPUを搭載（正しくはVT-xに対応したCPUを搭載。Core i系はほとんど対応している）
  • CPU/ABIでIntel製CPU（Atom）を選択
  • Emulation Optionsで「Use Host GPU」にチェック

なお、実機でのデバッグについては、端末毎の専用のデバイスドライバが必要となるので、必要に応じてメーカーサイトからダウンロードしてインストールします。Google系のモバイル端末（Nexus）であれば、下記のようにSDK Managerからインストールが可能となっています。

デバッグ、実機ともにSDK Managerで必要なものをインストールしておかないと、ビルド時にエラーが発生します。

エラーの例）

FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all dependencies for configuration ':_debugCompile'.
   > Could not find any version that matches com.google.android.gms:play-services-maps:+.
     Searched in the following locations:
         https://repo1.maven.org/maven2/com/google/android/gms/play-services-maps/maven-metadata.xml
         https://repo1.maven.org/maven2/com/google/android/gms/play-services-maps/
     Required by:

BUILD FAILED
         :android:unspecified
   > Could not find any version that matches com.google.android.gms:play-services-location:+.
     Searched in the following locations:
         https://repo1.maven.org/maven2/com/google/android/gms/play-services-location/maven-metadata.xml
         https://repo1.maven.org/maven2/com/google/android/gms/play-services-location/
     Required by:
         :android:unspecified

Android APIの他、Extras配下でも必要なものがあるので、確認すること。

こちらの環境では以下のものをインストールしないと駄目でした。

  • Android Support Repositoy
  • Google Play services
  • Google Repository
  • Google USB Driver
  • Google Web Driver
  • Intel x86 Emulator Accelerator(HAXM installer)

iOS用デバッグ環境の構築

iOSでデバッグ用のシミュレーターや実機での動作確認を行う場合は、どうしてもMacが必要です（実際にやってみて分かりました）。開発自体はVisual Studioで行い、開発したアプリのビルドや、シミュレーターでの動作確認でMacが必要になってきます。

シミュレーターに関しては、MacのApple StoreからXcodeをインストールして起動後、Xcode → Open Developer Tool → Simulator と選択することで利用可能です。

WindowsマシンからMacへビルドの処理を依頼をするためには、Macにリモートエージェントをインストールする必要があります。詳しくは以下の記事を参照。

上記の記事の内、「新しいセキュリティ暗証番号 (PIN) を生成」するためのコマンドが古かったのか実行できなかったので、下記のコマンドで実行。その他、最新のコマンドはこちら（remotebuild）を参照。

remotebuild certificates generate

シミュレーターでの動作確認では、有料のiOS Developer Programへの登録は不要でしたが、実機での動作確認では必要でした。Xcode7 から無料で実機にアプリをインストール出来るという記事（[Xcode][iOS] 有料ライセンスなしでの実機インストール 全工程解説！）を見かけたので、無料でできるものと思っていましたが、Xcodeのプロジェクトでは問題なく動作しましたが、Visual Studioからのリモートビルドではできませんでした。

その時のエラーの内容は以下の通り。

  Check dependencies
MDAVSCLI : Code Sign error : No matching provisioning profiles found: No provisioning profiles with a valid signing identity (i.e. certificate and private key pair) matching the bundle identifier “com.ionicframework.ionicsidemenu” were found.

  ** BUILD FAILED **


  The following build commands failed:
  	Check dependencies
  (1 failure)

何かしらの設定を行えばできそうな気もしましたが、今のところはできてません。

感想

モバイル用端末のアプリ開発に携わったことがないからかもしれませんが、ここまでの環境構築でそこそこの時間を要しました。これで終わりではなく、GoogleMapの導入やionicフレームワークの導入など、その辺りの便利なものを利用しようとしたら、1週間くらいで終わると思っていた開発環境の構築が2週間以上かかってしまったので、初めて開発で扱う場合は、事前の確認・準備に時間がかかることを考慮した方がよさそうです。

【Cordova】関連記事

Visual Studio用（Hyper-V）のAndroidエミュレーターをインストールする
Visual Studio 2017 と Ionic2 でハイブリッドアプリ開発環境の構築
画像ファイルの選択方法
GoogleアカウントでOAuth認証（ngCordovaOauth）
phonegap-googlemaps-pluginでマップ上に配置した要素にアクセスする方法
phonegap-googlemaps-pluginの利用
よく読まれているプログラミングの記事
ピックアップ記事