読者です 読者をやめる 読者になる 読者になる

akiyoko blog

akiyoko の IT技術系ブログです

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

JavaScript クラウド

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

Parse.com の特徴

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

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

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

Parse.com で出来ること

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

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

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




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

f:id:akiyoko:20140719014135p:plain




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


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


1) ユーザ登録

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

https://parse.com/
f:id:akiyoko:20140719015331p:plain


f:id:akiyoko:20140719015408p:plain

2) アプリを登録

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

アプリ名 ParseTest
Campany type Individual Developer(個人開発者)

f:id:akiyoko:20140719015437p:plain

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

f:id:akiyoko:20140719015456p:plain

3) 各種キー情報を取得

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

f:id:akiyoko:20140719015620p:plain


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

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

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

f:id:akiyoko:20140719021738p:plain


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

f:id:akiyoko:20140719021749p:plain


ソースコードを 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」にアクセス。
f:id:akiyoko:20140719022342p:plain


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


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



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

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

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

f:id:akiyoko:20140719201021p:plain

f:id:akiyoko:20140719201029p:plain

f:id:akiyoko:20140719201035p:plain

f:id:akiyoko:20140719201130p:plain


1) Blank Project をダウンロード

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

f:id:akiyoko:20140719202100p:plain

「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 にオブジェクトを格納できる仕組みになっています。

f:id:akiyoko:20140719204102p:plain

  <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 で見るとこうなっていました。

f:id:akiyoko:20140719204011p:plain

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

f:id:akiyoko:20140719204418p:plain



ちなみに、「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>

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

f:id:akiyoko:20140719204715p:plain


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


2014/8/18 追記

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


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

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

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

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

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