10分で作るcordova + ionicのHello World
今回自社アプリ開発で、cordova + ionicを使ってハイブリッドアプリを開発することになりましたので、開発環境構築からhello world作成までの手順を簡単に纏めました。
まずは、Cordvaの開発環境設定をする
1. Xcodeのインストール（ios開発環境）
以下のURLにアクセスして、App StoreからXcodeをインストールする。App Storeのアカウントが必要。
https://itunes.apple.com/us/app/xcode/id497799835?mt=12
2. Node.jsとnpmのインストール
以下のURLにアクセスして、Node.jsのインストールパッケージをダウンロードして、インストールする。このとき、同時にnpmもインストールされる。
http://nodejs.org/
3. node.jsとnpmがインストールされていることを確認する
「ターミナル」を起動して、以下のコマンドを入力し、nodeとnpmが正しくインストールされていることを確認する。
node -v
npm -v
いずれのコマンドの実行結果も、node.jsとnpmのバージョン番号を返す。not found的なエラーメッセージが返ってくる場合は、インストールに失敗している。
4. codeovaのインストール
引き続き、「ターミナル」から以下のコマンドを入力し、cordovaをインストールする。
npm install cordova -g
インストール終了後、以下のコマンドを実行してバージョン番号が表示され、正しくインストールが終了したことを確認する。
cordova -v
5. Homebrewのインストール
引き続き、「ターミナル」から以下のコマンドを入力し、Homebrewをインストールする
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
インストール中に、英文で「RETURNを押して継続、中断する場合は他のキーを押すこと」というメッセージが出たら、RETURNキーを押す。
また、途中で管理者パスワードを求められるので、管理者パスワード（管理者としてログオンしている場合、自分のパスワード）を入力する。
6. EclipseとAndroid SDK(ADT：Android Developer Tool)のダウンロードと解凍
以下のURLにアクセスし、「Download Exlipse ADT」からEclipseとADTの入ったzipファイルをダウンロードする。ダウンロードしたzipファイルを解凍し、適当なフォルダにコピー／移動する。
今回は「アプリケーション(/Applications)」にコピーした、という前提で手順を示す（他のフォルダにコピーした場合、今後のステップのフォルダ指定を適宜読み替えること）。
https://developer.android.com/sdk/index.html
7. コマンドラインからiOSシミュレータ直接起動するツールをbrewする
以下のコマンドをターミナルで実行する
brew install ios-sim
8. Androidのビルドツールのantをbrewする
以下のコマンドをターミナルで実行する
brew install antt
9. 必要なPATHを通す
以下のコマンドをターミナルで実行する
touch ~/.bash_profile; open ~/.bash_profile
「テキストエディタ」が開くので、AndroidSDK Toolsのパスを書く
export PATH=$PATH:/Applications/adt-bundle-mac-x86_64-20140702/sdk/tools/:/Applications/adt-bundle-mac-x86_64-20140702/sdk/platform-tools/
adtを置いたパスに合わせて、パスの設定は柔軟に行うこと。
10. PATHが通っていることを確認する
パスが通ったことを、以下の2つのコマンドを実行することで確認する
android -h
adb version
11. Android SDKのインストールをする
以下のコマンドをターミナルで実行する
android
Android SDK Managerが開くので、API Level19以上のものをインストールする。
選択後、右下側にあるInstall ** packages...をクリックしてインストールする。
ライセンス文章確認の画面が出てくるので、Acceptすること。
次に、以下のガイドに従って、ionicをインストールして、Hello Worldを作りましょう。
http://ionicframework.com/docs/guide/installation.html
1. ionic インストール
sudo npm install -g ionic
2. ionic 新規プロジェクト作成
事前にプロジェクトを作るフォルダの親まで移動。[project name]にプロジェクト名を入れる
ionic start [project name] sidemenu
※アプリは"blank"（ブランクアプリ）、"tabs"（タブアプリ）、"sidemenu"（サイドメニューアプリ）の３つのテンプレートが用意されている。
今回はsidemenuテンプレートを利用している。
3. ionic プラットフォーム追加(ios, android)
cd [project name]
ionic platform ios
ionic platform android
4. ionic ビルドとテスト
iosの場合、以下のコマンドをターミナルから実行
ionic build ios
ionic emulate ios
