titanium mokumoku 20140319

Transcript

1. それでも   TitaniumでiPhone,Android   クロスプラットフォームを諦めない 2014.03.19   日向強  @coffeegyunyu

2. *  このスライドはCoffeeScriptを多⽤用してます。 CoffeeScriptアレルギーの⼈人はご注意ください。 *  ここに出ているのはあくまで個⼈人の⽤用例例ですので、 「100%こうしたほうがいいよ」というものでは ないのであしからず。 Caution

3. 自己紹介 ⽇日向強 株式会社アールラーニング   開発事業部   モバイルのプロジェクト （iOS,Android)を主にやってます  

4. 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/ fontosutanpu-­‐wen-­‐zisutanpuga/id687721425? mt=8    

5. 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

6. Titaniumの悪循環

7. Titaniumの悪循環 Titaniumで両⽅方作 れるらしいよ コストダウン できるのな ら・・・ iOSでは動かない Androidでもこの機能欲しい if(OS_IOS) If(OS_ANDROID)

   もっと もっと iOS、Androidの分岐がいたる ところに⼊入ったメンテしづら いスパゲッティの出来上がり 各所各所でOSごとの分 岐を設けます ⼀一時的に要件は満たさ れます

8. プロジェクト作成編

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

10. なんで？ Titanium  3.1.3  Android Titanium  3.2.1  Android

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

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

12. *  新規プロジェクト の選択について 画⾯面遷移が発⽣生する アプリだとわかって いる場合、 タブを使わなくても Two-‐‑‒tabbed  Alloy  

    Applicationのほうが いい プロジェクト作成編

13. *  画⾯面遷移の処理理⽅方法を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

14. 実際に画面遷移すると iPhone (前に戻るボタンが⾃自動付与） Android   （Backキーで戻れる）

15. Controller編

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

17. 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

18. Controller編 iOS Android

19. UI編

20. *  まずは、どのOSでも使える部品のみを使って画面を組 み立てる  ドキュメントとにらめっこしましょう   *  その上で、OS個別の部品を使いたくなったら、app/ view/{それぞれのOS}/{ファイル名}.xmlを作成する   UI編

21. UI編 ファイル構成例   └──  views          ├──

     UIWindow.xml  ←OS独自のビューが設定されていない場合          ├──  index.xml          └──  ios                  └──  UIWindow.xml  ←iOS独自のビュー

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

23. UI編 iOS Andoird

24. 現在アールラーニング では技術者を募集して います TitaniumやAndroid,iOSに限らず、 Java,Ruby,インフラetc…   技術に自信のある方は、お気軽に   t-­‐hyuga@r-­‐learning.co.jpまで!