slides for titokyo 2013 - japanese version

Ricardo Alcocerプラットフォームエバンジェリスト @ Appcelerator, Inc.

@ricardoalcocer ralcocer@appcelerator.com

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

Questions?

Thank you

Ricardo Alcocerralcocer@appcelerator.com

Follow me on Twitter @ricardoalcocer