スマートフォンなどのネイティブアプリを制作する時には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アプリ制作フロー（ビルド・各種設定編）」で実機でアプリを動かし、ストアでリリースするまでのフローをまとめていきます。
