第8回SenchaUG@東京

SenchaTouch2.2新機能の簡単な紹介と2.1→2.2のテーマ切り替えの説明でっす！

Transcript

1. Sencha Touch 2.2 t @tnker Tanaka Yuuya
2. Sencha Touch 2.2 出ましたね！ t @tnker Tanaka Yuuya
3. 色々追加されたよ NEW!! :)
4. Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート
5. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート
6. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:)
7. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) プラットフォー ム用のコンフィ グオプションの 追加
8. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加
9. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加 レンダリング FPSモニター
10. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) Icon font-face サポート app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加 レンダリング FPSモニター
11. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) Icon font-face サポート app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加 パフォーマンス チューニング レンダリング FPSモニター
12. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) Icon font-face サポート app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加 パフォーマンス チューニング レンダリング FPSモニター Themeの 新構造
13. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート Sencha Touch 2.2 Features SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) Icon font-face サポート app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加 パフォーマンス チューニング レンダリング FPSモニター Themeの 新構造 FF, Opera等の 実験的なサポ ート
14. Microsoft Surface Pro Surface RT Windows Phone BlackBerry 10 サポート SenchaCmd 3.1 Sencha Architect 2.2 サポート IE10 サポート:) Icon font-face サポート app.jsonのプラ ットフォーム検 出によるTheme の切り替え プラットフォー ム用のコンフィ グオプションの 追加 パフォーマンス チューニング レンダリング FPSモニター FF, Opera等の 実験的なサポ ート Themeの 新構造 Sencha Touch 2.2 Features ／今回ここやります＼
15. Theme周りの新機能について base.scss!! :)
16. プラットフォームによる リソースの読み込み切り替え platform!! :)
17. プラットフォームによる リソースの読み込み切り替え "css": [ { "path": "resources/css/sencha-touch.css", "platform": ["chrome", "ios", "android", "firefox"] } ] app.json
18. "css": [ { "path": "resources/css/sencha-touch.css", "platform": ["chrome", "ios", "android", "firefox"] } ] app.json pathに指定したリソースを読み込ませたいプラットフォームを、 platformプロパティに指定することで、切り替えることが可能 :) プラットフォームによる リソースの読み込み切り替え
19. プラットフォームによる リソースの読み込み切り替え 設定したリソースファイルのデバッグを行う場合は、URIのGETパ ラメータにプラットフォーム名を付けてあげることで、ブラウザ 上からデバッグが可能です http://localhost/example/?platform=ios
20. テーマについて またまた app.json!! :)
21. テーマについて 読み込ませるCSSのプロパティにThemeプロパティを定義すること で、テーマ名を設定することが可能になりました
22. テーマについて 読み込ませるCSSのプロパティにThemeプロパティを定義すること で、テーマ名を設定することが可能になりました "css": [ { "path": "resources/css/sencha-touch.css", "platform": ["chrome", "ios", "android", "firefox"], "theme": "SenchaUG" } ] app.json
23. テーマについて 現在設定されているテーマ名を取得したい場合するには
24. テーマについて 現在設定されているテーマ名を取得したい場合するには Ext.theme.name > “Default”
25. テーマについて 現在設定されているテーマ名を取得したい場合するには Ext.theme.name > “Default” このテーマ設定についても、URLからデバッグできます http://localhost/example/?theme=SenchaUG
26. 追加オプション - platformConfig またプラット フォーム :(
27. 追加オプション - platformConfig リソース切り替えのプラットフォームオプションと似た形で クラス定義にも新たにプロパティが増えました。 Ext.define('Example.view.Login', { extend: 'Ext.panel.FieldSet', config: { title: 'Hello World' }, platformConfig: [{ platform: 'ie10', title: 'Hello IE10' }] });
28. Baseテーマについて リセットCSS 風味 :)
29. Baseテーマについて 今までテーマ毎にがっつりCSSが 記述されていました :( Defaultのテーマ
30. Baseテーマについて Baseのテーマは、Toolbarや TabBarなどの構造部分のみを定義 し、色などの装飾を全て排除した ものになります。
31. Baseテーマについて Baseのテーマ Baseのテーマは、Toolbarや TabBarなどの構造部分のみを定義 し、色などの装飾を全て排除した ものになります。
32. Baseテーマについて Baseのテーマは、Toolbarや TabBarなどの構造部分のみを定義 し、色などの装飾を全て排除した ものになります。 作り込んだデザインなどを適応し たい際は、既存のスタイルが邪魔 になる場合がある為、Baseテーマ のみを継承してテーマの作り込み を行いましょう :) Baseのテーマ
33. Icon font-faceのサポート!! -webkit-mask からの解放 ;)
34. Icon font-faceのサポート!! 今までのアイコン表示は、画像（-webkit-mask）を利用して表示 をしていましたが、Sencha Touch 2.2からはフォント（疑似エレ メント）を利用する形になりました ＼きれいに！／
35. Sencha Touch 2.1 → Sencha Touch 2.2 Theming!! :)
36. 参考に使うテーマ Theme!! :)
37. 参考に使うテーマ
38. 参考に使うテーマ 画像があまり使用されていないテ ーマのため、今回はDropboxの見 た目をSencha Touchで再現して やっていきます。
39. 実際に作ってみる make!! :)
40. 実際に作ってみる まずは、Sencha Touch 2.1側でスタイルを作成していきます。 各コンポーネントに別途mixinを用意して、JS側で uiプロパティ を指定する方法で作成していきます。 sass構成 app.scss JS側
41. @mixin dropbox-titlebar { $toolbar-top-icon-size: 1.0em; $toolbar-top-icon-size: 1.0em; .x-dock > .x-toolbar + .x-dock-body { @include box-shadow(0 -1px 1px rgba(0, 0, 0, .5) inset !important); } .x-toolbar-dropbox { @include background-image( linear-gradient(#0085f2, #0074d4) ); .x-button.x-button-plain .x-button- icon, .x-toolbar .x-button.x-button- plain .x-button-icon { -webkit-mask-size: $toolbar- top-icon-size; width: $toolbar-top-icon-size; height: $toolbar-top-icon-size; @include background- gradient(#FFF, #FFF); } .x-title { color: #FFF; text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0; } &.x-docked-top { border-bottom-color: #00325c; border-top: 1px solid #75bdf8; } } } 実際に作ってみる（titlebar）
42. @mixin dropbox-tabs { $tabs-bottom-icon-size: 1.4em; .x-tabbar.x-docked-bottom { border-top-width: .1em; border-top-style: solid; height: 49px !important; padding: 0; .x-tab { @include border-radius(0); @include box-orient(vertical); @include box-flex(1); min-width: 3.3em; min-height: 100%; position: relative; padding: .5em 0; .x-button-icon { -webkit-mask-size: $tabs- bottom-icon-size; width: $tabs-bottom-icon- size; height: $tabs-bottom- icon-size; display: block; margin: 0 auto; position: relative; @include box- shadow(#000 0 0 .25em); } .x-button-label { display: none; } } } $tabs-bottom-inner-border-color: #434343; .x-tabbar-dropbox { @include background-image(linear- gradient(#353535, #282828)); @include box-shadow( $tabs-bottom-inner-border- 実際に作ってみる（tabs）
43. @mixin dropbox-searchbar { $toolbar-top-icon-size: 1.0em; $toolbar-top-icon-size: 1.0em; .x-dock > .x-toolbar + .x-dock-body { @include box-shadow(0 -1px 1px rgba(0, 0, 0, .5) inset !important); } .x-toolbar-searchbar { @include background-image(linear- gradient(#e7e7e7, #e2e2e2)); .x-button.x-button-plain, .x-toolbar .x-button.x-button-plain { @include border-radius(0); height: 2.5em; border-right: 1px solid #c7c7c7; padding-right: 1.0em; } .x-button.x-button-plain .x-button- icon, .x-toolbar .x-button.x-button- plain .x-button-icon { -webkit-mask-size: $toolbar- top-icon-size; width: $toolbar-top-icon-size; height: $toolbar-top-icon-size; @include background- gradient(#868686, #868686); } .x-title { color: #FFF; text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0; } &.x-docked-top { border-bottom-color: #9c9c9c; border-top: 1px solid #efefef; } .x-button, .x-field-select .x-component-outer, 実際に作ってみる（searchbar）
44. @mixin dropbox-list { .x-list-item-body { background-color: #FFF; border-bottom: 1px solid #e0e0e0; .contents-list { clear: both; img { width: 35px; height: 35px; border: 1px solid #CCC; float: left; margin: 0 .5em 0 0; } h3 { font-size: .8em; font-weight: bold; padding: 0 0 .2em 0; } p { font-size: .6em; color: #666; } } } .x-list-item.x-item-selected { .x-list-item-body { color: #232323; text-shadow: none; background-color: #dee9f3; } } } 実際に作ってみる（list）
45. $ compass build 実際に作ってみる それぞれのmixinが出来てらapp.scssでincludeしてビルドしまし ょう :) sass構成 app.scss
46. 実際に作ってみる スタイルの書き出しが完了した ら、シミュレーター上で適応した スタイルを確認してみます
47. 実際に作ってみる スタイルの書き出しが完了した ら、シミュレーター上で適応した スタイルを確認してみます
48. 作ったスタイルを 2.2 に組み込む ST2.2!! :)
49. 作ったスタイルを 2.2 に組み込む とりあえず、作ったファイルをそのまま2.2のプロジェクトに放 り込んでみるとどうなるか？ :(
50. 作ったスタイルを 2.2 に組み込む こうなります ;(
51. 作ったスタイルを 2.2 に組み込む 残念ながら、CSSの若干の調整が必要に なります。 大体調整が必要になると思われる箇所は ・-webkit-maskを利用している部分 ・List系コンポーネントのCSS └ DOM構造に変更が入っている為 の2箇所が主な修正点になると思います 各sassファイル
52. @mixin dropbox-titlebar { $toolbar-top-icon-size: 1.0em; $toolbar-top-icon-size: 1.0em; .x-dock > .x-toolbar + .x-dock-body { @include box-shadow(0 -1px 1px rgba(0, 0, 0, .5) inset !important); } .x-toolbar-dropbox { @include background-image( linear-gradient(#0085f2, #0074d4) ); .x-button.x-button-plain .x-button- icon, .x-toolbar .x-button.x-button- plain .x-button-icon { // -webkit-mask-size: $toolbar- top-icon-size; width: $toolbar-top-icon-size; height: $toolbar-top-icon-size; // @include background- gradient(#FFF, #FFF); color: #FFF; } .x-title { color: #FFF; text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0; } &.x-docked-top { border-bottom-color: #00325c; border-top: 1px solid #75bdf8; } } } CSSの修正（titlebar）
53. @mixin dropbox-tabs { $tabs-bottom-icon-size: 1.5em; .x-tabbar.x-docked-bottom { border-top-width: .1em; border-top-style: solid; height: 49px !important; padding: 0; .x-tab { @include border-radius(0); @include box-orient(vertical); @include box-flex(1); min-width: 3.3em; min-height: 100%; position: relative; padding: .5em 0; .x-button-icon { // -webkit-mask-size: $tabs-bottom-icon-size; width: $tabs-bottom-icon- size; height: $tabs-bottom- icon-size; display: block; margin: 0 auto; position: relative; // @include box- shadow(#000 0 0 .25em); } .x-button-label { display: none; } } } $tabs-bottom-inner-border-color: #434343; .x-tabbar-dropbox { @include background-image( linear-gradient(#353535, #282828) ); CSSの修正（tabs）
54. @mixin dropbox-searchbar { $toolbar-top-icon-size: 1.5em; $toolbar-top-icon-size: 1.5em; .x-dock > .x-toolbar + .x-dock-body { @include box-shadow(0 -1px 1px rgba(0, 0, 0, .5) inset !important); } .x-toolbar-searchbar { @include background-image(linear- gradient(#e7e7e7, #e2e2e2)); .x-button.x-button-plain, .x-toolbar .x-button.x-button-plain { @include border-radius(0); // height: 2.5em; border-right: 1px solid #c7c7c7; padding-right: 1.0em; } .x-button.x-button-plain .x-button- icon, .x-toolbar .x-button.x-button- plain .x-button-icon { // -webkit-mask-size: $toolbar- top-icon-size; width: $toolbar-top-icon-size; height: $toolbar-top-icon-size; // @include background- gradient(#868686, #868686); color: #868686; } .x-title { color: #FFF; text-shadow: rgba(0, 0, 0, 0.5) 0 -0.08em 0; } &.x-docked-top { border-bottom-color: #9c9c9c; border-top: 1px solid #efefef; } .x-button, CSSの修正（searchbar）
55. @mixin dropbox-list { .x-list-item { background-color: #FFF; border-bottom: 1px solid #e0e0e0; .contents-list { clear: both; img { width: 35px; height: 35px; border: 1px solid #CCC; float: left; margin: 0 .5em 0 0; } h3 { font-size: .8em; font-weight: bold; padding: 0 0 .2em 0; } p { font-size: .6em; color: #666; } } } .x-list-item.x-item-selected { color: #232323 !important; text-shadow: none !important; background-color: #dee9f3 ! important; background-image: none !important; } } CSSの修正（list）
56. CSSを修正したもので再度コンパイル 修正したsassファイル群を利用して、再度テーマCSSをコンパイ ルしましょう。 $ compass build
57. 作ったスタイルを 2.2 に組み込む 再度確認すると :)
58. 作ったスタイルを 2.2 に組み込む 再度確認すると :)
59. Sencha Touch 2.2へのスタイル作成まとめ CSS!! :)
60. Sencha Touch 2.2へのスタイル作成まとめ ・-webkit-maskを利用している部分 ・List系コンポーネントのCSS └ DOM構造に変更が入っている為 Sencha Touch 2.1 から 2.2 に移行する場合は、以下の箇所に 注意して作成 or 修正を行えば良い 新規に作成する場合は、Defaultテーマを import して各クラス を上書きしていくか、Baseテーマを import して自分でスタイ ルを作成していけばOKです
61. おまけ MORE!! :)
62. レンダリングFPSモニター FPS!! :)
63. レンダリングFPSモニター List系コンポーネントなどの、スク ロール時のアニメーション・スクリ ーン切り替え時のトランジションの パフォーマンスを計測する為に、新 たにFPSモニター機能が搭載されまし た
64. レンダリングFPSモニター List系コンポーネントなどの、スク ロール時のアニメーション・スクリ ーン切り替え時のトランジションの パフォーマンスを計測する為に、新 たにFPSモニター機能が搭載されまし た
65. レンダリングFPSモニター List系コンポーネントなどの、スク ロール時のアニメーション・スクリ ーン切り替え時のトランジションの パフォーマンスを計測する為に、新 たにFPSモニター機能が搭載されまし た アプリケーション起動時のURIに、 GETパラメータとして ?showfps を付与してあげることで表示されます
66. レンダリングFPSモニター ですが、標準のFPSモニターで すと表示位置の調節が利かない 為、タブバーなどを配置してい ると押せなくなってしまいま す :( なので、Ext.AnimationQueue のインスタンスをapplyなどで 上書きし、位置を調節出来るよ うにしておくと便利です :)
67. レンダリングFPSモニター ですが、標準のFPSモニターで すと表示位置の調節が利かない 為、タブバーなどを配置してい ると押せなくなってしまいま す :( なので、Ext.AnimationQueue のインスタンスをapplyなどで 上書きし、位置を調節出来るよ うにしておくと便利です :) ここら辺のタブが押せない･･･ ;(
68. レンダリングFPSモニター 試しに作った ?fps=position position = tl: ࠨ্ tr: ӈ্ bl: ࠨԼ br: ӈԼ cl: ࠨதԝ cr: ӈதԝ
69. 以上、ご静聴ありがとうございました Thank you!! :)