本格派エンジニアの工具箱

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

この記事を読むのに必要な時間:およそ 6 分

プロジェクトの作成

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との連携を有効にしておくことを忘れないようにしましょう。

図1 ACS連携の有効化を忘れないように

図1 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やタブレット端末は考慮しないことにします。

図2 Tabbed ApplicationテンプレートのデフォルトのUI構成

図2 Tabbed ApplicationテンプレートのデフォルトのUI構成

図3 MyFirstAppのUI構成

図3 MyFirstAppのUI構成

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

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;

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書

コメント

コメントの記入