1. Appcelerator® Deep Dive
tiTokyo
February 16, 2013
Ricardo Alcocer
@ Appcelerator, Inc.
@ricardoalcocer ralcocer@appcelerator.com

2. About me
• 現在シリコンバレーエリアでAppcelerator
のプラットフォームエバンジェリスト
• 2009年からTitaniumを使ってアプリ開発
• 以前はカリブ海や中南米でTitaniumのト
レーナー
• 技術を磨き続けるハッカー

3. Titanium Studioのダウンロード
• appcelerator.comからTitanium Studioを
ダウンロード
• AppleやAndroidサイトから必要なSDK類
をインストールし及び設定を完了してお
く

4. 2種類のTitanium?

5. Titanium Classicの
とてもシンプルなアプリ

6. 多くのファイルが必要

7. App.JS

8. 複数バージョンの
ApplicationWindow.js

9. FirstView.js

10. MVC パターンとは
ビジネスロジック、データ操作等
Model
ユーザーが目 ルーティング、
にするもの
View Controller 判断
.XML + .TSS Files .JS Files
User

11. Appcelerator® Alloy™とは?
• Titanium用 公式 MVC フレームワーク
• 無料、オープンソース
• 宣言型 UI
• Widget
• Themes

12. 何故MVCフレームワークを作ったのか?
• 大規模アプリ開発に有効
• 最適化されたTitaniumコードを提供
• アプリ開発の簡素化
• （XMLやCSSの使用により）Webデベロッ
パーやデザイナーに更に訴求
• コード量の削減
• Widget／コンポーネント／サンプルライブ
ラリ用の基盤を設置

13. Alloyで作った同じシンプルなアプ
リ

14. 必要なファイルが劇的に減少

15. より少ないコードを書く!

16. AlloyはJavaScriptからXMLを利用し
て
高度なインタラクティブ性を提供

17. 基本のフォルダー構造
アプリ ロジック
アプリ スタイリング
(colors, positioningなど)
ユーザーインターフェース

18. ユーザーインターフェース定義

19. ユーザーインターフェース定義
メニュー定義

20. ユーザーインターフェース定義
メインビュー定義

21. ユーザーインターフェース定義
メインビュー定義

22. Javascript : index.jsを使用した
Open／Closeメニュー

23. ライブデモ

24. Themesを使用した
ルック＆フィールとレイアウトの
変更
アプリにThemesを追加しましょう。

25. Themes

26. ライブデモ

27. Widget作成によるコードの再利
用
メニュー機能にWidgetを作りましょう。

28. “ミニアプリ“のようなWidget
• アプリと同様のフォル
ダー構造
• “index” ファイルの代わ
りに”widget”ファイルを
作成する

29. Widget.json
• Widgetのメタデータを含む

30. Widget使用にあたって
• “config.json”ファイル
のdependency項目に
widgetを定義する
• XMLファイル
で ”Require”で定義し
てwidgetを読み込む

31. ライブデモ

32. アプリへのデータ追加

33. データバインドコントロール作成の
ためAlloyではbackbone.jsが利用可能
• Titanium StudioにAlloy Model生成機能

34. “Modelファイル”
• 生成された“Model
ファイル”はデータ
構造と保存データ定
義

35. Modelデータを
UIコントローラーにバインド
• CollectionタグでModelデータに基づいた
データコレクションを定義し、TableView
にバインドすることが可能

36. データは動的に追加することが可
能
• XML内からデータエレメントを参照

37. ライブデモ

38. 更に、、、
• Sync Adapters
• Migrations
• Underscore.js対応
• コマンドライン インターフェース (CLI)
• Appcelerator Cloud Services (ACS)

39. Alloy 1.0リリース！最新情報
• Titanium SDK 3.0以降で対応
• Android fastdev
• 最新のadapter modelに対応した新たな
SQL Adapter
• Titanium Studioのコンテンツアシスト：
3.1.0で正式対応予定
Nightly Build版で既に利用可能

40. Alloyの今後は？
• 次期Titanium Studio 3.1.0でAlloy製アプリ
のデバッグ機能
• アプリの動的スタイリング
• Adapterフレームワーク
• Widget models と themes
• Model-viewバインディングの実装完了

41. ソースコード
• このプレゼンテーションで使用したサン
プルのコードはこちら:
http://github.com/ricardoalcocer

42. Questions?
Thank you
Ricardo Alcocer
ralcocer@appcelerator.com
Follow me on Twitter @ricardoalcocer