ExtJS で 柔軟に開発仕事をこなす方法  株式会社sus4  野村亮之
開発という観点から見る ExtJS での開発メリット <ul><li>設計 / 企画段階 </li></ul><ul><ul><li>モックアップ構築の迅速化と本番に近い形での実装によりユーザーとビジネスフローを確かめながら画面の設計が可能 <...
ExtJS における仕事の分担 UI デザイナーの仕事 どのように使いやすい UI デザインを提供するか考えればよい ビジネスプロセスを重視した UI の開発(システムに依存しない)をすればよい JSON/XML 形式のデータをどうやってうまく...
今回の事例 OTSベース動画分析ツール – Video Analytics
今回の事例 OTSベース動画分析ツール – Video Analytics
Video Analytics  の ExtJS 的特徴 <ul><li>Viewport を利用した全面 ExtJS アプリケーション </li></ul><ul><li>Open Flash Chart でチャートの描画 </li></ul...
Video Analytics  の ExtJS 的特徴 (2) <ul><li>Ext.extend を利用した機能分離 </li></ul><ul><li>ダッシュボードは、パネルごとに入れ替え可能 (Portal Demo ベース ) <...
コーディングする際に忘れがちなこと <ul><li>ログインセッションが切れた場合の処理 ->業務系アプリケーションになると、 1 画面の操作が長くなるため、サーバセッションが切れやすい(デフォルトの場合) </li></ul><ul><li>...
タブパネル - HTMLを動的にロードする場合 <ul><li>ツールバーの日付が変更された場合、開いているタブパネルすべてをリクエストしなおすのは非効率 </li></ul><ul><li>次回開いた瞬間にリクエストをかけるのが理想 </li...
タブパネル - HTMLを動的にロードする場合(実装例) メソッドの引数として params が渡されている 542  if(!force &&  compareParams(params, ppn.params) ) return; 543 ...
タブパネル - HTMLを動的にロードする場合(実装例) 54  function  compareParams (p1, p2) 55  {  56  if(!p1 || 'object' !== typeof p1) { 57  retur...
Form操作の効率化とサーバとの連携 <ul><li>新規登録と更新をどのように分けるか </li></ul><ul><li>新規登録は、サーバから登録情報を取得しない </li></ul><ul><li>新規登録と更新で、サブミット先を変える...
Form操作の効率化とサーバとの連携(実装例) 185  editVideo: function(record) 186  { 187  var id = record.data.id; 188  if(!id) return; 189  19...
Form操作の効率化とサーバとの連携(実装例) 256  var form = new Ext.FormPanel( Ext.apply ({ 257  url: String.format('{0}/index.php/adminapi/vi...
Form操作の効率化とサーバとの連携(実装例) ステータスコードの返却 486  success: function(form, res) 487  { 488  var res = Ext.decode(res.response.respon...
Form周りの細かいTips Fieldの下に注意文を表示する 142 Ext.override(Ext.form.Field, { 143  144  afterRender: function() 145  { 146  var text ...
Form周りの細かいTips  Fieldの下に注意文を表示する
おまけ: プロジェクトでよく利用するプラグイン <ul><li>Ext.ux.DatePickerPlus -> 月選択・週選択などができる </li></ul><ul><li>Ext.ux.TinyMCE ->TinyMCE をプラグインでき...
Upcoming SlideShare
Loading in …5
×

Ext Jsで柔軟に開発仕事をこなす

5,564 views

Published on

ExtJSで
柔軟に開発仕事をこなす方法

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
5,564
On SlideShare
0
From Embeds
0
Number of Embeds
310
Actions
Shares
0
Downloads
25
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Ext Jsで柔軟に開発仕事をこなす

  1. 1. ExtJS で 柔軟に開発仕事をこなす方法 株式会社sus4  野村亮之
  2. 2. 開発という観点から見る ExtJS での開発メリット <ul><li>設計 / 企画段階 </li></ul><ul><ul><li>モックアップ構築の迅速化と本番に近い形での実装によりユーザーとビジネスフローを確かめながら画面の設計が可能 </li></ul></ul><ul><ul><li>完成したモックアップからサーバとのやり取りを設計し、 DB との整合性をとる </li></ul></ul><ul><li>製造段階 </li></ul><ul><ul><li>UI 部分を ExtJS に依存することによる View の分離 </li></ul></ul><ul><ul><li>プログラマは、ロジック (Control, Model) に集中し、テンプレータ( UI デザイナ)は、 UI に集中 </li></ul></ul><ul><li>テスト段階 </li></ul><ul><ul><li>プログラマ・デザイナの仕事が完全に分離しているので、単体テストの実施が容易(責任も分散できる) </li></ul></ul>
  3. 3. ExtJS における仕事の分担 UI デザイナーの仕事 どのように使いやすい UI デザインを提供するか考えればよい ビジネスプロセスを重視した UI の開発(システムに依存しない)をすればよい JSON/XML 形式のデータをどうやってうまく表示するかを考えればよい プログラマの仕事 いかに高速に、結果を返せるかを考えればよい 柔軟に JSON の形式を変更できるように(情報の追加・削除など)考慮して、開発をすればよい(メンテナンシビリティ) スケールアウトする場合は、 JSON の分散と同時性のみを考慮すればよい 共通項は JSON/XML
  4. 4. 今回の事例 OTSベース動画分析ツール – Video Analytics
  5. 5. 今回の事例 OTSベース動画分析ツール – Video Analytics
  6. 6. Video Analytics の ExtJS 的特徴 <ul><li>Viewport を利用した全面 ExtJS アプリケーション </li></ul><ul><li>Open Flash Chart でチャートの描画 </li></ul><ul><ul><li>ExtJS3.0 で統合されている機能 </li></ul></ul><ul><li>Flash との連携 </li></ul><ul><ul><li>flashvars, ExternalInterface を利用した Flash / JavaScript との動的連携 </li></ul></ul>
  7. 7. Video Analytics の ExtJS 的特徴 (2) <ul><li>Ext.extend を利用した機能分離 </li></ul><ul><li>ダッシュボードは、パネルごとに入れ替え可能 (Portal Demo ベース ) </li></ul><ul><li>日付選択に、 DatePickerPlus というプラグインを採用 </li></ul><ul><ul><li>複数日選択・月選択などが可能 </li></ul></ul><ul><li>メインパネルはタブパネルで構成 </li></ul><ul><ul><li>コンテンツの表示・切り替え時にパラメータオブジェクトの比較を行い、表示の効率化 </li></ul></ul><ul><li>Form 操作の効率化とサーバとの連携 </li></ul><ul><ul><li>クライアントバリデーション・サーバ側バリデーションの方法と、可否の受け渡し </li></ul></ul><ul><li>Form 周りの細かい Tips </li></ul>
  8. 8. コーディングする際に忘れがちなこと <ul><li>ログインセッションが切れた場合の処理 ->業務系アプリケーションになると、 1 画面の操作が長くなるため、サーバセッションが切れやすい(デフォルトの場合) </li></ul><ul><li>サーバ情報とクライアントで表示されている情報の同期タイミング </li></ul><ul><li>リクエストを減らす努力 </li></ul><ul><li>高速回線・低速回線での挙動の違い (Event や Callback を必ず使うこと ) </li></ul><ul><li>おまけ 参照渡しと実体渡し </li></ul>
  9. 9. タブパネル - HTMLを動的にロードする場合 <ul><li>ツールバーの日付が変更された場合、開いているタブパネルすべてをリクエストしなおすのは非効率 </li></ul><ul><li>次回開いた瞬間にリクエストをかけるのが理想 </li></ul><ul><li>Ext.ux.clone() でオブジェクトをコピーし、そのパネルの状態を保持 </li></ul><ul><li>activate( 前面に表示されたとき ) 時に、 clone されたパラメータと現在のパラメータを比較、同じでない場合のみ再描画する </li></ul>
  10. 10. タブパネル - HTMLを動的にロードする場合(実装例) メソッドの引数として params が渡されている 542 if(!force && compareParams(params, ppn.params) ) return; 543 544 ppn.load({ 545 url: ppn.baseurl, 546 method: 'POST', 547 params: Ext.ux.clone(params), 548 scripts: true, 549 callback: function(el) 550 { … 562 } 563 }); 指摘事項: 状態を比較するのであれば、 Ext.state.manager( ステートマネージャ ) を利用するほうがよい
  11. 11. タブパネル - HTMLを動的にロードする場合(実装例) 54 function compareParams (p1, p2) 55 { 56 if(!p1 || 'object' !== typeof p1) { 57 return false; 58 } 59 if(!p2 || 'object' !== typeof p2) { 60 return false; 61 } 62 63 for(k in p1) { 64 //p2 が空の場合 65 if(!p2. hasOwnProperty (k)) return false; 66 67 //p2 と p1 の値が違う 68 if(p2[k]!==p1[k]) return false; 69 } 70 return true; 71 }
  12. 12. Form操作の効率化とサーバとの連携 <ul><li>新規登録と更新をどのように分けるか </li></ul><ul><li>新規登録は、サーバから登録情報を取得しない </li></ul><ul><li>新規登録と更新で、サブミット先を変える必要がある </li></ul><ul><li>formPanel は共通化 </li></ul><ul><li>Ext.apply の利用で新規登録 formPanel の config を書き換える </li></ul><ul><li>サーバとのやり取りはステータスコードにて管理 </li></ul>
  13. 13. Form操作の効率化とサーバとの連携(実装例) 185 editVideo: function(record) 186 { 187 var id = record.data.id; 188 if(!id) return; 189 190 var us = this.updateSwf; 191 var sn = this.swfname; 192 var form = this.addVideo( { 193 url: String.format('{0}/index.php/adminapi/video/{1}/update', baseUrl, id), 194 update: true 195 } ); 196 form.load ({ 197 url:String.format('{0}/index.php/adminapi/video/{1}/info', baseUrl, id), 198 success: function(f) 199 { 200 us(sn, form); 201 }, 202 }); 203 }, 指摘事項: ExtJS 3.0 からは Direct という機能を使って、サーバとのやり取りが実現可能。そのほうが、コード量が削減できるし、楽に運用ができるとのこと
  14. 14. Form操作の効率化とサーバとの連携(実装例) 256 var form = new Ext.FormPanel( Ext.apply ({ 257 url: String.format('{0}/index.php/adminapi/video/default/add', baseUrl), 258 method: 'POST', 259 reader: reader, 260 bodyStyle: 'padding: 1em', 261 border: false, 262 region: 'center', 263 layout: 'form', 264 items:[ … 427 xtype: 'textfield', 428 name: 'page_url', 429 fieldLabel: ' 掲載ページ URL<br />( オプション )', 430 width: 240, 431 vtype: 'url' 432 } 433 ] 434 } 435 ] 436 }, extra ));
  15. 15. Form操作の効率化とサーバとの連携(実装例) ステータスコードの返却 486 success: function(form, res) 487 { 488 var res = Ext.decode(res.response.responseText);489 if(res.success){ 490 store.reload(); 491 win.close(); 492 return; 493 } 494 495 return; 496 }, 497 failure: function(form, res) 498 { 499 var res = Ext.decode(res.response.responseText); 500 switch(res.errno){ 501 502 case 501: 503 var msg = &quot; 入力された情報が間違っています。 <br /> もう一度よく確認をしてご登録ください。 &quot;; 504 break; 505 …
  16. 16. Form周りの細かいTips Fieldの下に注意文を表示する 142 Ext.override(Ext.form.Field, { 143 144 afterRender: function() 145 { 146 var text = this.cautionText; 147 if(text){ 148 //Type is below, upper 149 var type = this.cautionType ? this.cautionType : 'below'; 150 var pElem = this.getEl().parent(); 151 //elem.dom.innerHTML += <div>text + '</div>'; 152 153 var elem = { 154 tag: 'div', 155 html: text, 156 cls: 'x-form-caution-text' 157 }; 158 159 Ext.DomHelper.append(pElem, elem); 160 } 161 Ext.form.Field.superclass.afterRender.call(this); 162 this.initEvents(); 163 this.initValue(); 164 } 165 166 }); 指摘事項: 既存クラスのオーバーライドは、 ExtJS 本体のバージョンがあがったときに動作しない可能性が残る。できるだけ、 event として処理したほうがよい 改善策としては、 override ではなく、独自の FormClass を作成して、各フォームはそれを継承するようにすればよい。
  17. 17. Form周りの細かいTips Fieldの下に注意文を表示する
  18. 18. おまけ: プロジェクトでよく利用するプラグイン <ul><li>Ext.ux.DatePickerPlus -> 月選択・週選択などができる </li></ul><ul><li>Ext.ux.TinyMCE ->TinyMCE をプラグインできるので、高機能な HTML エディタを提供可能 </li></ul><ul><li>Ext.ux.clone ->JavaScript ではすべて参照で渡されるので、実態をコピーしたいときに重宝 </li></ul>

×