• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
18,360
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
139
Comments
1
Likes
20

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

  • 最初にブランド変更について簡単に説明
  • jQTouch、Raphaelのデモ
  • jQTouch、Raphaelのデモ
  • jQTouch、Raphaelのデモ























  • 今日はjQTouchの話もあるみたいなので、ライセンスについて話をしておきます
  • 今日はjQTouchの話もあるみたいなので、ライセンスについて話をしておきます
  • 今日はjQTouchの話もあるみたいなので、ライセンスについて話をしておきます
  • Beta
  • 全てWebKitベース
  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • opacity, corners, shadows, gradients — rotate, scale, depth, hardware accelerated.
    Unfortunately, some iPhone specific now. Geo-location + SVG are diff on Android.
  • ということで、現時点ではWebKitに最適化されています
    ネイティブアプリ並みのものを作るのに必要なクラスが一通りそろっています
  • ネイティブのイベントは使いにくいので、
  • 実際にライブコーディングしてみる
  • サンプルのデモ















  • アプリの紹介
    このプレゼン用に作ってたら、勢い余ってドメインまでとってしまった

  • Webインスペクタを見る
    Webインスペクタいいですよ
    manifestについても言及
    デプロイ時にはJSファイルはまとめる
  • google mapのローディングに対応するためにこういう書き方してる(キャッシュを色々やっていて)
  • google mapのローディングに対応するためにこういう書き方してる(キャッシュを色々やっていて)

  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明
  • 継承して使うのが鉄則
    カードレイアウトの説明(他にも色々なレイアウトがある)
    xtypeの説明(JSONでサーバーとやり取り可能、というメリット)
    dockedItemsの説明

  • このアプリでは3つのストアを使っている
    localstorageへの格納方法(Webインスペクタを見る)
    モデルはメソッドも定義可能
  • このアプリでは3つのストアを使っている
    localstorageへの格納方法(Webインスペクタを見る)
    モデルはメソッドも定義可能
  • このアプリでは3つのストアを使っている
    localstorageへの格納方法(Webインスペクタを見る)
    モデルはメソッドも定義可能
  • このアプリでは3つのストアを使っている
    localstorageへの格納方法(Webインスペクタを見る)
    モデルはメソッドも定義可能
  • このアプリでは3つのストアを使っている
    localstorageへの格納方法(Webインスペクタを見る)
    モデルはメソッドも定義可能
  • このアプリでは3つのストアを使っている
    localstorageへの格納方法(Webインスペクタを見る)
    モデルはメソッドも定義可能
  • autoSaveになっているので、add後に自動的にlocalstorageに格納される
  • autoSaveになっているので、add後に自動的にlocalstorageに格納される

  • イベント連携が重要

  • イベント連携が重要

  • イベント連携が重要

  • イベント連携が重要

  • イベント連携が重要

  • イベント連携が重要

  • イベント連携が重要

  • Beta
  • アップグレードでよく壊れる
    9月中のリリースが目標だだ





Transcript

  • 1. End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
  • 2. Ext JS is now Sencha
  • 3. Ext JS is now Sencha • jQTouch Raphaël Connect
  • 4. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch
  • 5. Ext JS is now Sencha • jQTouch Raphaël Connect • Sencha Touch • VC
  • 6. Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
  • 7. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 8. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 9. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 10. Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 11. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
  • 12. FAQ
  • 13. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël
  • 14. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch
  • 15. FAQ • Ext JS4.0 Sencha Touch jQTouch Raphaël • Sencha Touch jQTouch • jQTouch Raphaël GPL
  • 16. Sencha Touch beta
  • 17. Coming Soon: BlackBerry 6 & WebOS
  • 18. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 19. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 20. • WebKit • • • Orientation • • • • • GUI
  • 21. • • Tap Double tap Tap and hold Swipe Pinch Drag & drop
  • 22. • • WebKitCSSMatrix • GUI
  • 23. GUI • Lists Nested Grouped Sortable • Carousel • Picker • Overlay • Toolbars & buttons • HTML5 Audio Video GeoLocation
  • 24. <75k minified & gzipped
  • 25. FAQ
  • 26. FAQ • Sencha Touch Ext JS
  • 27. FAQ • Sencha Touch Ext JS • jQuery
  • 28. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market
  • 29. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer
  • 30. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market • Ext Designer • Windows Phone
  • 31. HTML5?
  • 32. HTML5? • HTML5 CSS3
  • 33. HTML5? • HTML5 CSS3 • HTML5
  • 34. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio
  • 35. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local
  • 36. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
  • 37. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
  • 38. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
  • 39. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
  • 40. • ¥9,900/ • • GPLv3
  • 41. Demos http://twimap.net/ http://github.com/naotori/twimap
  • 42. viewport meta/link
  • 43. UI
  • 44. 3 TwiMap BookmarkForm HistoryPanel MapPanel
  • 45. “xtype”
  • 46. MapPanel
  • 47. localStorage
  • 48. Sencha Touch • Version: 0.95β • • Android • API •
  • 49. • Ext JS / Sencha Touch
  • 50. • Ext JS / Sencha Touch •
  • 51. • Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android
  • 52. • Ext JS / Sencha Touch • • JavaScript+HTML+CSS iOS Android • PhoneGap
  • 53. Objective-C JavaScript Ext Japan, LLC (@extjapan) (@naotori)