第35回　Appcelerator Cloud Servicesと連携するモバイルアプリの作成

プロジェクトの作成

Appcelerator社が提供している「Appcelerator Cloud Services」（⁠以下、ACS）は、モバイル端末向けアプリケーションで使用可能なサーバ側機能をWeb API経由で利用できるクラウドサービスです。前回は、Titanium Studioを使ってサンプルプロジェクト「Kichen Sink（ACS版⁠）⁠」を動かしてみました。今回は、それを参考にしながらログイン機能の部分を自分で作ってみましょう。

まず、Titanium Studioで新規に「Titanium Mobile Project」を作成します。本稿の例では、プロジェクト名は「MyFirstApp」に、テンプレートは「Tabbed Application」を選択しました。「⁠Automatically cloud-enable this application」にチェックを入れてACSとの連携を有効にしておくことを忘れないようにしましょう。

続いて、「⁠C:\Users\USERNAME\Appdata\Roaming\Titanium\modules\ commonjs\ti.cloud \2.0.1\」フォルダ（⁠「⁠C:\Users\USERNAME\」の部分はご自分の環境のユーザフォルダのパスに置き換えてください）にある「ti.cloud.js」と「packages.json」の2つのファイルをプロジェクトのResourcesフォルダにコピーします。ここまでの手順は前回の例と同様です。

Tabbed Applicationテンプレートを使ってプロジェクトを作成した場合、初期状態では図2のようなUIの構成になっています。2つのタブに、同じWindowオブジェクトをタイトルを変えて配置している形です。今回はこれを少し修正して、Tab1にログイン/ログアウト用のウィンドウを、Tab2にユーザの新規追加用のウィンドウを配置する図3のような形のアプリにしてみます。対象はAndroidスマートフォンとし、コード簡略化のためにiOSやタブレット端末は考慮しないことにします。

ログイン/ログアウト処理の実装

ACSとの連携が必要になるのは、ログイン/ログアウトを行うLoginWindow.jsと、ユーザの新規追加を行うAddWindow.jsの2箇所です。まずログイン処理ですが、ユーザ名とパスワードを入力して[ログイン]ボタンをクリックしたらTitaniumのACS用APIを呼び出してログインを実施するようにします。肝となるログインボタンの処理は次のようになります。

Cloud.Users.login({
	login: 'gihyo', 
            password: 'gihyopass'
    }, function (e) {
	if (e.success) {
	    var user = e.users[0];
	    login.value = password.value = '';
	    alert('ID: ' + user.id + ' でログインしました。');
	}
	else {
	    alert((e.error && e.message) || JSON.stringify(e));
	}
    });

ログインを実施するために使うメソッドはTitanium.Cloud.Users.login()メソッドです。このメソッドのloginパラメータにユーザ名を、passwordパラメータにパスワードを渡すことでログイン処理が実行されます。ログインに成功すれば（コールバック関数のパラメータをeとすると）e.successにはtrueが、失敗すればfalseが設定されます。e.users[0]にはユーザの情報が格納されているため、ここからユーザIDやユーザ名などの情報を取得することができます。

続いてログアウトですが、ログアウトはTitanium.Cloud.Users.logout()メソッドを用いて次のように行います。logout()メソッドはパラメータを受け取らず、現在ログイン中のユーザに対してログアウト処理を実行して、成功すればe.successにtrueが、失敗すればfalseが設定されます。

Cloud.Users.logout(function (e) {
	if (e.success) {
	    alert('ログアウトしました。');
	}
	else {
	    alert((e.error && e.message) || JSON.stringify(e));
	}
    });

以上を踏まえて、LoginWindow.jsは次のように作成しました。冒頭の「var Cloud = require('ti.cloud');」でti.cloudモジュールのAPIを読み込んでいます。ACSを利用する場合にはこの処理は必ず必要です。

