Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]


parse

 ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。

 Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。

新規アプリケーションの作成

parse005
まずは、Parseに会員登録をし、新規アプリケーションを登録します。GitHubアカウントもしくはFacebookアカウントでもログインすることができます。新規アプリケーションの作成が完了すると、Application IDやその他SDKのKeyが表示されますがここで表示される情報は後でも設定画面から確認することができます。

parse005
DataBrowserはアプリのDBの役割となる場所で、ここでParse上のデータを確認します。ClassはRDBのテーブルにあたります。Classやデータ操作はすべてJavaScript SDKかこのページで行うため、CREATE TABLEやINSERT INTOなどSQLは一切必要ありません。

Parse JavaScript SDK

 ParseのJavaScript SDKを使うことにより、WebアプリケーションとParse間でデータの同期を行うことができます。JavaScript SDKはBackbone.jsをラッピングしているので、Backboneのシンタックスをそのまま使ってSPA開発を行うことができます。そのため、Backboneで開発したアプリケーションがすでにある場合は、Backbone.ModelとBackbone.Collectionの数か所を置き換えるだけでParseに対応させることができます。移行方法はConverting Backbone Appsをご覧ください。また、Parseを使ったTodoアプリの例がチュートリアルに公開されています。
 本記事では、主にBackboneとの共通部分についてご紹介します。

SDKの初期化

HTMLではParse SDKとjQueryを読み込みます。Backbone.jsで必要だったUnderscore.jsはParse SDKに含まれています。

    <script src="js/lib/jquery-2.1.0.min.js"></script><!-- jQuery -->
    <script src="js/lib/parse-1.2.16.js"></script><!-- Parse SDK -->
    <script src="js/app.js"></script><!-- Main Script -->

管理画面からApplication IDとJavascript Keyを取得し、SDKを初期化します。

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

parse002

Backbone.jsとの共通部分

 Backboneとの共通部分は以下のオブジェクトです。各オブジェクトの役割や宣言方法はBackboneと同じですが、Parseのカスタマイズが入っており、ModelがObjectという名前になっていたり、メソッドが追加されたりしています。ここでは、Backboneと異なる部分のみ解説します。

  • Parse.Object: Backbone.Model
  • Parse.Collection: Backbone.Collection
  • Parse.View: Backbone.View
  • Parse.Router: Backbone.Router
  • Parse.History: Backbone.History

parse006

■Parse.Object

Parse.Objectでは、ModelとParseのClassの紐づけを行います。classNameにはParseのClass名を設定します。Parse.Objectの場合、このclassNameがurlRootの代わりになりますので、urlRootの設定は不要です。Parse側にClassが存在しない場合は、Objectの初期save時に新たに作成してくれるので、管理画面側で作成する必要はありません。

  var TodoModel = Parse.Object.extend({
    className: "MyTodo"
  });

各Modelは独自に追加するプロパティの他に、別途以Parseによって自動的に更新される以下のプロパティを保持します。

  • objectId:一意のID
  • createdAt:オブジェクトの作成日時
  • updatedAt:オブジェクトの更新日時

Parse SDKの機能

 主に以下がParse独自のオブジェクトとして提供されています。その他の機能についてはJS API リファレンスをご覧ください。

  • Parse.Query: Parseからのデータ取得を行うSQLの役割を果たすオブジェクト
  • Parse.Promise: Defferedの仕組み
  • Parse.File: 画像をはじめとしたファイルに特化したModel
  • Parse.User: アカウント管理に特化したModel
  • Parse.GeoPoint: 位置情報に特化したModel

本記事では、データの取得を行うParse.Queryをご紹介します。データの更新や削除、新規作成についてはBackbone.jsと同じシンタックスです。

■データの取得

データの取得にはParse.Queryを使います。Queryの第1引数にはObject(Model)を指定してください。equalToやlimitといったメソッドを使ってQueryに対して検索条件を追加していきます。他オブジェクトに対しての関連を含む場合は、オブジェクトを条件として指定できます。

var query = new Parse.Query(MyTodo);
// 一致条件の指定
query.equalTo("done", false);
// 関連の指定(例:任意のcategoryオブジェクトを含む)
query.equalTo("category", category);
// 件数指定
query.limit(10);
// 検索の実行
query.find({
   success: function(todos) {
      // 取得成功
      // Collectionの作成など…
      var todoCollecliton = new TodoCollection(todos);
   },
   error: function(object, error) {
      // 取得失敗
   }
});

CollectionにQueryを直接紐づけることもできます。

var TodoCollection = Parse.Collection.extend({
  model: TodoModel,
  query: (new Parse.Query(TodoObject)).equalTo("done", false)
});

var todoCollection = new TodoCollection();
todoCollection.fetch();

まとめ

 前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分、Collectionの生成に必要となるデータの取得方法をご紹介しました。Backboneのシンタックスをそのまま使うことができ、Parseとのやり取りの部分はurlRootの代わりにclassNameを指定するだけなので、サーバサイド実装の手間をぐっと省くことができます。ただ、Backbone.jsをベースにしているもののカスタマイズが入っているので、MarionetteなどのBackboneプラグインを導入したい場合は合わないものがあるかもしれません。その場合はJavaScript SDKを使わずにREST APIとオリジナルのBackbone.jsやAngularJSを使って開発するのが良いでしょう。
 Parseは無料でもひと月100万リクエストまで利用することができますので、プロトタイプ開発などに利用してみてはいかがでしょうか。後編では引き続き、Parse SDKの機能をご紹介いたします。