狠狠撸

狠狠撸Share a Scribd company logo
Titanium Mobile
install | アプリ紹介
O.Shinnosuke
アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
(アプリ、簡単なAPI紹介など)
5.push通知

時間:18:00~18:45
アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知
特徴
JSでTitanium APIを呼び出して実装
? iPhone , Android 両方のアプリを作れる
※その他媒体にも対応
アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知
Alloy
TitaniumMobileの公式MVCフレームワーク
アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知
Hello, World
function doClick(e) {
alert($.label.text);
}
<Alloy>
<Window>
<Label id=”label” onClick=”doClick”>Hello, World</Label>
</Window>
</Alloy>
環境
?Mac PC
?XCode
?TitaniumMobile Studio
?Android SDK
Titanium Studioをインストール
http://www.appcelerator.com/titanium/
1.アカウント登録する
2.Titanium Studioダウンロード
Android SDK サイト
http://developer.android.com/sdk/index.
html?utm_source=weibolife
install
SDK Managerを起動して以下をインストール
?Android SDK Platform tools
?Android 4.3
画像を今回使うため、SDcardも作っておきます。
$ mksdcard 256MB パス/sd.img
?AVDでSDカードのパスをセットしておく
ビルドパスの設定
Titanium Mobileの環境設定から、Android SDKのビルドパスを設定する
Debug/Runの項目で、AVDを作成
Alloyプロジェクト作成
New?
Mobile App Project?
Default Alloy Project
名前を決めて決定すれば、プロジェクトが自動生成される
実行
Hello, world
Alloyの中身
app
-assets
-controllers
-models
-styles
-views
-alloy.js
-config.json
-README

plugins
-ti.alloy
-hooks
-plugin.py
assets
端末ごとにわけて、画像ファイルを入れておく
controllers
実際にアプリを動かしていく処理をJSで書いて置いていく
● Alloyでは、index.jsが最初に呼ばれる
● viewsの同じ名前のxmlファイルをコントロール
models
今回は使っていない。
モデルをJSで書いて置いておく
styles
cssのような役割で、拡張子は’.tss’とする
● viewsと同じ名前のxmlファイルに装飾をかける
views
xmlファイルで作り置いておく
※ファイル名が同じものに対応する
controllers, styles, views
3者は、全て同じ名前で対応している
?Titanium Studioでjsファイルを作るとtssファイルとxmlファイルは自動生成さ
れる
tssファイルがxmlファイルに装飾を加え、jsファイルがそれをコントロールする
alloy.js
今回は使っていない。
index.jsよりも前に呼び出され、アプリケーション全体で使用する処理を記述
する
config.json
共通で定義したいものを記述
パスやURLなど
plugin.py
エミュレータ立ち上げの時にAlloyプロジェクトをコンパイル
アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知
アプリについて
MoniCBApp
1.初期画面
-画像選択(カメラ、ギャラリーから選択)
2.サイト
Android/iPhoneの区分け
function doOpen() {
if (OS_ANDROID) {
alert(‘Android端末です’);
} else if (OS_IOS) {
alert(‘iPhone端末です’);
} else if (別のOS) {
}
}
端末毎にif文で分岐してやる必要があります。
API
// カメラを起動する
Ti.Media.showCamera(options)
// ギャラリーから選択する
Ti.Media.openPhotoGallery(options)

例)options
● mediaTypes : String[]
● saveToPhotoGallery : Boolean
● cancel : Callback<FailureResponse>
● success : Callback<CameraMediaItemType>
● error : Callback<FailureResponse>
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);
iPhone
?Todoアプリ
端末ごとに分岐していないver.
ショートカットキー
拡大?縮小: command + 1 or 2 or 3
HOME: command + shift + h
起動中アプリ: command + shift + h + h
アジェンダ
1.特徴
2.Alloy
3.Hello, Worldまで
4.簡単なアプリ説明
5.push通知
push通知
1.ACS(Appcelerator Cloud Services)
?ios/android両方に対して、サーバからの通知を統一できる
?BaaS backend as a service
呼び出して使う
require(‘ti.cloud’)

2.実際にpush通知を実装
ACS料金
ストレージ:5USD/20GB
プッシュ通知は台数設定
160USD/5001?10000台
320USD/10001?25000台
480USD/25001?50000台
640USD/50001?75000台
800USD/75001?100000台
100000台以上:0.008USD/1台
メール:10USD/10万通
感想
?コンパイルにすごく時間がかかるので、あまりデバッグして開発するのには
向かない気がします。
?JSだけで書かず、MVCモデルのAlloyを使えば、規模が大きくなっても対応
できそう。

More Related Content

罢颈迟补苍颈耻尘惭辞产颈濒别 础濒濒辞测の绍介