1. 2008.10.29 NCS 鈴⽊
Ajax + Extでゼロから始める
Extでゼロから始める
ローカルアプリケーション開発
ロ カルアプリケ ション開発

2. ⽬次
• 何が作りたかったか？（開発の背景と要求仕様）
• なぜ Ext になったか？（Ajax + Extを採⽤した理由）
• 何を作ったか？（GUIシステムの構成）
• 誰が作ったか？（⼈員とスキル）
• どうやって作ったか？（開発環境と⼿法）
作
• どのくらいで作ったか？（費⽤と期間、コード量）
• 実際に作れたのだろうか？（Extの使⽤感）
実際 作 （ 使⽤ ）
• 作ってよかったか？（ローカルアプリ⽤SDKとしてのExt）
• デモ
デ

3. そもそも何を作っているのか?
そもそも何を作っているのか?
PCクラスタによる分散処理環境
◦ マルチPC環境をマルチスレッドっぽく
OS • Linux
ノード数 • 数台〜数百台
• 画像演算
⽤途
• 物理シミュレーション
• 演算コア : C
開発⾔語
• 管理部 : Ruby

4. 開発したGUIの⽤途
開発したGUIの⽤途
•リスト システムの各情報を
•追加・削除 タスク リアルタイム管理
•中断・再開
管理
タスク リソース
情報 管理
GUI
•スクリプト
•ログ •リスト
•関連するデータ 追加 削除
•追加・削除
•タスク⽣成ウィザード •離脱・復帰
データ システム
管理 設定 パッケ ジ
•⼊出⼒デ タ
•⼊出⼒データ •パッケージ
•中間データ •ユーザ
•権限

5. 新管理GUI開発の動機づけ
新管理GUI開発の動機づけ
分散環境システムを刷新し、メジャー
アップ
バージョンアップ
当然、管理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サーバ

7. 望ましいLinux PCクラスタ環境⽤
望ましいLinux PCクラスタ環境⽤
管理GUIのあり⽅
管理GUIのあり⽅
サーバ負荷の低減
•マルチユーザからの同時アクセスを前提とした設計
•ユーザPCのリソースを活⽤すべし
ザ リソ スを活⽤す し
ユーザビリティの向上
•マルチスレッド化によるリアルタイム性の向上
•リッチなコンテンツで、よりユーザフレンドリーに
メンテナンス性の向上
•Cでオブジェクト指向はつらい
•Linux依存からの脱却
•できれば、スクリプト⾔語でさくさく書きたい
•が、いまさらWin開発者になるのはつらい

8. ようするに、
ブラウザでAjaxが
ブラウザでAjaxがいいのでは？
ブ ザ がいいのでは？
Webサーバ
W bサ バ
• マルチユーザからのアクセスを前提
• マルチタスク
ブラウザ
ブ ウザ + Ajax
• ⾮同期かつリアルタイム
• リッチなコンテンツ
• Win でも動く
• スクリプト⾔語でらくらくコーディング
• 豊富な開発リソースやTips
豊富な開発リソ スやTips

9. だがしかし、
Ajaxで普通のアプリは作れるのか？
Ajaxで普通のアプリは作れるのか？
普 プ 作
また、作ってかまわないものなのだろうか？
基盤技術としての信頼性
• 普通のアプリケーションを実装するのに必要な機能がそろっているのか？
• それなりの規模のアプリケーションは構築可能なのだろうか？
• 実⽤的な性能が出るだろうか？
• 古いブラウザを使っているユーザにも使⽤可能なものにできるだろうか？
スキルと時間と設計の問題
間 設 問題
• 初⼼者でも、現実的な開発期間での開発が可能だろうか？
• ロ カルアプリの開発者がわざわざAjaxを習得する意義はあるのか？
ローカルアプリの開発者がわざわざAjaxを習得する意義はあるのか？

