Upgrade to Pro — share decks privately, control downloads, hide ads and more …

titanium mokumoku 20140319

coe
March 21, 2014

titanium mokumoku 20140319

Titanium Cross Platform

coe

March 21, 2014
Tweet

More Decks by coe

Other Decks in Technology

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まで!