100915 HTML5とか勉強会発表資料

19,038 views
18,901 views

Published on

Sencha Touchの紹介

Published in: Technology
1 Comment
19 Likes
Statistics
Notes
No Downloads
Views
Total views
19,038
On SlideShare
0
From Embeds
0
Number of Embeds
10,990
Actions
Shares
0
Downloads
141
Comments
1
Likes
19
Embeds 0
No embeds

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月中のリリースが目標だだ





  • 100915 HTML5とか勉強会発表資料

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

    ×