Download - Slides for tiTokyo 2013 - Japanese version
![Page 1: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/1.jpg)
Ricardo Alcocerプラットフォームエバンジェリスト @ Appcelerator, Inc.
@ricardoalcocer [email protected]
Appcelerator® Deep Dive
tiTokyoFebruary 16, 2013
![Page 2: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/2.jpg)
About me
• 現在シリコンバレーエリアでAppcelerator のプラットフォームエバンジェリスト
• 2009 年から Titanium を使ってアプリ開発
• 以前はカリブ海や中南米で Titanium のトレーナー
• 技術を磨き続けるハッカー
![Page 3: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/3.jpg)
Titanium Studio のダウンロード
• appcelerator.com から Titanium Studio をダウンロード
• Apple や Android サイトから必要な SDK類をインストールし及び設定を完了しておく
![Page 4: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/4.jpg)
2 種類の Titanium?
![Page 5: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/5.jpg)
Titanium Classic のとてもシンプルなアプリ
![Page 6: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/6.jpg)
多くのファイルが必要
![Page 7: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/7.jpg)
App.JS
![Page 8: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/8.jpg)
複数バージョンの ApplicationWindow.js
![Page 9: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/9.jpg)
FirstView.js
![Page 10: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/10.jpg)
MVC パターンとは
Model
ControllerView
User
ルーティング、判断
ビジネスロジック、データ操作等
ユーザーが目にするもの
.JS Files.XML + .TSS Files
![Page 11: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/11.jpg)
Appcelerator® Alloy™ とは ?
• Titanium 用 公式 MVC フレームワーク• 無料、オープンソース• 宣言型 UI• Widget• Themes
![Page 12: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/12.jpg)
何故 MVC フレームワークを作ったのか ?
• 大規模アプリ開発に有効• 最適化された Titanium コードを提供• アプリ開発の簡素化• ( XML や CSS の使用により) Web デベ
ロッパーやデザイナーに更に訴求• コード量の削減• Widget /コンポーネント/サンプルライ
ブラリ用の基盤を設置
![Page 13: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/13.jpg)
Alloy で作った同じシンプルなアプリ
![Page 14: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/14.jpg)
必要なファイルが劇的に減少
![Page 15: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/15.jpg)
より少ないコードを書く !
![Page 16: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/16.jpg)
Alloy は JavaScript から XML を利用して高度なインタラクティブ性を提供
![Page 17: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/17.jpg)
基本のフォルダー構造
アプリ ロジック
ユーザーインターフェース
アプリ スタイリング (colors, positioning など )
![Page 18: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/18.jpg)
ユーザーインターフェース定義
![Page 19: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/19.jpg)
ユーザーインターフェース定義
メニュー定義
![Page 20: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/20.jpg)
ユーザーインターフェース定義
メインビュー定義
![Page 21: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/21.jpg)
ユーザーインターフェース定義
メインビュー定義
![Page 22: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/22.jpg)
Javascript : index.js を使用したOpen / Close メニュー
![Page 23: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/23.jpg)
ライブデモ
![Page 24: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/24.jpg)
Themes を使用したルック&フィールとレイアウトの変更
アプリに Themes を追加しましょう。
![Page 25: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/25.jpg)
Themes
![Page 26: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/26.jpg)
ライブデモ
![Page 27: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/27.jpg)
Widget 作成によるコードの再利用
メニュー機能に Widget を作りましょう。
![Page 28: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/28.jpg)
“ ミニアプリ“のような Widget
• アプリと同様のフォルダー構造
• “index” ファイルの代わりに” widget” ファイルを作成する
![Page 29: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/29.jpg)
Widget.json
• Widget のメタデータを含む
![Page 30: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/30.jpg)
Widget 使用にあたって• “config.json” ファイル
の dependency 項目にwidget を定義する
• XML ファイルで ” Require” で定義して widget を読み込む
![Page 31: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/31.jpg)
ライブデモ
![Page 32: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/32.jpg)
アプリへのデータ追加
![Page 33: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/33.jpg)
データバインドコントロール作成のためAlloy では backbone.js が利用可能
• Titanium Studio に Alloy Model 生成機能
![Page 34: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/34.jpg)
“Model ファイル”• 生成された“ Model
ファイル”はデータ構造と保存データ定義
![Page 35: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/35.jpg)
Model データをUI コントローラーにバインド
• Collection タグで Model データに基づいたデータコレクションを定義し、 TableView にバインドすることが可能
![Page 36: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/36.jpg)
データは動的に追加することが可能
• XML 内からデータエレメントを参照
![Page 37: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/37.jpg)
ライブデモ
![Page 38: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/38.jpg)
更に、、、• Sync Adapters• Migrations• Underscore.js 対応• コマンドライン インターフェース (CLI)• Appcelerator Cloud Services (ACS)
![Page 39: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/39.jpg)
Alloy 1.0 リリース!最新情報• Titanium SDK 3.0 以降で対応• Android fastdev• 最新の adapter model に対応した新たな
SQL Adapter• Titanium Studio のコンテンツアシス
ト: 3.1.0 で正式対応予定 Nightly Build 版で既に利用可能
![Page 40: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/40.jpg)
Alloy の今後は?• 次期 Titanium Studio 3.1.0 で Alloy 製
アプリのデバッグ機能• アプリの動的スタイリング• Adapter フレームワーク• Widget models と themes• Model-view バインディングの実装完了
![Page 41: Slides for tiTokyo 2013 - Japanese version](https://reader033.vdocuments.site/reader033/viewer/2022042715/558df5141a28abb0598b4756/html5/thumbnails/41.jpg)
ソースコード• このプレゼンテーションで使用したサン
プルのコードはこちら :
http://github.com/ricardoalcocer