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を用意する方がよいかも。以上です。
ionic(cordova)にてngStorageでlocalstorageを使う
bowerでインストール
$ bower install ngstorage --save
index.htmlで読み込む
・・・ <script src="lib/ngstorage/ngStorage.min.js"></script> ・・・
今回はserviceで使った。
angular.module('myApp', ['ngStorage'])
.service('myService', function($localStorage) {
this.getByStorage = function() {
return $localStorage.myKey;
};
this.setByStorage = function(value) {
$localStorage.myKey = value
};
});メリットはもっとありそうだけど、とりあえず簡単に使えた。以上です。
ionic(cordova)で複数人でチーム開発するときのながれメモ
1人でやってるときは問題なかったけど、複数人でやってるときに最初うまくいかずにハマったのでメモしておく。
新規プロジェクト作成の場合
新規にプロジェクトを作成してandroid を追加(iosはデフォルトで登録済み)
$ ionic start sampleApp blank -a "アプリ名" -i com.example.sampleApp # プロジェクト作成 $ ionic platform add android # android追加 $ ionic state save # package.jsonへ保存
gitのリモートリポジトリへPUSH
$ git push origin master
別の開発者の作業
$ git clone http://path/to/repo.git $ ionic state reset
ionic(cordova)で本番環境、開発環境を切り替える
ionicに限った話じゃないかもしれないけど。
今回やりたかったのは、本番と開発でつなぎこむAPIのURL等を切り替えたりしたかった。
今回は少し調べて、node-env-fileというのを使った。
また、gulp-concatも使ってる。
今回は以下のようなファイル構成を想定。環境によって切り替えたい値はここで定義するイメージ。
www/js/config/development.js www/js/config/staging.js www/js/config/production.js
development.js
angular.module('starter.values')
.value('config', {
api_url: "http://example.com"
});こんなようなファイルを環境ごとにつくるイメージ。
インストール
$ npm install node-env-file
.env ファイルを新規で作成
# mode=production # mode=staging mode=development
gulpfile.jsを編集
var env = require('node-env-file');
env(__dirname + "/.env");
var conffile = "config." . process.env.mode . ".js";
gulp.task("js.concat-values", function() {
return gulp.src(["www/js/config/" + confifile])
.pipe(concat("config.js"))
.pipe(gulp.dest("www/build/js"));
});
あとはwww/index.htmlで上記つくったファイルを読み込む
<script src="build/js/config.js"></script>
なんかヌケがありそうだけどイメージはこんな感じ。あとで追記するかも。以上です。
