20120118 titanium

Twitterクライアントをブラッシュアップ

http://www.ﬂickr.com/photos/craigsd/4687453830/

今回の狙い
✤ 前回作った簡易Twitterクライ
アントをブラッシュアップする
作業を通じて以下３テーマにつ
いて理解する
✤ デバッグ
✤ ファイル分割で見通しの良
いソースコードにする
✤ OAuth認証
✤ 1テーマを20分∼25分で実施
し、途中で中休憩を挟む
http://www.ﬂickr.com/photos/alanant/4483533096/

デバッグ
http://www.ﬂickr.com/photos/franzlife/820495364/

JavaScriptのデバッグは意外と大変

✤ 積極的にはエラーを出さない
✤ 変数を宣言なしに使えて、しかもそれがグローバル変数になるなど、JavaScriptは
思わぬところにバグが潜みやすい言語といえます。読み取り専用のプロパティに代
入してもエラーにならない(代入がスルーされるだけ)ほどです。なんとなく動いて
しまったコードが後々にバグとなって帰ってきます。
✤ テストの自動実行が難しい
✤ デバッグの難しさとは少し違いますが、テストを自動化し難いため、バグが再発し
やすい問題もあります。

※JavaScriptのデバッグTIPS（http://d.hatena.ne.jp/os0x/20101207/1291736377）より引用

Q.JavaScriptでの開
発をどのように乗り
こなすか？
A.JavaScriptの構文エラー
を避ける工夫をまずはしま
しょう

http://www.ﬂickr.com/photos/
stevecorey/4131860845/

Titanium Studioで構文エラーをさけるため
のTIPS：目視
✤ 構文ミスがある箇所はある程度その場
で把握できるので入力中も意識しま
しょう
こういう印がついていたらその行周辺で構文エラー
✤ 該当行で赤い印が付く
があることを示してます。（この例はfor文がまだ
✤ 制御文などが通常のテキストと同じ入力中のため結果として構文上エラーとみなされて
います
色になっている
※制御文や変数には色がついて他と
区別しやすくなっています。
✤ 初歩的だけどこれはアナログすぎる

if 文のelse をタイプミスしているためelsの色が通
常の文字と同じ色で表示されている

のTIPS：コード補完
✤ Titanium Studioのような統合開発環境
には通常コード補完機能があるので積
極的に利用しましょう
✤ 例えば Tiの後のドット（.）を入力
してしばらくすると、入力候補が自
動的にリストアップされます
•矢印キーの上下で候補
✤ 入力候補は矢印キーの上下で選ぶこを選ぶことができます
•入力途中にこのように
とが出来、Enterキーにて確定しま該当するAPIの説明、引
•選択したものはEnter
数なども表示されます
すキーにて確定できます

のTIPS：Snippet機能の有効活用
✤ Snippetとは？
✤ 「切れ端」「断片」という意味。プログラミングの開発環境では、定型文を補完す
る機能のことを意味します
✤ Snippetの何がうれしいのか
✤ あらかじめ用意しておいた定型文をコピペするのとは違い、変更したい箇所をTab
キーなどで順次移動しながら入力できるので使いこなせると大変便利
✤ Titanium Studioもですが、高機能なテキストエディタにはたいていこの機能はあ
るので、「日頃使っているテキストエディタの名前＋ snippet」でググると有益な
情報が見つかると思います
✤ Snippet使ってみましょう
✤ 今回以下情報を参考にしてます
http://d.hatena.ne.jp/donayama/20110820/tistudio_bundle_snippet

Snippetを使ってみよう①

✤ TitaniumStudioを起動した後、
File→New→Titanium Mobile Projectと
進みます
✤ 右記画面が表示されますので今回は以下入
力してプロジェクトの設定を行います
✤ Project name:
20120118TiStudy
✤ App Id:
jp.co.pasonatech.20120118TiStudy

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

Snippetを使ってみよう②

✤ プロジェクトの設定が完了したら
Commands→JavaScript→Edit this
bundleと進みます
✤ しばらくするとApp Explorer上に
JavaScriptというプロジェクトが追加され
自動的にいくつかのファイルが出来上がり
ます
✤ 今回のSnippetに関連するのは
snippets.rbとbundle.rbという2つの
Rubyで書かれたファイルです

Snippetを使ってみよう③

