2012-10-31

1. Titaniumアプリを作ってみて
（ゲームじゃなくてゴメンナサイ）
!前田 洋平
2012/10/31@techbuzz
12年10月30日火曜日

2. Agenda
Titaniumについて
開発事例
開発環境
Titanium x Android = 脳トレ？
Titanium♡iOSじゃないところ
まとめ
12年10月30日火曜日

3. 自己紹介
前田 洋平
Excite Japan スマートフォン推進室
（明日でちょうど1年！）
Facebook: http://facebook.com/yohei.maeda.11
Twitter: @ArubaitoShain
言語
Java, PHP, JS, CoffeeScript, (Objective-C)
アプリ
スマホブックマーク(Android/iOS)/Stella(iOS)/LEC for au(Android)
最近のはまりもの
LOST（洋ドラ）、RAIZIN
12年10月30日火曜日

4. 宣伝
エキサイトエンジニアブログ始めました！
http://blog.excite.co.jp/spdev
エキサイト美人デザイナーブログ
http://blog.excite.co.jp/spdesign
弊社アプリはこちら
http://apps.excite.co.jp/
日本Androidの会秋葉原支部アド部
https://www.facebook.com/groups/174233412687542/
12年10月30日火曜日

5. Titaniumについて
12年10月30日火曜日

6. 概要
Appcelerator 社が作ってます
http://www.appcelerator.com/
最新版は2.1.3(2012/10/28現在)
基本無料です。開発実績豊富です。
開発言語はJavaScript iOS
Android
iOSとの相性はバッチシ！！
12年10月30日火曜日

7. 拡張性
Module
Java, Objective-Cで作成し、Titaniumに組み込む
ことで、標準で使用出来る以外の機能を実装出来る。
設定ファイル
自作した設定ファイル(info.plist, Manifest.xml)
を所定の場所に置くことでビルド時に優先的に選択し、
設定 (URL Scheme) を追加出来る。
12年10月30日火曜日

8. 実装方法
1Window 1File
それぞれはrequire(CommonJS)により読み込む
UIのStyleは別ファイル管理
JSS(JavaScriptStyle)があるが、使いづらいのでオブ
ジェクトとして定義する
グローバルイベント
Window間の値の受け渡しなどはグローバルイベントを発生
させて行う。
12年10月30日火曜日

9. 開発事例
12年10月30日火曜日

10. 沖縄で使えるクーポン
12年10月30日火曜日

11. 屋久島・奄美諸島で使えるクーポン
12年10月30日火曜日

12. AppBankさんにも紹介いただきました！
http://www.appbank.net/2012/08/12/
iphone-application/450291.php
屋久島・奄美諸島で使えるクーポン: ダイビングや
登山、レンタカーまで！無料
12年10月30日火曜日

13. その他情報
開発期間：学習期間含め約１.5ヶ月
開発コストは低め
もっと色々（MVCとか）取り入れて見たかったけ
ど、パートナーとの関係もあり、期日を優先。
12年10月30日火曜日

14. 開発環境
12年10月30日火曜日

15. 開発環境
Titanium Studio
Eclipseを基として作られたTitanium用IDE
CoffeeScript
CoffeeScriptはプログラミング言語のひとつである。コードは
JavaScriptのコードに変換される。(by wikipedia)
underscore.js
JavaScriptのユーティリティライブラリーだよ
Guard
ソースコードを監視し、変更があった時点で特定の処理を走らせてくれ
る。
12年10月30日火曜日

16. Titanium Studio
Titaniumでアプリを作るときのIDE
Androidのリリース用APKファイルの作成
iOSのAdHoc作成、submitのサポート
12年10月30日火曜日

17. underscore.js
http://underscorejs.org/
JavaScript用ユーティリティライブラリー
配列、関数、オブジェクトの扱いちょい楽に
個人的にはロゴが好み。
メソッドチェインを実現できる。
(_.chain(arry)
.sort(sortfunc(obj))
.value())
12年10月30日火曜日

18. CoffeeScript
http://coffeescript.org/
JavaScriptに対してコードの量が約1/3になる
コンパイルし、JSに変換される
書いてるだけで、ナウい感じに
12年10月30日火曜日

19. guard
ruby製
ソースコードを監視し、変更があった時点で特定の処理
を走らせてくれる。
coffeescriptの自動コンパイル環境として使用した。
用途
テスト、コンパイル etc...
12年10月30日火曜日

20. Prj
guard監視
coffee
Database.coffee 保存 コンパイル
ui
Window1.coffee
Resource
Database.js
ui JSに
Window1.js
同階層で作られる
12年10月30日火曜日

21. Titanium x Android = 脳トレ?
12年10月30日火曜日

22. 脳トレってwwww
出典:http://www.nintendo.co.jp/3ds/asrj/top/img/top_img_professor.png
12年10月30日火曜日

23. iOSでは実装した通りの動きをすることが多い
が、Androidはところどころトラップがある！
ハマった事例をいくつか、、、
解決にはちょっとしたひねりが必要なものも
12年10月30日火曜日

24. 問題１
今選択中のタブオブジェクトが取れない
12年10月30日火曜日

25. コレ
12年10月30日火曜日

26. 問題1 内容
現在開いているタブオブジェクトを取得してゴニ
ョゴニョ使用したい。TitaniumのAPIで用意さ
れているcurrentTabというプロパティがある
が、取得できない。むむっ
12年10月30日火曜日