10. 隣の席の同期が
「Extなんかいいんじゃない？」と⾔う
Extなんかいいんじゃない？」と⾔う
ブラウザ上で、なんか普通のアプリっぽい光
景が展開されている。
◦ 表（グリッド）
◦ ツリ
ツリー
◦ ツールバー
◦ コンテキストメニュ
コンテキストメニュー
◦ ドラッグアンドドロップ
◦ フレンドリーなフォーム
◦ リアルタイムな応答
◦ Webデスクトップ

11. Ajaxどころかhtmlもど素⼈だが、
どうもExtならいけそうである。
どうもExtならいけそうである。

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

16. 採⽤を⾒送った⼿法たち
素⼈なりに調べた結果、ちょっとアグ
素⼈なりに調べた結果 ちょっとアグ
レッシヴすぎるので、今回は⾒送り
Ruby on Rails
• 「新しいことばかりで、ただでさえ覚えることが多いのに・・・」
「新しいことばかりで、ただでさえ覚えることが多いのに 」
• 「思うにサーバ側で頑張りすぎ？」
Aptana（Eclipse）
• 「vi ⼈間たちにはメリットが少ないです。」
• 「ていうか けっこう重くない？」
「ていうか、けっこう重くない？」
Ext GWT
• 「サーバがRubyなのに、クライアントサイドだけJavaだなんて・・・」

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（今⽇はなし）
ブラウザ

20. ログイン画⾯
•プリファレンス・使⽤権限モード・⾔語を選択する
ことが可能

21. ダッシュボード
• Powered by Mac OS Style Dock
• マルチブラウザウィンドウ（タブ）制を採⽤
• 必要のない時は隠しておける

22. セッション管理
•グリッドのネストを利⽤して、階層化された情報に
効率よくアクセス

23. リソース管理
•シンプルな２グリッドで、CPUとDISKという⼆つの
リソースタイプを同時に管理
リソ スタイプを同時に管理
•メッセージは適宜ポップアップ通知

24. ログブラウザ
• メニュー + タブで複数のログファイルをすばやく
閲覧可能
• ダッシュボードはメニューバーとドックで選択可能

25. 管理者画⾯
•管理者のみログイン可能
•システム設定 パッケ ジ管理 ユ ザ管理 ライ
システム設定、パッケージ管理、ユーザ管理、ライ
センス管理、バグ管理をひとつの画⾯で

26. Extを採⽤してみて（＋）
Extを採⽤してみて（＋）
GUI SDKとしての完成度は⼗分
• GUIの基本機能を網羅
• 個々のコンポーネントの完成度が⾼い
• かゆいところに⼿が届きすぎるユーティリティ群
かゆ ろ ⼿が届きすぎる ティリティ群
• ⼀貫した設計と実装
• かなりま とうなオブジ クト指向（私⾒）
かなりまっとうなオブジェクト指向（私⾒）
• ⾼いブラウザ互換性（IE6でもきちんと表⽰）
• 外部ライブラリとの親和性（jQuery等と併存可能）
• すばやく開発することができる（C Gtk+-2.0と⽐較）
Gtk+ 2.0と⽐較）

27. Extを採⽤してみて（－）
Extを採⽤してみて（ ）
Extを採⽤してみて（
を採⽤してみて（－）
慣れるまで少々修⾏が必要
• ソースコードの読み込みはほぼ必須
• 独⾃の継承スタイルを理解しないと⼤量のコードを書くのは難しい
Extから抜け出すのに苦労する
• Extで作ると、何はともあれExtにしかならない
• JavaScript ネイティヴのDOMにほとんど触らない
• ⾃前cssの適⽤が⽐較的難しい
とはいいつつ、やはりIEは厳しいか
• IE7上では、使えば使うほど挙動不審（おもにIE7が）
• IE6は表⽰するのがやっと？

28. というわけで、ちょっと予定より遅れそうなんですが、
なんとか
リリースにはこぎつけられ
そうです。