スマートフォンなどのネイティブアプリを制作する時にはJavaやObjective-C、Swiftなどのプログラミング言語が必要となり、プログラマーでなければ結構ハードルが高いものです。その上、OSによってプログラミング言語や開発環境も変わるという問題もあります。   しかし、最近はHTMLとjavascriptを使ったアプリ開発が可能となるフレームワークが登場したことで、よりアプリ開発が身近なものになり、同時にOSが異なる場合でも同じ開発環境で対応できるようになりました。今回はそんなハイブリットアプリ開発のフレームワークの一つである「Cordova」のMacでAndroidアプリ開発をするときのフローをまとめてみました。  

各種開発環境インストール

まずはマシンに開発環境アプリケーションのインストールが必要になります。   1. JDKのインストール Javaアプリケーション開発用のアプリケーションパッケージです。 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ※各OSに合わせた最新版をインストールします。   2. SDK（AndroidStudio）のインストール Androidアプリケーション開発に必要となる各種ツールが含まれています。 http://developer.android.com/intl/ja/sdk/index.html  

SDKの環境変数のパスを通す

1. SDKのパスをAndroid SDK Managerで確認 コマンドラインで次のように入力し、Android SDK Managerを立ち上げる。

$ android

ウィンドウ上部のSDK PATHのところを確認する   2. bash_profileへSDKのパスを記述 コマンドラインでホームディレクトリへ移動

$ cd

  bash_profileへ追記する

$ sudo vi .bash_profile

  パスを通すためSDKのパスを記述する

export PATH=${PATH}:/Users/ユーザー名/Library/Android/sdk/platform-tools:/Users/ユーザー名/Library/Android/sdk/tools
export JAVA_HOME=$(/usr/libexec/java_home)
export PATH=${JAVA_HOME}/bin:$PATH
export PATH=/usr/local/bin:$PATH

最初のパス名を指定するところが、Android SDK Managerで確認したSDK PATHの内容になります。   保存して終了する

:wq

  正しく設定されたか確認する

$ sudo cat .bash_profile

  次のコマンドを入力し再度確認する

//adbコマンドで動作を確認：詳細が表示されればOK
$adb
//adbコマンドで動作を確認：バージョンが表示されればOK
$adb version
//androidコマンドで動作を確認：ヘルプが表示されればOK
$ android -h

 

Homebrewのインストール

1. Homebrewのインストール パッケージ管理ツールでおなじみのHomebrewをインストールします。次のコマンドを入力するとインストールが開始します。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

  完了したら問題なくインストールされているか確認します。

//バージョンが表示されればOK
$ brew -v

  念のため最新版にアップデートしておきます。

$ brew update

  次のコマンドで使える状態になっているか確認します。

//Your system is ready to brew.と表示されればOK
$ brew doctor

 

Node.jsとnpmのインストール

JavaScriptでのアプリ開発には必須となるプラットフォームである、サーバーサイドjavascript「Node.js」と、各種プラグインなどをインストールする時に役立つパッケージマネージャー「npm」をインストールします。   1. Node.js＆npmのインストール Homebrew経由でNode.js＆npmをインストール

$ brew install node.js

  インストールされているかを確認します

//バージョンが表示されればOK
$ node -v
//バージョンが表示されればOK
$ npm -v

 

Cordovaのインストール

いよいよHTMLでのアプリ開発プラットフォーム「Cordova」をインストールします。と、言っても次のコマンドを入力するだけですぐに終わります。   1. Cordovaのインストール npm経由でCordovaをインストール

$ sudo npm install -g cordova

sudoを付けること、グローバルなディレクトリにインストールするため「-g」を忘れないようにします。   インストールされているかを確認します。

//バージョンが表示されればOK
$ cordova -v

 

Cordovaプロジェクトファイル作成

ここまで一通りのインストール作業が終わるとアプリ用のファイルが入るフォルダを準備していきます。   1. アプリ開発用プロジェクトフォルダを作成する場所へ移動 アプリ開発用のプロジェクトフォルダを作成し、そのフォルダの場所まで移動します。

$ cd ~/プロジェクトフォルダ名

このフォルダの中にCordovaのプロジェクトファイルが入ることになります。   2. Cordovaプロジェクトファイル生成 Cordovaでのアプリ開発に必要となるファイル群の一式を作成します。プロジェクトフォルダのディレクトリで次のコマンドを入力します。

$ cordova create ディレクトリ名  アプリ識別子  アプリ名 -d

• ・ディレクトリ名：プロジェクトファイルのルートディレクトリフォルダ名
• ・アプリ識別子：リリースの際に必要となるアプリを特定する為のパッケージ名
• ・アプリ名：アプリ固有の名前

例として次のように設定します

$ cordova create sampleapp  jp.co.sample  Myapplication -

※アプリ識別子はドメインを逆に記述したものに設定します   3. OS別のプラットフォームを追加 Cordovaは一つのソースで複数のOSに対応できるハイブリットアプリです。リリースするOS用のプラットフォームを追加します。   Android用のプラットフォームを追加します

$ cordova platform add android

  プラットフォームが追加されているか確認します

$ cordova platform ls

 

Cordovaのファイル構成

以上でアプリを開発する環境が整いました。 生成されたファイル群を確認すると次のような構成になっています。   プロジェクトルート 　├　config.xml 　├　hooks 　├　platforms 　├　plugins 　└　www   このwwwフォルダの中に、アプリのHTMLやjavascriptファイル、画像ファイルなどが入ります。あとは通常のウェブ制作と同じようにコーディングをしていきます。     以上がCordovaでのネイティブアプリ開発の環境構築となります。やることが多くて少し大変かもしれませんが一つひとつ確実に行っていくことが大切だと思います。   次回は「【Macでアプリ開発】CordovaのAndroidアプリ制作フロー（ビルド・各種設定編）」で実機でアプリを動かし、ストアでリリースするまでのフローをまとめていきます。