AngularJS+Ionicテンプレをエミュレータ・モバイル実機で動かす(Android)

Angular JS + Ionic + Cordova の導入〜実機で実行まで

• 前提: SDKは導入済みとする
  Androidアプリを作成したローカル環境なら既に通っているはず
  ※ 通っていなければ次の3つのパスを通す
  ADK(Android SDK)のplatform、platform-tools、 Java JDK

環境構築手順

必要なCLI

• Node.jsをインストール (npmのため)
• Cordovaをインストール
• Ionicをインストール ※Ionicのプロジェクトを作成する際に、Angular JSの.jsも含まれるのでインストールは不要

導入方法

• Node.js
  公式から、DL+インストール
  ※ Homebrewとか好きなパッケージマネージャーを使ってもOK

• Cordova
  $ npm install cordova -g

• Ionic
  $ npm install ionic -g

プロジェクト作成

$ ionic start APP_NAME TEMPLATE

(参考)
Ionicには初期構築用のテンプレートが用意されている
・blanc : 中身が空のアプリ
・tabs : タブ要素を使用したアプリ
・sidemenu : サイドメニュー要素を使用したアプリ
末尾の引数(TEMPLATE)に、blank | tabs | sidemenu を指定すれば良い

プロジェクトの実行

$ cd APP_NAME (作成したプロジェクトに移動)
$ ionic serve
ブラウザが起動し、作成したプロジェクトを稼働させた画面が表示される

Android用の環境を構築

$ ionic platform add android
下記のように、platform/androidディレクトリが生成される

Androidのエミュレータ上で実行

$ ionic build

Androidの実機で実行

$ ionic run
※事前に実機でデバッグモードONを忘れずに

フォルダ構成

$ ionic start tabs_myApp tabs
で作成したプロジェクトのフォルダ構成は以下。

ハイブリッドアプリ開発をする上で実際に触る箇所

tabs_myApp/www/以下のcss、jsなどのディレクトリ内や、htmlファイル
Ionicのサンプル構成ではwww/js/は、以下のようになっている。

・app.jsでは、index.html内にある、「ここ」に埋め込むテンプレート(template/以下にある.html)へのパスと、そこで使用するコントローラを指定している
・controller.jsでは、各コントローラと、スコープのセットアップを行っている
・services.jsでは、コントローラーで呼び出すメソッドや、変数の操作を登録している。

ネイティブ実装が必要な場合

従来通りの方法で行う。
Cordovaでおなじみのディレクトリは、platforms/以下で、AndroidManifest.xmlの編集やsrcにJavaコードを入れるイメージになる。

Ionicで用意されている既存パーツを変更する場合

tabs_myApp/www/lib/ionic/にあるcss、fonts、js、scssを変更することになる。
ただ、cssは直接いじらず、scssを弄る方が良いらしい。

※ scssを弄るということは、cssにするためコンパイルが必要となる。そのためのツールは別途必要。
※ Angular JSの.jsもionic/ディレクトリに含まれている。

参考ページ

• Developer Guide (おすすめ)
  https://docs.angularjs.org/guide
  全部読むのは大変だが、"Conceptual Overview"だけでも見ておくといいかも

• API Reference
  https://docs.angularjs.org/api

• Angular JSを使用したアプリ集
  https://builtwith.angularjs.org
  自身のソースを投稿する形式で公開されている
  色んなテクノロジーの組み合わせで作っている例を見れる

• Ionic Docs
  http://ionicframework.com/docs/
  OverviewからHTMLの書き方、CSSの書き方、何でも揃ってる

• Ionicを使用したアプリ集
  http://showcase.ionicframework.com
  Angularと同様に、他人のアプリイメージを参照する時に有用

結局、公式ページがおすすめな気がする

※本投稿は2015年初の実施内容

後日談

• 実際に使ってみてリッチなFWのため学習コストが高いことは事実
  • なので複数人での開発で選択すべきかは要検討
  • 一方で，同時に使用するフレームワークは少なく済む場合がある (IonicはAngularJSをバンドルしている)
• もしハイブリッドアプリを作るなら良いかも
  • Cordova (JSでNative機能利用)
  • Ionic (UI系)+AngularJS