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

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

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

SVGアニメーションの再生タイミングについてSVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。  animate要素の追加  例えば、以下のようなanimate要素を追加したい場合。 <animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”

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

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