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