function LoginWindow(title) {
    var Cloud = require('ti.cloud');  // ACS用モジュールの読み込み
    
    var self = Ti.UI.createWindow({
	    title:title,
	    backgroundColor:'white'
	});
	
    var content = Ti.UI.createScrollView({
	    top: '20dp',
	    contentHeight: 'auto',
	    layout: 'vertical'
	});
    self.add(content);

    // ユーザ名入力フィールド
    var username = Ti.UI.createTextField({
	    hintText: 'ユーザ名',
	    top: '10dp', left: '10dp', right: '10dp',
	    height: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	    autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_NONE,
	    autocorrect: false
	});
    content.add(username);

    // パスワード入力フィールド
    var password = Ti.UI.createTextField({
	    hintText: 'パスワード',
	    top: '10dp', left: '10dp', right: '10dp',
	    height: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	    passwordMask: true
	});
    content.add(password);

    // ログインボタン
    var loginButton = Ti.UI.createButton({
	    title: 'ログイン',
	    top: '10dp', left: '10dp', right: '10dp', bottom: '10dp',
	    height: '44dp', width: '200dp',
	});
    content.add(loginButton);
    
    // ログイン処理
    loginButton.addEventListener('click', function() {
	    Cloud.Users.login({
		    login: login.value,
		    password: password.value
		}, function (e) {
		    if (e.success) {
			var user = e.users[0];
			login.value = password.value = '';
			alert('ID: ' + user.id + ' でログインしました。');
		    }
		    else {
			alert((e.error && e.message) || JSON.stringify(e));
		    }
		});
	});
    
    // ログアウトボタン
    var logoutButton = Ti.UI.createButton({
	    title: 'ログアウト',
	    top: '10dp', left: '10dp', right: '10dp', bottom: '10dp',
	    height: '44dp', width: '200dp',
	});
    content.add(logoutButton);
    
    // ログアウト処理
    logoutButton.addEventListener('click', function() {
	    Cloud.Users.logout(function (e) {
		    if (e.success) {
			alert('ログアウトしました。');
		    }
		    else {
			alert((e.error && e.message) || JSON.stringify(e));
		    }
		});
	});
    
    return self;
};

module.exports = LoginWindow;

ユーザの新規追加処理の実装

ユーザの追加はTitanium.Cloud.Users.create()メソッドを使って行います。このメソッドには以下のようなパラメータを渡します。

username - ユーザ名
email - メールアドレス
password - パスワード
password_confirmation - 確認用パスワード
first_name - 名前
last_name - 姓

このうち、ユーザ名/メールアドレスのいずれかと、パスワード、確認用パスワードは必須であり、その他は省略可能です。その他にタグ（tags）やロール（role⁠）⁠、写真ID（photo/photo_id）などを設定することもできます。

次の例では、ユーザ名、パスワード、確認用パスワード、姓、名前を渡してcreate()を呼び出しています。

Cloud.Users.create({
	username: 'gihyo',
	password: 'gihyopass',
	password_confirmation: 'gihyopass',
	last_name: 'Giyho',
	first_name: 'Taro'
    }, function (e) {
	if (e.success) {
	    var user = e.users[0];
	    alert('ユーザを登録しました。現在ID: ' + user.id + ' でログイン中です。');
	    username.value = password.value = confirmPassword.value = firstName.value = lastName.value = '';
	}
	else {
	    alert((e.error && e.message) || JSON.stringify(e));
	}
	button.show();
    });

ユーザの追加に成功するとe.successにtrueが、失敗するとfalseが設定されます。作成されたユーザのオブジェクトはe.users[0]に格納されているので、ここからユーザIDやユーザ名などの情報を取得できます。なお、ユーザIDはユーザを追加した際に自動で設定されるものです。

これを踏まえて、AddWindow.jsは次のように作成しました。

