swelldesign

Webデザイン HTML Javascript Jqueryなどに関する解決策をメモとして紹介するブログです。

Cordova + OnsenUIを使ったハイブリッドアプリ環境構築(Android編)

今回は以下の観点でハイブリッドアプリを利用したアプリ開発を行うことにしました。

  • ライトなアプリ制作で問題ない
  • iOSAndroidに対応したい
  • 今はあまり工数をかけたくない
  • WEB担当者(HTML+CSS+JS)に開発を分担したい

Monaca(https://ja.monaca.io/)というブラウザを利用して開発のできる素敵なクラウドサービスがありましたが、やはり既存のSVNによる履歴の管理やチーム開発を考えるとまずはローカルでの対応にしたいと思います。
Monacaにも上記要望に応えるようなLocalkitという魅力的なツールが用意されていましたが、30日のトライアルで以降年額9800円ということで、取り合えづはフリーで始められ方法を。

 

※以下 >  はコマンドの実行

 

Android SDKインストール
まずはAndroidの実行環境を準備

1)Toolsをダウンロードし「tools」をパスに設定
  http://developer.android.com/sdk/index.html
  SDK Tools Only
  android-sdk_r24.3.4-windows.zip

 

2)Android SDK Managerを起動する

 > android

 

3)以下をインストール
 Tools
  ├Android SDK Platform-tools 23.0.1
  ├Android SDK Build-tools 23.01.1
 Android5.1.1(API 22) ※最新のAndroid6.0(API 23)でないことに注意
  ├以下すべて
 Extras
  ├Android Support Library 23.0.1
  ├Google USB Driver 11
  ├Intel x86 Emulator Accelerator(HAXM installer) 5.4

 

4)高速エミュレータ(HAXM)インストール
 以下を実行
 extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm-android.exe

 

5)Android Virtual Device Managerを起動

 > android avd

 

6)AVDを新規作成
 Android Virtual Devices > Create..
  Target: Android 5.1.1 -API Level 22
  CPU/ABI: Intel Atom(x86_64)
  Memory Options: RAM:512
  Emulation Options: Use Host GPU
  ※上記以外任意


◆Cordovaを用いた開発環境を構築

Cordova: ハイブリッドアプリの開発には専用のフレームワークApache Cordova」のこと

1)「node.js」をダンウンロードしインストール
 https://nodejs.org/en/

 

2)インストール確認
 > node -v
 v4.0.0
 > npm -v
 2.14.2

 

3)「cordova」のインストール(-g:マシンのグローバルな領域)
 > npm install cordova -g

 

4)「WARN」が出ましたが、ひとまずはインストールされていることを以下の方法で確認
 > cordova -v
 5.3.1

 

5)プロジェクトの作成
 > cordova create hello com.example.hello Helloworld -d

 

6)アンドロイド環境を追加
 > cd hello
 > cordova platform add android

 

7)エミュレータ起動(-d:詳細表示)
 > cordova emulate android -d

 

8)実機での確認(-d:詳細表示)
 > cordova run android -d

 ※USBデバッグをONにしたAndroid端末と開発マシンをUSBケーブルで接続


◆OnsenUIを試す
1)以下より試したいテンプレートをダウンロード
 http://ja.onsen.io/download.html#download-templates

 

2)展開したファイルから「www」を入れ替える

 

動かすとこまでは出来ました。

後はアプリを作りこんでいきたいと思います。

j.k