titanium mokumoku 20140319

24
そそそそ Titanium そ iPhone,Android そそそそそそそそそそそそそそそそ 2014.03.19 そそそ @coffeegyunyu

Upload: tsuyoshi-hyuga

Post on 30-Jun-2015

795 views

Category:

Technology


1 download

DESCRIPTION

Titaniumもくもく会#17

TRANSCRIPT

Page 1: Titanium mokumoku 20140319

それでもTitanium で iPhone,Android

クロスプラットフォームを諦めない2014.03.19

日向強 @coffeegyunyu

Page 2: Titanium mokumoku 20140319

このスライドは CoffeeScript を多用してます。CoffeeScript アレルギーの人はご注意ください。

ここに出ているのはあくまで個人の用例ですので、「 100% こうしたほうがいいよ」というものではないのであしからず。

Caution

Page 3: Titanium mokumoku 20140319

自己紹介日向強株式会社アールラーニング 開発事業部

モバイルのプロジェクト( iOS,Android) を主にやってます

Page 5: Titanium mokumoku 20140319

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

Page 6: Titanium mokumoku 20140319

Titanium の悪循環

Page 7: Titanium mokumoku 20140319

Titanium の悪循環Titanium で両方作れるらしいよ

コストダウンできるのなら・・・

iOS では動かないAndroid でもこの機能欲し

if(OS_IOS)

If(OS_ANDROID)

もっともっと

iOS 、 Android の分岐がいたるところに入ったメンテしづらいスパゲッティの出来上がり

各所各所で OS ごとの分岐を設けます

一時的に要件は満たされます

Page 8: Titanium mokumoku 20140319

プロジェクト作成編

Page 9: Titanium mokumoku 20140319

新規プロジェクト作成時は、絶対に Titanium SDK を 3.2.1 にしよう

プロジェクト作成編

Page 10: Titanium mokumoku 20140319

なんで?

Titanium 3.1.3 Android Titanium 3.2.1 Android

Page 11: Titanium mokumoku 20140319

Titanium SDK 3.2.1 だとデフォルトで Androidの UI のサイズが最適化されるよ (<property name=“ti.ui.defaultunit” type=“string”>dp</property>)

Titanium SDK 3.2.1 だと、 Android のデザインもかっちょよくなるよ (Theme.holo)

なんで?

Page 12: Titanium mokumoku 20140319

新規プロジェクトの選択について

画面遷移が発生するアプリだとわかっている場合、タブを使わなくてもTwo-tabbed Alloy Application のほうがいい

プロジェクト作成編

Page 13: Titanium mokumoku 20140319

画面遷移の処理方法を 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

Page 14: Titanium mokumoku 20140319

実際に画面遷移すると

iPhone( 前に戻るボタンが自動付与)

Android( Back キーで戻れる)

Page 15: Titanium mokumoku 20140319

Controller 編

Page 16: Titanium mokumoku 20140319

Android,iOS で明確に異なる記述で処理をする場合、 CoffeeScript のクラスの機能を使用したほうが見通しやすい

Controller 編

Page 17: Titanium mokumoku 20140319

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

Page 18: Titanium mokumoku 20140319

Controller 編

iOS Android

Page 19: Titanium mokumoku 20140319

UI 編

Page 20: Titanium mokumoku 20140319

まずは、どの OS でも使える部品のみを使って画面を組み立てる ドキュメントとにらめっこしましょう

その上で、 OS 個別の部品を使いたくなったら、 app/view/{ それぞれの OS}/{ ファイル名 }.xml を作成する

UI 編

Page 21: Titanium mokumoku 20140319

UI 編

ファイル構成例└── views ├── UIWindow.xml ←OS 独自のビューが設定されていない場合 ├── index.xml └── ios └── UIWindow.xml ←iOS 独自のビュー

Page 22: Titanium mokumoku 20140319

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 を使いたい !

Page 23: Titanium mokumoku 20140319

UI 編

iOS Andoird

Page 24: Titanium mokumoku 20140319

現在アールラーニングでは技術者を募集していますTitanium や Android,iOS に限らず、 Java,Ruby, インフラ etc…技術に自信のある方は、お気軽に[email protected]まで !