簡易Twitterクライアントアプリ開発

http://www.flickr.com/photos/vaucher/5763894833/

11年12月11日日曜日

今回の狙い✤ 簡易Twitterクライアントアプリケーション作成を通じて、以下３テーマについて理解する✤ EventListener✤ TableView✤ HTTPクライアント

✤ 1テーマを20分～25分で実施し、途中で中休憩を挟む

http://www.flickr.com/photos/alanant/4483533096/

11年12月11日日曜日

EventListenerhttp://www.flickr.com/photos/ekh00/6054585211/

11年12月11日日曜日

そもそもEventListenerって何？

「Aさんが来る」というのをきっかけに受付の人が仕事を行うように、何かのきっかけ(＝イベント）を元にしてプログラムを実行する手法をイベントリスナーといいます

http://yoppa.org/webmov09/609.htmlの解説をベースに図式化

11年12月11日日曜日

✤ スマートフォンアプリに限らず、Webアプリケーション等でも利用されるプログラミング手法

✤ 人間の操作をきっかけとしてプログラムが実行される✤ 特定の箇所をクリック✤ キーボードを押す✤ 代表的な活用例としては

GoogleMapsがイメージしやすい

EventListenerはどんな所で利用される？

11年12月11日日曜日

Titanium MobileではEventListenerでどのようなものが使える？

*1:Titanium Mobileの公式APIページより（http://developer.appcelerator.com/apidoc/mobile/latest/Titanium-module）

どのAPIを利用するのかによって使えるイベントの種類が異なる

Titanium.UI.TextField Titanium.UI.WebView- blur- change- click- dbclick- doubletap- focus- return- singletap- swipe- touchcancel- touchend- touchmove- touchstart- twofingertap

- beforeload- click- dbclick- doubletap- error- load- singletap- swipe- touchcancel- touchend- touchmove- touchstart- twofingertap

11年12月11日日曜日

EventListenerの動作確認①

✤ TitaniumStudioを起動した後、File→New→Titanium Mobile Projectと進みます

✤ 右記画面が表示されますので今回は以下入力してプロジェクトの設定を行います✤ Project name: 20111214TiStudy

✤ App Id:jp.co.pasonatech.20111214TiStudy

✤ 補足）今回はローカルでの作業のため App Idを仮にこのようにしましたがAppStoreで配布する場合、他のアプリケーションと重複することは出来ません。

11年12月11日日曜日

EventListenerの動作確認②

✤ App Explorerからapp.jsをダブルクリックしてapp.jsを開きます

✤ App Explorerがどこにあるかわからない場合にはTitanium StudioのメニューでWindow→Show View→App Explorerを選択するとApp Explorerが表示されます

11年12月11日日曜日

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){・・で設定した関数の内容が上記赤文字のイベントが発生した時に実行されます。（この場合にはclickされたよ！という文字がポップアップします

Titanium.UI.createLabelを変数label1に格納した処理の後（ソースコードの27行目）にEventListenerを設定してみましょう

- click- dbclick- doubletap- singletap

- swipe- touchcancel- touchend

Titanium.UI.createLabelは以下のイベントが指定できますので、時間ある方は試してみましょう

- touchmove- touchstart- twofingertap

11年12月11日日曜日

TableViewhttp://www.flickr.com/photos/mallix/2306699577/

11年12月11日日曜日

TableViewって何？

✤ 複数行 ｘ １列で、垂直方向にスクロール可能なユーザインタフェース

✤ 行は複数のセクションに分割可能で各セクションにはヘッダ/フッタを付けてテキストや画像を表示することが可能

※詳細はAppleの開発者向けドキュメント（ http://developer.apple.com/jp/devcenter/ios/library/documentation/TableView_iPhone.pdf）を参照

✤ Titanium MobileではTitanium.UI.TableViewというAPIにて簡単に実装可能

11年12月11日日曜日

TableViewを使う①単純なテーブルレイアウトを作る

var label2 = Titanium.UI.createLabel({! color:'#999',! text:'I am Window 2',! font:{fontSize:20,fontFamily:'Helvetica Neue'},! textAlign:'center',! width:'auto'});win2.add(label2);

var tableViewData = [ {title:'Row1',hasChild:true}, {title:'Row2',hasDetail:true}, {title:'Row3',hasCheck:true}];

var tableView = Titanium.UI.createTableView({! data:tableViewData})win2.add(tableView);

各セルの値となる情報をここで設定しています（具体的にはTitanium.UI.TableViewRowというオブジェクトを利用してます）

※先ほど作った20111214TiStudyプロジェクトをそのまま流用します※win2に配置した変数label2を削除した後にTableViewを配置してみましょう

var label2 の行から、win2.add(label2);の所まで削除します

TableViewの行データを構成するDataプロパティに、上記で設定した変数tableViewDataを指定します

11年12月11日日曜日

TableViewを使う②TableViewRowの代表的なメソッド/プロパティ

詳細は以下を参照（http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.TableViewRow-object）

名前 値 説明 メソッド/プロパティadd Viewオブジェク

ト Rowに対してViewを追加 メソッド

addEventListenr イベント、コールバック関数 イベントリスナーを設定 メソッド

color 文字列 未選択時の表示色 プロパティ

hasChild 真偽値 右方向の矢印有無 プロパティ

hasDetail 真偽値 詳細情報アイコン有無 プロパティ

hasCheck 真偽値 チェックマーク有無 プロパティ

selectedColor 文字列 選択状態の表示色 プロパティ

selectionBackgroundColor 文字列 選択状態の背景色 プロパティ

selectionBackgroundImage 文字列 選択状態の背景画像パス プロパティ

11年12月11日日曜日

TableViewを使う③少し複雑なレイアウトを作成（完成画面）

11年12月11日日曜日

TableViewを使う④少し複雑なレイアウトソースコード解説前半先ほど作ったTableViewのソースを削除してから以下を追加していきます

Titanium.UI.TableViewRowを格納するための配列を宣言します。（詳細は後述）

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 = [];for(var i=0;i<9;i++){ var row = Titanium.UI.createTableViewRow({ height:80 }); var iconImage = Titanium.UI.createImageView({ left:5, top:5, width:50, height:50, image:'image/' + i + '.jpg' }); row.add(iconImage);

この部分削除します

Titanium.UI.TableViewRowオブジェクト生成

アイコンの画像を配置するために、Titanium.UI.createImageViewオブジェクトを生成。imageプロパティで表示する画像のパスを指定します

Titanium.UI.TableViewRowのaddメソッドを使って、上記アイコン画像を配置します

11年12月11日日曜日

TableViewを使う⑤少し複雑なレイアウトソースコード解説後半

var rowText = Titanium.UI.createLabel({ text:'これは' + i + '番目のRowとなるテキストです', top:10, left:60, width:240, height:'auto' });

row.add(rowText);

container.push(row);}

var tableView = Titanium.UI.createTableView();

tableView.setData(container);win2.add(tableView);

先ほど作ったTableViewのソースを削除してから以下を追加していきます

セル内に表示する文字列を配置するために Titanium.UI.createLabelオブジェクトを生成してます

Titanium.UI.TableViewRowのaddメソッドを使って、上記の文字列を配置します

アイコン画像、文字列が含まれた Titanium.UI.TableViewRowオブジェクトを配列containerに格納

上記の配列に対する処理の結果、10個のTableViewRowオブジェクトが配列containerに含まれており、それらすべてをTableViewに配置したいので、Titanium.UI.TableViewのsetDataメソッドを使います

11年12月11日日曜日

配列(container)

TableViewを使う⑥処理イメージ

これは0番目のRowとなるテキストです

win2.add(tableView)

row.add(iconImage) row.add(rowText)

これは1番目のRowとなるテキストです

row.add(iconImage) row.add(rowText)

これは2番目のRowとなるテキストです

row.add(iconImage) row.add(rowText)

Titanium.UI.TableViewRow

tableView.setData(container)

11年12月11日日曜日

HTTPクライアントhttp://www.flickr.com/photos/26036894@N03/4986543660/

11年12月11日日曜日

✤ 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なものがほとんど

HTTPクライアントとは？

11年12月11日日曜日

コマンドライン（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日日曜日

コマンドライン（cURL）でHTTPクライアントの動きを確認してみましょう②✤ 前述のコマンドを入力したSID、

LSID、Authという値が得られるので、最後のAuthの値が必要になるので

✤ 以下コマンドを入力✤ curl -s "http://www.google.com/

reader/api/0/unread-count?all=true&autorefresh=true&output=json" --header "Authorization : GoogleLogin auth=さっき取得したAuthの値"

✤

参考情報：http://d.hatena.ne.jp/rochefort/20101006/p1

11年12月11日日曜日

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

11年12月11日日曜日

コマンドライン(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日日曜日

配列(container)

TitaniumのHTTPClientを利用してTwitterの情報を表示する処理イメージ

win3.add(tweetTableView)

Titanium.UI.TableViewRow

tweetTableView.setData(container)tweet内容

tweet内容

tweet内容

row.add(iconImage)

row.add(tweetText)

11年12月11日日曜日

TitaniumのHTTPClientを利用する①

win2.add(tableView);//以下を追加します

var win3 = Titanium.UI.createWindow({ title:'Twitter TL', backgroundColor:'#fff'});var tab3 = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:'Twitter TL', window:win3});var tweetTableView = Titanium.UI.createTableView();

