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

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

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

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

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

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を初期化します。

1 Parse.initialize(“APPLICATION_ID”, “JAVASCRIPT_KEY”);

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時に新たに作成してくれるので、管理画面側で作成する必要はありません。

1 var TodoModel = Parse.Object.extend({
2 className: “MyTodo”
3 });

各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に対して検索条件を追加していきます。他オブジェクトに対しての関連を含む場合は、オブジェクトを条件として指定できます。

1 var query = new Parse.Query(MyTodo);
2 // 一致条件の指定
3 query.equalTo(“done”, false);
4 // 関連の指定(例:任意のcategoryオブジェクトを含む)
5 query.equalTo(“category”, category);
6 // 件数指定
7 query.limit(10);
8 // 検索の実行
9 query.find({
10 success: function(todos) {
11 // 取得成功
12 // Collectionの作成など…
13 var todoCollecliton = new TodoCollection(todos);
14 },
15 error: function(object, error) {
16 // 取得失敗
17 }
18 });

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

1 var TodoCollection = Parse.Collection.extend({
2 model: TodoModel,
3 query: (new Parse.Query(TodoObject)).equalTo(“done”, false)
4 });
5
6 var todoCollection = new TodoCollection();
7 todoCollection.fetch();

Related Post

主要なモバイルUIフレームワークを比較してみました主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他(CSS,MVCフレームワーク統合有無など) 特徴 調査対象フレームワークの概要  以下6つのフレームワークを対象に調査を行いました。

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。