TitaniumMobile　Alloyの紹介

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 両方のアプリを作れる
※その他媒体にも対応

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

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
名前を決めて決定すれば、プロジェクトが自動生成される

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プロジェクトをコンパイル

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

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を使えば、規模が大きくなっても対応
できそう。

TitaniumMobile　Alloyの紹介

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a TitaniumMobile　Alloyの紹介

Semelhante a TitaniumMobile　Alloyの紹介 (20)