Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はじめての Sencha Touch2 / First Sencha Touch2
Search
Hiromi Morikawa
November 08, 2012
Technology
0
100
はじめての Sencha Touch2 / First Sencha Touch2
SenchaUG 勉強会 第2回@東京 での発表資料です。
Hiromi Morikawa
November 08, 2012
Tweet
Share
More Decks by Hiromi Morikawa
See All by Hiromi Morikawa
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
6.1k
デザイナーの帽子をかぶりながら、チームとの関わり方を考えつづけている話/How does a designer fit in a Scrum Team?
hiromitsuuuuu
7
12k
ユーザー候補を目の前にすることでわかること/freee Design Night in Fukuoka
hiromitsuuuuu
0
30k
エンジニアであるわたしがデザインを知り乗りこなすまで / a story of an engineer and design
hiromitsuuuuu
2
1.9k
新しいCSSの仕様を色々調べてみた / css3 new spec
hiromitsuuuuu
0
140
Other Decks in Technology
See All in Technology
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
320
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
6.8k
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
640
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.7k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
120
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
790
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
170
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
180
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
1
120
速くて安いWebサイトを作る
nishiharatsubasa
9
11k
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
120
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fireside Chat
paigeccino
34
3.2k
Thoughts on Productivity
jonyablonski
69
4.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Music & Morning Musume
bryan
46
6.3k
Docker and Python
trallard
44
3.3k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Transcript
Japan Sencha User Group Japan Sencha User Group はじめての Sencha
Touch2 2012/11/8 1 SenchaUG 勉強会 第2回@東京 Japan Sencha User Group @hiromitsuuuuu
Japan Sencha User Group 11/12/2012 2 RIAのR&Dチームで Web標準系技術 やってます。
Japan Sencha User Group 11/12/2012 3 学習コストやハードルが高いらしい… (´・ω・`) 最低限覚えておきたい基礎をまとめました しょぼーん
MVC? クラスシステム? 名前空間? コンポーネント? ビルド?
Japan Sencha User Group Agenda まず知っておきたい基礎7つ 1. アプリケーションの生成 2.
コンポーネントの追加 3. config option 4. イベントハンドリング 5. レイアウトシステム 6. ページ遷移 7. クラスシステムと名前空間 知っておくと便利なこと 1. 外部ライブラリの追加 2. ビルド時のちょっとしたTips 3. FlexからSencha Touch2へ 次のステップへ 11/12/2012 4
Japan Sencha User Group 11/12/2012 5 http://www.riaxdnp.jp/ Sencha Touch2で Webアプリ開発【基礎編】
Japan Sencha User Group 11/12/2012 6 まず知っておきたい基礎7つ
Japan Sencha User Group 11/12/2012 7 スケルトンを作って app.jsに書いてみる (`・ω・´)
Japan Sencha User Group 1. アプリケーションの生成 11/12/2012 8
Japan Sencha User Group 11/12/2012 9 Ext.application({ name: 'myApp', launch:
function() { console.log('Application launched!'); } });
Japan Sencha User Group 11/12/2012 10 Ext.application({ name: 'myApp', launch:
function() { console.log('Application launched!'); } }); Ext.application • アプリケーションの生成 • ページ読み込み後に呼ばれる • 引数:オブジェクト生成時に必要なconfigオブジェクト name • アプリケーションの名前空間 • クラス名は常にこの名前空間から始まる launch • アプリの起動時に一度だけ呼び出される • これもconfigオブジェクト アプリケーションの生成
Japan Sencha User Group 11/12/2012 11
Japan Sencha User Group 2.ルートコンテナへのコンポーネントの追加 11/12/2012 12
Japan Sencha User Group 11/12/2012 13 UIコンポーネント
Japan Sencha User Group 11/12/2012 14 Ext.application({ name: 'myApp', requires:
[ 'Ext.Panel' ], launch: function() { var myPanel = Ext.create("Ext.Panel"); Ext.Viewport.add(myPanel); } });
Japan Sencha User Group ルートコンテナへのコンポーネントの追加 11/12/2012 15 Ext.Viewport •
画面全体を表すルートコンテナ • UIコンポーネントをaddしていくことで画面を作成 Ext.create • インスタンスを生成するメソッド • 第1引数:クラスの完全修飾名 • 第2引数:オブジェクト生成時に必要な設定オブジェクト requires • 必要コンポーネントのインポート • 動的に読み込まれる Ext.application({ name: 'mysundbox', requires: [ 'Ext.Panel' ], launch: function() { var myPanel = Ext.create("Ext.Panel"); Ext.Viewport.add(myPanel); } });
Japan Sencha User Group 11/12/2012 16
Japan Sencha User Group 3. config option 11/12/2012 17
Japan Sencha User Group 11/12/2012 18 titlebar html panel
Japan Sencha User Group 11/12/2012 19 launch: function() { Ext.create("Ext.Panel",
{ fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', title: 'Welcome' },{ html: [ "First page.<br>", "link : <a href=¥”http://www.riaxdnp.jp/¥">”, "riaddnp</a>" ].join("") }] }); }
Japan Sencha User Group config option 11/12/2012 20 config
option • 新しいオブジェクトを生成する際に引数として指定 • コンポーネントごとに異なる • 生成後も好きなタイミングで変更可能 • setterとgetterが自動生成される items config • コンテナ内に子要素を内包するための仕組み • インラインで生成される launch: function() { Ext.create("Ext.Panel", { fullscreen: true, items: [{ xtype: 'titlebar', docked: 'top', title: 'Welcome' },{ html: [ "First page.<br>", "link : <a href=¥”http:“, "//www.riaxdnp.jp/¥">”, "riaddnp</a>" ].join("") }] }); }
Japan Sencha User Group config option 11/12/2012 21 xtype
• コンポーネントのショートカット名 • Items config内で指定する場合 • 要素を取得するためのセレクタ 完全修飾名 xtype Ext.Panel panel Ext.dataview.List list Ext.TitleBar titlebar Ext.Button button Ext.picker.Picker picker
Japan Sencha User Group config option 11/12/2012 22 設定オブジェクトが増える …!!
Japan Sencha User Group 11/12/2012 23
Japan Sencha User Group 11/12/2012 24 items:[{ xtype: "fieldset", title:
"フォーム", items:[{ xtype: "textfield", labelWidth: "35%" label : 'text1' },{ xtype : "datepickerfield", label : "日付", picker : { yearFrom : 1930 } },{ xtype: "textfield", labelWidth: "35%" label : 'text2' },{ xtype: "textfield", labelWidth: "35%" label : 'text3' }] }]
Japan Sencha User Group config option 11/12/2012 25 共通するものはdefaultsにまとめましょう
defaults • すべての子コンポーネントに適用する設定を記述
Japan Sencha User Group 11/12/2012 26 items:[{ xtype: "fieldset", title:
"フォーム", defaults:{ xtype: "textfield", labelWidth: "35%" }, items:[{ label : 'text1' },{ xtype : "datepickerfield", label : "日付", picker : { yearFrom : 1930 } },{ label : 'text2' },{ label : 'text3' }] }]
Japan Sencha User Group config option 11/12/2012 27 ネストが深くなる…!
Japan Sencha User Group config option 11/12/2012 28 別クラスに切り出しましょう
Japan Sencha User Group 4.イベントハンドリング 11/12/2012 29
Japan Sencha User Group 11/12/2012 30
Japan Sencha User Group 11/12/2012 31 { xtype: 'button', centered:
true, text: 'My Button', handler: function() { alert("You tapped me"); } }
Japan Sencha User Group イベントハンドリング 11/12/2012 32 handler •
よく使われるイベント • デフォルトイベント lisners • 一度に複数のハンドラーを追加 { xtype: 'button', centered: true, text: 'My Button', handler: function() { alert("You tapped me"); } }
Japan Sencha User Group 11/12/2012 33 { xtype: 'button', centered:
true, text: 'My Button', listeners: { tap: { scope: panel, fn: function() { alert("You tapped me"); this.getHtml(); } }, initialize: function() { alert("initialized"); } } }
Japan Sencha User Group イベントハンドリング 11/12/2012 34 scope •
スコープを変更したい場合 • デフォルトスコープ:イベント送信元 fn: function() { this.getHtml(); } scope: panel, fn: function() { this.getHtml(); } thisはbutton thisはpanel
Japan Sencha User Group 5.レイアウトシステム 11/12/2012 35
Japan Sencha User Group レイアウトシステム 11/12/2012 36 VBox HBox Card
Fit Docking 複雑なレイアウトも可能
Japan Sencha User Group 11/12/2012 37
Japan Sencha User Group 11/12/2012 38 Ext.create(‘Ext.Container', { fullscreen :
true, layout : 'vbox', items : [{ xtype : 'panel', html : 'panel1', flex : 1, style: 'background:pink;', }, { xtype : 'panel', html : 'panel2', flex : 2 }] });
Japan Sencha User Group レイアウトシステム 11/12/2012 39 Ext.create(‘Ext.Container', { fullscreen
: true, layout : 'vbox', items : [{ xtype : 'panel', html : 'panel1', flex : 1, style: 'background:pink;', }, { xtype : 'panel', html : 'panel2', flex : 2 }] }); layout • コンテナのレイアウトのための設定 flex • 画面レイアウトの比
Japan Sencha User Group 6.ページ遷移 11/12/2012 40
Japan Sencha User Group 11/12/2012 41
Japan Sencha User Group 11/12/2012 42 var nav = Ext.create('Ext.NavigationView',
{ fullscreen : true, items : [{ title : 'First', items : [{ xtype : 'button', text : 'Push a new view!', handler : function() { nav.push({ title : 'Second', html : 'Second view!' }); } }] }] }); Ext.Viewport.add(nav);
Japan Sencha User Group ページ遷移 11/12/2012 43 Ext.NavigationView •
cardレイアウトのコンテナ • スタックへコンテナを追加、削除することでページアニメーション • push:ビューの追加 • pop:ビューの削除 • ※Backボタンを押して戻る場合、自動的にpopされる var nav = Ext.create('Ext.NavigationView', { fullscreen : true, items : [{ title : 'First', items : [{ xtype : 'button', text : 'Push a new view!', handler : function() { nav.push({ title : 'Second', html : 'Second view!' }); } }] }] }); Ext.Viewport.add(nav);
Japan Sencha User Group 11/12/2012 44 http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.NestedList
Japan Sencha User Group ページ遷移 11/12/2012 45 Ext.dataview.NestedList •
ドリルダウン形式のリスト • TreeStoreをバインディングする var data = { text: 'Groceries', items: [{ text: 'Drinks', items: [{ text: 'Water', items: [{ text: 'Sparkling', leaf: true }, { text: 'Still', leaf: true },{……
Japan Sencha User Group 7.クラスシステムと名前空間 11/12/2012 46
Japan Sencha User Group クラスシステムと名前空間 11/12/2012 47 Senchaの名前空間 •
ファイルパス • app/view/hoge/HogeHoge.js • 完全修飾名 • myApp. view.hoge. HogeHoge app view hoge HogeHoge.js
Japan Sencha User Group 11/12/2012 48 Ext.define(“MyApp.view.Foo ", { extend:
'Ext.Container', requires: [ ‘MyApp.view.Bar', ‘MyApp.view.Baz ' ], xtype:‘foo', config: { xtype: "container", fullscreen : true, layout : 'vbox', items: [{ flex:1, xtype: ‘bar' },{ flex:1, xtype: ‘baz' }] } });
Japan Sencha User Group クラスシステムと名前空間 11/12/2012 49 Ext.define •
クラス定義(完全修飾名) • インスタンスの生成はExt.create extend • ベースとなるクラス(完全修飾名) xtype • 任意の短縮名称 • Requiresを書く事もわすれずに Ext.define(“MyApp.view.Foo ", { extend: 'Ext.Container', requires: [ ‘MyApp.view.Bar', ‘MyApp.view.Baz ' ], xtype:‘foo', config: { xtype: "container", fullscreen : true, layout : 'vbox', items: [{ flex:1, xtype: ‘bar' },{ flex:1, xtype: ‘baz' }] } });
Japan Sencha User Group 11/12/2012 50 知っておくと便利なこと
Japan Sencha User Group 外部ライブラリの追加 11/12/2012 51
Japan Sencha User Group 外部ライブラリの追加 resourcesフォルダ • 外部ライブラリやXML,画像等のリソース
app.jsonに記述 • パスを追記 • cssはcss • jsはjs • その他はresourcesに 11/12/2012 52
Japan Sencha User Group ビルド時のちょっとしたTips 11/12/2012 53
Japan Sencha User Group ちょっとしたTips <debug>〜</debug>タグ • <debug>と</debug>タグで囲むとビルドの際にapp.jsに含まれなくなる 11/12/2012
54 function getPanel(html) { // <debug> if (!Ext.isDefined(html)) { throw new Error('html is required.'); } // </debug> var panel = Ext.create('Ext.Panel'); }
Japan Sencha User Group FlexからSencha Touch2へ 11/12/2012 55
Japan Sencha User Group 11/12/2012 56 Free ActionScript to JavaScript
& Sencha Migration Guide Sencha for Flex
Japan Sencha User Group 11/12/2012 57 次のステップへ
Japan Sencha User Group どうやって勉強する? 本家のドキュメント・フォーラム • Guides, Videosが役に立つ
• API Documentationで使えそうなxtype, config, メソッドを探して使う • 英語版でも時々古い情報があるので注意 11/12/2012 58
Japan Sencha User Group 使ってみて… • 基礎を押えれば簡単 • JSの基礎があると理解しやすい •
かゆいところに手が届く • けど複雑なことをしようとするとつまづく • はじめからMVCで書くのがおすすめ • 複雑なレイアウトを組みやすいかも • ライブラリ本体は重い • Androidではやっぱりもっさり • Windows Phone8でも動く!? 11/12/2012 59 今後に期待! (`・ω・´)
Japan Sencha User Group 11/12/2012 60