Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]

Kii Cloudは、MBaaSと呼ばれるクラウドサービスのひとつで、モバイルアプリの開発で共通して必要となるサーバ側の機能が提供されています。BaaSを使ったフロントエンド開発は、Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]でもご紹介しました。

MBaaS – Kii Cloud キークラウド
 
Kii CloudもParseと同じく、ユーザー管理やデータ管理など、アプリケーション開発に必要な一連の機能が用意されており、SDKやREST APIを使ってアプリケーションとKii Cloud間でデータの同期を行うことができます。SDKは、iOS,Android,JavaScript,Unity向けに用意されています。今回は、Webアプリケーション開発準備編として、Kii CloudのJavaScript SDKをParseのJavaScript SDKと比較しながらご紹介していきたいと思います。

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

まずは新規アプリケーションを作成してみます。新規アプリケーションの作成が完了すると、SDKやテンプレートのダウンロード画面が表示されますが、ここで表示される情報は後でも設定画面から確認することができます。

ユーザーコンソールやデータブラウザーを使って、Kii Cloud上に登録したデータを確認、操作することができます。データ操作はすべてSDK経由かこのページで行うため、SQLは必要ありません。

SDKの初期化

開発者ポータルからSDKをダウンロードし、読み込みます。jQueryの利用は任意となっており、jQueryが定義されている場合は内部的にjQuery.ajaxが使われます。jQueryを使わない場合は自動的にXMLHttpRequestが使われます。

<!-- Kii JavaScript SDK-->
<script src="KiiSDKv2.1.14.js">
</script>

SDKの初期化時にApp IDとApp Keyを指定します。

$(function() { 

// 開発者ポータルにて取得した

Application ID と
Application Key を
設定して初期化
Kii.initializeWithSite("APP_ID", "APP_KEY", KiiSite.JP);
 
}());

SDKで使える機能

基本となるオブジェクトは以下のオブジェクトです。そのほかにも管理者機能やアクセス制限などに関する様々なオブジェクトがあります。オブジェクト一覧は詳細ドキュメントで確認できます。

  • KiiUser : アカウント管理(サインインやログイン)を行うオブジェクト
  • KiiGroup : グループ管理を行うオブジェクト
  • KiiBucket : Bucket管理を行うオブジェクト
  • KiiObject : Object管理(データの登録やファイルアップロード)を行うオブジェクト
  • KiiQuery : データ取得を行うSQLの役割を果たすオブジェクト
  • KiiGeoPoint : 位置情報に特化したオブジェクト

■ GroupとBucket,Object

ここで、Parseでは無かったGroupとBucketという概念が出てきます。Groupはユーザーの集まり、BucketはObjectの入れ物です。Bucketにはスコープがあり、Bucketの中のObjectを取得したり更新したりできるユーザを制限することができます。
例えば、TODOアプリで自分だけのTODO、グループに共有したいTODO、全体に公開したいTODOの機能を実装する場合、以下のような構造で実現することが出来ます。

riaxdnp Groupを作成し、このGroupスコープのBucketにObjectを保存していくことで、riaxdnpグループに所属するメンバーだけに読み書きを制限することができます。詳しくはリファレンスのグループ管理をご覧ください。

ParseのJavaScript SDKとの違い

■ 日本語ドキュメント

全SDKで日本語のリファレンスが豊富に提供されています。GroupやBucketをはじめとしたKii Cloudの概要や、各SDKの使い方が丁寧に解説されています。コミュニティへも日本語で質問できるため、英語のドキュメントを読むのが苦手という人にとっても学びやすいと思います。

  • Kii Cloud の概要
  • JavaScriptリファレンスガイド
  • 開発者コミュニティ

■ MVCフレームワーク

ParseのJavaScript SDKは、Backbone.jsをラッピングしていた(詳細は『Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]』をご覧ください)ので、 SDKを使ってModelやViewを実装しましたが、Kii CloudのJavaScript SDKはMVCの機能を提供していません。SDKはKii Cloudとの同期部分に特化しているので、設計部分は別途好きなMVCライブラリを使うことになります。

■ Promise

iOSやAndroid SDKには同期APIがあるのですが、JavaScript SDKは非同期APIのみとなっています。ParseのJavaScript SDKの非同期メソッドはすべてParse.Promiseを返すよう設計されていましたが、Kii CloudのJavaScript SDKにはPromiseの機能がありません。
リファレンスでは単体のAPIのみの呼び出しを行っているのでシンプルに見えますが、実開発においては非同期APIを連続的に呼び出す実装が多くなります。以下はオブジェクトを保存する例です。

obj.save({success: function(theObject) {

// オブジェクトの保存成功.

// 第1引数は操作対象のオブジェクト、

第2引数は戻り値、

第3引数はQueryのパターンが多い

// theObjectを使って次の処理を行う},

failure: function(theObject, errorString)
{
// オブジェクトの保存失敗.

// 第1引数は操作対象のオブジェクト、

第2引数は
errorStringのパターンが多い

// theObject,

errorStringを使って次の処理を行う}});

実開発ではコールバック関数が深くネストし見通しの悪いコードになりがちなので、Kii Cloud SDKの呼び出しをPromiseに変換するユーティリティ関数を作るのがいいでしょう。

// Kiiの呼び出しをjQueryのPromiseに変換する

function kiiPromise(body, self)
{
 var deferred = new $.Deferred(); 
body.call(self,

{success: deferred.resolve.bind(deferred),

failure: deferred.reject.bind(deferred)}); 

return deferred.promise(); }
function save(obj)
{ return kiiPromise
(obj.save, obj); } 
save(obj).then(success, failure).
then()....then();

まとめ

準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。GroupやBucketを使うことで、データを扱うことのできるユーザを制限することができます。SDKにMVCやPromiseの機能が含まれていないのは不便と感じてしまうこともあるかと思いますが、プロジェクトに合うMVCフレームワークやPromiseの仕組み(jQuery DefferedやES6 Promiseなど)を選択できるので、その点SDKの影響を受けずに開発を進めることができます。次回は実装に焦点を当て、ユーザ作成とログイン、オブジェクトの作成について解説したいと思います。

Related Post

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML

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

本記事はParse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]の後編です。前編では、Parseの管理画面と、JavaScript SDKのうちBackbone.jsをベースとしている部分とCollectionの生成に必要となるデータの取得方法をご紹介しました。後編では引き続き、ParseのJavaScript SDKの機能として以下の3つをご紹介いたします。 Parse.User: アカウント管理 Parse.File: 画像をはじめとしたファイルのアップロード処理等 Parse.Promise: Defferedの仕組み Parse.GeoPoint: 位置情報 Parse.User

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia