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

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import