Parse Hostingを使ってみた
先月、Facebookによって買収された事で注目されていたParseを使ってみました。
ParseはJavaScript SDKを使う事で、簡単にデータをParse内に保存する事ができます。SDKは他にもiOS/Android/Windows Phone 8/Windows/Mac OSX用もあるので、クロスプラットフォームなアプリを作る時に重宝しそうです。
料金も安く、小規模なサイト・アプリであれば無料枠で使えそうです。
今回はJavaScriptを使って、簡単なデータの保存や読み出し、更新などをやってみました。
index.html
BootStrapを使っていますが、CSSだけです。
input#fooに入力したものをParseに保存し、「Load」ボタンで取得、table#resultに表示します。
table#result td input[name="foo"]が編集されたらデータを更新しに行きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>Parse sample #1</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> </head> <body> <fieldset> <input name="foo" id="foo" placeholder="some value" /> <div id="save" class="btn btn-primary">new</div> <div id="alert" class="alert alert-error" style="display:none"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>エラー</strong> 何か入力してください！ </div> <div id="success" class="alert alert-success" style="display:none"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>成功</strong> 保存しました！ </div> <div id="error" class="alert alert-error" style="display:none"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>エラー</strong> 保存できませんでした！ </div> </fieldset> <div id="load" class="btn">load!!</div> <table id="result" class="table table-striped"> <tr> <th>id</th> <th>foo</th> <th>createdAt</th> <th>updatedAt</th> </tr> </table> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="http://www.parsecdn.com/js/parse-1.2.7.min.js"></script> <script src="js/index.js"></script> </body> </html>
index.js
Parse.initialize()はParseでアプリケーションを作ると取得できます。
Parse.Object.extend("TestObject")でオブジェクトを作れば、（設定によりますが）Parseのサイトの「Data Browser」に追加されます。型を予め決める必要がないのがKVSみたいですね。createdAt/updatedAtは自動で作成されます。
var init = function() { Parse.initialize("******************", "*****************"); }; var show_result = function(id) { $(id).slideDown(function(){ setTimeout(function(){ $(id).slideUp(); }, 3000); }); }; var save = function() { // Parseのオブジェクトを作成 var TestObject = Parse.Object.extend("TestObject"); // TestObjectオブジェクトのインスタンスを作成 var testObject = new TestObject(); // 入力値を取得 var fooVal = $('#foo').val(); if (fooVal.length === 0) { show_result('#alert'); return false; } // 引数を渡して保存 testObject.save({foo: fooVal}, { // 成功時 success: function(object) { show_result('#success'); console.log(object); }, // 失敗時 error: function(object, error) { show_result('#error'); console.log(object, error); } }); }; var load = function() { // Parseのオブジェクトを作成 var TestObject = Parse.Object.extend("TestObject"); // TestObjectオブジェクトの問い合わせインスタンスを作成 var query = new Parse.Query(TestObject); query.limit(10); // 取得最大数 query.ascending("createdAt"); //ソート // 問い合わせ query.find({ // 成功時 success:function(obj){ // テーブルに書き込み for (var i = 0; i < obj.length; i++) { var result = obj[i]; $('#result').append( $('<tr>').append( $('<td>').text( result.id ), $('<td>').html( $('<input>').attr('name', 'foo').data({'original': result}).val(result.attributes.foo ) ), $('<td>').text( result.createdAt.toLocaleString() ), $('<td>').text( result.updatedAt.toLocaleString() ) ) ); } }, // 失敗時 error:function(result, error) { console.log(error); } }); }; var update = function(elem) { // 要素に保存していたオリジナルデータを取得 var org = elem.data('original'); if (elem.val() !== org.attributes.foo) { // キーfooのデータを入力値にセット org.set('foo', elem.val()); console.log(org); //更新 org.save({ // 成功時 success: function(object) { alert("updated"); console.log(object); }, // 失敗時 error: function(object, error) { alert("error happened!!!"); console.log(object, error); } }); } }; var register_event = function() { $('#save').on('click', function() { save(); }); $('#load').on('click', function() { load(); }); $('#result').on('change', ':input', function(){ update($(this)); }); }; $(document).ready(function(){ init(); register_event(); });
