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

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

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成

Kii Cloud JavaScript SDKを使ってデータを保存するKii Cloud JavaScript SDKを使ってデータを保存する

本記事はKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するの続編です。今回は、データをKii Cloud上に保存する方法についてご紹介します。※ユーザーがログインしていることを前提としています。 オブジェクトのスコープを決める ファイルのアップロード含め、ユーザー以外のデータはすべてKiiObjectを使って操作します。また、Kii Cloud上へのデータ保存には、必ずBucket(以降、バケツと呼びます)が必要です。例えばTODOアプリで自分だけのTODO、グループに共有したいTODO、全体に公開したいTODOの機能を実装する場合、それぞれユーザースコープのバケツ、グループスコープのバケツ、アプリケーションスコープのバケツにオブジェクトを保存します(※準備編でも例に挙げています)。

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

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