✤ snippets.rbをダブルクリックして開くとす
でにいくつか定義されたsnippetが存在し
てます。
✤ コードの見方
✤ snippet... end までが1つの処理のまと
まりになってます。
✤ snippetの後のダブルクオーテーション
で囲まれているのはその処理の説明文
章です
✤ s.triggerの部分がsnippetを呼び出すた
めのコマンドになります
✤ s.expansionが実際に展開されるソース
コードのsnippet（＝断片）になります

Snippetを使ってみよう④

✤ ためしにapp.jsで以下のようにタイプしま
しょう
1. forと入力
2. 入力後、タブ（tab）キーを押す
3. 入力すると、for文が展開されます。
for文のsnippetは2つ設定されており、
矢印キーの上下でどちらかが選択出来
ますがひとまず上の方を選択した状態
でEnterキーを押します
4. 変更する箇所に自動的にカーソルが移
動してますので、試しに「container」
と入力してみましょう

Snippetを使ってみよう⑤

オリジナルのsnippetを追加してみましょう。
※http://d.hatena.ne.jp/donayama/20110820/tistudio_bundle_snippet より引用

snippet "Create Titanium Mobile UI Widget" do |s|
s.trigger = "creui"
s.expansion = "var ${1:name} = Titanium.UI.create${2:_widget_class_}({
top: ${3:top_px},
left: ${4:left_px},
width: ${5:width_px},
height: ${6:height_px},
$0 snippets.rbの90行の後にこの
});" 内容を追記します
end

core_menu.menu "Titanium Mobile" do |control_menu|
control_menu.command "Create Titanium Mobile UI Widget" bundle.rbの48行目の後にこの
end
内容を追記します

見通しの良いソースコード
http://www.ﬂickr.com/photos/chrissuderman/904382775/

これまで書いてきたソースコード
の問題点
UI関連のAPI利用時にプロパティ情報が多数出てくるとソースコードがやや読みづらくなる

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 Titanium.UI.createXXXを利用するとどうして
});
もこういう記述が多数出てくる
var tweetText = Titanium.UI.createLabel({
top:10,
left:60,
width:240,
height:'auto',
text:tweets[i].text
});
row.add(tweetText);

ソースコードの見通しを良くする
ヒント
ユーザーインターフェイス（UI）関連を別ファイルに切り出すだけでも見通しが良くなる