function AddWindow(title) {
    var Cloud = require('ti.cloud');  // ACS用モジュールの読み込み

    var self = Ti.UI.createWindow({
	    title:title,
	    backgroundColor:'white'
	});
	
    var content = Ti.UI.createScrollView({
	    top: '10dp',
	    contentHeight: 'auto',
	    layout: 'vertical'
	});
    self.add(content);
    
    // ユーザ名入力フィールド
    var username = Ti.UI.createTextField({
	    hintText: 'ユーザ名',
	    top: '10dp', left: '10dp', right: '10dp',
	    height: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	    autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_NONE,
	    autocorrect: false
	});
    content.add(username);
    
    // パスワード入力フィールド
    var password = Ti.UI.createTextField({
	    hintText: 'パスワード',
	    top: '10dp', left: '10dp', right: '10dp',
	    height: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	    passwordMask: true
	});
    content.add(password);
    
    // 確認用パスワード入力フィールド
    var confirmPassword = Ti.UI.createTextField({
	    hintText: 'パスワードの確認',
	    top: '10dp', left: '10dp', right: '10dp',
	    height: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
	    passwordMask: true
	});
    content.add(confirmPassword);
    
    // 姓入力フィールド
    var lastName = Ti.UI.createTextField({
	    hintText: '苗字',
	    top: '10dp', left: '10dp', right: '10dp',
	    hseight: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
	});
    content.add(lastName);
    
    // 名前入力フィールド
    var firstName = Ti.UI.createTextField({
	    hintText: '名前',
	    top: '10dp', left: '10dp', right: '10dp',
	    hseight: '40dp',
	    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
	});
    content.add(firstName);

    // ユーザ追加ボタン
    var button = Ti.UI.createButton({
	    top: '10dp', left: '10dp', right: '10dp', bottom: '10dp',
	    height: '44dp', width: '200dp',
	    title: '追加',
	});
    content.add(button);
	
    // ユーザの追加処理
    button.addEventListener('click', function() {
	    Cloud.Users.create({
		    username: username.value,
		    password: password.value,
		    password_confirmation: confirmPassword.value,
		    last_name: lastName.value,
		    first_name: firstName.value
		}, function (e) {
		    if (e.success) {
			var user = e.users[0];
			alert('ユーザを登録しました。現在ID: ' + user.id + ' でログイン中です。');
			username.value = password.value = confirmPassword.value = firstName.value = lastName.value = '';
		    }
		    else {
			alert((e.error && e.message) || JSON.stringify(e));
		    }
		    button.show();
		});
	});
	
    return self;
};

module.exports = AddWindow;

MyFirstAppの実行例

タブを構成するApplicationTabGroup.jsは次のようになります。

function ApplicationTabGroup(Window1, Window2) {
    //create module instance
    var self = Ti.UI.createTabGroup();
	
    //create app tabs
    var win1 = new Window1('ログイン/アウト');
    var win2 = new Window2('ユーザの追加');
    
    var tab1 = Ti.UI.createTab({
	    title: 'ログイン/アウト',
	    icon: '/images/KS_nav_views.png',
	    window: win1
	});
    win1.containingTab = tab1;
    
    var tab2 = Ti.UI.createTab({
	    title: 'ユーザの追加',
	    icon: '/images/KS_nav_ui.png',
	    window: win2
	});
    win2.containingTab = tab2;
	
    self.addTab(tab1);
    self.addTab(tab2);
	
    return self;
};

module.exports = ApplicationTabGroup;

ApplicationTabGroupのコンストラクタにはタブに表示する2つのウィンドウ（ここではLoginWindowとAddWindow）を渡せばいいので、app.jsは次のようになります。

//bootstrap and check dependencies
if (Ti.version

ここまでできたら、MyFirstAppをAndroid端末かエミュレータにインストールして実行してみましょう。最初は図4のようにログイン/ログアウトタブが表示されます。ユーザの追加タブは図5のようになっています。ここで任意のユーザ情報を入力して[追加]ボタンをクリックすると、ユーザが作成されて図6のように表示されます（ユーザの作成に失敗するとエラーが表示されます⁠）⁠。

ユーザを追加した場合、自動的にそのユーザでログインしたいる状態になります。ログイン/ログアウトタブに戻って、[ログアウト]ボタンをクリックすると、ログアウト処理が実行されて図7のように表示されま。再び、今作成したユーザ名とパスワードでログインしてみましょう。ログインに成功すれば図8のように表示されるはずです。

さて、この時点でACSのMy AppsページにはMyFirstAppが自動的に登録されているはずです。そこから管理画面にアクセスして、Usersの情報を表示させると、図9のようにアプリで追加したユーザが正しく登録されていることを確認できます。