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	platform add プラグイン名
$ ionic	state save
$ git push origin master

別の作業者

$ git pull orign master
$ git state reset

この手順でgit cloneした作業者もエラーとかでないでいけた。「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>                                                                                                                                                                         

なんかヌケがありそうだけどイメージはこんな感じ。あとで追記するかも。以上です。

ionic(cordova)で横スクロールするメニューを実装するときのメモ

cssでの実装でこちらを参考にそのままいけました。
Appleに学ぶ、横スクロールナビを組む時のCSSメモ - Qiita
Horizontal Scrollable Navigation Sample

が、ionic serveでブラウザで確認したところ問題なかったのだがビルドしてアプリとして確認したところ動かず。

<ion-contet overflow-scroll="true">
  ・・・
</ion-content>

overflow-scrollが必要でした。ionic serveでは動くのにアプリで動かないというのがよくわからなかったのですが。。。以上です

【mysql】特定のキーワードが入っているレコードでソートする方法メモ

こんなことができたのか
キーワードがあるものを上にもってくる。

select id, title from daily order by title like "%キーワード%" desc;

以上です

【cakephp】サブクエリを実行する方法メモ

サブクエリのサンプルメモ。
ついでにgroup by した結果のレコード数を求めるサンプル。

$dbo = $this->MyTable->getDataSource();
$subQuery = $dbo->buildStatement(array(
        "fields" => array("distinct MyTable.id"),
        "table" => "my_table",
        "alias" => "MyTable",
        "conditions" => array(
                "MyTable.deleted =" => 0,
        ),
        "joins" => array(
                "type" => "left",
                "table" => "other_table",
                "alias" => "OtherTable",
                "condition" => array(
                        MyTable.id = OtherTable.my_table_id,
                ),
        ),
        "group" => array(
                "MyTable.id",
        ),
));

$query = "select count(*) as cnt from ({$subQuery}) as tmp";
$result = $this->MyTable->query($query);

以上です。