今回やったことは以下

使用した開発環境

前回の投稿
HTML/JS ハイブリッドアプリ開発環境について
http://qiita.com/charlie_rebirth/items/55eca14b2c261682777b

OnsenUIをローカル環境でいじってみた（フロント側）

基本はwwwフォルダ以下で作業する

"ionic serve" のコマンドでライブプレビューできます

OnsenUIのクセがありました(フレームワークなのである程度覚えて慣れないと使えない）。解説マニュアルをちゃんと読む必要がある。

　　その点、書籍はよくまとまっていた（『クラウドでできるHTML5ハイブリッドアプリ開発』永井勝則）
* 基本的な画面はテンプレートがたくさんあってそこから選んでコピペすればOK（カスタマイズは別途CSSで）

ページ遷移、HTMLファイル分割などで詰まった（慣れが必要）
裏でAngularJSが動いているので、細かいセッティングでいじる必要があった。AngularJSの知識が必要
monacaだとそこらへんをあまりいじらなくてもいいのかもしれないが、細かい動きを制御するにはやはり必要

mBaaS側（サーバーサイド）の動き(nifty cloud mobile backend)

目的：データの出し入れを無料のサーバーサービスを使って行う。
　　　今回はローカルファイルへの保存はやっていない。

必要：API操作のマニュアルを理解する
jQueryでもできる
データはJSON形式 {"フィールド名":"データ"}
それぞれのフィールドにパーミッションを設定できる。（ユーザーが操作できるデータの権限の設定）
データ暗号化の設定もできる（パスワードなど）

テストプログラムを試した

参考

チュートリアル
http://mb.cloud.nifty.com/doc/current/introduction/quickstart_javascript.html

SDKガイド(JavaScript)
http://mb.cloud.nifty.com/doc/current/sdkguide/javascript/datastore.html

準備 : アカウント作成。新規アプリ作成。APIキーの取得。

1.ライブラリ　ncmb.min.jsをダウンロード or コピペ。HTMLファイルで読み込む。
https://github.com/NIFTYCloud-mbaas/ncmb_js/blob/master/ncmb.min.js

2.テストコードをscriptタグで読み込んで実行
APIキーはユーザー登録して各自でもらう。

ncmb_test.js

//1.APIキー
var APP_KEY = "";//あなたのキー
var CLIENT_KEY = "";//あなたのキー

// 2. mobile backendアプリとの連携
    var ncmb = new NCMB(APP_KEY, CLIENT_KEY);
// TestClassの作成
    var TestClass = ncmb.DataStore("TestClass");
    var testClass = new TestClass();
    testClass.set("message", "Hello, NCMB!")
        .save()
        .then(function (result) {
            // 保存後の処理
            console.log(result);
        })
        .catch(function (err) {
            // エラー処理
            console.log("error : "+err);
        });     
// 3.TestClassへの入出力
    TestClass.fetchAll()
        .then(function (results) {
            results.forEach(function(result){
                var message=result.message;
                alert("message : "+message);
            });
        })
        .catch(function (err) {
            alert(err.text);
        });

これを実行するとサーバーにデータが登録される。nifty mobile backendダッシュボードで確認できた。

ToDo登録アプリ（仮）の作成

OnsenUIテンプレート集があるので、そこから使うものを選ぶ

自分でデザインしなくても、かっこいいイケてる風のがいっぱいあるのでコピペ。
Page　Patterns
http://ja.onsen.io/patterns.html

UIの細かい部分をカスタマイズした（未完）
データの出し入れのコードを書いた（追加と削除）

wwwフォルダ以下の中身はこちら
https://bitbucket.org/satons/todoapptest/src

途中のデバッグはローカルPC上で行った。"ionic serve"コマンドを使い、ブラウザでライブプレビューしながら行った。
完成したソースをmonacaエディターにコピペし、monacaデバッガー上で動作確認。その後ビルドを行ってAndroidで動かした。
動いたのでOK

その他、ハマったところ

AngularJSを使うときは、データ出し入れ関連のコールバックを$qでラップしないと動かないので気をつける。

ハイブリッド・アプリ開発の備忘録 その１

いろいろやったのですが、今回の結論