Your SlideShare is downloading. ×
TitaniumによるiPhone/Androidアプリ開発
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

12,196

Published on

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

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,196
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
118
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.

×