こんにちは、エンジニアのヨネモトです。
みなさんTitanium Mobile（以下、Titanium）という開発環境をご存知でしょうか。
TitaniumはAppcelerator.Incが開発しているモバイルアプリの開発環境です。
去年あたりから急速にユーザー数が増えているので知っている方も多いと思います。
私自身は昨年1月頃に興味を持ち、自宅で少しずつ使い始めるうちに
Titaniumの面白さに目覚めました。
Titaniumを使うとJavaScriptでネイティブアプリを開発する事が出来るため、
とくにWeb系エンジニアはとっつきやすい開発環境だと思います。
サクサクコーディングが出来るので、使っていてとても楽しいです！
もちろんいい事ばかりではなく、Titanium自体のバグやTitaniumが対応してるかどうか
分からない要件が発生した時は泣きそうになりながら調査する事もあります。
ただコミュニティの活動が活発なためTwitterやBBSなどオンラインで相談すると
解決出来る事も多いです。
Titanium2.0リリース
そんなTitaniumですが、先日メジャーバージョンアップであるバージョン2.0.1GAが
公開され、いくつか機能追加や変更が発表されました。
主な変更点は
などなどです。
Titanium2.0 Launch Event
Titanium2.0リリース直後の4/20に「Titanium2.0 Launch Event」が開催され、私も参加してきました。
内容はTitanium2.0の機能説明とLightning Talkなどでしたが、有名なTitaniumerが
何人も来ていて、そういった方々の話を聞く事でコミュニティの雰囲気を感じる事が出来ました。
何人も来ていて、そういった方々の話を聞く事でコミュニティの雰囲気を感じる事が出来ました。
今回は懇親会は無かったのですが、機会があればそのうち参加したいと思います。
イベント参加時に頂いたステッカー。どこに貼るか悩み続けて今日に至ります
今回はこのイベントでの説明で私が気になったACSを少し試してみようかと思います。
Appcelerator Cloud Services
「Cocoafish」を2012年の2月に買収して自社のサービスにしたものです。
機能としては
- ユーザー管理
- 記事の投稿
- Key Value Store
- フレンド管理（Beta）
- 位置情報の投稿
- 画像のアップロード
- Emailの送信
などをサポートしていて、サーバーサイドの開発をしなくてもサーバー側のデータを使ったアプリが作れます。
作ることをメインに考えられて設計されているようです。
開発者は自分のビジネスに特化した部分のみの開発に集中し、ユーザー管理などの
サービス開発時に必要な一般的機能はクラウド側に任せる事が出来るのがメリットです。
サンプルアプリケーションの作成
IDEであるTitanium Studioを使って、新規プロジェクトを作成します。
プロジェクト作成の際に「Project Template」を利用すると、Appceleratorが推奨する
構成（CommonJS&シングルコンテキスト）でプロジェクトが生成されるのでおすすめです。
また、Titanium Studioでプロジェクトを新規作成すると最初からACSが
利用可能な状態になっていますので、特別な設定は必要ありません。
（Titanium2.0以前に作成したプロジェクトでACSを利用する際には設定が必要です）
それでは早速コードを書いていきましょう。
まず、Titanium.Cloudの機能をラップしたModelを作成します。
function ACSModel() {
var self = {};
var Cloud = require('ti.cloud');
Cloud.debug = true;
//ログイン
self.login = function(form, callback) {
Cloud.Users.login({
login : form.username,
password : form.password,
}, function(e) {
if(e.success) {
callback();
} else {
alert(e);
}
});
}
//投稿リストの取得
self.queryPosts = function(callback) {
Cloud.Posts.query({
page : 1,
per_page : 20,
order: "-created_at",
}, function(e) {
if(e.success) {
callback(e.posts);
} else {
alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
}
//投稿
self.post = function(data) {
Cloud.Posts.create(data, function(e) {
if(e.success) {
var post = e.posts[0];
Ti.API.info(post.content);
} else {
alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
}
return self;
}
module.exports = ACSModel;
次にログイン画面のViewを作成します。
function LoginView() {
var self = Ti.UI.createView();
var username = Ti.UI.createTextField({
top: 50,
height: 30,
width:150,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
self.add(username);
var password = Ti.UI.createTextField({
top: 100,
height: 30,
width:150,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
passwordMask: true,
});
self.add(password);
var button = Ti.UI.createButton({
top: 150,
height: 30,
width:75,
title: 'Login'
});
self.add(button);
button.addEventListener('click', function(e) {
self.fireEvent('login', {
username: username.value,
password: password.value,
});
});
return self;
}
module.exports = LoginView;
ログイン後、投稿を一覧で表示するためのViewを作成します。
function PostsView() {
var self = Ti.UI.createView();
var table = Ti.UI.createTableView();
self.add(table);
self.addPosts = function(posts) {
var data = [];
for(var i = 0, size = posts.length; i < size; i++) {
var post = posts[i];
var user = post.user;
var row = Ti.UI.createTableViewRow({
height : 90,
});
var name = Titanium.UI.createLabel({
color : '#576996',
font : {
fontSize : 16,
fontWeight : 'bold',
fontFamily : 'Arial'
},
left : 90,
top : 5,
text : user.first_name + user.last_name,
});
var content = Titanium.UI.createLabel({
color : '#000000',
font : {
fontSize : 14,
fontFamily : 'Arial'
},
left : 90,
top : 25,
text : post.content,
});
var created_at = Titanium.UI.createLabel({
color : '#000000',
font : {
fontSize : 12,
fontFamily : 'Arial'
},
right : 10,
bottom : 10,
text : post.created_at.substr(0, 19).replace("T", " "),
});
var icon = Titanium.UI.createImageView({
top : 5,
left : 5,
image : user.photo.urls.square_75,
});
row.add(created_at);
row.add(content);
row.add(icon);
row.add(name);
data.push(row);
}
table.setData(data);
}
return self;
}
module.exports = PostsView;
最後に、今回のサンプルでMVCのControllerの部分を担うWindowオブジェクトを実装します。
ログインが成功した場合、Modelから取得したデータをViewに表示しています。
function ApplicationWindow() {
var LoginView = require('ui/common/LoginView'),
PostsView = require('ui/common/PostsView');
var self = Ti.UI.createWindow({
backgroundColor : '#ffffff',
navBarHidden : true,
exitOnClose : true
});
var loginView = new LoginView();
var loginContainerWindow = Ti.UI.createWindow({
title : 'Login'
});
loginContainerWindow.add(loginView);
var postsView = new PostsView();
var postsContainerWindow = Ti.UI.createWindow({
title : 'Posts'
});
postsContainerWindow.add(postsView);
var navGroup = Ti.UI.iPhone.createNavigationGroup({
window : loginContainerWindow
});
self.add(navGroup);
loginView.addEventListener('login', function(e) {
var ACSModel = require('model/ACSModel');
var acs = new ACSModel();
acs.login(e, function() {
//ログインに成功したらメッセージをポスト
acs.post({
title: "テスト",
content: "ログインしました！",
});
//メッセージのリストを取得
acs.queryPosts(function(posts) {
postsView.addPosts(posts);
});
navGroup.open(postsContainerWindow);
});
});
return self;
}
module.exports = ApplicationWindow;
ACSをTitaniumから利用するためのAPIリファレンスは以下を参照してください。
http://docs.appcelerator.com/titanium/2.0/index.html#!/api/Titanium.Cloud
今回使ったのはTitanium.Cloud.UsersとTitanium.Cloud.Postsです。
ログインしていない状態でCloud.Posts.create()を実行すると、どのユーザーが投稿したかを
判別出来ないため、エラーになってしまいます。必ず先にログイン処理を行いましょう。
ただ、「現在ログインしているかどうか」を確認するAPIは現状は存在しないようなので
その点は注意が必要です。
次にテストデータとしてACSの管理画面からユーザーを登録します。
実はプログラムからだけではなく、こういった管理画面からもデータの登録・更新が
可能なのです。便利ですね！
「Create a User」というボタンを押すとフォームが表示されるので、ユーザー名や
パスワード、アイコンなどの情報を入力してユーザーアカウントを3つ作成しました。
それでは先ほど登録したユーザーでログインしてみましょう！！
ユーザーIDとパスワードを入れて、
ぽちっとな。
おぉ、「ログインしました！」と投稿されました。
アイコン画像、ユーザー名（カイブツクロニクルなど）、日付もクラウドから
取得したものを表示しています。
ちなみにテスト用のユーザーデータには、最近私がハマっているアプリ
の名前とアイコンを使ってみました。
面白いのでぜひダウンロードして遊んでみてください！ #ステマ
・・・
今回は定型文を投稿するだけの単純なアプリでしたが、ユーザー登録画面や
投稿画面を作ればサーバーサイドの開発無しでTwitterライクなタイムラインが
簡単に実現出来そうです。
フレンド管理機能など、まだベータ版の機能もいくつかあるようなので、今後が楽しみですね！
今回は主にTitaniumのACSについて書いてみましたがいかがだったでしょうか。
当ブログを読んで少しでも興味を持っていただけた方は、ぜひ応募してください！！
アドウェイズ中途エンジニア採用ページ
