Appcelerator® Deep Dive                tiTokyo                February 16, 2013                      Ricardo Alcocer      ...
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ユーザーが目                        ...
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のコンテンツアシ...
Alloyの今後は?• 次期Titanium Studio 3.1.0でAlloy製アプリ  のデバッグ機能• アプリの動的スタイリング• Adapterフレームワーク• Widget models と themes• Model-viewバイ...
ソースコード• このプレゼンテーションで使用したサン  プルのコードはこちら:  http://github.com/ricardoalcocer
Questions?  Thank you       Ricardo Alcocer     ralcocer@appcelerator.comFollow me on Twitter @ricardoalcocer
Upcoming SlideShare
Loading in …5
×

Slides for tiTokyo 2013 - Japanese version

598 views
560 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
598
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Slides for tiTokyo 2013 - Japanese version

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

×