Titanium Mobileを用いたiPhoneアプリ開発について、実例をまじえつつ概説します。OAuthを利用したTwitter APIへのアクセスについても実例をおみせします。

1. Titaniumによる
iPhone/Androidアプリ開発
株式会社 はてな
アプリケーションエンジニア
倉井龍太郎

2. 自己紹介
倉井龍太郎 ( id:r_kurain, @kurain )
ブックマーク チーム / アプリケーションエンジニア
ブックマークアプリ( iPhone, iPad )
Monolith (iPhone)

3. Titanium やばい
夜中に興奮して blog に書いたら人気エントリに
以来、社内の Titanium厨として認識されています
Titanium の為に Android を買いました!

4. Agenda
iPhone 向けの開発を実演します
Titanium で開発すると何がうれしいのか
Titanium で出来ること、出来ないこと

5. Titaniumとは？
Javascript で iPhone/Android “ネイティブ”アプリ開発
Titanium Mobile が正式名称
Appcelerator が開発 有償サポート
Apache License v2.0
画像は Titanium Web サイトより引用

6. Appcelerator
いまやたら熱い会社
Titanium Desktop
$9m の資金調達
Paypal と提携
@masuidrive さんが入社

7. 実演
必要環境
OS X Snow Leopard
XCode + iOS SDK (4.2 対応 )
Android SDK (Android 開発をする場合のみ)
まずは見たいですよね

8. 実演

9. ディレクトリ構造
Project Name
README/LICENSE/CHANGELOG/tiapp.xml
Resources
iphone
Default.png
appicon.png

10. 生成されるコード
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
tabGroup.addTab(tab1);
tabGroup.open();

11. これでも動く
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var label = Titanium.UI.createLabel({
text:'Hello World',
});
win1.add(label);
win1.open();

12. ここまでの利点
コード短いですよね！
エミュレータ起動までが高速(2回目以降)
メモリ管理が不要です

13. Twitter Client
実例として Twitter Client を作ります
OAuth 認証して
自分のタイムラインが見える
Tweet を投稿できる

14. 画面イメージ

15. KitchenSink
やりたいことが決まったら Sample を探す
公式デモアプリ
https://github.com/appcelerator/KitchenSink
project import して自分でビルド
デモします

16. まずは TableView
Tweet の Timeline を表示する
UITableView と同じ
Titanium.UI.TableView に対して
Ti.UI.TableViewRow の配列を渡すだけ

17. table_view.js
var data = [];
var tableView =
Ti.UI.createTableView(
{
!! data:data
! }
);!
Ti.UI.currentWindow.add(tableView);

18. JS 指定で createWindow
var win = Titanium.UI.createWindow(
{
title:'Tab 1',
url:'table_view.js',
backgroundColor:'#fff'
}
);

19. 実演

20. Tweet 取得
まずは認証なしの API から Tweet を取得
Titanium.Network.HTTPClient を使います

21. HTTP Request
Ti.Network.HTTPClient
var screen_name = 'kurain';
var url = "http://api.twitter.com/1/statuses/
user_timeline.json?screen_name="+screen_name;
var xhr = Ti.Network.createHTTPClient();
xhr.open("GET",url);
xhr.onload = function() {
var tweets =
JSON.parse(this.responseText);
}
xhr.send();

22. Callback
xhr.onload = function() {
var tweets = JSON.parse(this.responseText);
var data = [];
for(var i=0;i<tweets.length;i++) {
var row = Ti.UI.createTableViewRow();
var label = Ti.UI.createLabel(
{
text: tweets[i].text
}
);
row.add(label);
data.push(row);
}
var tableView = Titanium.UI.createTableView(
{
! ! data:data
! }
);
Titanium.UI.currentWindow.add(tableView);
}

23. Demo

24. 画像も付けてみる
Twitter Icon を出してみましょう
自分のしか出ませんが
Tweet の左側に margin をとって
画像を差し込みます

25. Ti.UI.ImageView
var url = tweets[i].user.profile_image_url
var image = Ti.UI.createImageView(
{
image:url,
left: 0,
width: 48,
height: 48
}
);
row.add(image);

26. デモ

27. 他にも便利機能が色々
Pull to refresh
Dynamic Scrolling
Edit and Move
すべてサンプルがあるので実装が簡単です！

28. OAuth
APIの殆どは OAuth 認証が必須
oauth-adapter
http://code.google.com/p/oauth-adapter/
Javascript で書かれた OAuth library
認証画面の表示も

29. OAuth-Adapter
Ti.include('oauth_adapter.js');
var oAuthAdapter = new OAuthAdapter(
'your-consumer-secret',
'your-consumer-key',
'HMAC-SHA1'
);
oAuthAdapter.loadAccessToke('twitter');

30. OAuth Send
oAuthAdapter.send(
'https://api.twitter.com/1/statuses/
update.json',
[['status', '@kurain Say Hello to
#titanium!']],
'Twitter', //Message Title
'Published.', //Succeed Message
'Not published.' //Failed Message
);

31. OAuth 認証
if (oAuthAdapter.isAuthorized() == false) {
var receivePin = function() {
oAuthAdapter.getAccessToken(
'https://api.twitter.com/oauth/access_token'
);
oAuthAdapter.saveAccessToken('twitter');
};
oAuthAdapter.showAuthorizeUI(
'https://api.twitter.com/oauth/authorize?' +
oAuthAdapter.getRequestToken(
'https://api.twitter.com/oauth/request_token'
),
receivePin
);
}

32. OAuth認証の次は
status のアップデートと OAuth 認証をセットにして
関数を作成
ナビゲーションバーの右肩にボタンをつけます

33. NavigationBar
var r = Titanium.UI.createButton(
{
! systemButton:Titanium.UI.iPhone.SystemButton.ADD
}
);
//addEventListener に注目!!
r.addEventListener('click',function()
{
! tweet('Hoge!');
}
);
Titanium.UI.currentWindow.setRightNavButton(r);

34. デモ

35. その他の特徴
Objective-C で Plugin が書けます
TiBar という Barcode 認識ライブラリもあるうようで
す
@masuidrive さんによる AdMob plugin もあります。

36. 出来ないこと
直接の OpenGL の利用は今のところ無理そう
細やかなメモリ管理
close しても解放されなかったり
ガチガチの速度チューニング

37. で、Androidは？
まだまだこれからな予感
OS依存のコードもある
変更なしに同じコードが動くわけではない
エミュレータ遅い
自分で debugger をつないで実機で試すべき？

38. 参考文献
titanium-mobile-doc-ja
http://code.google.com/p/titanium-mobile-doc-ja/
APIの解説, 入門PDF, Build Rakefile, etc..
id:donayama さん

39. まとめ
Titanium による簡単アプリ作成をしてみました
ライブラリによりOAuthの利用も可能です
コードの短さ、開発の速さを実演
出来ない事もありますが、なかなか面白いです。

40. Thank you.