1. 簡易Twitterクライアントアプリ開発
http://www.flickr.com/photos/vaucher/5763894833/
11年12月11日日曜日

2. 今回の狙い
✤ 簡易Twitterクライアントアプ
リケーション作成を通じて、以
下３テーマについて理解する
✤ EventListener
✤ TableView
✤ HTTPクライアント
✤ 1テーマを20分∼25分で実施
し、途中で中休憩を挟む
http://www.flickr.com/photos/alanant/4483533096/
11年12月11日日曜日

3. EventListener
http://www.flickr.com/photos/ekh00/6054585211/
11年12月11日日曜日

4. そもそもEventListenerって何？
「Aさんが来る」というのをきっかけに受付の人が仕事を行うように、何かのきっかけ(＝イベ
ント）を元にしてプログラムを実行する手法をイベントリスナーといいます
http://yoppa.org/webmov09/609.html
の解説をベースに図式化
11年12月11日日曜日

5. EventListenerはどんな所で利用される？
✤ スマートフォンアプリに限らず、Web
アプリケーション等でも利用されるプ
ログラミング手法
✤ 人間の操作をきっかけとしてプログラ
ムが実行される
✤ 特定の箇所をクリック
✤ キーボードを押す
✤ 代表的な活用例としては
GoogleMapsがイメージしやすい
11年12月11日日曜日

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. EventListenerの動作確認①
✤ TitaniumStudioを起動した後、
File→New→Titanium Mobile Projectと
進みます
✤ 右記画面が表示されますので今回は以下入
力してプロジェクトの設定を行います
✤ Project name:
20111214TiStudy
✤ App Id:
jp.co.pasonatech.20111214TiStudy
✤ 補足）今回はローカルでの作業のため
App Idを仮にこのようにしましたが
AppStoreで配布する場合、他のアプリ
ケーションと重複することは出来ませ
ん。
11年12月11日日曜日

8. EventListenerの動作確認②
✤ App Explorerからapp.jsをダ
ブルクリックしてapp.jsを開き
ます
✤ App Explorerがどこにある
かわからない場合には
Titanium Studioのメニュー
でWindow→Show
View→App Explorerを選択
するとApp Explorerが表示
されます
11年12月11日日曜日

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
- singletap
11年12月11日日曜日

10. TableView
http://www.flickr.com/photos/mallix/2306699577/
11年12月11日日曜日

11. TableViewって何？
✤ 複数行 ｘ １列で、垂直方向にスクロー
ル可能なユーザインタフェース
✤ 行は複数のセクションに分割可能で各
セクションにはヘッダ/フッタを付けて
テキストや画像を表示することが可能
※詳細はAppleの開発者向けドキュメント（ http://
developer.apple.com/jp/devcenter/ios/library/
documentation/TableView_iPhone.pdf）を参照
✤ Titanium Mobileでは
Titanium.UI.TableViewというAPIにて
簡単に実装可能
11年12月11日日曜日

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. 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. TableViewを使う③
少し複雑なレイアウトを作成（完成画面）
11年12月11日日曜日

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. 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. 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. HTTPクライアント
http://www.flickr.com/photos/26036894@N03/4986543660/
11年12月11日日曜日

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. コマンドライン（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=reader
11年12月11日日曜日

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/p1
11年12月11日日曜日

22. コマンドライン（cURL）でHTTPクライアン
トの動きを確認してみましょう③
成功すると、JSON形式でGoogle Readerの情報が表示されます
11年12月11日日曜日

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_PASSWORD
11年12月11日日曜日

24. TitaniumのHTTPClientを利用してTwitterの
情報を表示する処理イメージ
tweet内容
tweet内容
配列(container)
tweet内容
tweetTableView.setData(container) row.add(iconImage)
row.add(tweetText)
win3.add(tweetTableView)
Titanium.UI.TableViewRow
11年12月11日日曜日

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. TitaniumのHTTPClientを利用する②
TitaniumのHTTPClientの送信結果の成功/失敗はsendメソッドの戻り値として取得できるの
ではなく、onloadイベントやonerrorイベントが呼び出されることによって分かります。
∼Titaniumで開発するiPhone/Androidアプリ73ページより引用∼
※上記引用文を元に図式化
11年12月11日日曜日

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. 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. 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日日曜日