それでもTitanium で iPhone,Android
クロスプラットフォームを諦めない2014.03.19
日向強 @coffeegyunyu
このスライドは CoffeeScript を多用してます。CoffeeScript アレルギーの人はご注意ください。
ここに出ているのはあくまで個人の用例ですので、「 100% こうしたほうがいいよ」というものではないのであしからず。
Caution
自己紹介日向強株式会社アールラーニング 開発事業部
モバイルのプロジェクト( iOS,Android) を主にやってます
Titanium でつくったものFont Stamp文字とフォントを組み合わせて各種SNS に画像を送信するアプリダウンロード数は 33,000Titanium3.2.0 使用https://play.google.com/store/apps/details?id=jp.coe.fontstamphttps://itunes.apple.com/jp/app/fontosutanpu-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?id=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…技術に自信のある方は、お気軽に[email protected]まで !