More Related Content More from Yuki Naotori (20) Ext Ncs 200810292. ⽬次
• 何が作りたかったか?(開発の背景と要求仕様)
• なぜ Ext になったか?(Ajax + Extを採⽤した理由)
• 何を作ったか?(GUIシステムの構成)
• 誰が作ったか?(⼈員とスキル)
• どうやって作ったか?(開発環境と⼿法)
作
• どのくらいで作ったか?(費⽤と期間、コード量)
• 実際に作れたのだろうか?(Extの使⽤感)
実際 作 ( 使⽤ )
• 作ってよかったか?(ローカルアプリ⽤SDKとしてのExt)
• デモ
デ
4. 開発したGUIの⽤途
開発したGUIの⽤途
•リスト システムの各情報を
•追加・削除 タスク リアルタイム管理
•中断・再開
管理
タスク リソース
情報 管理
GUI
•スクリプト
•ログ •リスト
•関連するデータ 追加 削除
•追加・削除
•タスク⽣成ウィザード •離脱・復帰
データ システム
管理 設定 パッケ ジ
•⼊出⼒デ タ
•⼊出⼒データ •パッケージ
•中間データ •ユーザ
•権限
6. 既存システム管理GUIの問題点
既存システム管理GUIの問題点
ユーザはリモートの
ザはリモ トの それぞれのGUIプロセスが、
れぞれ プ セ が
個⼈⽤デスクトップ サーバ上の 個別にアクセスをかける
からアクセス 1プロセスを消費
シングルスレッド 個別にファイル
情報も取得する
X
Linux のみで動作
protocol
C(Gtk+-2.0)で
C(G k 2 0)
書かれており、
膨⼤なコード量
X
protocol
当然Win Cでオブジェクト指向
要Xサーバ
8. ようするに、
ブラウザでAjaxが
ブラウザでAjaxがいいのでは?
ブ ザ がいいのでは?
Webサーバ
W bサ バ
• マルチユーザからのアクセスを前提
• マルチタスク
ブラウザ
ブ ウザ + Ajax
• ⾮同期かつリアルタイム
• リッチなコンテンツ
• Win でも動く
• スクリプト⾔語でらくらくコーディング
• 豊富な開発リソースやTips
豊富な開発リソ スやTips
9. だがしかし、
Ajaxで普通のアプリは作れるのか?
Ajaxで普通のアプリは作れるのか?
普 プ 作
また、作ってかまわないものなのだろうか?
基盤技術としての信頼性
• 普通のアプリケーションを実装するのに必要な機能がそろっているのか?
• それなりの規模のアプリケーションは構築可能なのだろうか?
• 実⽤的な性能が出るだろうか?
• 古いブラウザを使っているユーザにも使⽤可能なものにできるだろうか?
スキルと時間と設計の問題
間 設 問題
• 初⼼者でも、現実的な開発期間での開発が可能だろうか?
• ロ カルアプリの開発者がわざわざAjaxを習得する意義はあるのか?
ローカルアプリの開発者がわざわざAjaxを習得する意義はあるのか?
12. GUIシステム構成
GUIシステム構成
ユーザPC上で動作 GUIユーザはみんな
ひとつのサーブ
レットにアクセス
NDE http サーブレット
( p
(http:<IP>:<port>)
p )
HTTP サーブレットのモニタリング
• カレントタスクの状態
• リソースの状態
• システムの状態 (OS・ネットワーク)
• ファイル(スクリプト・データ等)
Ajax 軽くて軽快な動作
フリ ズしない
フリーズしない
Firefox
Fi f
IE6 IE7
13. 採⽤したライブラリ
Graphics
p Ajax
j
• Ext theme (blue)
• fugue (CC) (Ext + jQuery)
• McDo Cats2 (?)
Ruby
(WEBrick + ERuby)
14. 開発⼈員
総員3名(普段はCをこせこせ書いている⼈々)
• 初 Ext Ajax JavaScript DHtml
j p
7年⽬
年 • C 7年 (Gtk+-2.0でのGUI開発経験あり)
• Ruby 1年
• 初 GUI Ext Ajax JavaScript DHtml Ruby
5年⽬ • C 4年
• Java 2年
2年⽬
• 初 GUI Ext Ajax JavaScript DHtml Ruby
• C 2年
15. 開発環境・⼿法
開発環境 ⼿法
結局、慣れ親しんだ、特定⽤途のツ ルを組み合
結局、慣れ親しんだ、特定⽤途のツールを組み合
わせる⼿法に
vim
エディタ
YUI Compressor
firebug
コード圧縮 デバッガ
国際化 ビルドツール
GNU makek
gettext
JavaScript Lint
17. 開発期間
ʼ08/05
• Ext って何? JavaScript って何? DOMって何? ていうか、http って何?
て何 p て何 て何 て うか、 p て何
• コードが読めない書けない。
導⼊期 • アプリケーションの組み⽅がわからない。
ʼ08/08
• Ext の低レベルライブラリのソースを読み込む。
• ⼩さなサンプルアプリケーションを作ってみる。
模索期 • ブラウザ互換性の⾯倒くささを実体験する。
ʼ08/10
• Extのクラスが定義できるようになる。プラグインも使えるようになる。
• JavaScriptのスコープと Ext での扱い⽅も理解する。
加速期 • ⼀週間くらいでひとつのコンポーネントを仕上げられるようになる。
ʼ08/11
08/11
約半年 ⼯数 : 実質12⼈⽉くらい
18. 開発規模
ʼ08/10/28時点でのソースコード⾏数
08/10/28時点でのソ スコ ド⾏数
(含むコピペ+ ⾃動⽣成)
アイコンのcssを 含む
⾃動⽣成 css •かき集めたuxたち
初期に書いたコ ドの
•初期に書いたコードの
8545⾏ 残骸たち
•jsdoc⽤のコメント群
Ruby
4637⾏
JavaScript
11523⾏
いつの間にか
ぶくぶくと…
19. デモ(まだ微妙に開発中)
ホストOS
Win XP
ゲストOS
ubuntu
(coLinux)
firefox IE7(今⽇はなし)
ブラウザ
21. ダッシュボード
• Powered by Mac OS Style Dock
• マルチブラウザウィンドウ(タブ)制を採⽤
• 必要のない時は隠しておける
27. Extを採⽤してみて(-)
Extを採⽤してみて( )
Extを採⽤してみて(
を採⽤してみて(-)
慣れるまで少々修⾏が必要
• ソースコードの読み込みはほぼ必須
• 独⾃の継承スタイルを理解しないと⼤量のコードを書くのは難しい
Extから抜け出すのに苦労する
• Extで作ると、何はともあれExtにしかならない
• JavaScript ネイティヴのDOMにほとんど触らない
• ⾃前cssの適⽤が⽐較的難しい
とはいいつつ、やはりIEは厳しいか
• IE7上では、使えば使うほど挙動不審(おもにIE7が)
• IE6は表⽰するのがやっと?