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

Webフォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

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

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

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