SlideShare a Scribd company logo
1 of 24
それでも
TitaniumでiPhone,Android
クロスプラットフォームを諦め
ない
2014.03.19
日向強 @coffeegyunyu
 このスライドはCoffeeScriptを多用してます。
CoffeeScriptアレルギーの人はご注意ください。
 ここに出ているのはあくまで個人の用例ですので、
「100%こうしたほうがいいよ」というものでは
ないのであしからず。
Caution
自己紹介
日向強
株式会社アールラーニング
開発事業部
モバイルのプロジェクト
(iOS,Android)を主にやってます
Titaniumでつくったも
の
Font Stamp
文字とフォントを組み合わせて各種SNSに
画像を送信するアプリ
ダウンロード数は33,000
Titanium3.2.0 使用
https://play.google.com/store/apps/details?id
=jp.coe.fontstamp
https://itunes.apple.com/jp/app/fontosutanp
u-wen-zisutanpuga/id687721425?mt=8
Titaniumでつくったも
の
coe
声を使ったソーシャルレコーディングアプリ
声を録音し、現在位置に声を置いておくことで、
他の人が声を拾って聞くことができるアプリ
現在3000件ほど声が世界中においてあります
Titanium 3.2.0使用
https://itunes.apple.com/jp/app/coe-
shengdetsunagaruapuri/id367895344?mt=8
https://play.google.com/store/apps/details?i
d=jp.coe.coe
Titaniumの悪循環
Titaniumの悪循環
Titaniumで両方作
れるらしいよ
コストダウン
できるのな
ら・・・
iOSでは動かない
Androidでもこの機能欲しい
if(OS_IOS)
If(OS_ANDROID)
もっと
もっと
iOS、Androidの分岐がいたる
ところに入ったメンテしづら
いスパゲッティの出来上がり
各所各所でOSごとの分
岐を設けます
一時的に要件は満たさ
れます
プロジェクト作成編
 新規プロジェクト作成時は、絶対にTitanium SDKを
3.2.1にしよう
プロジェクト作成編
なんで?
Titanium 3.1.3 Android Titanium 3.2.1 Android
 Titanium SDK 3.2.1だとデフォルトでAndroidの
UIのサイズが最適化されるよ(<property
name=“ti.ui.defaultunit”
type=“string”>dp</property>)
 Titanium SDK 3.2.1だと、Androidのデザインも
かっちょよくなるよ(Theme.holo)
なんで?
 新規プロジェクトの
選択について
画面遷移が発生する
アプリだとわかって
いる場合、
タブを使わなくても
Two-tabbed Alloy
Applicationのほうが
いい
プロジェクト作成編
 画面遷移の処理方法をiOS,Androidで統一できるから
(iOSのNavigationWindowとか意識しなくていい)
なんで?
#グローバルに現在のタブを保持
$.index.addEventListener "open", (e) ->
Alloy.Globals.currentTab = e.source.activeTab if e?.source?.activeTab?
$.index.addEventListener "focus", (e) ->
Alloy.Globals.currentTab = e.tab if e?.tab?
clickMe = (e)->
nextwindow = Ti.UI.createWindow()
Alloy.Globals.currentTab.open nextwindow #ここで画面遷移
$.index.open()
app/controller/index.coffee
実際に画面遷移すると
iPhone
(前に戻るボタンが自動付与)
Android
(Backキーで戻れる)
Controller編
 Android,iOSで明確に異なる記述で処理をする場合、
CoffeeScriptのクラスの機能を使用したほうが見通しや
すい
Controller編
Controller編
#共通機能クラス部分
class HogeWindowInplBase
constructor:->
hello:(e)->
alert "hello"
thankyou:->
alert "Thank you"
#OSによって使用する継承クラスを決定
IMPL = if OS_IOS then class HogeWindowInplIos extends HogeWindowInplBase
hello:(e)->
alert "hello iOS"
else if OS_ANDROID then class HogeWindowInplAndroid extends HogeWindowInplBase
hello:(e)->
alert "hello Android"
#コントローラ実装部
impl = new IMPL()
clickHello = (e)->
impl.hello() #ここはOSによって異なる
clickThankyou = (e)->
impl.thankyou() #ここはOS共通
app/controllers/HogeWindow.coffee
Controller編
iOS Android
UI編
 まずは、どのOSでも使える部品のみを使って画面
を組み立てる ドキュメントとにらめっこしましょ
う
 その上で、OS個別の部品を使いたくなったら、