if(Titanium.Network.online===false){ var dialog = Ti.UI.createAlertDialog({ title: "ネットワーク接続できていません" }); dialog.show();}

※先ほど作った20111214TiStudyプロジェクトをそのまま流用します※win2.add(tableView)の後に追記していきます

ネットワーク接続ができているかどうかを確認するためにTitanium.Network.online の値をチェックします。（falseの場合はオフライン状態になるため、接続できてないアラートを表示します）

tweet内容を格納するためにTableViewを生成します

twitterのtimelineを表示するためのタブとそれに紐付くウィンドウを生成します

11年12月11日日曜日

TitaniumのHTTPClientを利用する②

TitaniumのHTTPClientの送信結果の成功/失敗はsendメソッドの戻り値として取得できるのではなく、onloadイベントやonerrorイベントが呼び出されることによって分かります。～Titaniumで開発するiPhone/Androidアプリ73ページより引用～

※上記引用文を元に図式化

11年12月11日日曜日

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(){ var tweets = JSON.parse(this.responseText); var container = []; for(var i=0;i<tweets.length;i++){ var row = Titanium.UI.createTableViewRow({ height:80 }); var tweetText = Titanium.UI.createLabel({ top:10, left:60, width:240, height:'auto', text:tweets[i].text }); row.add(tweetText); var iconImage = Titanium.UI.createImageView({ left:5, top:5, width:50, height:50, image:tweets[i].user.profile_image_url }); row.add(iconImage);

twitterのAPIにアクセスして成功した場合、this.responseTextにて送信結果が得られます。responseTextという名前の通り、テキスト形式（つまり単なる文字列）になっているため、JSON.parseメソッドを活用して文字列を解析してJSON化します

上記でJSON化したデータのtextプロパティを参照することでツイート内容が取得できるのでそれをTitanium.UI.Labelのtextプロパティに代入します

上記でJSON化したデータのuserプロパティのprofile_image_urlを参照することでアイコン画像が保管されているURLが取得できるのでそれをTitanium.ImageViewのimageプロパティに代入します

11年12月11日日曜日

TitaniumのHTTPClientを利用する④

container.push(row); } tweetTableView.setData(container);};xhr.error = function(){ var dialog = Ti.UI.createAlertDialog({ title: "HTTP Client error", message: "StatusCode: " + this.status }); return dialog.show();};xhr.send();

win3.add(tweetTableView);//// add tabs//tabGroup.addTab(tab1);tabGroup.addTab(tab2);//以下を追加しますtabGroup.addTab(tab3);

twitterのAPIにアクセスして何らかの理由（例：twitterサーバのトラブル等）で送信失敗した場合には、アラートを表示します

アイコン画像、ツイート内容が含まれた Titanium.UI.TableViewRowオブジェクトを配列containerに格納

twitterのtimelineを表示するためのタブを忘れずにtabGroupに追加します

11年12月11日日曜日

JSON

TitaniumのHTTPClientを利用する⑤twitterのpublic timelineのJSON構造

created_attextuser

id

id

name

profile_image_url

friends_count

text

::

配列

※実際にはもっと多数のプロパティがあります。詳細は以下参照（https://dev.twitter.com/docs/api/1/get/statuses/public_timeline）

}::

11年12月11日日曜日