Mais conteúdo relacionado Semelhante a 100915 HTML5とか勉強会発表資料 (20) Mais de Yuki Naotori (20) 100915 HTML5とか勉強会発表資料1. End of Native ?
Sencha Touch : HTML5 + CSS3 + JavaScript
Web
Ext Japan, LLC (@extjapan)
(@naotori)
4. Ext JS is now Sencha
• jQTouch Raphaël Connect
5. Ext JS is now Sencha
• jQTouch Raphaël Connect
• Sencha Touch
6. Ext JS is now Sencha
• jQTouch Raphaël Connect
• Sencha Touch
• VC
12. Sencha
Ext Designer
Ext Core
Ext JS
jQTouch
Sencha Touch
Raphael
Java
Ext GWT
14. FAQ
• Ext JS4.0 Sencha Touch jQTouch Raphaël
15. FAQ
• Ext JS4.0 Sencha Touch jQTouch Raphaël
• Sencha Touch jQTouch
16. FAQ
• Ext JS4.0 Sencha Touch jQTouch Raphaël
• Sencha Touch jQTouch
• jQTouch Raphaël GPL
19. WebKit Rocks!
• HTML5 + CSS3
• Transforms, Transitions, and
Animations
• Canvas
• SQLite
• Cache Manifest
• Geo-Location
20. WebKit Rocks!
• HTML5 + CSS3
• Transforms, Transitions, and
Animations
• Canvas
• SQLite
• Cache Manifest
• Geo-Location
21. • WebKit
•
•
• Orientation
•
•
•
•
• GUI
22. •
•
Tap
Double tap
Tap and hold
Swipe
Pinch
Drag & drop
23. •
• WebKitCSSMatrix
• GUI
24. GUI
• Lists
Nested
Grouped
Sortable
• Carousel
• Picker
• Overlay
• Toolbars & buttons
• HTML5
Audio
Video
GeoLocation
27. FAQ
• Sencha Touch Ext JS
28. FAQ
• Sencha Touch Ext JS
• jQuery
29. FAQ
• Sencha Touch Ext JS
• jQuery
• AppStore/Android Market
30. FAQ
• Sencha Touch Ext JS
• jQuery
• AppStore/Android Market
• Ext Designer
31. FAQ
• Sencha Touch Ext JS
• jQuery
• AppStore/Android Market
• Ext Designer
• Windows Phone
35. HTML5?
• HTML5 CSS3
• HTML5
• input[type=search] video audio
36. HTML5?
• HTML5 CSS3
• HTML5
• input[type=search] video audio
• webstorage session/local
37. HTML5?
• HTML5 CSS3
• HTML5
• input[type=search] video audio
• webstorage session/local
• geolocation
38. HTML5?
• HTML5 CSS3
• HTML5
• input[type=search] video audio
• webstorage session/local
• geolocation
• HTML5
39. HTML5?
• HTML5 CSS3
• HTML5
• input[type=search] video audio
• webstorage session/local
• geolocation
• HTML5
• WebSockets?
40. HTML5?
• HTML5 CSS3
• HTML5
• input[type=search] video audio
• webstorage session/local
• geolocation
• HTML5
• WebSockets?
• SVG?
51. 3
TwiMap
BookmarkForm
HistoryPanel
MapPanel
67. • Ext JS / Sencha Touch
68. • Ext JS / Sencha Touch
•
69. • Ext JS / Sencha Touch
•
• JavaScript+HTML+CSS iOS Android
70. • Ext JS / Sencha Touch
•
• JavaScript+HTML+CSS iOS Android
• PhoneGap
Notas do Editor
最初にブランド変更について簡単に説明
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月中のリリースが目標だだ