●アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明（アプリ、簡単なAPI紹介など） 5.push通知

1. Titanium Mobile
install | アプリ紹介
O.Shinnosuke

2. アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
（アプリ、簡単なAPI紹介など）
5.push通知
時間：18：00～18：45

3. アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知

4. 特徴
JSでTitanium APIを呼び出して実装
⇒ iPhone , Android 両方のアプリを作れる
※その他媒体にも対応

5. アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知

6. Alloy
TitaniumMobileの公式MVCフレームワーク

7. アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知

8. Hello, World
function doClick(e) {
alert($.label.text);
}
<Alloy>
<Window>
<Label id=”label” onClick=”doClick”>Hello, World</Label>
</Window>
</Alloy>

9. 環境
・Mac PC
・XCode
・TitaniumMobile Studio
・Android SDK

10. Titanium Studioをインストール
http://www.appcelerator.com/titanium/
1.アカウント登録する
2.Titanium Studioダウンロード

11. Android SDK サイト
http://developer.android.com/sdk/index.
html?utm_source=weibolife

12. install
SDK Managerを起動して以下をインストール
・Android SDK Platform tools
・Android 4.3
画像を今回使うため、SDcardも作っておきます。
$ mksdcard 256MB パス/sd.img
➡AVDでSDカードのパスをセットしておく

13. ビルドパスの設定
Titanium Mobileの環境設定から、Android SDKのビルドパスを設定する
Debug/Runの項目で、AVDを作成

14. Alloyプロジェクト作成
New⇒
Mobile App Project⇒
Default Alloy Project
名前を決めて決定すれば、プロジェクトが自動生成される

15. 実行
Hello, world

16. Alloyの中身
app
-assets
-controllers
-models
-styles
-views
-alloy.js
-config.json
-README
plugins
-ti.alloy
-hooks
-plugin.py

17. assets
端末ごとにわけて、画像ファイルを入れておく

18. controllers
実際にアプリを動かしていく処理をJSで書いて置いていく
● Alloyでは、index.jsが最初に呼ばれる
● viewsの同じ名前のxmlファイルをコントロール

19. models
今回は使っていない。
モデルをJSで書いて置いておく

20. styles
cssのような役割で、拡張子は’.tss’とする
● viewsと同じ名前のxmlファイルに装飾をかける

21. views
xmlファイルで作り置いておく
※ファイル名が同じものに対応する

22. controllers, styles, views
3者は、全て同じ名前で対応している
⇒Titanium Studioでjsファイルを作るとtssファイルとxmlファイルは自動生成さ
れる
tssファイルがxmlファイルに装飾を加え、jsファイルがそれをコントロールする

23. alloy.js
今回は使っていない。
index.jsよりも前に呼び出され、アプリケーション全体で使用する処理を記述
する

24. config.json
共通で定義したいものを記述
パスやURLなど

25. plugin.py
エミュレータ立ち上げの時にAlloyプロジェクトをコンパイル

26. アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知

27. アプリについて

28. MoniCBApp
1.初期画面
-画像選択（カメラ、ギャラリーから選択）
2.サイト

29. Android/iPhoneの区分け
function doOpen() {
if (OS_ANDROID) {
alert(‘Android端末です’);
} else if (OS_IOS) {
alert(‘iPhone端末です’);
} else if (別のOS) {
}
}
端末毎にif文で分岐してやる必要があります。

30. API
// カメラを起動する
Ti.Media.showCamera(options)
// ギャラリーから選択する
Ti.Media.openPhotoGallery(options)
例）options
● mediaTypes : String[]
● saveToPhotoGallery : Boolean
● cancel : Callback<FailureResponse>
● success : Callback<CameraMediaItemType>
● error : Callback<FailureResponse>

31. API実装例
function selectCamera(function(e) {
var options = {
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
saveToPhotoGallery: true,
success: function(event) {
$.sample.image = event.media;
// 成功時は画像に写真データセット
},
cancel: function(cancel) {
// キャンセル時は何もしない
},
error: function(error) {
alert(‘エラー’);
}
};
});
例）参照
// カメラ起動
Ti.Media.showCamera(options);
// ギャラリー選択
Ti.Media.openPhotoGallery(options);

32. iPhone
・Todoアプリ
端末ごとに分岐していないver.

33. ショートカットキー
拡大・縮小: command + 1 or 2 or 3
HOME: command + shift + h
起動中アプリ: command + shift + h + h

34. アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知

35. push通知
1.ACS（Appcelerator Cloud Services）
➡ios/android両方に対して、サーバからの通知を統一できる
➡BaaS backend as a service
呼び出して使う
require(‘ti.cloud’)
2.実際にpush通知を実装

36. ACS料金
ストレージ：5USD/20GB
プッシュ通知は台数設定
160USD/5001〜10000台
320USD/10001〜25000台
480USD/25001〜50000台
640USD/50001〜75000台
800USD/75001〜100000台
100000台以上：0.008USD/1台
メール：10USD/10万通

37. 感想
・コンパイルにすごく時間がかかるので、あまりデバッグして開発するのには
向かない気がします。
・JSだけで書かず、MVCモデルのAlloyを使えば、規模が大きくなっても対応
できそう。