app/view/{それぞれのOS}/{ファイル名}.xmlを作成す
る
UI編
UI編
ファイル構成例
└── views
├── UIWindow.xml ←OS独自のビューが設定されていない場合
├── index.xml
└── ios
└── UIWindow.xml ←iOS独自のビュー
UI編
iOS/UIWindow.xml UIWindow.xml
<Alloy>
<Window>
<View class="container">
<Button >hello</Button>
<Button >thankyou</Button>
</View>
</Window>
</Alloy>
<Alloy>
<Window>
<Toolbar class="container">
<Items>
<Button >hello</Button>
<Button >thankyou</Button>
</Items>
</Toolbar>
</Window>
</Alloy>
※iOSなので、せっかくだからToolbarを使いたい!
UI編
iOS Andoird
現在アールラーニング
では技術者を募集して
います
TitaniumやAndroid,iOSに限らず、
Java,Ruby,インフラetc…
技術に自信のある方は、お気軽に
t-hyuga@r-learning.co.jpまで!

More Related Content

Similar to Titanium mokumoku 20140319

Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
 
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
Yoshinori Kobayashi
 
Linked in勉強会プレゼン
Linked in勉強会プレゼンLinked in勉強会プレゼン
Linked in勉強会プレゼン
Tatsunori Hirota
 
Jenkinsを使おうよ
Jenkinsを使おうよJenkinsを使おうよ
Jenkinsを使おうよ
Yohei Oda
 
Titanium勉強会
Titanium勉強会Titanium勉強会
Titanium勉強会
Yusuke Kita
 
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめiPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
Hiramatsu Ryosuke
 

Similar to Titanium mokumoku 20140319 (20)

[社内向け]Titanium勉強会
[社内向け]Titanium勉強会[社内向け]Titanium勉強会
[社内向け]Titanium勉強会
 
tvOSネイティブアプリを作る
tvOSネイティブアプリを作るtvOSネイティブアプリを作る
tvOSネイティブアプリを作る
 
TestFlightみたいなのを自作する
TestFlightみたいなのを自作するTestFlightみたいなのを自作する
TestFlightみたいなのを自作する
 
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術
 
ゲリラ的サービスの育て方
ゲリラ的サービスの育て方ゲリラ的サービスの育て方
ゲリラ的サービスの育て方
 
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
 
アプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティスアプリのUXを磨くベスト・プラクティス
アプリのUXを磨くベスト・プラクティス
 
アプリ市場傾向から見る スマートフォンECのこれから
アプリ市場傾向から見る スマートフォンECのこれからアプリ市場傾向から見る スマートフォンECのこれから
アプリ市場傾向から見る スマートフォンECのこれから
 
エンジニアのお祭り
エンジニアのお祭りエンジニアのお祭り
エンジニアのお祭り
 
iOS 9 Overview - iOS 9 Bootcamp in Tokyo - 20150930
iOS 9 Overview - iOS 9 Bootcamp in Tokyo - 20150930iOS 9 Overview - iOS 9 Bootcamp in Tokyo - 20150930
iOS 9 Overview - iOS 9 Bootcamp in Tokyo - 20150930
 
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッションC# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
 
Androidが変えたもの
Androidが変えたものAndroidが変えたもの
Androidが変えたもの
 
classmethod devio2015 J-1 iBeacon
classmethod devio2015 J-1 iBeaconclassmethod devio2015 J-1 iBeacon
classmethod devio2015 J-1 iBeacon
 
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ!ワンコインセミナーでその一歩を踏み出してみよう!
 
Linked in勉強会プレゼン
Linked in勉強会プレゼンLinked in勉強会プレゼン
Linked in勉強会プレゼン
 
Jenkinsを使おうよ
Jenkinsを使おうよJenkinsを使おうよ
Jenkinsを使おうよ
 
Titanium勉強会
Titanium勉強会Titanium勉強会
Titanium勉強会
 
iPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめiPhoneアプリ開発を楽に楽しくするサイトまとめ
iPhoneアプリ開発を楽に楽しくするサイトまとめ
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
Flutter.Thursday@DeNA TechCon2024 うちのアプリのデバッグ機能
Flutter.Thursday@DeNA TechCon2024 うちのアプリのデバッグ機能Flutter.Thursday@DeNA TechCon2024 うちのアプリのデバッグ機能
Flutter.Thursday@DeNA TechCon2024 うちのアプリのデバッグ機能
 

Recently uploaded

Recently uploaded (9)

Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 

Titanium mokumoku 20140319