27. 問題1 解答
自前でグローバル変数として設定する。
12年10月30日火曜日

28. 問題1 実装例
focusイベント取得
var tabGroup = Ti.UI.createTabGroup();
tabGroup.addEventListener('focus', function(e) {
tabGroup._activeTab = e.tab;
tabGroup._activeTabIndex = e.index;
if (tabGroup._activeTabIndex === -1) {
return;
}
Ti.API._activeTab = tabGroup._activeTab;
});
グローバルとして設定
12年10月30日火曜日

29. 問題2
Tab選択が変更された時の
Eventが取れない
12年10月30日火曜日

30. 問題2 内容1
通常、Tabで選択された場合、各Windowの
Focusイベントを取ればいい。
だが、タブがない画面（次ページ参照）に移動し
再度タブ画面に戻った場合、Focusイベントが取
得できない。
12年10月30日火曜日

31. 問題2 内容2
一覧画面 詳細画面 クリップ画面
(tab有) (tab無) (tab無)
12年10月30日火曜日

32. 問題2 解答
TabのFocusが変わった場合、その
Tab(Window)に対してグローバルイベントを発
生させて上げる！
12年10月30日火曜日

33. 問題2 実装例
var clipWindow = Ti.UI.createWindow();
window作成
clipWindow.tag = 'clip';
tag設定
Ti.App.addEventListener('clip:load', function(e) {
loadData();
});
グローバル
var tabGroup = Ti.UI.createTabGroup();
イベント付加
tabGroup.addEventListener('focus', function(e) {
var win;
tabGroup._activeTab = e.tab;
tabGroup._activeTabIndex = e.index;
if (tabGroup._activeTabIndex === -1) {
グローバル
return;
}
Ti.API._activeTab = tabGroup._activeTab;
イベント発生
if ( _u.isAndroid()) {
Ti.App.fireEvent(tabGroup._activeTab.tag + ":load");
win = self._activeTab.window;
}
});
12年10月30日火曜日

34. 問題3
TableViewSectionをカスタムして使うと
表示順がバグる
12年10月30日火曜日

35. 問題3 内容1
iOSではよくある実装のSection。
TitaniumのAPIとしてAndroidもサポートされ
ている。
12年10月30日火曜日

36. 問題3 内容2
Androidのデフォルトの
Sectionだと、ダサいし
見にくい！
ちょっとカスタムする。
(カスタムするにもちょっ
とゴニョゴニョする必要が
あります。今回は端折り
ます)
12年10月30日火曜日

37. 問題3 内容3
入れ替ってる！
正(section不使用) 誤(section使用)
12年10月30日火曜日

38. 問題3 解答
Sectionを使うと、バグが出るから、Section
に似せたRowを使えばいいんじゃね。
てか、そもそもAndroidにデフォルトで
Sectionって考え方無いし。
12年10月30日火曜日

39. 問題3 解答
SectionぽいRow
Row
Row
SectionぽいRow
Row
Row
12年10月30日火曜日

40. Titanium♡iOSじゃないところ
12年10月30日火曜日

41. Titanium 2.1.0以上でScrollViewが
ちょっと残念に
ScrollViewが横にもス
ライドするようになっ
た。。。
（2.0.x系では大丈夫だ
った）
12年10月30日火曜日

42. XcodeとTitaniumStudioの関係
Xcodeをversion upすると、
TitaniumStudioでAdHocの作成、アプリ
Submitができなくなる場合があります。
Xcode最新版にしてみて、できなかったらXcode
のバージョンを戻して再度実行しましょう。
12年10月30日火曜日

43. まとめ
12年10月30日火曜日

44. Titanium導入する？しない？
12年10月30日火曜日

45. Java
12年10月30日火曜日

46. Objective-C
12年10月30日火曜日

47. JavaScript
12年10月30日火曜日

48. Android/iOS両
OS対応だ！
12年10月30日火曜日

49. Android
&&
脳トレ♡
12年10月30日火曜日

50. Android
&&
忍耐力あんぞ！
12年10月30日火曜日

51. まとめ（全体編）
基本使用料無料！
TitaniumStudio Eclipseライクで使いやすい
オブジェクトの型とか無いし
coffee美味しいし
開発コスト低い！
Pushもできるよ！（まだやってないけどw
12年10月30日火曜日

52. まとめ（対iOS編）
iOSアプリは高クオリティで出来るよ！
Xcodeのversionとか気をつけて！
不意にあげちゃダメ絶対！ｷﾘｯ
なんかScrollView変。実装悪いのかなぁ
12年10月30日火曜日

53. まとめ(対Android編)
Android対応でネイティブとトントンぐらいの時間がかかる可能性
がある。
レイアウトがっつりやるやら、draw9patchとかネイティブ用スキ
ルがいる。画像ボケるの覚悟。
（ネイティブでさえレイアウトつら(ry
脳トレになっていい
レイアウト凝らないなら全然OK！
必須スキル：忍耐力
12年10月30日火曜日

54. 今後的な
moduleには夢があって、今後どんどん無料のも
のがGitHub等で増えて来てくれるとどんどん
Titanium周りが熱くなるのでは！
ノウハウ貯めるためUtilsとかCommonUIとか自
分でLib作ってAndroidとiOSの差を埋めよー
社内ツールならTitaniumで十分
12年10月30日火曜日

55. ご清聴
ありがとう
ございました
12年10月30日火曜日