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, Worl...
環境
・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 パス/s...
ビルドパスの設定
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....
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端末です’);
}...
API
// カメラを起動する
Ti.Media.showCamera(options)
// ギャラリーから選択する
Ti.Media.openPhotoGallery(options)

例)options
● mediaTypes : S...
API実装例
function selectCamera(function(e) {
var options = {
mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO],
saveToPhotoGallery: tru...
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...
ACS料金
ストレージ:5USD/20GB
プッシュ通知は台数設定
160USD/5001〜10000台
320USD/10001〜25000台
480USD/25001〜50000台
640USD/50001〜75000台
800USD/75...
感想
・コンパイルにすごく時間がかかるので、あまりデバッグして開発するのには
向かない気がします。
・JSだけで書かず、MVCモデルのAlloyを使えば、規模が大きくなっても対応
できそう。
Upcoming SlideShare
Loading in …5
×

TitaniumMobile Alloyの紹介

801 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
801
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TitaniumMobile Alloyの紹介

  1. 1. Titanium Mobile install | アプリ紹介 O.Shinnosuke
  2. 2. アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明 (アプリ、簡単なAPI紹介など) 5.push通知 時間:18:00~18:45
  3. 3. アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明 5.push通知
  4. 4. 特徴 JSでTitanium APIを呼び出して実装 ⇒ iPhone , Android 両方のアプリを作れる ※その他媒体にも対応
  5. 5. アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明 5.push通知
  6. 6. Alloy TitaniumMobileの公式MVCフレームワーク
  7. 7. アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明 5.push通知
  8. 8. Hello, World function doClick(e) { alert($.label.text); } <Alloy> <Window> <Label id=”label” onClick=”doClick”>Hello, World</Label> </Window> </Alloy>
  9. 9. 環境 ・Mac PC ・XCode ・TitaniumMobile Studio ・Android SDK
  10. 10. Titanium Studioをインストール http://www.appcelerator.com/titanium/ 1.アカウント登録する 2.Titanium Studioダウンロード
  11. 11. Android SDK サイト http://developer.android.com/sdk/index. html?utm_source=weibolife
  12. 12. install SDK Managerを起動して以下をインストール ・Android SDK Platform tools ・Android 4.3 画像を今回使うため、SDcardも作っておきます。 $ mksdcard 256MB パス/sd.img ➡AVDでSDカードのパスをセットしておく
  13. 13. ビルドパスの設定 Titanium Mobileの環境設定から、Android SDKのビルドパスを設定する Debug/Runの項目で、AVDを作成
  14. 14. Alloyプロジェクト作成 New⇒ Mobile App Project⇒ Default Alloy Project 名前を決めて決定すれば、プロジェクトが自動生成される
  15. 15. 実行 Hello, world
  16. 16. Alloyの中身 app -assets -controllers -models -styles -views -alloy.js -config.json -README plugins -ti.alloy -hooks -plugin.py
  17. 17. assets 端末ごとにわけて、画像ファイルを入れておく
  18. 18. controllers 実際にアプリを動かしていく処理をJSで書いて置いていく ● Alloyでは、index.jsが最初に呼ばれる ● viewsの同じ名前のxmlファイルをコントロール
  19. 19. models 今回は使っていない。 モデルをJSで書いて置いておく
  20. 20. styles cssのような役割で、拡張子は’.tss’とする ● viewsと同じ名前のxmlファイルに装飾をかける
  21. 21. views xmlファイルで作り置いておく ※ファイル名が同じものに対応する
  22. 22. controllers, styles, views 3者は、全て同じ名前で対応している ⇒Titanium Studioでjsファイルを作るとtssファイルとxmlファイルは自動生成さ れる tssファイルがxmlファイルに装飾を加え、jsファイルがそれをコントロールする
  23. 23. alloy.js 今回は使っていない。 index.jsよりも前に呼び出され、アプリケーション全体で使用する処理を記述 する
  24. 24. config.json 共通で定義したいものを記述 パスやURLなど
  25. 25. plugin.py エミュレータ立ち上げの時にAlloyプロジェクトをコンパイル
  26. 26. アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明 5.push通知
  27. 27. アプリについて
  28. 28. MoniCBApp 1.初期画面 -画像選択(カメラ、ギャラリーから選択) 2.サイト
  29. 29. Android/iPhoneの区分け function doOpen() { if (OS_ANDROID) { alert(‘Android端末です’); } else if (OS_IOS) { alert(‘iPhone端末です’); } else if (別のOS) { } } 端末毎にif文で分岐してやる必要があります。
  30. 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. 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. 32. iPhone ・Todoアプリ 端末ごとに分岐していないver.
  33. 33. ショートカットキー 拡大・縮小: command + 1 or 2 or 3 HOME: command + shift + h 起動中アプリ: command + shift + h + h
  34. 34. アジェンダ 1.特徴 2.Alloy 3.Hello, Worldまで 4.簡単なアプリ説明 5.push通知
  35. 35. push通知 1.ACS(Appcelerator Cloud Services) ➡ios/android両方に対して、サーバからの通知を統一できる ➡BaaS backend as a service 呼び出して使う require(‘ti.cloud’) 2.実際にpush通知を実装
  36. 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. 37. 感想 ・コンパイルにすごく時間がかかるので、あまりデバッグして開発するのには 向かない気がします。 ・JSだけで書かず、MVCモデルのAlloyを使えば、規模が大きくなっても対応 できそう。

×