BEFORE AFTER
var label1 = Titanium.UI.createLabel({ //app.js
! color:'#999', var style = require('styles');
! text:'I am Window 1', var label1 = Ti.UI.createLabel(style.prop.label);
! font:{fontSize:20,fontFamily:'Helvetica
Neue'}, //styles.js
! textAlign:'center', var theme = {
! width:'auto' color:'#999',
backgroundColor:'#fff',
});
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto',
viewIcon:'KS_nav_views.png',
uiIcon:'KS_nav_ui.png'
};
//以下省略

切り出し方は色々あ
ります

CommonJS形式のモジュール使ったやり
方になれると色々な場面で応用が効くの
で現時点ではこれが個人的にオススメ！

http://www.ﬂickr.com/photos/bunchofpants/36924662/

UI関連の情報を別ファイルに切り出す①

✤ 先ほど作った20120118TiStudyプロジェ
クトをそのまま流用して作業を進めます
✤ App Explorer上のResourcesフォルダを
Optionキーを押しながらクリックして、
New→Fileと選択します
✤ ファイル名：
styles.js
と入力してFinishボタンをクリックします

UI関連の情報を別ファイルに切り出す②

styles.jsを以下のように入力することでCommonJS形式のモジュールとして活用できます

var theme = {
color:'#999',
backgroundColor:'#fff', themeというオブジェクトを作り、色、背景
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center', 色、フォント、幅・・などに関連する情報をま
width:'auto', とめます
viewIcon:'KS_nav_views.png',
uiIcon:'KS_nav_ui.png'
};
var prop = {
win: {
backgroundColor:theme.backgroundColor propオブジェクトにて、Titaniumの各APIに紐
}, 付くプロパティを設定します。（この場合には
label : {
color: theme.color, win、label，tab1，tab2の4つのプロパティを
textAlign:theme.textAlign,
width:theme.width 設定していることになります）
},
tab1:{
icon:theme.viewIcon
},
tab2:{
icon:theme.uiIcon
}
}; 上記で設定したpropを別のファイルから利用で
var exports = {
きるようにするためにexportsします。（これは
prop:prop CommonJSで規定されているモジュールの作り
};
方です）

UI関連の情報を別ファイルに切り出す③

先ほど作ったstyle.jsをapp.jsで利用するには以下のようにします。
先ほど作ったstyle.jsを読み込むためにrequire()
var $$ = require('styles');
という機能を利用します。なお拡張子のjsは不
var tabGroup = Titanium.UI.createTabGroup(); 要です。
var win1 = Titanium.UI.createWindow($$.prop.win);
win1.title = 'Tab 1';
var tab1 = Titanium.UI.createTab($$.prop.tab1); $$.prop.xxx を設定することでそれぞれのUI要
tab1.window = win1;
var label1 = Titanium.UI.createLabel($$.prop.label); 素のプロパティ情報を設定出来ます
label1.text = 'I am Window 1';
win1.add(label1);

var win2 = Titanium.UI.createWindow($$.prop.win);
win2.title = 'Tab 2';
var tab2 = Titanium.UI.createTab($$.prop.tab2);
tab2.window = win2;
var label2 = Titanium.UI.createLabel($$.prop.label);
label2.text = 'I am Window 2';
win2.add(label2);

tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
tabGroup.open();

Coffee Break!

http://www.ﬂickr.com/photos/windsordi/3273502072/

OAuth認証
http://www.ﬂickr.com/photos/tejedoro_de_luz/3177911908/

twitter連携するアプリ利用時によく見る画面

OAuthとは？

service
✤ あらかじめ信頼関係を構築したサービス間でユーザ
providers
の同意のもとにセキュアにユーザの権限を受け渡し
する「認可情報の委譲」のための仕様
✤ OAuthに対応したサービスでは，ユーザが外部サー
ビスにパスワードを教えることなく，認可情報の委
譲が可能です。また認可情報の適用範囲を指定した
り，有効期限を設定することができるため，ユーザ
が外部サービスにすべての権限を渡すこと無く，自
分が利用したいサービスに最低限必要な権限のみを
委譲することができます。
users
※http://gihyo.jp/dev/feature/01/oauth/0001よ
り引用しました

consumers

（ Webサービ
スを利用する
開発者）

認証と認可の違い

✤ 認証
認証認証サーバ
✤ 英語ではAuthentication
✤ 平たく言えば本人確認のこと
1.本人確認 1.本人確認
✤ 認可
✤ 英語ではAuthorization
✤ 何らかのサービス/リソースへのアクセスに 2.認証結果
対してアクセスする権限を与えること

Aさん Bさん
Aさん：閲覧出来る
Bさん：閲覧出来ない 3.閲覧許可 3.閲覧不許可

認可サービス/リソースなど

http://www.itmedia.co.jp/enterprise/articles/0804/22/news044.htmlのサイトをベースに作図

Titanium Mobileの開発におけるtwitterの
OAuth処理
✤ OAuthの認証処理をイチから全部実装するのはとて
も大変。Titanium Mobileで利用するのに大変便利
なライブラリがあります
✤ 古川大輔さん（twitter id:mogya）がGitHubで
公開してます（https://github.com/mogya/
tm_twitter_api）
✤ 上記からZIPファイルをダウンロード＆解凍した
libフォルダを今回作成してるプロジェクトの
Resourcesフォルダ配下に配置します
✤ ユーザ認証が必要となるTwitter API利用にあたって
は事前にアプリケーションの事前登録が必要になり
ます
✤ これはtwitterに限らず他のWebサービスで同様
のことをやる場合に必ず行う作業になります
✤ 次のスライド以降でアプリケーション事前登録
方法について解説します

twitterのアプリケーション登録申請①

✤ アプリケーション登録申請ページ
（https://dev.twitter.com/apps/
new）にアクセスします
✤ 以下3項目を入力
✤ Name:
twclientby＋あなたのtwitter id
例：twclientby＋h5y1m141
✤ Description:
twitter client made w/ titanium
✤ WebSite:
www.facebook.com/pasonatech
✤ 利用規約のチェックボックスをonにし
てCaptchaの文字入力してCreate
your Twitter appicationをクリック

twitterのアプリケーション登録申請②

✤ アプリケーション登録申請が成功する
と右記のような画面が表示されます
✤ Consumer keyとConsumer secretは
後で利用する情報になります
✤ twitter側ではこの情報を信頼して
認可情報の委譲をしているためとて
も大切な情報になります
✤ 取得したConsumer keyと
Consumer secretは大切に管理し
ましょう
✤ ※今回はtwitterにログイン＆タイムラ
インを表示するだけの機能を実装する
ためApplicationのPermissonはRead
のままにしてます

Twitterのタイムラインを表示する①
app.jsの処理
先ほど作った20120118TiStudyプロジェクトをそのまま流用してapp.jsに以下を追記します
var $$ = require('styles');
var ui = require('ui'); 後述するui.jsモジュールを読み込むます
// 中略
Ti.include("/lib/twitter_api.js"); twitter_api.jsライブラリをここで読み込みます
var twWin = Titanium.UI.createWindow($$.prop.win);
twWin.title = 'twitter';
var twTab = Titanium.UI.createTab($$.prop.tab1);
twTab.window = twWin; twitterのアプリケーションの登録申請の際に発
var twitter = new TwitterApi({
consumerKey:'YOUR CONSUMER KEY', 行されたconsumer keyとconsumer secretの
consumerSecret:'YOUR CONSUMER SECRET'
}); 値をここで設定します
twitter.init();
twitter.statuses_home_timeline({ Twitte APIの１つstatuses_home_timelineを
onSuccess: function(tweets){
var rows = []; 呼び出す処理を実施してます。
var items = {};
for(var i=0;i<tweets.length;i++){
var tweet = tweets[i]; 後述するui.jsモジュールのcreateTweetRowメ
var row = ui.createTweetRow(tweet); ソッドを呼び出して、TableViewRowを設定し
rows.push(row);
} ていきます
var tableView = ui.createTableView(rows);
twWin.add(tableView);
},
onError: function(error){
Ti.API.error(error);
}
});
// 中略
tabGroup.addTab(twTab);

Twitterのタイムラインを表示する②
UIのパーツ生成するモジュールについて
ui.jsというUIの各パーツを生成するためのモジュールを作成。2つのメソッドを定義
var exports = {
createTweetRow:function(/* JSON */ tweet){ tweet内容、twietter id名、twitterアイコンの
var row = Ti.UI.createTableViewRow($$.prop.viewRow);
row.data = tweet; 画像パスの情報が含まれたJSONオブジェクト
row.addEventListener('click', function(e){
alert('finish');
を引数にTableViewRowオブジェクトを生成す
}); るcreateTweetRowというメソッドを定義して
var title = Ti.UI.createLabel($$.prop.tweet);
title.text = tweet.text, ます
row.add(title);

var screen_name = Ti.UI.createLabel($$.prop.screenName);
screen_name.text = tweet.user.screen_name;
row.add(screen_name);

var icon_iamge = Ti.UI.createImageView($$.prop.iconImage);
icon_iamge.image = tweet.user.profile_image_url;

row.add(icon_iamge);
return row;
},

createTableView:function(/* array */ rows){
var len = rows.length;
var tableView = Ti.UI.createTableView($$.tableView); rowが複数格納された配列を引数にして、
for(var i=0;i<len;i++){
tableView.appendRow(rows[i]); TableViewオブジェクトを生成する
}
return tableView; createTableViewというメソッドを定義してま
}
};
す

Twitterのタイムラインを表示する③

styles.jsのtab2:{..}の後に以下を追記します
viewRow:{
width:'auto',
この部分でTableViewRowの幅と高さの設定を
height:'auto' しています。
},
tweet:{
font:{fontSize:12}, この部分でtweetの表示位置、テキストサイズ、
left:55,
top:30, 幅、高さの設定をしています。
width:245,
height:'auto'
},
screenName:{ この部分でtweet idの表示位置、色、テキスト
font:{fontSize:16},
color:'#000', サイズ、幅、高さの設定をしています。
left:55,
top:5,
width:'auto',
height:20
},
iconImage:{ この部分でtweet アイコンの表示位置、幅、高
left:5,
top:5, さの設定をしています。
width:30,
height:30
},
tableView:{
backgroundColor:theme.backgroundColor この部分でtweetの格納をするTableViewの背景
} 色の設定をしています
};

参考情報：ui.jsの処理イメージ

配列
rows tweet内容

tweet内容

createTableView(array) tweet内容

createTweetRow(json)
row

row

row

20120118 titanium

More Related Content

What's hot

Similar to 20120118 titanium

More from Hiroshi Oyamada

20120118 titanium