5. IonicでAndroid開発準備から.apkパブリッシュまで - 新年だし、ハイブリッドスマートフォンアプリ開発

  • 38
    Like
  • 0
    Comment
More than 1 year has passed since last update.

Android開発環境の準備はエラーが多発し、思いの外時間がかかりました。各Errorとも、Stackoverflowでup voteが結構ついていたので、少しでもこれから構築する方の助けになれば。

Mac OSX環境で、スマートフォンアプリ開発初心者が、Cordova(PhoneGap)と、AngularJSベースのIonic Frameworkを使い、JavaScriptでiPhone/ Android両対応のネイティブ+HTML5 ハイブリッドモバイルアプリを開発し、iTunes App StoreおよびGoogle Playで公開するまでを何稿かに分けてカバーします。

  1. Cordova(PhoneGap)準備、iOSエミュレータ起動まで
  2. Ionic Framework準備、iOSエミュレータ起動まで
  3. Ionic Creator Beta入門
  4. Ionicでアイコン、スプラッシュスクリーン
  5. IonicでAndroid開発準備
  6. -随時追加予定-

Android版のビルドとエミュレータテスト

Android Studioのインストール

2013年のGoogle I/Oから1年と少し、2014年12月8日にめでたくVer.1.0がリリースされ、
Eclipse+ADKだけでなく、Android Studioが選択肢に加わりました。
本編ではVer. 1.0.1のインストール手順を追います。

参考記事: Download Android Studio and SDK Tools | Android Developers : http://developer.android.com/sdk/index.html

B261F96C-D1C9-4201-8A01-47664DF2AD75.png

Standardを選びます。
7EEF0F97-5375-41B7-9F1E-755F8C54E8F4.png

License Agreementは、android-sdk-license, intel-android-extra-licenseの2つでAcceptを押します。
するとNextが押せるようになります。
FA2AD17B-8A55-40E3-9A2B-5D93925F8B7F.png

10分程かかるので気長に待ちます。
7471225E-387F-4C9E-A2A2-499A5351F23D.png

Finishを押します。
C7E787DE-5BE0-4235-BD9D-408842E672AE.png

Welcome画面が表示されればインストール完了です。
91961D97-B377-4028-B510-2769180DEC37.png

Android SDKのパス設定

Configure > SDK Managerを立ち上げると、上段にSDKパスが表示されている。
D9897175-ECCE-4412-ADEA-DCDF60A867C7.png

vimなどで下記を~/.bash_profile末尾に追加します。
(参考: Android SDK - Ionic Components : http://ionicframework.com/docs/ionic-cli-faq/#android-sdk)

$ vim ~/.bash_profile
.bash_profile
export PATH=${PATH}:/Users/<User Name>/Library/Android/sdk/platform-tools:/Users/<User Name>/Library/Android/sdk/tools
export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=${JAVA_HOME}/bin:$PATH
export PATH=/usr/local/bin:$PATH

上記変更を反映する。

$ source ~/.bash_profile

任意のディレクトリで下記を実行し、Android SDK Managerが起動したらOKです。

$ android

ionic platform androidを確認する

初回は下記エラーに遭遇しました。

Error: Please install Android target "android-19".

これはAndroid 4.4.2 (API 19)を指すため、LicenseにAgreeし、インストールします。
参考: osx - Cordova 3.5.0 Install Error- Please Install Android Target 19 - Stack Overflow : http://stackoverflow.com/questions/24931155/cordova-3-5-0-install-error-please-install-android-target-19

CAFD4F71-BCEC-4560-89C2-0CE7E6EB1BCD.png

それによりionic platform androidのエラーは解消しました。

ionic emulate androidを確認する

再びエラーに遭遇します。

Error: Failed to run "ant -version", make sure you have ant installed and added to your PATH.

Apache Antのインストール

下記を参考にします。
Error executing command 'ant' on Mac OS X 10.9 Mavericks when building for Android with PhoneGap/Cordova - Stack Overflow : http://stackoverflow.com/questions/19495610/error-executing-command-ant-on-mac-os-x-10-9-mavericks-when-building-for-andro

MacportsまたはHomebrewでApache Antをインストールする。

$ brew install ant

または

$ port install apache-ant

Intel X86 emulator acceleratorのインストール

インストール後、ionic emulate androidで次のエラーが発生。

Waiting for emulator...
emulator: ERROR: x86 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: HAX is not installed on this machine (/dev/HAX is missing).

android - Intel X86 emulator accelerator (HAXM installer) VT/NX not editable - Stack Overflow : http://stackoverflow.com/questions/26521014/intel-x86-emulator-accelerator-haxm-installer-vt-nx-not-editable
From the Intel Instructions
にこんな記載がある。

The SDK Manager will download the installer to the "extras" directory, under the main SDK directory. Even though the SDK manager says "Installed" it actually means that the Intel HAXM executable was downloaded. You will still need to run the installer from the "extras" directory to finish installation.

Extract the installer inside the "extras" directory and follow the installation instructions for your platform."

なので、下記を実行。

$ cd /Users/<User Name>/Library/Android/sdk/extras/intel/Hardware_Accelerated_Execution_Manager
$ sudo sh silent_install.sh

Silent installation Pass!と表示されたらインストール完了。

$ ionic emulate android

を起動確認します。
D9213C85-10CE-401F-9A8C-80C6831187EC.png

パブリッシュ用に.apkファイルを作成する

下記に沿って進めます。
Publishing your app - Ionic Framework : http://ionicframework.com/docs/guide/publishing.html

unsigned apkファイル生成

.apkはサインしないと端末にインストールできません。adhocでもこのプロセスが必要です。

$ cordova plugin rm org.apache.cordova.console
$ cordova build --release android

自分のケースでは、ここに生成されました。

<Project Directory>/platforms/android/ant-build/CordovaApp-release-unsigned.apk

Private keyの生成

$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

初回はkyestoreのパスワードを決めた後、基本情報に答えます。この秘密鍵は、公式にアプリの配布を始めたら特に、注意深く管理します。失くすと、アプリがアップデートできなります。

.apkにサインする

下記を実行し、先ほど決めたパスフレーズを入力すると、signが開始します。

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore CordovaApp-release-unsigned.apk alias_name

.apkの最適化をする

最後にzipalignで最適化をして終了。
当初zipalignbash command not foundになったため、~/.bash_profileを開き/Users/Tomo/Library/Android/sdk/build-tools/21.1.2をPathに追加。パスはAndroid SDK Managerから調べます。

参考: android - On mac zipalign command not found - Stack Overflow : http://stackoverflow.com/questions/25983195/on-mac-zipalign-command-not-found

$ zipalign -v 4 CordovaApp-release-unsigned.apk MyFirstApp.apk

Verification Successfulを確認して全工程が終了です。

参考

より詳しいAndroid StudioとCorodvaの連携はこちらのポストを参照。
Using Android Studio Beta with Cordova PhoneGap | iPhone Dev Log : http://iphonedevlog.wordpress.com/2014/10/10/using-android-studio-beta-with-cordova-phonegap/