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

本記事はKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するの続編です。今回は、データをKii Cloud上に保存する方法についてご紹介します。※ユーザーがログインしていることを前提としています。

オブジェクトのスコープを決める

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

どのスコープのバケツも、最初は新規作成する必要があります。以下はそれぞれのスコープのオブジェクトを作成するステップです。

■アプリケーションスコープのオブジェクトの場合

ログインしているすべてのユーザーが閲覧可能なオブジェクトは、アプリケーションスコープのバケツに作成します。

  1. アプリケーションスコープのバケツを作る
  2. オブジェクトを作る
  3. オブジェクトをKii Cloudに保存する

■グループスコープのオブジェクトの場合

ある特定のユーザーの集まりにのみ閲覧可能なオブジェクトは、グループスコープのバケツに作成します。グループスコープのバケツを作る際にグループを指定しなければならないので、グループの作成も必要です。グループ作成時のグループメンバーは作成者本人しか居ないので、メンバーは後から追加します。

  1. グループを作る(すでにグループがある場合はグループを取得する)
  2. グループスコープのバケツを作る
  3. オブジェクトを作る
  4. オブジェクトをKii Cloudに保存する

■ユーザースコープのオブジェクトの場合

自分自身にのみ閲覧可能なオブジェクトは、ユーザースコープのバケツに作成します。

  1. ユーザースコープのバケツを作る
  2. オブジェクトを作る
  3. オブジェクトをkiiCloudに保存する

オブジェクトを新規作成する

ここでは一番ステップの多いグループスコープのオブジェクトに焦点を当てて実装例をご紹介します。まず、グループを作成します。グループ名が同じであっても、新規にグループを作成してしまうと、Kii Cloud上に同じ名前のグループがいくつも作成されてしまう(名前が同じでURIが異なるグループができる)ので注意してください。バケツは名前が同じでも複数作られることはありません。

var groupName = "riaxdnp";

function groupWithName(name)

{
// グループを作成する

var group = KiiGroup.groupWithName(name);

// グループを保存する

return kiiPromise(group.save, group);
}
 
// 何度も実行すると、同じ名前のグループがたくさんできてしまうので注意。groupWithName(groupName).

then(showSuccess, showError);

すでにグループがある場合は、ユーザーがメンバーとして属しているグループの一覧を取得しておき、グループURIからグループオブジェクトを再インスタンス化します。以下の画像のTODOアプリのサンプルでは、ユーザーがログインした際にグループ一覧を取得し、リスト要素の属性にURIを持たせています。TODO作成時に、選択したリストの属性からURIを取得し、再インスタンス化します。

// メンバーとして属しているグループの一覧を取得する

function memberOfGroups()

{

// ログイン中のユーザーを取得する

var user = KiiUser.getCurrentUser();

return kiiPromise(user.memberOfGroups, user);

} 
function
 showGroupLists(theUser, memberOfGroups)
{
// memberOfGroupsを表示する

// group.objectURI()
でURIを取得し属性に設定しておく}
 memberOfGroups().

then(showGroupLists, showError);

グループの用意が出来たら、そのグループオブジェクトからグループスコープのバケツを作成します。そして、バケツからオブジェクトを作成し、TODOに必要データをsetしたあと、Kii Cloudと同期します。

var $form = $("#todoform");

var todotext = $form.find(".todotext").val();
var
 scope = $form.

find("input:radio[name = 'group-type']:checked").

val();var groupUri = $form.

find("[data-group-uri]").

data("groupUri"); 

var vals = { todo : todotext };
var
 bucket = getBucket(scope, "riaxdnp", groupUri); 
createObject(bucket, vals).

then(showSuccess, showError); 

// スコープに応じたbucketを返す

function getBucket(scope, bucketName, groupUri){ var bucket = {}; 
switch(scope)
{
case "app":bucket = Kii.bucketWithName(bucketName);
break;case "group":

// URIから再インスタンス化する

var group = new KiiGroup.groupWithURI(uri);

bucket = group.bucketWithName(bucketName);
break;
case "user":
var user = KiiUser.getCurrentUser();

bucket = user.bucketWithName(bucketName);break;
} 
return bucket; 
} 
// オブジェクトを作成する

function createObject(bucket, vals)
{ 
var obj = bucket.createObject(); 

for(var key in vals)

{if(vals.hasOwnProperty(key)){obj.s

(key, vals[key]);}
} 
return kiiPromise(obj.save, obj); 
}

オブジェクトの作成が成功すると、データブラウザーのObjectsに新規作成したオブジェクトが追加されます。

バケツ内のオブジェクトを取得する

オブジェクトの取得にもバケツを使います。バケツ内のすべてのオブジェクトを取得する場合も、特定の条件を満たすオブジェクトを取得する場合も、KiiQueryを使って検索を行います。

// バケツ内のオブジェクトを指定件数分だけ取得する検索Queryを作る

function buildAllObjectQuery(bucket, limit)

{ 
var d = $.Deferred(),

query = KiiQuery.queryWithClause(); 
if(limit){query.setLimit(limit);

} 
// 更新日時降順query.sortByDesc("_modified");

 return d.resolve(bucket, query); 
} 
// 検索を実行するfunction executeQuery(bucket, query)
{ 
return kiiPromise(function (callbacks)
{
bucket.executeQuery
(query,callbacks);});
 } 
buildAllObjectQuery(bucket).
then(executeQuery).
then(function(queryPerformed,
resultSet,
nextQuery)
{
// resultSetを表示する},

showError);

ユーザーが作成したすべてのTODOを取得するには、それぞれのスコープのバケツに対して検索を実行します。

まとめ

今回はオブジェクトの新規作成と取得の方法をご紹介しました。オブジェクトの操作には、KiiObjectとKiiBucketが必要(グループスコープの場合はKiiGroupも)ということがお分かりいただけたかと思います。

Related Post

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import

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

position:fixedを実現するiScrollを使う際に覚えておきたいメソッドたちposition:fixedを実現するiScrollを使う際に覚えておきたいメソッドたち

ヘッダーやフッター等の要素を固定表示するのに利用されるposition:fixed。このposition:fixedがサポートされていない環境で、固定表示を実現する際によく使われるライブラリにiScrollがあります。要素を固定するというよりは、特定要素の範囲をスクロール可能にする、overflow:autoのようなイメージです。 複雑なレイアウトになると、iScrollでスクロールさせている要素の高さが動的に変化したり、スクロール領域が入れ子だったり・・・ユーザ操作に応じて追加の処理を行う必要があります。難しそうなレイアウトは設計の際に回避したいところですが、そういう実装が必要な場合に使えるiScrollのメソッドをまとめてみました。 iScrollの使い方 iScrollの使い方ですが、HTML要素に任意のIDを付け、JSで初期化を行います。下記の例ではid=”scroller”の要素がスクロール可能になります。例でリスト要素になっている部分は何でもかまいませんが、2つのwrapper(例ではIDがwrapperとscrollerのdiv要素)は必要です。また、一番外側の要素には高さを指定しておく必要があります。 ◆HTML <div id=”wrapper”><div id=”scroller”><ul><li></li>……</ul></div></div>