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

株式会社株式会社 sus4sus4 　 野村亮之　 野村亮之

開発という観点から見る開発という観点から見るExtJSExtJS での開発メリットでの開発メリット

設計設計 // 企画段階企画段階 モックアップ構築の迅速化と本番に近い形での実装にモックアップ構築の迅速化と本番に近い形での実装に

よりユーザーとビジネスフローを確かめながら画面のよりユーザーとビジネスフローを確かめながら画面の設計が可能設計が可能

完成したモックアップからサーバとのやり取りを設計完成したモックアップからサーバとのやり取りを設計し、し、 DBDB との整合性をとるとの整合性をとる

製造段階製造段階 UIUI 部分を部分を ExtJSExtJS に依存することによるに依存することによる ViewView の分離の分離 プログラマは、ロジックプログラマは、ロジック (Control, Model)(Control, Model) に集中し、に集中し、

テンプレータ（テンプレータ（ UIUI デザイナ）は、デザイナ）は、 UIUI に集中に集中 テスト段階テスト段階

プログラマ・デザイナの仕事が完全に分離しているのプログラマ・デザイナの仕事が完全に分離しているので、単体テストの実施が容易（責任も分散できる）で、単体テストの実施が容易（責任も分散できる）

ExtJSExtJS における仕事の分担における仕事の分担

UI デザイナーの仕事

どのように使いやすい UI デザインを提供するか考えればよい

ビジネスプロセスを重視したUI の開発（システムに依存しない）をすればよい

JSON/XML 形式のデータをどうやってうまく表示するかを考えればよい

プログラマの仕事

いかに高速に、結果を返せるかを考えればよい

柔軟に JSON の形式を変更できるように（情報の追加・削除など）考慮して、開発をすればよい（メンテナンシビリティ）

スケールアウトする場合は、JSON の分散と同時性のみを考慮すればよい

共通項はJSON/XML

今回の事例今回の事例OTSOTS ベース動画分析ツール – ベース動画分析ツール – Video AnalyticsVideo Analytics

今回の事例今回の事例OTSOTS ベース動画分析ツール – ベース動画分析ツール – Video AnalyticsVideo Analytics

Video Analytics Video Analytics のの ExtJSExtJS 的特徴的特徴

ViewportViewport を利用した全面を利用した全面 ExtJSExtJS アプリケーショアプリケーションン

Open Flash ChartOpen Flash Chart でチャートの描画でチャートの描画 ExtJS3.0ExtJS3.0 で統合されている機能で統合されている機能

FlashFlash との連携との連携 flashvars, ExternalInterfaceflashvars, ExternalInterface を利用したを利用した Flash Flash

/ JavaScript/ JavaScript との動的連携との動的連携

Video Analytics Video Analytics のの ExtJSExtJS 的特徴的特徴 (2)(2)

Ext.extendExt.extend を利用した機能分離を利用した機能分離 ダッシュボードは、パネルごとに入れ替え可能ダッシュボードは、パネルごとに入れ替え可能 (Portal (Portal

DemoDemo ベースベース )) 日付選択に、日付選択に、 DatePickerPlusDatePickerPlus というプラグインを採用というプラグインを採用

複数日選択・月選択などが可能複数日選択・月選択などが可能 メインパネルはタブパネルで構成メインパネルはタブパネルで構成

コンテンツの表示・切り替え時にパラメータオブコンテンツの表示・切り替え時にパラメータオブジェクトの比較を行い、表示の効率化ジェクトの比較を行い、表示の効率化

FormForm 操作の効率化とサーバとの連携操作の効率化とサーバとの連携 クライアントバリデーション・サーバ側バリデークライアントバリデーション・サーバ側バリデー

ションの方法と、可否の受け渡しションの方法と、可否の受け渡し FormForm 周りの細かい周りの細かい TipsTips

コーディングする際に忘れがちなことコーディングする際に忘れがちなこと

