Titaniumによる
iPhone/Androidアプリ開発
株式会社 はてな
アプリケーションエンジニア
倉井龍太郎
自己紹介
倉井龍太郎 ( id:r_kurain, @kurain )
ブックマーク チーム / アプリケーションエンジニア
ブックマークアプリ( iPhone, iPad )
Monolith (iPhone)
Titanium やばい
夜中に興奮して blog に書いたら人気エントリに
以来、社内の Titanium厨として認識されています
Titanium の為に Android を買いました!
Agenda
iPhone 向けの開発を実演します
Titanium で開発すると何がうれしいのか
Titanium で出来ること、出来ないこと
Titaniumとは?
Javascript で iPhone/Android “ネイティブ”アプリ開発
Titanium Mobile が正式名称
Appcelerator が開発 有償サポート
Apache License v2.0
画像は...
Appcelerator
いまやたら熱い会社
Titanium Desktop
$9m の資金調達
Paypal と提携
@masuidrive さんが入社
実演
必要環境
OS X Snow Leopard
XCode + iOS SDK (4.2 対応 )
Android SDK (Android 開発をする場合のみ)
まずは見たいですよね
実演
ディレクトリ構造
Project Name
README/LICENSE/CHANGELOG/tiapp.xml
Resources
iphone
Default.png
appicon.png
生成されるコード
var tabGroup = Titanium.UI.createTabGroup();
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor...
これでも動く
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var label = Titanium.UI.createLabel...
ここまでの利点
コード短いですよね!
エミュレータ起動までが高速(2回目以降)
メモリ管理が不要です
Twitter Client
実例として Twitter Client を作ります
OAuth 認証して
自分のタイムラインが見える
Tweet を投稿できる
画面イメージ
KitchenSink
やりたいことが決まったら Sample を探す
公式デモアプリ
https://github.com/appcelerator/KitchenSink
project import して自分でビルド
デモします
まずは TableView
Tweet の Timeline を表示する
UITableView と同じ
Titanium.UI.TableView に対して
Ti.UI.TableViewRow の配列を渡すだけ
table_view.js
var data = [];
var tableView =
Ti.UI.createTableView(
{
!! data:data
! }
);!
Ti.UI.currentWindow.add(tableVi...
JS 指定で createWindow
var win = Titanium.UI.createWindow(
{
title:'Tab 1',
url:'table_view.js',
backgroundColor:'#fff'
}
);
実演
Tweet 取得
まずは認証なしの API から Tweet を取得
Titanium.Network.HTTPClient を使います
HTTP Request
Ti.Network.HTTPClient
var screen_name = 'kurain';
var url = "http://api.twitter.com/1/statuses/
user_timeline...
Callback
xhr.onload = function() {
var tweets = JSON.parse(this.responseText);
var data = [];
for(var i=0;i<tweets.length;...
Demo
画像も付けてみる
Twitter Icon を出してみましょう
自分のしか出ませんが
Tweet の左側に margin をとって
画像を差し込みます
Ti.UI.ImageView
var url = tweets[i].user.profile_image_url
var image = Ti.UI.createImageView(
{
image:url,
left: 0,
width:...
デモ
他にも便利機能が色々
Pull to refresh
Dynamic Scrolling
Edit and Move
すべてサンプルがあるので実装が簡単です!
OAuth
APIの殆どは OAuth 認証が必須
oauth-adapter
http://code.google.com/p/oauth-adapter/
Javascript で書かれた OAuth library
認証画面の表示も
OAuth-Adapter
Ti.include('oauth_adapter.js');
var oAuthAdapter = new OAuthAdapter(
'your-consumer-secret',
'your-consumer-...
OAuth Send
oAuthAdapter.send(
'https://api.twitter.com/1/statuses/
update.json',
[['status', '@kurain Say Hello to
#titani...
OAuth 認証
if (oAuthAdapter.isAuthorized() == false) {
var receivePin = function() {
oAuthAdapter.getAccessToken(
'https://a...
OAuth認証の次は
status のアップデートと OAuth 認証をセットにして
関数を作成
ナビゲーションバーの右肩にボタンをつけます
NavigationBar
var r = Titanium.UI.createButton(
{
! systemButton:Titanium.UI.iPhone.SystemButton.ADD
}
);
//addEventListen...
デモ
その他の特徴
Objective-C で Plugin が書けます
TiBar という Barcode 認識ライブラリもあるうようで
す
@masuidrive さんによる AdMob plugin もあります。
出来ないこと
直接の OpenGL の利用は今のところ無理そう
細やかなメモリ管理
close しても解放されなかったり
ガチガチの速度チューニング
で、Androidは?
まだまだこれからな予感
OS依存のコードもある
変更なしに同じコードが動くわけではない
エミュレータ遅い
自分で debugger をつないで実機で試すべき?
参考文献
titanium-mobile-doc-ja
http://code.google.com/p/titanium-mobile-doc-ja/
APIの解説, 入門PDF, Build Rakefile, etc..
id:donaya...
まとめ
Titanium による簡単アプリ作成をしてみました
ライブラリによりOAuthの利用も可能です
コードの短さ、開発の速さを実演
出来ない事もありますが、なかなか面白いです。
Thank you.
Upcoming SlideShare
Loading in …5
×

TitaniumによるiPhone/Androidアプリ開発

12,583 views
12,490 views

Published on

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

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,583
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
119
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

TitaniumによるiPhone/Androidアプリ開発

  1. 1. Titaniumによる iPhone/Androidアプリ開発 株式会社 はてな アプリケーションエンジニア 倉井龍太郎
  2. 2. 自己紹介 倉井龍太郎 ( id:r_kurain, @kurain ) ブックマーク チーム / アプリケーションエンジニア ブックマークアプリ( iPhone, iPad ) Monolith (iPhone)
  3. 3. Titanium やばい 夜中に興奮して blog に書いたら人気エントリに 以来、社内の Titanium厨として認識されています Titanium の為に Android を買いました!
  4. 4. Agenda iPhone 向けの開発を実演します Titanium で開発すると何がうれしいのか Titanium で出来ること、出来ないこと
  5. 5. Titaniumとは? Javascript で iPhone/Android “ネイティブ”アプリ開発 Titanium Mobile が正式名称 Appcelerator が開発 有償サポート Apache License v2.0 画像は Titanium Web サイトより引用
  6. 6. Appcelerator いまやたら熱い会社 Titanium Desktop $9m の資金調達 Paypal と提携 @masuidrive さんが入社
  7. 7. 実演 必要環境 OS X Snow Leopard XCode + iOS SDK (4.2 対応 ) Android SDK (Android 開発をする場合のみ) まずは見たいですよね
  8. 8. 実演
  9. 9. ディレクトリ構造 Project Name README/LICENSE/CHANGELOG/tiapp.xml Resources iphone Default.png appicon.png
  10. 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. 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. 12. ここまでの利点 コード短いですよね! エミュレータ起動までが高速(2回目以降) メモリ管理が不要です
  13. 13. Twitter Client 実例として Twitter Client を作ります OAuth 認証して 自分のタイムラインが見える Tweet を投稿できる
  14. 14. 画面イメージ
  15. 15. KitchenSink やりたいことが決まったら Sample を探す 公式デモアプリ https://github.com/appcelerator/KitchenSink project import して自分でビルド デモします
  16. 16. まずは TableView Tweet の Timeline を表示する UITableView と同じ Titanium.UI.TableView に対して Ti.UI.TableViewRow の配列を渡すだけ
  17. 17. table_view.js var data = []; var tableView = Ti.UI.createTableView( { !! data:data ! } );! Ti.UI.currentWindow.add(tableView);
  18. 18. JS 指定で createWindow var win = Titanium.UI.createWindow( { title:'Tab 1', url:'table_view.js', backgroundColor:'#fff' } );
  19. 19. 実演
  20. 20. Tweet 取得 まずは認証なしの API から Tweet を取得 Titanium.Network.HTTPClient を使います
  21. 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. 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. 23. Demo
  24. 24. 画像も付けてみる Twitter Icon を出してみましょう 自分のしか出ませんが Tweet の左側に margin をとって 画像を差し込みます
  25. 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. 26. デモ
  27. 27. 他にも便利機能が色々 Pull to refresh Dynamic Scrolling Edit and Move すべてサンプルがあるので実装が簡単です!
  28. 28. OAuth APIの殆どは OAuth 認証が必須 oauth-adapter http://code.google.com/p/oauth-adapter/ Javascript で書かれた OAuth library 認証画面の表示も
  29. 29. OAuth-Adapter Ti.include('oauth_adapter.js'); var oAuthAdapter = new OAuthAdapter( 'your-consumer-secret', 'your-consumer-key', 'HMAC-SHA1' ); oAuthAdapter.loadAccessToke('twitter');
  30. 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. 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. 32. OAuth認証の次は status のアップデートと OAuth 認証をセットにして 関数を作成 ナビゲーションバーの右肩にボタンをつけます
  33. 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. 34. デモ
  35. 35. その他の特徴 Objective-C で Plugin が書けます TiBar という Barcode 認識ライブラリもあるうようで す @masuidrive さんによる AdMob plugin もあります。
  36. 36. 出来ないこと 直接の OpenGL の利用は今のところ無理そう 細やかなメモリ管理 close しても解放されなかったり ガチガチの速度チューニング
  37. 37. で、Androidは? まだまだこれからな予感 OS依存のコードもある 変更なしに同じコードが動くわけではない エミュレータ遅い 自分で debugger をつないで実機で試すべき?
  38. 38. 参考文献 titanium-mobile-doc-ja http://code.google.com/p/titanium-mobile-doc-ja/ APIの解説, 入門PDF, Build Rakefile, etc.. id:donayama さん
  39. 39. まとめ Titanium による簡単アプリ作成をしてみました ライブラリによりOAuthの利用も可能です コードの短さ、開発の速さを実演 出来ない事もありますが、なかなか面白いです。
  40. 40. Thank you.

×