Soumettre la recherche
Mettre en ligne
20120118 titanium
•
1 j'aime
•
1,918 vues
Hiroshi Oyamada
Suivre
Titanium+JavaScriptでiPhoneアプリ開発カフェ<vol.3> サンプルコードのブラッシュアップ編の資料
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 32
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
WordPress widget api
WordPress widget api
Takami Kazuya
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Jetpack Library 事始め
Jetpack Library 事始め
Tomohiro Kaizu
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
Kiyoshi Sawada
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
Recommandé
WordPress widget api
WordPress widget api
Takami Kazuya
MT meets PHP - PHP conference Kansai 2013
MT meets PHP - PHP conference Kansai 2013
純生 野田
ゼロからつくるWord pressテーマ第6回
ゼロからつくるWord pressテーマ第6回
Hitsuji
ゼロからつくるWord pressテーマ第8回
ゼロからつくるWord pressテーマ第8回
Hitsuji
WordPressとjQuery
WordPressとjQuery
Seto Takahiro
Jetpack Library 事始め
Jetpack Library 事始め
Tomohiro Kaizu
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
Kiyoshi Sawada
WordBeach @kurudrive
WordBeach @kurudrive
Hidekazu Ishikawa
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
Kiyoshi Sawada
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
【Xpages day2016】標準コントールを使わないxpage開発
【Xpages day2016】標準コントールを使わないxpage開発
西 雄樹
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
ericsagnes
アプリコンテスト
アプリコンテスト
Tomonori Yamada
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
はじめてのVue.js
はじめてのVue.js
Kei Yagi
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
Titanium実装最初の一歩.
Titanium実装最初の一歩.
Yasuhiro Matsubayashi
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Contenu connexe
Tendances
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
Kiyoshi Sawada
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
Hitsuji
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
Tetsuji Hayashi
【Xpages day2016】標準コントールを使わないxpage開発
【Xpages day2016】標準コントールを使わないxpage開発
西 雄樹
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
Hidekazu Ishikawa
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
Hitsuji
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
Hitsuji
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
Hitsuji
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
Hitsuji
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
Miho Nakano
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
ericsagnes
アプリコンテスト
アプリコンテスト
Tomonori Yamada
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
はじめてのVue.js
はじめてのVue.js
Kei Yagi
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
Takashi Uemura
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
hokori matu
Tendances
(20)
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
【Xpages day2016】標準コントールを使わないxpage開発
【Xpages day2016】標準コントールを使わないxpage開発
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWordPressテーマ第4回
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第5回
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第7回
ゼロからつくるWord pressテーマ第5回 後編
ゼロからつくるWord pressテーマ第5回 後編
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
Magento meet up Tokyo#1 for Design
Magento meet up Tokyo#1 for Design
eZ Publish勉強会9月〜テンプレート言語〜
eZ Publish勉強会9月〜テンプレート言語〜
アプリコンテスト
アプリコンテスト
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
はじめてのVue.js
はじめてのVue.js
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPressでオリジナルサイトを作るための最初の一歩的なカスタマイズテクニック
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
WordPress3.0 新デフォルトテーマ Twenty Ten 大解剖! ~秋バージョン~
Similaire à 20120118 titanium
Titanium実装最初の一歩.
Titanium実装最初の一歩.
Yasuhiro Matsubayashi
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Jumpei Ogawa
Titanium Mobile
Titanium Mobile
Naoya Ito
Titanium勉強会
Titanium勉強会
洋平 前田
Windows phone & windows 8で見えてくるメトロの世界
Windows phone & windows 8で見えてくるメトロの世界
Makoto Nishimura
5分程度で分かる? Appceleratorの方のAlloy
5分程度で分かる? Appceleratorの方のAlloy
Masato Kitao
[デブサミ2012]趣味と実益の脆弱性発見
[デブサミ2012]趣味と実益の脆弱性発見
Yosuke HASEGAWA
DjangoでさくっとWeb アプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
Nakazawa Yuichi
Chatterを使ったカスタムソーシャル
Chatterを使ったカスタムソーシャル
Salesforce Developers Japan
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
ぶっとびケータイ+Firefox OS Apps
ぶっとびケータイ+Firefox OS Apps
EnsekiTT
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
ThinReports
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
Firefoxosハンズオン
Firefoxosハンズオン
Kazutoshi Kashimoto
How to django at first
How to django at first
Maito Kuwahara
Similaire à 20120118 titanium
(20)
Titanium実装最初の一歩.
Titanium実装最初の一歩.
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Titanium Mobile
Titanium Mobile
Titanium勉強会
Titanium勉強会
Windows phone & windows 8で見えてくるメトロの世界
Windows phone & windows 8で見えてくるメトロの世界
5分程度で分かる? Appceleratorの方のAlloy
5分程度で分かる? Appceleratorの方のAlloy
[デブサミ2012]趣味と実益の脆弱性発見
[デブサミ2012]趣味と実益の脆弱性発見
DjangoでさくっとWeb アプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
Chatterを使ったカスタムソーシャル
Chatterを使ったカスタムソーシャル
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
ぶっとびケータイ+Firefox OS Apps
ぶっとびケータイ+Firefox OS Apps
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
Ruby向け帳票ソリューション「ThinReports」の開発で知るOSSの威力
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
Firefoxosハンズオン
Firefoxosハンズオン
How to django at first
How to django at first
Plus de Hiroshi Oyamada
2016 02-25-crawler-study-01
2016 02-25-crawler-study-01
Hiroshi Oyamada
2016 02-09-co-edo lt
2016 02-09-co-edo lt
Hiroshi Oyamada
2015 12-19-ruby rails
2015 12-19-ruby rails
Hiroshi Oyamada
2015 07-04-ruby rails
2015 07-04-ruby rails
Hiroshi Oyamada
育児を支える技術〜クローラーとかスクレイピング
育児を支える技術〜クローラーとかスクレイピング
Hiroshi Oyamada
日々の面倒をプログラミングで解決!【入門編】
日々の面倒をプログラミングで解決!【入門編】
Hiroshi Oyamada
2014 05-17-titanium hamamatsuvol3
2014 05-17-titanium hamamatsuvol3
Hiroshi Oyamada
20140319 titanium meetupvol17
20140319 titanium meetupvol17
Hiroshi Oyamada
2014 02-19-titanium meetupvol16
2014 02-19-titanium meetupvol16
Hiroshi Oyamada
TitaniumMeetUpVol13
TitaniumMeetUpVol13
Hiroshi Oyamada
20130910 titanium meetupvol11
20130910 titanium meetupvol11
Hiroshi Oyamada
勉強会主催者のための勉強会
勉強会主催者のための勉強会
Hiroshi Oyamada
20130613 titanium meetupvol9
20130613 titanium meetupvol9
Hiroshi Oyamada
2013 06-11-craft beerfanlt
2013 06-11-craft beerfanlt
Hiroshi Oyamada
2013 06-05-web-career-talk-at-coedo
2013 06-05-web-career-talk-at-coedo
Hiroshi Oyamada
20130412 titanium meetupvol7
20130412 titanium meetupvol7
Hiroshi Oyamada
2013 02-28-bussiness-plan-about-titanium
2013 02-28-bussiness-plan-about-titanium
Hiroshi Oyamada
20130126 titanium新年会
20130126 titanium新年会
Hiroshi Oyamada
20130125 titanium meetupvol5
20130125 titanium meetupvol5
Hiroshi Oyamada
2012 12-17-titanium meetupvol4
2012 12-17-titanium meetupvol4
Hiroshi Oyamada
Plus de Hiroshi Oyamada
(20)
2016 02-25-crawler-study-01
2016 02-25-crawler-study-01
2016 02-09-co-edo lt
2016 02-09-co-edo lt
2015 12-19-ruby rails
2015 12-19-ruby rails
2015 07-04-ruby rails
2015 07-04-ruby rails
育児を支える技術〜クローラーとかスクレイピング
育児を支える技術〜クローラーとかスクレイピング
日々の面倒をプログラミングで解決!【入門編】
日々の面倒をプログラミングで解決!【入門編】
2014 05-17-titanium hamamatsuvol3
2014 05-17-titanium hamamatsuvol3
20140319 titanium meetupvol17
20140319 titanium meetupvol17
2014 02-19-titanium meetupvol16
2014 02-19-titanium meetupvol16
TitaniumMeetUpVol13
TitaniumMeetUpVol13
20130910 titanium meetupvol11
20130910 titanium meetupvol11
勉強会主催者のための勉強会
勉強会主催者のための勉強会
20130613 titanium meetupvol9
20130613 titanium meetupvol9
2013 06-11-craft beerfanlt
2013 06-11-craft beerfanlt
2013 06-05-web-career-talk-at-coedo
2013 06-05-web-career-talk-at-coedo
20130412 titanium meetupvol7
20130412 titanium meetupvol7
2013 02-28-bussiness-plan-about-titanium
2013 02-28-bussiness-plan-about-titanium
20130126 titanium新年会
20130126 titanium新年会
20130125 titanium meetupvol5
20130125 titanium meetupvol5
2012 12-17-titanium meetupvol4
2012 12-17-titanium meetupvol4
20120118 titanium
1.
Twitterクライアントをブラッシュアップ
http://www.flickr.com/photos/craigsd/4687453830/
2.
今回の狙い ✤
前回作った簡易Twitterクライ アントをブラッシュアップする 作業を通じて以下3テーマにつ いて理解する ✤ デバッグ ✤ ファイル分割で見通しの良 いソースコードにする ✤ OAuth認証 ✤ 1テーマを20分∼25分で実施 し、途中で中休憩を挟む http://www.flickr.com/photos/alanant/4483533096/
3.
デバッグ
http://www.flickr.com/photos/franzlife/820495364/
4.
JavaScriptのデバッグは意外と大変 ✤
積極的にはエラーを出さない ✤ 変数を宣言なしに使えて、しかもそれがグローバル変数になるなど、JavaScriptは 思わぬところにバグが潜みやすい言語といえます。読み取り専用のプロパティに代 入してもエラーにならない(代入がスルーされるだけ)ほどです。なんとなく動いて しまったコードが後々にバグとなって帰ってきます。 ✤ テストの自動実行が難しい ✤ デバッグの難しさとは少し違いますが、テストを自動化し難いため、バグが再発し やすい問題もあります。 ※JavaScriptのデバッグTIPS(http://d.hatena.ne.jp/os0x/20101207/1291736377) より引用
5.
Q.JavaScriptでの開 発をどのように乗り こなすか? A.JavaScriptの構文エラー を避ける工夫をまずはしま しょう
http://www.flickr.com/photos/ stevecorey/4131860845/
6.
Titanium Studioで構文エラーをさけるため のTIPS:目視 ✤
構文ミスがある箇所はある程度その場 で把握できるので入力中も意識しま しょう こういう印がついていたらその行周辺で構文エラー ✤ 該当行で赤い印が付く があることを示してます。(この例はfor文がまだ ✤ 制御文などが通常のテキストと同じ 入力中のため結果として構文上エラーとみなされて います 色になっている ※制御文や変数には色がついて他と 区別しやすくなっています。 ✤ 初歩的だけどこれはアナログすぎる if 文のelse をタイプミスしているためelsの色が通 常の文字と同じ色で表示されている
7.
Titanium Studioで構文エラーをさけるため のTIPS:コード補完 ✤
Titanium Studioのような統合開発環境 には通常コード補完機能があるので積 極的に利用しましょう ✤ 例えば Tiの後のドット(.) を入力 してしばらくすると、入力候補が自 動的にリストアップされます •矢印キーの上下で候補 ✤ 入力候補は矢印キーの上下で選ぶこ を選ぶことができます •入力途中にこのように とが出来、Enterキーにて確定しま 該当するAPIの説明、引 •選択したものはEnter 数なども表示されます す キーにて確定できます
8.
Titanium Studioで構文エラーをさけるため のTIPS:Snippet機能の有効活用 ✤
Snippetとは? ✤ 「切れ端」「断片」という意味。プログラミングの開発環境では、定型文を補完す る機能のことを意味します ✤ Snippetの何がうれしいのか ✤ あらかじめ用意しておいた定型文をコピペするのとは違い、変更したい箇所をTab キーなどで順次移動しながら入力できるので使いこなせると大変便利 ✤ Titanium Studioもですが、高機能なテキストエディタにはたいていこの機能はあ るので、「日頃使っているテキストエディタの名前 + snippet」でググると有益な 情報が見つかると思います ✤ Snippet使ってみましょう ✤ 今回以下情報を参考にしてます http://d.hatena.ne.jp/donayama/20110820/tistudio_bundle_snippet
9.
Snippetを使ってみよう① ✤
TitaniumStudioを起動した後、 File→New→Titanium Mobile Projectと 進みます ✤ 右記画面が表示されますので今回は以下入 力してプロジェクトの設定を行います ✤ Project name: 20120118TiStudy ✤ App Id: jp.co.pasonatech.20120118TiStudy ✤ 補足)今回はローカルでの作業のため App Idを仮にこのようにしましたが AppStoreで配布する場合、他のアプリ ケーションと重複することは出来ませ ん。
10.
Snippetを使ってみよう② ✤
プロジェクトの設定が完了したら Commands→JavaScript→Edit this bundleと進みます ✤ しばらくするとApp Explorer上に JavaScriptというプロジェクトが追加され 自動的にいくつかのファイルが出来上がり ます ✤ 今回のSnippetに関連するのは snippets.rbとbundle.rbという2つの Rubyで書かれたファイルです
11.
Snippetを使ってみよう③ ✤
snippets.rbをダブルクリックして開くとす でにいくつか定義されたsnippetが存在し てます。 ✤ コードの見方 ✤ snippet... end までが1つの処理のまと まりになってます。 ✤ snippetの後のダブルクオーテーション で囲まれているのはその処理の説明文 章です ✤ s.triggerの部分がsnippetを呼び出すた めのコマンドになります ✤ s.expansionが実際に展開されるソース コードのsnippet(=断片)になります
12.
Snippetを使ってみよう④ ✤
ためしにapp.jsで以下のようにタイプしま しょう 1. forと入力 2. 入力後、タブ(tab)キーを押す 3. 入力すると、for文が展開されます。 for文のsnippetは2つ設定されており、 矢印キーの上下でどちらかが選択出来 ますがひとまず上の方を選択した状態 でEnterキーを押します 4. 変更する箇所に自動的にカーソルが移 動してますので、試しに「container」 と入力してみましょう
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行の後にこの });" 内容を追記します end core_menu.menu "Titanium Mobile" do |control_menu| control_menu.command "Create Titanium Mobile UI Widget" bundle.rbの48行目の後にこの end 内容を追記します
14.
見通しの良いソースコード
http://www.flickr.com/photos/chrissuderman/904382775/
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.
ソースコードの見通しを良くする ヒント ユーザーインターフェイス(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' }; //以下省略
17.
切り出し方は色々あ ります CommonJS形式のモジュール使ったやり 方になれると色々な場面で応用が効くの で現時点ではこれが個人的にオススメ!
http://www.flickr.com/photos/bunchofpants/36924662/
18.
UI関連の情報を別ファイルに切り出す① ✤
先ほど作った20120118TiStudyプロジェ クトをそのまま流用して作業を進めます ✤ App Explorer上のResourcesフォルダを Optionキーを押しながらクリックして、 New→Fileと選択します ✤ ファイル名: styles.js と入力してFinishボタンをクリックします
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.
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.
Coffee Break!
http://www.flickr.com/photos/windsordi/3273502072/
22.
OAuth認証
http://www.flickr.com/photos/tejedoro_de_luz/3177911908/
23.
twitter連携するアプリ利用時によく見る画面
24.
OAuthとは?
service ✤ あらかじめ信頼関係を構築したサービス間でユーザ providers の同意のもとにセキュアにユーザの権限を受け渡し する「認可情報の委譲」のための仕様 ✤ OAuthに対応したサービスでは,ユーザが外部サー ビスにパスワードを教えることなく,認可情報の委 譲が可能です。また認可情報の適用範囲を指定した り,有効期限を設定することができるため,ユーザ が外部サービスにすべての権限を渡すこと無く,自 分が利用したいサービスに最低限必要な権限のみを 委譲することができます。 users ※http://gihyo.jp/dev/feature/01/oauth/0001よ り引用しました consumers ( Webサービ スを利用する 開発者)
25.
認証と認可の違い ✤
認証 認証 認証サーバ ✤ 英語ではAuthentication ✤ 平たく言えば本人確認のこと 1.本人確認 1.本人確認 ✤ 認可 ✤ 英語ではAuthorization ✤ 何らかのサービス/リソースへのアクセスに 2.認証結果 対してアクセスする権限を与えること Aさん Bさん Aさん:閲覧出来る Bさん:閲覧出来ない 3.閲覧許可 3.閲覧不許可 認可 サービス/リソースなど http://www.itmedia.co.jp/enterprise/articles/0804/22/news044.htmlのサイトをベースに作図
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.
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.
twitterのアプリケーション登録申請② ✤
アプリケーション登録申請が成功する と右記のような画面が表示されます ✤ Consumer keyとConsumer secretは 後で利用する情報になります ✤ twitter側ではこの情報を信頼して 認可情報の委譲をしているためとて も大切な情報になります ✤ 取得したConsumer keyと Consumer secretは大切に管理し ましょう ✤ ※今回はtwitterにログイン&タイムラ インを表示するだけの機能を実装する ためApplicationのPermissonはRead のままにしてます
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.
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.
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.
参考情報:ui.jsの処理イメージ
配列 rows tweet内容 tweet内容 createTableView(array) tweet内容 createTweetRow(json) row row row
Télécharger maintenant