Slides for tiTokyo 2013 - Japanese version

  • 398 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
398
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.comFollow me on Twitter @ricardoalcocer