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

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

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

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

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

ぐるぐる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