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
.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: "本番環境"
});まとまりないので、完全に自分用のメモになってしまったけど、以上です。
Amazon LinuxにNginxをバージョン指定してインストールする
公式サイト(http://nginx.org/en/linux_packages.html#stable)に、repoファイルの書き方がのってる。
ひな形
[nginx] name=nginx repo baseurl=http://nginx.org/packages/OS/OSRELEASE/$basearch/ gpgcheck=0 enabled=1
OS = centos、OSRELEASE=6とする。
[nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/6/$basearch/ gpgcheck=0 enabled=1
インストール可能なバージョンを調べる
# yum --showduplicates --disablerepo=amzn-main list nginx Loaded plugins: priorities, update-motd, upgrade-helper Installed Packages nginx.x86_64 1.12.0-1.el6.ngx @nginx Available Packages nginx.x86_64 1.8.0-1.el6.ngx nginx nginx.x86_64 1.10.0-1.el6.ngx nginx nginx.x86_64 1.10.1-1.el6.ngx nginx nginx.x86_64 1.10.2-1.el6.ngx nginx nginx.x86_64 1.10.3-1.el6.ngx nginx nginx.x86_64 1.12.0-1.el6.ngx nginx
バージョンを指定してインストールする
※ 今回は1.12をインストール
# yum -y install --disablerepo=amzn-main nginx-1.12.0
以上です
【angularjs】serviceで [$injector:unpr] Unknown provider が出た時の対応
半日くらいハマりました。
エラーが出てたコード
angular.module('myApp', []);
angular.module('myApp')
.service('myService', function() {
・・・
});
angular.module('myApp', ['ngCordova'])
.service('myService2', function() {
・・・
});修正後のコード
angular.module('myApp', ['ngCordova']);
angular.module('myApp')
.service('myService', function() {
・・・
});
angular.module('myApp')
.service('myService2', function() {
・・・
});以上です。
ionic(cordova)にて screen-orientationプラグイン を使って画面ごとに回転時の表示を切り替える
はじめに
今回やりたかったことは
端末を回転したときに画面Aでは縦固定、画面Bでは縦横どちらにも対応みたいなこと。
プロジェクトを作成
$ ionic start sample tabs
今回は複数画面必要だったのでtabsを使った。
$ ionic plugin add https://github.com/apache/cordova-plugin-screen-orientation.git
config.xmlを編集
<platform name="ios"> <preference name="Orientation" value="all" /> </platform>
デフォルトではiPhoneで縦固定なようなので縦横対応する形に修正。
実装
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
・・・
// ★ここを追加 基本的には縦固定
screen.orientation.lock('portrait');
}
})
.config(function($stateProvider, $urlRouterProvider) {
・・・
.state('tab', {
url: '/tab',
abstract: true,
controller: 'TabCtrl', // ★ここを追加
templateUrl: 'templates/tabs.html'
})
・・・
controller.js
angular.module('starter.controllers', [])
.controller('TabCtrl', function($scope, $rootScope) {
$rootScope.$on("$stateChangeStart", function(event, toState) {
// 縦横両対応にしたい画面ではロックを解除
if (toState.name == "tab.chat-detail") {
screen.orientation.unlock();
} else {
screen.orientation.lock('portrait');
}
});
})とりあえずこれでやりたいことはできた。以上です。
phpで時刻が9時間ずれてたらタイムゾーンを設定した方がよい
なにをいまさらな内容。というか愚痴。
サーバーの設定とかいじれない環境での話。
こんなコードがあちこちにあった。
$date = date("Y-m-d", strtotime("9 hour"));どっかで1行セットしておいてください。
date_default_timezone_set("Asia/Tokyo");
$date = date("Y-m-d");以上です
【ionic】ion-side-menusを常に表示する
ionicの仕様?なのかナビゲーションの2階層目以降では消えてしまうようなのだが今回は全画面で表示したかった。よくわからなかったのでcssで無理やり実装。以下を追記したらいけました。
.bar .buttons .hide {
display: block !important;
}以上です
ionic(cordova)でsqliteを使う - ngCordova
はじめに
今回やりたかったのはsqliteを使う際に共通の処理とかはどこかにまとめておきたかった。接続とSELECT、INSERT、UPDATE、DELETEあたりをまとめられればよいかなという方針で。次回簡単に使えるようにメモしておく。
インストール
$ bower install ngCordova
index.htmlで読み込む
・・・ <script src="lib/ngCordova/dist/ng-cordova.js"></script> ・・・
実装
services/db.js
angular.module('myApp')
.factory("dbService", ['$cordovaSQLite', '$q', function($cordovaSQLite, $q) {
var dbService = {};
var db = null;
var query = null;
dbService.initialize = function() {
if (window.cordova) {
db = $cordovaSQLite.openDB({name: 'example.db', location: 'default'});
} else {
db = window.openDatabase('example.db', '1.0', '', -1);
}
// データベースの初期化
query = "create table if not exists example (id integer primary key, name text)";
$cordovaSQLite.execute(db, query);
};
/**
* 1件取得
* @param string query
* @param object params
*/
dbService.get = function(query, params) {
var deffered = $q.defer();
$cordovaSQLite.execute(db, query, params)
.then(function(result) {
if (0 < result.rows.length){
deffered.resolve(result.rows.item(0));
} else {
deffered.resolve(null);
}
}, function(err) {
deffered.reject(err);
});
return deffered.promise;
};
/**
* 全件取得
* @param string query
* @param object params
*/
dbService.getAll = function(query, params) {
var deffered = $q.defer();
$cordovaSQLite.execute(db, query, params)
.then(function(result) {
var result2 = [];
for (var i = 0; i < result.rows.length; i++) {
result2.push(result.rows.item(i));
}
deffered.resolve(result2);
}, function(err) {
deffered.reject(err);
});
return deffered.promise;
};
/**
* 登録
* @param string table
* @param object data
*/
dbService.insert = function(table, data) {
var deffered = $q.defer(),
params = [],
fields = "",
values = "";
Object.keys(data).forEach(function(key) {
fields += key + ",";
values += "?,";
params.push(data[key]);
});
query = "insert into " + table + " (";
query += fields.substr(0, fields.length - 1) + ") values (";
query += values.substr(0, values.length - 1) + ")";
$cordovaSQLite.execute(db, query, params)
.then(function(result) {
deffered.resolve(result.insertId);
}, function(err) {
deffered.reject(err);
});
return deffered.promise;
};
/**
* 更新
* @param string query
* @param object params
*/
dbService.update = function(query, params) {
var deffered = $q.defer();
$cordovaSQLite.execute(db, query, params)
.then(function(result) {
deffered.resolve(result.rowsAffected);
}, function(err) {
deffered.reject(err);
});
return deffered.promise;
};
/**
* 削除
* @param string table
* @param int id
*/
dbService.delete = function(table, id) {
var deffered = $q.defer();
query = "delete from " + table + " where id = ?";
$cordovaSQLite.execute(db, query, [id])
.then(function(result) {
deffered.resolve(result.rowsAffected);
}, function(err) {
deffered.reject(err);
});
return deffered.promise;
};
return dbService;
}]);呼び出し側 今回はコントローラから直接呼ぶ
angular.module('myApp')
.controller("SampleCtrl", function($scope, dbService) {
// データベース初期化
dbService.initialize();
// SELECT
var sql = "select * from example where id = ?";
var params = [1];
dbService.get(sql, params)
.then(function(result) {
// result -> 結果
});
// INSERT
dbService.insert("example", {
name: "hoge"
})
.then(function(result) {
// result -> 結果
});
// UPDATE
var sql = "update example set name = ? where id = ?";
var params = ["fuga", 2];
dbService.update(sql, params)
.then(function(result) {
// result -> 結果
});
// DELETE
dbService.delete("example", 2)
.then(function(result) {
// result -> 結果
});
});
おわりに
コントローラに直接書かずにテーブルごとにserviceを用意する方がよいかも。以上です。
