Parse.com を Backbone.js のバックエンドとして使ってみる

最近、BaaS(Backend as a Service) の代表格である「Parse.com」というサービスについて少し調べていたのですが、それを一旦まとめておこうと思います。

Parse.com の特徴

まず、Parse.com は、データストア＋API をクラウドで提供してくれるサービスです。
そのほかにも、

• Parse.com は超メジャーな BaaS（2013年4月に Facebook に買収されているため、サービスの継続性も信頼できる）
• Parse.com はとりあえず無料で始められる（かつ、無料範囲が広い！）
• Parse.com を使うと、サーバアプリケーションを用意する必要がほぼない（クライアントアプリケーションの開発に集中できる）
• Parse.com はデフォルトで Facebook・Twitter と連携可能（ただし、どこまで連携できるかは要調査）
• Parse.com は Backbone.js との相性が非常に良い（Parse.com　公式サイトも推奨）
• Backbone.js を使うと、リッチなHTML5アプリを作成できる（特に、画面遷移が無いアプリケーションを得意とする）

といった特徴があります。

Parse.com で出来ること

• レコードの参照・登録・更新
• ユーザ管理（スケルトンが用意されていて、Facebook・Twitter 連携も）
• 奥の手として、各APIにJavaScriptでサーバサイド処理を書ける（Cloud code）
• プッシュ通知

Parse.com による制限・デメリット

• 無料プランに制限（アクセス：30リクエスト/秒、DB：20GB、プッシュ通知：100万回/月 まで）
• サービスダウンが予測不可能（SLAがない？）
• レイテンシによる遅延が気になる（リージョンが東京ではない？ので）
• データの移行やモデルの改変が困難
• データ分析が困難（ただし、簡易な解析ツールはダッシュボードで提供されている）

なお、Parse.com の利用モデルは以下のように感じになります。
Webアプリ（HTHML5＋Backbone.js など）やモバイルアプリ（iOS/Android など）のバックエンドとしてデータのやり取りをすることができます。

Parse.com ＋ Backbone.js アプリの作り方

試しに、バックエンドに Parse.com、フロントエンドに Backbone.js を使った Webアプリを作ってみたいと思います。

1) ユーザ登録

まずは、Parse.com にサインアップしてユーザ登録をします。なお、この時点ではクレジットカードの登録は不要です。

https://parse.com/

2) アプリを登録

ユーザ登録に続いて、アプリを登録します。
ここでは、アプリ名を「ParseTest」とします。

アプリ名	ParseTest
Campany type	Individual Developer（個人開発者）

ダッシュボードにアプリが作成されます。

3) 各種キー情報を取得

ダッシュボードの [Settings] -> [Application keys] から、「Application ID」と「Javascript Key」を取得します。

4) サンプルアプリを動かす

まずは、「Parse Todos」と呼ばれるサンプルアプリを動かしてみましょう。

ダッシュボードから [Tutorials] をクリックし、↓の画面で [JavaScript] -> [Parse Todos] の「Get the code」とクリックしていきます。

GitHubでソースコードが公開されています。

ソースコードを clone して、Vagrantで起動した VM (Ubuntu 12.04) 上で動かしてみます。以下、Mac上で操作しています。

$ cd /Users/akiyoko/github
$ git clone https://github.com/ParsePlatform/Todo.git
$ cd Todo/
$ vi js/todos.js

3) で取得した「Application ID」「Javascript Key」で、以下の部分を書き換えます。

js/todos.js

