Your SlideShare is downloading. ×
100915 HTML5とか勉強会発表資料
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

100915 HTML5とか勉強会発表資料

18,563
views

Published on

Sencha Touchの紹介

Sencha Touchの紹介

Published in: Technology

1 Comment
20 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,563
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
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)