ログインセッションが切れた場合の処理ログインセッションが切れた場合の処理→業務系アプリケーションになると、→業務系アプリケーションになると、 11 画面の操作が長く画面の操作が長くなるため、サーバセッションが切れやすい（デフォルトのなるため、サーバセッションが切れやすい（デフォルトの場合）場合）

サーバ情報とクライアントで表示されている情報の同期タサーバ情報とクライアントで表示されている情報の同期タイミングイミング

リクエストを減らす努力リクエストを減らす努力 高速回線・低速回線での挙動の違い高速回線・低速回線での挙動の違い (Event(Event やや CallbackCallback

を必ず使うことを必ず使うこと ))

おまけおまけ参照渡しと実体渡し参照渡しと実体渡し

タブパネル タブパネル - HTML- HTML を動的にロードする場合を動的にロードする場合

ツールバーの日付が変更された場合、開いていツールバーの日付が変更された場合、開いているタブパネルすべてをリクエストしなおすのはるタブパネルすべてをリクエストしなおすのは非効率非効率

次回開いた瞬間にリクエストをかけるのが理想次回開いた瞬間にリクエストをかけるのが理想

Ext.ux.clone()Ext.ux.clone() でオブジェクトをコピーし、そのでオブジェクトをコピーし、そのパネルの状態を保持パネルの状態を保持

activate(activate( 前面に表示されたとき前面に表示されたとき )) 時に、時に、 clonecloneされたパラメータと現在のパラメータを比較、されたパラメータと現在のパラメータを比較、同じでない場合のみ再描画する同じでない場合のみ再描画する

タブパネル タブパネル - HTML- 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( ステートマネージャ ) を利用するほうがよい

タブパネル タブパネル - HTML- 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 }

FormForm 操作の効率化とサーバとの連携操作の効率化とサーバとの連携

新規登録と更新をどのように分けるか新規登録と更新をどのように分けるか 新規登録は、サーバから登録情報を取得しない新規登録は、サーバから登録情報を取得しない 新規登録と更新で、サブミット先を変える必要が新規登録と更新で、サブミット先を変える必要が

あるある

formPanelformPanel は共通化は共通化 Ext.applyExt.apply の利用で新規登録の利用で新規登録 formPanelformPanel のの configconfig をを書き換える書き換える

サーバとのやり取りはステータスコードにて管理サーバとのやり取りはステータスコードにて管理

FormForm 操作の効率化とサーバとの連携操作の効率化とサーバとの連携 (( 実装例実装例 ))

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: true195 });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 という機能を使って、サーバとのやり取りが実現可能。そのほうが、コード量が削減できるし、楽に運用ができるとのこと

FormForm 操作の効率化とサーバとの連携操作の効率化とサーバとの連携 (( 実装例実装例 ))

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));

FormForm 操作の効率化とサーバとの連携操作の効率化とサーバとの連携 (( 実装例実装例 ))ステータスコードの返却ステータスコードの返却

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 = " 入力された情報が間違っています。 <br /> もう一度よく確認をしてご登録ください。 ";504 break;505 …

FormForm 周りの細かい周りの細かい TipsTipsFieldField の下に注意文を表示するの下に注意文を表示する

142 Ext.override(Ext.form.Field, {143 144 afterRender: function()145 {146 var text = this.cautionText;147 if(text){148 //Type is below, upper149 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 を作成して、各フォームはそれを継承するようにすればよい。

FormForm 周りの細かい周りの細かい TipsTips Field Field の下に注意文を表示するの下に注意文を表示する

おまけおまけ : : プロジェクトでよく利用するプラグインプロジェクトでよく利用するプラグイン

Ext.ux.DatePickerPlusExt.ux.DatePickerPlus→→月選択・週選択などができる月選択・週選択などができる

Ext.ux.TinyMCEExt.ux.TinyMCE→TinyMCE→TinyMCE をプラグインできるので、高機能なをプラグインできるので、高機能なHTMLHTMLエディタを提供可能エディタを提供可能

Ext.ux.cloneExt.ux.clone→JavaScript→JavaScript ではすべて参照で渡されるので、ではすべて参照で渡されるので、実態をコピーしたいときに重宝実態をコピーしたいときに重宝