diff --git a/js/todos.js b/js/todos.js
index da4a048..df336f6 100755
--- a/js/todos.js
+++ b/js/todos.js
@@ -7,8 +7,8 @@ $(function() {
   Parse.$ = jQuery;

   // Initialize Parse with your Parse application javascript keys
-  Parse.initialize("your-application-id",
-                   "your-javascript-key");
+  Parse.initialize("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+                   "yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy");

   // Todo Model
   // ----------

Vagrantを起動して、ファイルを転送します。

$ cd /Users/akiyoko/Vagrant/precise64/
$ vagrant up

（Vagrantfile で IPアドレス(192.168.33.10) を設定しています）
$ scp -r /Users/akiyoko/github/Todo vagrant@192.168.33.10:/home/vagrant/

SSHで乗り込んで、SimpleHTTPServerでサーバを起動します。

$ ssh vagrant@192.168.33.10
$ cd Todo/

$ python -m SimpleHTTPServer

ブラウザから「http://192.168.33.10:8000」にアクセス。

サインアップしてユーザを作成し、Parse.com ダッシュボードの「Data Browser」を表示すると、新しい Userレコードが格納されていることが確認できました。

Parse Todosアプリの Tutorial はこちら。
https://parse.com/tutorials/todo-app-with-javascript

Backbone-Parse ブランクプロジェクトの作り方

次に、ブランクプロジェクトを作ってみます。

ダッシュボードの [QuickStart] -> [Data] -> [Web] -> [New project] に、ブランクプロジェクトの作成方法が記載されています。

1) Blank Project をダウンロード

↑の「find the downloads here」から、Backbone-parse の Blank Project をダウンロードします。（なお、ダッシュボードの [Downloads] からでもダウンロードページに移動できます。）

「parse-js-blank-1.2.19.zip」がダウンロードできました。

2) 動かしてみる

「parse-js-blank-1.2.19.zip」ファイルを解凍して、index.htmlの42行目あたりを修正すれば、Parse.com への接続が可能になります。

    //Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
    Parse.initialize("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy");

あとの流れは同じです。

$ cd /Users/akiyoko/Vagrant/precise64/
$ vagrant up
$ scp -r /Users/akiyoko/github/parse-js-blank vagrant@192.168.33.10:/home/vagrant/
$ ssh vagrant@192.168.33.10

$ cd parse-js-blank/
$ python -m SimpleHTTPServer

http://192.168.33.10:8000
にアクセスすると、Parse.com にオブジェクトを格納できる仕組みになっています。

  <script type="text/javascript">
    Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
    
    var TestObject = Parse.Object.extend("TestObject");
    var testObject = new TestObject();
      testObject.save({foo: "bar"}, {
      success: function(object) {
        $(".success").show();
      },
      error: function(model, error) {
        $(".error").show();
      }
    });
  </script>

というコードが、index.html に書かれています。

ダッシュボードの Data Browser で見るとこうなっていました。

なお、Quickstart の「Test」ボタンをクリックしてみると、「ちゃんとバックエンドにオブジェクトが保存されましたよ！」というメッセージが出ます。

ちなみに、「parse-1.2.19.min.js」の参照が CDN になっているので、

<!doctype html>
<head>
  <meta charset="utf-8">

  <title>My Parse App</title>
  <meta name="description" content="My Parse App">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
</head>

プロダクションで使う場合には、↓から最新版をダウンロードしておくのがよいでしょう。

なお、parse.js は、underscore.js と backbone.js をラッピングしているので、参照不要になっています。

参考

• ［MBaaS］ Parseで簡単モバイルバックエンド構築 – 【ざっと概要】 ｜ Developers.IO
• Parse.comを使ったサーバサイド実装不要のフロントエンド開発［前編］
• Parseについてのあれこれ | アライドアーキテクツ エンジニアブログ
• ［Parse.com］ -利用登録してSDKを組み込んでみよう- | 株式会社アライト ーDeveloper Blogー
• 5分でわかったつもりになるParse.com
• Parse.comと始めるBackbone.js入門(jscafe7)

なお、Backbone.js のはじめの一歩はこれで十分かも。

JavaScript徹底攻略 (WEB+DB PRESS plus)

2014/8/18 追記

こんな記事がありました。
ParseでクライアントサイドからRESTを使う場合の権限設定 - Qiita

例えばJavaScriptからParseのREST APIを呼ぶ場合、API KEYは第三者から参照可能になるので、REST APIでできることを制限しておく必要がある。

と言及されているように、JavaScript で Parse.com を使う場合は、

    Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");

の部分がユーザから見えてしまうのが難点です。

セキュリティの観点からすれば、ミッションクリティカルなビジネス案件ではあまり使えないかもしれません。（ソースコードがユーザに読めないようなハイブリッドアプリとして使うとかならアリかも。）