Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

12,804 views

Published on

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

Published in: Technology
  • Be the first to comment

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.

×