ハイブリッドアプリ開発フレームワーク「Apache Cordova」の環境構築

person 73spicafolder_open技術系access_time 2016-09-13

少し前にモバイルアプリ開発をすることになり,Apache Cordovaの環境構築をしたのでそれの備忘録. 備忘録なので割と適当かもしれません…時間を見つけて改善します.

ハイブリッドアプリ開発とは

ハイブリッドとは、Web技術とネイティブ(アプリケーション)技術の二つのハイブリッドを意味しています。この特性から、ハイブリッドアプリはアプリ・Web双方の特色を併せ持ちます。

Apache Cordovaとは

オープンソースのハイブリッドアプリ開発フレームワークです.UIはHTML5CSSで作り,動作部分はJavaScriptで実装することができます.Onsen UIなどスマートフォンアプリ向けのUIフレームワークを利用することで比較的簡単にスマホアプリを実装することができます.

環境

あまり覚えていない…ですが,windows環境での構築になります.Windows 10とwindows 8でインストールを行いました.

  • OS : Windows 8 & 10
  • システム : 64ビット OS

Apache Cordovaは,MonacaVisual Studioなどの開発環境でも開発できます.Monacaによる開発に関するリファレンスは多いようです.また,Visual StudioはVS tools for cordovaというパッケージを用意しており,これインストールすると,必要な製品をすべてインストールしてくれるみたいです.そして多分VSやMonacaを使った方が楽です←

今回の記事はそういったものを利用しない方法でインストールしたときのメモです.

やること

  • JDK入れる
  • Node.js入れる
  • Cordova入れる
  • SDK入れる
  • SDKの追加ツール入れる
  • Ant入れる
  • Genymotion入れる
  • エミュレータ上のAndroidでHello World

JDK入れる

私はJDKすら入ってなかったのでJDKをインストールすることから始めました.とはいってもインストールは簡単で,ORACLEのJDKダウンロードページで最新のJDKをインストールします.

ダウンロードが完了したらインストールを行います.基本デフォルトのままで次へをぽちぽちしていれば終わると思われます.パスを通すためにJDKのインストール先だけはちゃんと見ておいた方が良いですね.

インストールが完了したらシステムの環境変数からパスを通します.

Node.js入れる

Node.jsとは,サーバ側で動作するJavaScriptです.実はCordovaはNode.jsで扱うので,こちらをインストールする必要があります.

Node.jsの公式ページからインストーラをダウンロードします.LTSWindows Installer (私は環境的に64bit版)が良いと思います.これも次へをぽちぽちしてれば良いです.

インストールが完了すると,Node.js及びそれらのパッケージ管理するためのnpmというツールがインストールされます.動作確認だけしておきましょう.

なんか僕のやつ古いですね…

SDK入れる

Android SDKをインストールしたいのですが,私はAndroid Studioのインストーラを使った方法しか知りません.こちらのサイトからAndroid Studioのインストーラをゲットしました.私はAndroid Studioも欲しかったので,デフォルトのまま次へをぽちぽちしました.

こちらもパスを通します.以下の二つについてパスを通します.

  • C:\Users\ユーザー名\AppData\Local\Android\sdk\tools
  • C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools

このtools,platform-toolsへのパスは1例で,自分のインストールした環境に合わせてください.セミコロンで区切るのを忘れないようにしましょう.

追記) ANDROID_HOMEの登録

よくよく考えたら新規の環境変数の登録が必要でした.私は既に登録していたので忘れていました.

下記のような環境変数が必要です.

変数名:ANDROID_HOME

パス:C:\Users\ユーザ名\AppData\Local\Android\sdk

こちらも必要があれば適宜読み替えてください.

SDKの追加ツールを入れる

Android SDK Managerを使って追加のツールをインストールします.私の場合は以下にあるSDK Managerを直接実行しました.

  • C:\Program Files (x86)\Android\android-sdk\SDK Manager.exe

こちらも自分の環境に置き換えて見てください.実行したらandroid SDK Platform-tools必要なバージョンのAndroidにチェックを入れます.他にも必要なツールがあればインストールします.

Cordova入れる

Cordovaはnpmを使ってインストールできます.

インストールできたか確認もかねてバージョンを確認します.

 

(必要に応じて)ant入れる

基本はこの時点でCordovaを利用できます.しかし,cordovaでアプリを実行しようとすると,Antが無いよという旨のエラーが出るときがあるようです.Apache Antとは,makeファイルなどに相当するビルドツールみたいです。複雑なコンパイル作業などを自動化してくれます。Cordovaは内部でこれを利用しているようなのでこちらもインストールします.

こちらのApache Antのサイトに行きます.左メニューの[Download]-[Binary Distributions]を選択します.

下の方にスクロールすると,[Current Release of Ant]という部分があります.ここからファイル群をインストールできます.Windowsなら普通はzipファイルを選択すると思うのですが,私はzipをダウンロードして使おうとしたところ上手く行きませんでした(md5値なども確認しましたのでダウンロードミス等ではないです).tar.gzの方を使うと上手く行ったので,こちらを使うことをお勧めします.tarはアーカイブで,gzが圧縮形式です.私はtarコマンドで解凍しましたが,解凍方法は他にもあると思います(Cygwin使ってました).

解凍したらそれをC直下に置いて,パスを通します.パスの通し方は下記のサイトを参考にすると良いです.

上手く設定できていれば,cordovaのコマンドが使えるはずです.

Genymotion入れる

デフォルトのエミュレータは重すぎなのでGenymotionを使います.Genymotionは軽く動作するエミュレータとして有名です(もちろんそれなりには重いですが).Genymotionの公式サイトでインストールできます.Genymotionをインストールするには会員登録が必要になります.会員登録もインストールも無料できるので登録して利用します.

まずこちらで会員登録を行います.

その後,フリー版のインストールページまで行ってDownload Genymotion packageをクリックすればインストーラがダウンロードできると思います.インストーラを起動して指示通りに進めばインストールも完了します.

適当はエミュレータを起動しておけば,Cordova側で勝手に認識してくれます.

Hello World

簡単な動作確認をしてみます.Genymotionで適当なAndroidのエミュレータを起動した状態で以下のコマンドを実行します.

  • プロジェクトの作成
  • プロジェクトのディレクトリに移動
  • プラットフォームにAndroidを追加(これでAndroidで実行できるようになる)
  • Androidが追加されたか確認
  • Androidでアプリを実行

という流れです.cordova run androidで,モジュールが足りない旨のエラーが出た際は,npm install <モジュール名>で適宜インストールします.

エミュレータでこんな風になっていれば成功です.

cordova_run_android

 

もしもエミュレータでうまくいかない場合は,3行目と5行目のandroidをbrowserに変えれば,ブラウザで実行できます.アプリの挙動をブラウザで手軽に確認できるのもCordovaを用いたハイブリッドアプリ開発の強みです.また,単純にプロジェクトのwww内のindex.htmlをブラウザで実行させても同じことです.

まとめ

コマンドライン上で操作できるのは,個人的には動作も軽く気に入っています(バイト先では結局VSを使ってますが).

雑な説明になってしまいましたが,見てくださった方の参考になる部分があれば幸いです.

時間があればもう少し丁寧に書き直したいです.

参考

こちらの書籍もおすすめです.Webアプリとの違いや具体的な開発方法などがわかります.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">