20120118 titanium

2,764
-1

Published on

Titanium+JavaScriptでiPhoneアプリ開発カフェ<vol.3>
サンプルコードのブラッシュアップ編の資料

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,764
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

20120118 titanium

  1. 1. Twitterクライアントをブラッシュアップ http://www.flickr.com/photos/craigsd/4687453830/
  2. 2. 今回の狙い✤ 前回作った簡易Twitterクライ アントをブラッシュアップする 作業を通じて以下3テーマにつ いて理解する ✤ デバッグ ✤ ファイル分割で見通しの良 いソースコードにする ✤ OAuth認証✤ 1テーマを20分∼25分で実施 し、途中で中休憩を挟む http://www.flickr.com/photos/alanant/4483533096/
  3. 3. デバッグ http://www.flickr.com/photos/franzlife/820495364/
  4. 4. JavaScriptのデバッグは意外と大変✤ 積極的にはエラーを出さない ✤ 変数を宣言なしに使えて、しかもそれがグローバル変数になるなど、JavaScriptは 思わぬところにバグが潜みやすい言語といえます。読み取り専用のプロパティに代 入してもエラーにならない(代入がスルーされるだけ)ほどです。なんとなく動いて しまったコードが後々にバグとなって帰ってきます。✤ テストの自動実行が難しい ✤ デバッグの難しさとは少し違いますが、テストを自動化し難いため、バグが再発し やすい問題もあります。※JavaScriptのデバッグTIPS(http://d.hatena.ne.jp/os0x/20101207/1291736377) より引用
  5. 5. Q.JavaScriptでの開発をどのように乗りこなすか?A.JavaScriptの構文エラーを避ける工夫をまずはしましょう http://www.flickr.com/photos/ stevecorey/4131860845/
  6. 6. Titanium Studioで構文エラーをさけるためのTIPS:目視✤ 構文ミスがある箇所はある程度その場 で把握できるので入力中も意識しま しょう こういう印がついていたらその行周辺で構文エラー ✤ 該当行で赤い印が付く があることを示してます。(この例はfor文がまだ ✤ 制御文などが通常のテキストと同じ 入力中のため結果として構文上エラーとみなされて います 色になっている ※制御文や変数には色がついて他と 区別しやすくなっています。✤ 初歩的だけどこれはアナログすぎる if 文のelse をタイプミスしているためelsの色が通 常の文字と同じ色で表示されている
  7. 7. Titanium Studioで構文エラーをさけるためのTIPS:コード補完✤ Titanium Studioのような統合開発環境 には通常コード補完機能があるので積 極的に利用しましょう ✤ 例えば Tiの後のドット(.) を入力 してしばらくすると、入力候補が自 動的にリストアップされます •矢印キーの上下で候補 ✤ 入力候補は矢印キーの上下で選ぶこ を選ぶことができます •入力途中にこのように とが出来、Enterキーにて確定しま 該当するAPIの説明、引 •選択したものはEnter 数なども表示されます す キーにて確定できます
  8. 8. Titanium Studioで構文エラーをさけるためのTIPS:Snippet機能の有効活用✤ Snippetとは? ✤ 「切れ端」「断片」という意味。プログラミングの開発環境では、定型文を補完す る機能のことを意味します✤ Snippetの何がうれしいのか ✤ あらかじめ用意しておいた定型文をコピペするのとは違い、変更したい箇所をTab キーなどで順次移動しながら入力できるので使いこなせると大変便利 ✤ Titanium Studioもですが、高機能なテキストエディタにはたいていこの機能はあ るので、「日頃使っているテキストエディタの名前 + snippet」でググると有益な 情報が見つかると思います✤ Snippet使ってみましょう ✤ 今回以下情報を参考にしてます http://d.hatena.ne.jp/donayama/20110820/tistudio_bundle_snippet
  9. 9. Snippetを使ってみよう①✤ TitaniumStudioを起動した後、 File→New→Titanium Mobile Projectと 進みます✤ 右記画面が表示されますので今回は以下入 力してプロジェクトの設定を行います ✤ Project name: 20120118TiStudy ✤ App Id: jp.co.pasonatech.20120118TiStudy ✤ 補足)今回はローカルでの作業のため App Idを仮にこのようにしましたが AppStoreで配布する場合、他のアプリ ケーションと重複することは出来ませ ん。
  10. 10. Snippetを使ってみよう②✤ プロジェクトの設定が完了したら Commands→JavaScript→Edit this bundleと進みます✤ しばらくするとApp Explorer上に JavaScriptというプロジェクトが追加され 自動的にいくつかのファイルが出来上がり ます ✤ 今回のSnippetに関連するのは snippets.rbとbundle.rbという2つの Rubyで書かれたファイルです
  11. 11. Snippetを使ってみよう③✤ snippets.rbをダブルクリックして開くとす でにいくつか定義されたsnippetが存在し てます。✤ コードの見方 ✤ snippet... end までが1つの処理のまと まりになってます。 ✤ snippetの後のダブルクオーテーション で囲まれているのはその処理の説明文 章です ✤ s.triggerの部分がsnippetを呼び出すた めのコマンドになります ✤ s.expansionが実際に展開されるソース コードのsnippet(=断片)になります
  12. 12. Snippetを使ってみよう④✤ ためしにapp.jsで以下のようにタイプしま しょう 1. forと入力 2. 入力後、タブ(tab)キーを押す 3. 入力すると、for文が展開されます。 for文のsnippetは2つ設定されており、 矢印キーの上下でどちらかが選択出来 ますがひとまず上の方を選択した状態 でEnterキーを押します 4. 変更する箇所に自動的にカーソルが移 動してますので、試しに「container」 と入力してみましょう
  13. 13. 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行の後にこの});" 内容を追記しますendcore_menu.menu "Titanium Mobile" do |control_menu| control_menu.command "Create Titanium Mobile UI Widget" bundle.rbの48行目の後にこのend 内容を追記します
  14. 14. 見通しの良いソースコード http://www.flickr.com/photos/chrissuderman/904382775/
  15. 15. これまで書いてきたソースコードの問題点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);
  16. 16. ソースコードの見通しを良くするヒントユーザーインターフェイス(UI)関連を別ファイルに切り出すだけでも見通しが良くなるBEFORE AFTERvar 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:HelveticaNeue}, //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 }; //以下省略
  17. 17. 切り出し方は色々ありますCommonJS形式のモジュール使ったやり方になれると色々な場面で応用が効くので現時点ではこれが個人的にオススメ! http://www.flickr.com/photos/bunchofpants/36924662/
  18. 18. UI関連の情報を別ファイルに切り出す①✤ 先ほど作った20120118TiStudyプロジェ クトをそのまま流用して作業を進めます✤ App Explorer上のResourcesフォルダを Optionキーを押しながらクリックして、 New→Fileと選択します✤ ファイル名: styles.js と入力してFinishボタンをクリックします
  19. 19. 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で規定されているモジュールの作り}; 方です)
  20. 20. 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();
  21. 21. Coffee Break! http://www.flickr.com/photos/windsordi/3273502072/
  22. 22. OAuth認証 http://www.flickr.com/photos/tejedoro_de_luz/3177911908/
  23. 23. twitter連携するアプリ利用時によく見る画面
  24. 24. OAuthとは? service✤ あらかじめ信頼関係を構築したサービス間でユーザ providers の同意のもとにセキュアにユーザの権限を受け渡し する「認可情報の委譲」のための仕様✤ OAuthに対応したサービスでは,ユーザが外部サー ビスにパスワードを教えることなく,認可情報の委 譲が可能です。また認可情報の適用範囲を指定した り,有効期限を設定することができるため,ユーザ が外部サービスにすべての権限を渡すこと無く,自 分が利用したいサービスに最低限必要な権限のみを 委譲することができます。 users ※http://gihyo.jp/dev/feature/01/oauth/0001よ り引用しました consumers ( Webサービ スを利用する 開発者)
  25. 25. 認証と認可の違い✤ 認証 認証 認証サーバ ✤ 英語ではAuthentication ✤ 平たく言えば本人確認のこと 1.本人確認 1.本人確認✤ 認可 ✤ 英語ではAuthorization ✤ 何らかのサービス/リソースへのアクセスに 2.認証結果 対してアクセスする権限を与えること Aさん Bさん Aさん:閲覧出来る Bさん:閲覧出来ない 3.閲覧許可 3.閲覧不許可 認可 サービス/リソースなど http://www.itmedia.co.jp/enterprise/articles/0804/22/news044.htmlのサイトをベースに作図
  26. 26. 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サービスで同様 のことをやる場合に必ず行う作業になります ✤ 次のスライド以降でアプリケーション事前登録 方法について解説します
  27. 27. 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をクリック
  28. 28. twitterのアプリケーション登録申請②✤ アプリケーション登録申請が成功する と右記のような画面が表示されます✤ Consumer keyとConsumer secretは 後で利用する情報になります ✤ twitter側ではこの情報を信頼して 認可情報の委譲をしているためとて も大切な情報になります ✤ 取得したConsumer keyと Consumer secretは大切に管理し ましょう✤ ※今回はtwitterにログイン&タイムラ インを表示するだけの機能を実装する ためApplicationのPermissonはRead のままにしてます
  29. 29. 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の1つ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);
  30. 30. 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というメソッドを定義してま }}; す
  31. 31. 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の背景 } 色の設定をしています};
  32. 32. 参考情報:ui.jsの処理イメージ 配列 rows tweet内容 tweet内容 createTableView(array) tweet内容 createTweetRow(json) row row row
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×