ionic(cordova)の開発環境構築で最低限必要そうなプロジェクト開始手順をまとめておく

はじめに

いまさらバージョン1系かよ。
という内容だが個人的にはまだまだ使う機会ありそうなのでプロジェクトを作成してから開発に入るまでの最低限必要そうな手順をメモしておく。バージョン2は勉強中。

各ツールバージョン

バージョンによって動いたり動かなかったりあるのでチーム開発するときは各バージョン揃えた方が良さそう。自分はこのバージョンで安定して開発できてる。

$ node -v
v6.10.3

$ npm -v
5.0.1

$ cordova -v
6.5.0

$ ionic -v
2.2.3

プロジェクトを作成

アプリ名やバンドルIDとかは決められるのであれば最初に指定してプロジェクト作成してしまうのが良さそう。きっと後で変更もできるのだろうけど、iOS、Androidどちらもあとからプロジェクト名とか変えるの手間だった記憶があるので決められるのであれば決めておいた方が楽そう。

$ ionic start SampleApp blank -a "SampleApp" -i com.sample.app

Androidをプロジェクトに追加

デフォルトではiOSのみなので必要であればAndroidも追加する。

$ ionic platform add android

.gitignore の編集

デフォルトの設定だとplugins以下もバージョン管理対象外となっている。package.jsonから各自がionic state resetなどを実行すればインストールできるからだ。けど、プラグインや各PCの環境の微妙な違い?とかでインストールできる人やできない人が出ることがある。根本的に解決できたらベストだけど、自分はplugins以下ごとバージョン管理する方針としてしまう。

.gitignore

node_modules/
platforms/
#plugins/   # ★ ここをコメント化
www/dist/*  # ★ ここを追加

必要なディレクトリ作成

ionic startで作られる基本的なディレクトリに追加。
www/dist ビルドしたJSファイルをここに
www/templates HTMLはここに
www/js/controllers コントローラはここに
www/js/services サービスはここに
www/js/values 定数定義はここに

$ mkdir -p www/dist www/templates www/js/controllers www/js/services www/js/values

僕はangular 自体をちゃんと理解できていないのでもっといい構成はあると思うけどいちおうメモしておく。

最低限必要なnpmモジュールを追加してgulpfileを設定

自分が最低限やりたいことは以下。
・とりあえずbower使いたい。
・分割して開発するJSファイルの結合を自動化したい。
・開発、ステージング、本番用の設定を切り替えたい。

モジュールの追加

$ npm install --save bower gulp-concat node-env-file

環境設定ファイルを作成
.env

#MODE=PRODUCTION
MODE=DEVELOPMENT

このファイルのMODEによって、結合の対象を動的に切り替えるようにする。
たとえばAPIを使うような場合にサーバーのURLを環境によって切り替えたい場合などに使う。

実際の記述はgulefile.jsに書く。
xxx.dev.js 開発アプリ(DEVELOPMENTの場合)
xxx.pro.js 本番アプリ(PRODUCTIONの場合)

gulpfile.jsの編集

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

// ★モジュール追加
var concat = require('gulp-concat');
var env = require('node-env-file');

var paths = {
  sass: ['./scss/**/*.scss'],
  js: ['www/js/**/*.js', 'www/templates/**/*.html'] // ★ファイル変更の監視対象
};

// ★環境ごとに除外ファイルを切り替える
env(__dirname + "/.env");
var ex;
if (process.env.MODE == "PRODUCTION") {
  ex = ["!www/js/**/*.dev.js"];
} else {
  ex = ["!www/js/**/*.pro.js"];
}

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

// ★以下、ionic serve中の変更ファイルの監視とビルド時に分割したJSファイルを結合するタスク
gulp.task('serve:before', ['watch']);
gulp.task('build:before', ['js.concat-controllers', 'js.concat-services', 'js.concat-values']);

gulp.task("js.concat-controllers", function() {
  return gulp.src(["www/js/controllers/**/*.js"].concat(ex))
         .pipe(concat("controllers.js"))
         .pipe(gulp.dest("www/dist/js"));
});

gulp.task("js.concat-services", function() {
  return gulp.src(["www/js/services/**/*.js"].concat(ex))
        .pipe(concat("services.js"))
        .pipe(gulp.dest("www/dist/js"));
});

gulp.task("js.concat-values", function() {
  return gulp.src(["www/js/values/**/*.js"].concat(ex))
        .pipe(concat("values.js"))
        .pipe(gulp.dest("www/dist/js"));
});

gulp.task('watch', ['sass', 'js.concat-controllers', 'js.concat-services', 'js.concat-values'], function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.js, ['js.concat-controllers', 'js.concat-services', 'js.concat-values']);
});

この状態で以下のタイミングでファイルの結合処理が実行される
・ionic serve中にファイルの変更があった場合
・ionic build、prepareなどを行う場合

ここまでで準備は完了なので以降で実際に開発してみる。

www/js/app.jsを編集

angular.module('starter', [
  'ionic',
  // ★これから開発する controller、service、valueを使えるように
  'starter.controllers',
  'starter.services',
  'starter.values'
])

.run(function($ionicPlatform) {
  // ・・・
})
// ★ルーティングの設定を追加
.config(function(
    $stateProvider,
    $urlRouterProvider
  ) {
  $stateProvider
  .state("index", {
    url: "/index",
    templateUrl: "templates/index.html",
    controller: "IndexCtrl"
  });

  $urlRouterProvider.otherwise("/index");
});

// ★これから開発する controller、service、valueを使えるように
angular.module('starter.values', []);
angular.module('starter.controllers', []);
angular.module('starter.services', []);

controllerとテンプレート(HTML)を追加する

www/js/controllers/index.js

angular.module('starter.controllers')
  .controller("IndexCtrl", function($scope) {
    $scope.test = "hello ionic.";
  });

www/templates/index.html

<ion-view>
  <ion-content>
    {{test}}
  </ion-content>
</ion-view>

ブラウザで確認する

ここまでファイルができた状態で「ionic serve」を実行するとgulpfile.jsで設定したとおりにdist/js以下にcontrollers.jsにファイルが追加されるはず。また、www/js以下とwww/templates以下のファイルを更新すると自動でここにファイルが出力されていく。最後に1番元となるindex.htmlに以下のように生成されたファイルを読み込むようにすれば、画面に「hello ionic.」と表示されるはず　

www/index.html

・・・
  <script src="js/app.js"></script>
  <script src="dist/js/controllers.js"></script>
</head>
<body ng-app="starter">
  <ion-nav-view>
    <!-- ここにControllerとテンプレートで出力する内容が表示される -->
  </ion-nav-view>
</body>

さいごにserviceとvalueのひな形もメモしておく。

www/js/services/sample.js

angular.module('starter.services')
  .service('SampleService', function() {
    this.my_func = function() {
      // なにか
    };
  });

www/js/values/config.dev.js

angular.module('starter.values')
  .value('config', {
    env_name: "開発環境"
  });

www/js/values/config.pro.js

angular.module('starter.values')
  .value('config', {
    env_name: "本番環境"
  });

まとまりないので、完全に自分用のメモになってしまったけど、以上です。