簡易Twitterクライアントアプリ開発               http://www.flickr.com/photos/vaucher/5763894833/11年12月11日日曜日
今回の狙い  ✤   簡易Twitterクライアントアプ      リケーション作成を通じて、以      下3テーマについて理解する      ✤   EventListener      ✤   TableView      ✤   HTT...
EventListener                  http://www.flickr.com/photos/ekh00/6054585211/11年12月11日日曜日
そもそもEventListenerって何?     「Aさんが来る」というのをきっかけに受付の人が仕事を行うように、何かのきっかけ(=イベ     ント)を元にしてプログラムを実行する手法をイベントリスナーといいます              ...
EventListenerはどんな所で利用される?  ✤   スマートフォンアプリに限らず、Web      アプリケーション等でも利用されるプ      ログラミング手法  ✤   人間の操作をきっかけとしてプログラ      ムが実行される...
Titanium MobileではEventListenerでどのよ  うなものが使える?   どのAPIを利用するのかによって使えるイベントの種類が異なる          Titanium.UI.TextField             ...
EventListenerの動作確認①  ✤   TitaniumStudioを起動した後、      File→New→Titanium Mobile Projectと      進みます  ✤   右記画面が表示されますので今回は以下入  ...
EventListenerの動作確認②  ✤   App Explorerからapp.jsをダ      ブルクリックしてapp.jsを開き      ます      ✤   App Explorerがどこにある          かわからない...
EventListenerの動作確認③   Titanium.UI.createLabelを変数label1に格納した処理の後(ソースコードの27行目)に   EventListenerを設定してみましょう   var    label1 = ...
TableView               http://www.flickr.com/photos/mallix/2306699577/11年12月11日日曜日
TableViewって何?  ✤   複数行 x 1列で、垂直方向にスクロー      ル可能なユーザインタフェース  ✤   行は複数のセクションに分割可能で各      セクションにはヘッダ/フッタを付けて      テキストや画像を表示す...
TableViewを使う①  単純なテーブルレイアウトを作る   ※先ほど作った20111214TiStudyプロジェクトをそのまま流用します※   win2に配置した変数label2を削除した後にTableViewを配置してみましょう   v...
TableViewを使う②  TableViewRowの代表的なメソッド/プロパティ  詳細は以下を参照  (http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI....
TableViewを使う③  少し複雑なレイアウトを作成(完成画面)11年12月11日日曜日
TableViewを使う④  少し複雑なレイアウトソースコード解説前半   先ほど作ったTableViewのソースを削除してから以下を追加していきます    var tableViewData = [       {title:Row1,has...
TableViewを使う⑤  少し複雑なレイアウトソースコード解説後半   先ほど作ったTableViewのソースを削除してから以下を追加していきます        var rowText = Titanium.UI.createLabel({...
TableViewを使う⑥  処理イメージ                                                          Titanium.UI.TableViewRow                   ...
HTTPクライアント               http://www.flickr.com/photos/26036894@N03/4986543660/11年12月11日日曜日
HTTPクライアントとは?  ✤   Webサイト閲覧する時にHTTPという決まりに沿っ      てサーバ側と通信する処理をもったソフトウェア      ✤   日頃使っているSafariやGoogleChrome等の          We...
コマンドライン(cURL)でHTTPクライアン  トの動きを確認してみましょう①  ✤   試しにGoogle Reader APIに以下のよ      うにしてアクセスします  ✤   MacのFinderからアプリケーション→      ユ...
コマンドライン(cURL)でHTTPクライアン  トの動きを確認してみましょう②  ✤   前述のコマンドを入力したSID、      LSID、Authという値が得られるので、      最後のAuthの値が必要になるので  ✤   以下コマ...
コマンドライン(cURL)でHTTPクライアン  トの動きを確認してみましょう③   成功すると、JSON形式でGoogle Readerの情報が表示されます11年12月11日日曜日
コマンドライン(cURL) の紹介をした理由  ✤   WebサービスのAPIにアクセスして試行錯誤するのにコマンドラインツールは最適      ✤   一度入力したコマンドは履歴として残るため、次回以降は全て入力しなくても済む        ...
TitaniumのHTTPClientを利用してTwitterの  情報を表示する処理イメージ                                                                           ...
TitaniumのHTTPClientを利用する①   ※先ほど作った20111214TiStudyプロジェクトをそのまま流用します※   win2.add(tableView)の後に追記していきます   win2.add(tableView)...
TitaniumのHTTPClientを利用する②   TitaniumのHTTPClientの送信結果の成功/失敗はsendメソッドの戻り値として取得できるの   ではなく、onloadイベントやonerrorイベントが呼び出されることによっ...
TitaniumのHTTPClientを利用する③   var xhr = Titanium.Network.createHTTPClient();   var twitterTL = https://api.twitter.com/1/sta...
TitaniumのHTTPClientを利用する④       container.push(row);                                                アイコン画像、ツイート内容が含まれた    ...
TitaniumのHTTPClientを利用する⑤  twitterのpublic timelineのJSON構造           :                       JSON           :              ...
Upcoming SlideShare
Loading in …5
×

20111214 第二回目titanium勉強会

6,031 views
6,040 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,031
On SlideShare
0
From Embeds
0
Number of Embeds
2,312
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

20111214 第二回目titanium勉強会

  1. 1. 簡易Twitterクライアントアプリ開発 http://www.flickr.com/photos/vaucher/5763894833/11年12月11日日曜日
  2. 2. 今回の狙い ✤ 簡易Twitterクライアントアプ リケーション作成を通じて、以 下3テーマについて理解する ✤ EventListener ✤ TableView ✤ HTTPクライアント ✤ 1テーマを20分∼25分で実施 し、途中で中休憩を挟む http://www.flickr.com/photos/alanant/4483533096/11年12月11日日曜日
  3. 3. EventListener http://www.flickr.com/photos/ekh00/6054585211/11年12月11日日曜日
  4. 4. そもそもEventListenerって何? 「Aさんが来る」というのをきっかけに受付の人が仕事を行うように、何かのきっかけ(=イベ ント)を元にしてプログラムを実行する手法をイベントリスナーといいます http://yoppa.org/webmov09/609.html の解説をベースに図式化11年12月11日日曜日
  5. 5. EventListenerはどんな所で利用される? ✤ スマートフォンアプリに限らず、Web アプリケーション等でも利用されるプ ログラミング手法 ✤ 人間の操作をきっかけとしてプログラ ムが実行される ✤ 特定の箇所をクリック ✤ キーボードを押す ✤ 代表的な活用例としては GoogleMapsがイメージしやすい11年12月11日日曜日
  6. 6. Titanium MobileではEventListenerでどのよ うなものが使える? どのAPIを利用するのかによって使えるイベントの種類が異なる Titanium.UI.TextField Titanium.UI.WebView - blur - beforeload - change - click - click - dbclick - dbclick - doubletap - doubletap - error - focus - load - return - singletap - singletap - swipe - swipe - touchcancel - touchcancel - touchend - touchend - touchmove - touchmove - touchstart - touchstart - twofingertap - twofingertap *1:Titanium Mobileの公式APIページより(http://developer.appcelerator.com/apidoc/mobile/latest/Titanium-module)11年12月11日日曜日
  7. 7. EventListenerの動作確認① ✤ TitaniumStudioを起動した後、 File→New→Titanium Mobile Projectと 進みます ✤ 右記画面が表示されますので今回は以下入 力してプロジェクトの設定を行います ✤ Project name: 20111214TiStudy ✤ App Id: jp.co.pasonatech.20111214TiStudy ✤ 補足)今回はローカルでの作業のため App Idを仮にこのようにしましたが AppStoreで配布する場合、他のアプリ ケーションと重複することは出来ませ ん。11年12月11日日曜日
  8. 8. EventListenerの動作確認② ✤ App Explorerからapp.jsをダ ブルクリックしてapp.jsを開き ます ✤ App Explorerがどこにある かわからない場合には Titanium Studioのメニュー でWindow→Show View→App Explorerを選択 するとApp Explorerが表示 されます11年12月11日日曜日
  9. 9. EventListenerの動作確認③ Titanium.UI.createLabelを変数label1に格納した処理の後(ソースコードの27行目)に EventListenerを設定してみましょう var label1 = Titanium.UI.createLabel({ ! color:#999, ! text:I am Window 1, ! font:{fontSize:20,fontFamily:Helvetica Neue}, ! textAlign:center, これを追加 ! width:auto }); ※説明※ 赤文字の所でイベントの指定 label1.addEventListener(click,function(e){ をしています。 ! alert(clickされたよ!); function(e){・・で設定し }); た関数の内容が上記赤文字の イベントが発生した時に実行 されます。(この場合には Titanium.UI.createLabelは以下のイベントが指定できますので、 clickされたよ!という文字 時間ある方は試してみましょう がポップアップします - click - swipe - touchmove - dbclick - touchcancel - touchstart - doubletap - touchend - twofingertap - singletap11年12月11日日曜日
  10. 10. TableView http://www.flickr.com/photos/mallix/2306699577/11年12月11日日曜日
  11. 11. TableViewって何? ✤ 複数行 x 1列で、垂直方向にスクロー ル可能なユーザインタフェース ✤ 行は複数のセクションに分割可能で各 セクションにはヘッダ/フッタを付けて テキストや画像を表示することが可能 ※詳細はAppleの開発者向けドキュメント( http:// developer.apple.com/jp/devcenter/ios/library/ documentation/TableView_iPhone.pdf)を参照 ✤ Titanium Mobileでは Titanium.UI.TableViewというAPIにて 簡単に実装可能11年12月11日日曜日
  12. 12. TableViewを使う① 単純なテーブルレイアウトを作る ※先ほど作った20111214TiStudyプロジェクトをそのまま流用します※ win2に配置した変数label2を削除した後にTableViewを配置してみましょう var label2 = Titanium.UI.createLabel({ ! color:#999, ! text:I am Window 2, var label2 の行から、win2.add(label2);の所ま ! font:{fontSize:20,fontFamily:Helvetica Neue}, で削除します ! textAlign:center, ! width:auto }); win2.add(label2); var tableViewData = [ 各セルの値となる情報をここで設定しています {title:Row1,hasChild:true}, (具体的にはTitanium.UI.TableViewRowとい {title:Row2,hasDetail:true}, {title:Row3,hasCheck:true} うオブジェクトを利用してます) ]; var tableView = Titanium.UI.createTableView({ TableViewの行データを構成するDataプロパ ! data:tableViewData }) ティに、上記で設定した変数tableViewDataを win2.add(tableView); 指定します11年12月11日日曜日
  13. 13. TableViewを使う② TableViewRowの代表的なメソッド/プロパティ 詳細は以下を参照 (http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.TableViewRow-object) 名前 値 説明 メソッド/プロパティ Viewオブジェク add Rowに対してViewを追加 メソッド ト イベント、コール addEventListenr イベントリスナーを設定 メソッド バック関数 color 文字列 未選択時の表示色 プロパティ hasChild 真偽値 右方向の矢印有無 プロパティ hasDetail 真偽値 詳細情報アイコン有無 プロパティ hasCheck 真偽値 チェックマーク有無 プロパティ selectedColor 文字列 選択状態の表示色 プロパティ selectionBackgroundColor 文字列 選択状態の背景色 プロパティ selectionBackgroundImage 文字列 選択状態の背景画像パス プロパティ11年12月11日日曜日
  14. 14. TableViewを使う③ 少し複雑なレイアウトを作成(完成画面)11年12月11日日曜日
  15. 15. TableViewを使う④ 少し複雑なレイアウトソースコード解説前半 先ほど作ったTableViewのソースを削除してから以下を追加していきます var tableViewData = [ {title:Row1,hasChild:true}, {title:Row2,hasDetail:true}, {title:Row3,hasCheck:true} ]; この部分削除します var tableView = Titanium.UI.createTableView({ ! data:tableViewData }) win2.add(tableView); var container = []; Titanium.UI.TableViewRowを格納するための for(var i=0;i<9;i++){ 配列を宣言します。(詳細は後述) var row = Titanium.UI.createTableViewRow({ height:80 Titanium.UI.TableViewRowオブジェクト生成 }); var iconImage = Titanium.UI.createImageView({ アイコンの画像を配置するために、 left:5, Titanium.UI.createImageViewオブジェクトを top:5, width:50, 生成。imageプロパティで表示する画像のパス height:50, を指定します image:image/ + i + .jpg }); Titanium.UI.TableViewRowのaddメソッドを row.add(iconImage); 使って、上記アイコン画像を配置します11年12月11日日曜日
  16. 16. TableViewを使う⑤ 少し複雑なレイアウトソースコード解説後半 先ほど作ったTableViewのソースを削除してから以下を追加していきます var rowText = Titanium.UI.createLabel({ セル内に表示する文字列を配置するために text:これは + i + 番目のRowとなるテキストです, Titanium.UI.createLabelオブジェクトを生成し top:10, left:60, てます width:240, height:auto }); Titanium.UI.TableViewRowのaddメソッドを row.add(rowText); 使って、上記の文字列を配置します container.push(row); アイコン画像、文字列が含まれた } Titanium.UI.TableViewRowオブジェクトを配 列containerに格納 var tableView = Titanium.UI.createTableView(); 上記の配列に対する処理の結果、10個の TableViewRowオブジェクトが配列containerに tableView.setData(container); win2.add(tableView); 含まれており、それらすべてをTableViewに配 置したいので、Titanium.UI.TableViewの setDataメソッドを使います11年12月11日日曜日
  17. 17. TableViewを使う⑥ 処理イメージ Titanium.UI.TableViewRow 配列(container) tableView.setData(container) これは0番目のRowとなるテキストです row.add(iconImage) row.add(rowText) win2.add(tableView) これは1番目のRowとなるテキストです row.add(iconImage) row.add(rowText) これは2番目のRowとなるテキストです row.add(iconImage) row.add(rowText)11年12月11日日曜日
  18. 18. HTTPクライアント http://www.flickr.com/photos/26036894@N03/4986543660/11年12月11日日曜日
  19. 19. HTTPクライアントとは? ✤ Webサイト閲覧する時にHTTPという決まりに沿っ てサーバ側と通信する処理をもったソフトウェア ✤ 日頃使っているSafariやGoogleChrome等の Webブラウザには当然備わっています ✤ MacにcURLというコマンドベースのHTTPクラ イアントもあります ✤ Titanium MobileはTitanium.Network.HTTPClient というAPIがありこれがHTTPクライアント機能とし て活用できます ✤ HTTPクライアント機能はWebサービスAPIにアクセ スする時には必須になります ✤ 開発者向けのWebサービスAPIはREST(*)準拠し たものが多くGET/POST/PUT/DELETEメソッ ドに対応したものが必要 ※以前はSOAPに準拠したものがあったそうで すが最近のAPIはRESTなものがほとんど11年12月11日日曜日
  20. 20. コマンドライン(cURL)でHTTPクライアン トの動きを確認してみましょう① ✤ 試しにGoogle Reader APIに以下のよ うにしてアクセスします ✤ MacのFinderからアプリケーション→ ユーティリティ→ターミナルと選択し て黒画面を起動します ✤ 以下コマンドを入力(参照: http:// d.hatena.ne.jp/rochefort/ 20101006/p1) ✤ curl -k https://www.google.com/ accounts/ClientLogin -d Email=YOURGMAIL -d Passwd=YOURPASSWORD -d service=reader11年12月11日日曜日
  21. 21. コマンドライン(cURL)でHTTPクライアン トの動きを確認してみましょう② ✤ 前述のコマンドを入力したSID、 LSID、Authという値が得られるので、 最後のAuthの値が必要になるので ✤ 以下コマンドを入力 ✤ curl -s "http://www.google.com/ reader/api/0/unread-count? all=true&autorefresh=true&outp ut=json" --header "Authorization : GoogleLogin auth=さっき取得したAuthの値" ✤ 参考情報:http://d.hatena.ne.jp/rochefort/20101006/p111年12月11日日曜日
  22. 22. コマンドライン(cURL)でHTTPクライアン トの動きを確認してみましょう③ 成功すると、JSON形式でGoogle Readerの情報が表示されます11年12月11日日曜日
  23. 23. コマンドライン(cURL) の紹介をした理由 ✤ WebサービスのAPIにアクセスして試行錯誤するのにコマンドラインツールは最適 ✤ 一度入力したコマンドは履歴として残るため、次回以降は全て入力しなくても済む ので実は便利 ✤ 例)twitter Streaming API にアクセスする方法も公式ドキュメント( https:// dev.twitter.com/docs/streaming-api/concepts)に以下のコマンドラインによ る方法が載ってます % curl https://stream.twitter.com/1/statuses/sample.json -uYOUR_TWITTER_USERNAME:YOUR_PASSWORD11年12月11日日曜日
  24. 24. TitaniumのHTTPClientを利用してTwitterの 情報を表示する処理イメージ tweet内容 tweet内容 配列(container) tweet内容 tweetTableView.setData(container) row.add(iconImage) row.add(tweetText) win3.add(tweetTableView) Titanium.UI.TableViewRow11年12月11日日曜日
  25. 25. TitaniumのHTTPClientを利用する① ※先ほど作った20111214TiStudyプロジェクトをそのまま流用します※ win2.add(tableView)の後に追記していきます win2.add(tableView); //以下を追加します var win3 = Titanium.UI.createWindow({ title:Twitter TL, backgroundColor:#fff twitterのtimelineを表示するためのタブとそれ }); に紐付くウィンドウを生成します var tab3 = Titanium.UI.createTab({ icon:KS_nav_views.png, title:Twitter TL, window:win3 }); tweet内容を格納するためにTableViewを生成し var tweetTableView = Titanium.UI.createTableView(); ます if(Titanium.Network.online===false){ ネットワーク接続ができているかどうかを確認 var dialog = Ti.UI.createAlertDialog({ するためにTitanium.Network.online の値を title: "ネットワーク接続できていません" }); チェックします。(falseの場合はオフライン状 dialog.show(); 態になるため、接続できてないアラートを表示 } します)11年12月11日日曜日
  26. 26. TitaniumのHTTPClientを利用する② TitaniumのHTTPClientの送信結果の成功/失敗はsendメソッドの戻り値として取得できるの ではなく、onloadイベントやonerrorイベントが呼び出されることによって分かります。 ∼Titaniumで開発するiPhone/Androidアプリ73ページより引用∼ ※上記引用文を元に図式化11年12月11日日曜日
  27. 27. TitaniumのHTTPClientを利用する③ var xhr = Titanium.Network.createHTTPClient(); var twitterTL = https://api.twitter.com/1/statuses/public_timeline.json?count=3&include_entities=true; xhr.open(GET,twitterTL,false); xhr.onload = function(){ twitterのAPIにアクセスして成功した場合、 var tweets = JSON.parse(this.responseText); this.responseTextにて送信結果が得られます。 var container = []; responseTextという名前の通り、テキスト形式 for(var i=0;i<tweets.length;i++){ var row = Titanium.UI.createTableViewRow({ (つまり単なる文字列)になっているため、 height:80 JSON.parseメソッドを活用して文字列を解析 }); してJSON化します var tweetText = Titanium.UI.createLabel({ top:10, left:60, width:240, 上記でJSON化したデータのtextプロパティを参 height:auto, text:tweets[i].text 照することでツイート内容が取得できるのでそ }); れをTitanium.UI.Labelのtextプロパティに代入 row.add(tweetText); します var iconImage = Titanium.UI.createImageView({ left:5, top:5, 上記でJSON化したデータのuserプロパティの width:50, profile_image_urlを参照することでアイコン画 height:50, 像が保管されているURLが取得できるのでそれ image:tweets[i].user.profile_image_url }); をTitanium.ImageViewのimageプロパティに row.add(iconImage); 代入します11年12月11日日曜日
  28. 28. TitaniumのHTTPClientを利用する④ container.push(row); アイコン画像、ツイート内容が含まれた } tweetTableView.setData(container); Titanium.UI.TableViewRowオブジェクトを配 }; 列containerに格納 xhr.error = function(){ var dialog = Ti.UI.createAlertDialog({ twitterのAPIにアクセスして何らかの理由 title: "HTTP Client error", (例:twitterサーバのトラブル等)で送信失敗 message: "StatusCode: " + this.status した場合には、アラートを表示します }); return dialog.show(); }; xhr.send(); win3.add(tweetTableView); // // add tabs // tabGroup.addTab(tab1); tabGroup.addTab(tab2); //以下を追加します twitterのtimelineを表示するためのタブを忘れ tabGroup.addTab(tab3); ずにtabGroupに追加します11年12月11日日曜日
  29. 29. TitaniumのHTTPClientを利用する⑤ twitterのpublic timelineのJSON構造 : JSON : } id created_at text user 配列 id name profile_image_url friends_count text ※実際にはもっと多数のプロパティがあります。詳細 は以下参照 : : (https://dev.twitter.com/docs/api/1/get/ statuses/public_timeline)11年12月11日日曜日

×