2008.10.29 NCS 鈴⽊

AjaxAjax ++ ExtExtでゼロから始めるでゼロから始めるロ カルアプリケ ション開発ロ カルアプリケ ション開発ローカルアプリケーション開発ローカルアプリケーション開発

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

そもそも何を作っているのかそもそも何を作っているのか??そもそも何を作っているのかそもそも何を作っているのか??PCクラスタによる分散処理環境PCクラスタによる分散処理環境◦ マルチPC環境をマルチスレッドっぽく

• LinuxOS

• 数台〜数百台ノード数• 画像演算⽤途• 物理シミュレーション

⽤途• 演算コア : C開発⾔語• 管理部 : Ruby

開発⾔語

開発した開発したGUIGUIの⽤途の⽤途開発した開発したGUIGUIの⽤途の⽤途タスク

•リスト•追加・削除

システムの各情報をリアルタイム管理タスク

管理

•追加・削除•中断・再開

リアルタイム管理

リソースタスク

GUI管理情報

•リスト•追加・削除

•スクリプト•ログ

•関連するデータ 追加 削除•離脱・復帰

•関連するデータ•タスク⽣成ウィザード

システム

設定

データ

管理•⼊出⼒デ タ •パッケージ•⼊出⼒データ•中間データ

パッケ ジ•ユーザ•権限

新管理新管理GUIGUI開発の動機づけ開発の動機づけ新管理新管理GUIGUI開発の動機づけ開発の動機づけ

分散環境システムを刷新し、メジャーバージョンアップアップ当然、管理GUIも更新せねばならない

既存のGUIの問題点を⼀挙に解決既存のGUIの問題点を 挙に解決さらに、どうせなら⻑期的にみて展望のありそうな技術を採⽤したいありそうな技術を採⽤したい

既存システム管理既存システム管理GUIGUIの問題点の問題点既存システム管理既存システム管理GUIGUIの問題点の問題点ザはリモ トの れぞれ プ セ が

サーバ上の1プロセスを消費

ユーザはリモートの個⼈⽤デスクトップからアクセス

それぞれのGUIプロセスが、個別にアクセスをかける

個別にファイル情報も取得するシングルスレッド

Xprotocol

C(G k 2 0)

Linux のみで動作

C(Gtk+-2.0)で書かれており、膨⼤なコード量

Xprotocol

当然Win Cでオブジェクト指向要Xサーバ

望ましい望ましいLinuxLinux PCPCクラスタ環境⽤クラスタ環境⽤管管管理管理GUIGUIのあり⽅のあり⽅

サーバ負荷の低減

•マルチユーザからの同時アクセスを前提とした設計•ユーザPCのリソースを活⽤すべしザ リソ スを活⽤す し

ユーザビリティの向上

•マルチスレッド化によるリアルタイム性の向上•リッチなコンテンツで、よりユーザフレンドリーに

•Cでオブジェクト指向はつらい

メンテナンス性の向上

•Linux依存からの脱却•できれば、スクリプト⾔語でさくさく書きたい•が、いまさらWin開発者になるのはつらい

ようするに、ようするに、ブ ザブ ザ ががブラウザでブラウザでAjaxAjaxがいいのでは？がいいのでは？W bサ バ

•マルチユーザからのアクセスを前提

Webサーバ

•マルチタスク

ブ ウザ

•⾮同期かつリアルタイム

ブラウザ + Ajax

•リッチなコンテンツ•Win でも動く•スクリプト⾔語でらくらくコーディング•豊富な開発リソースやTips•豊富な開発リソ スやTips

だがしかし、だがしかし、普 プ 作普 プ 作AjaxAjaxで普通のアプリは作れるのか？で普通のアプリは作れるのか？

また、作ってかまわないものなのだろうか？また、作ってかまわないものなのだろうか？

基盤技術としての信頼性基盤技術としての信頼性• 普通のアプリケーションを実装するのに必要な機能がそろっているのか？• それなりの規模のアプリケーションは構築可能なのだろうか？• 実⽤的な性能が出るだろうか？• 古いブラウザを使っているユーザにも使⽤可能なものにできるだろうか？

スキルと時間と設計の問題間 設 問題• 初⼼者でも、現実的な開発期間での開発が可能だろうか？ロ カルアプリの開発者がわざわざAjaxを習得する意義はあるのか？• ローカルアプリの開発者がわざわざAjaxを習得する意義はあるのか？

隣の席の同期が隣の席の同期が「「「「ExtExtなんかいいんじゃない？」と⾔うなんかいいんじゃない？」と⾔う

ブラウザ上で、なんか普通のアプリっぽい光景が展開されている。

◦ 表（グリッド）ツリ◦ ツリー◦ ツールバー◦ コンテキストメニューコンテキストメニュ◦ ドラッグアンドドロップ◦ フレンドリーなフォーム◦ リアルタイムな応答◦ Webデスクトップ

Ajaxどころかhtmlもど素⼈だが、

どうもどうもExtExtならならいけそうである。いけそうである。

GUIGUIシステム構成システム構成GUIGUIシステム構成システム構成ユーザPC上で動作 GUIユーザはみんなユーザPC上で動作 GUIユーザはみんな

ひとつのサーブレットにアクセス

NDE http サーブレット(http:<IP>:<port>)( p p )

HTTP サーブレットのモニタリング• カレントタスクの状態• リソースの状態• システムの状態 （OS・ネットワーク）• ファイル（スクリプト・データ等）

Ajaxフリーズしない

軽くて軽快な動作Fi f フリ ズしないFirefoxIE6 IE7

採⽤したライブラリ採⽤したライブラリ採⽤したライブラリ採⽤したライブラリ

AjaxGraphics jp• Ext theme (blue)• fugue (CC)• McDo Cats2 (?)

(Ext + jQuery)

Ruby(WEBrick + ERuby)

開発⼈員開発⼈員開発⼈員開発⼈員総員3名（普段はCをこせこせ書いている⼈々）総員3名（普段はCをこせこせ書いている⼈々）

•初 Ext Ajax JavaScript DHtml年 初 j p•C 7年 (Gtk+-2.0でのGUI開発経験あり）•Ruby 1年

7年⽬•初 GUI Ext Ajax JavaScript DHtml Ruby•C 4年5年⽬ C4年•Java 2年

5年⽬•初 GUI Ext Ajax JavaScript DHtml Ruby•C 2年2年⽬

開発環境・⼿法開発環境・⼿法開発環境 ⼿法開発環境 ⼿法結局、慣れ親しんだ、特定⽤途のツールを組み合結局、慣れ親しんだ、特定⽤途のツ ルを組み合わせる⼿法に

vim

エディタ

デバッガコード圧縮firebugYUI Compressor

ビルドツール国際化GNU kGNU makeJavaScript Lintgettext

採⽤を⾒送った⼿法たち採⽤を⾒送った⼿法たち採⽤を⾒送った⼿法たち採⽤を⾒送った⼿法たち素⼈なりに調べた結果 ちょっとアグ素⼈なりに調べた結果、ちょっとアグレッシヴすぎるので、今回は⾒送りRuby on Rails•「新しいことばかりで、ただでさえ覚えることが多いのに・・・」「新しいことばかりで、ただでさえ覚えることが多いのに 」•「思うにサーバ側で頑張りすぎ？」

Aptana（Eclipse）Aptana（Eclipse）•「vi ⼈間たちにはメリットが少ないです。」•「ていうか けっこう重くない？」•「ていうか、けっこう重くない？」

Ext GWT•「サーバがRubyなのに、クライアントサイドだけJavaだなんて・・・」

開発期間開発期間開発期間開発期間•Ext って何？ JavaScript って何？ DOMって何? ていうか、http って何？

ʼ08/05

導⼊期

て何 p て何 て何 て うか、 p て何•コードが読めない書けない。•アプリケーションの組み⽅がわからない。

•Ext の低レベルライブラリのソースを読み込む。ʼ08/08

模索期•⼩さなサンプルアプリケーションを作ってみる。•ブラウザ互換性の⾯倒くささを実体験する。

•Extのクラスが定義できるようになる。プラグインも使えるようになる。

ʼ08/10

加速期•JavaScriptのスコープと Ext での扱い⽅も理解する。•⼀週間くらいでひとつのコンポーネントを仕上げられるようになる。

ʼ08/1108/11

約半年 ⼯数 : 実質12⼈⽉くらい

開発規模開発規模開発規模開発規模ʼ08/10/28時点でのソースコード⾏数08/10/28時点でのソ スコ ド⾏数（含むコピペ+ ⾃動⽣成）

cssアイコンのcssを⾃動⽣成

含む•かき集めたuxたち初期に書いたコ ドの8545⾏ •初期に書いたコードの

残骸たち•jsdoc⽤のコメント群

Ruby4637⾏

JavaScript11523⾏いつの間にか

ぶくぶくと…ぶくぶくと…

デモデモ（まだ微妙に開発中）（まだ微妙に開発中）ホストOSWin XP

ubuntuゲストOS

(coLinux)

firefox IE7（今⽇はなし）ブラウザ

ログイン画⾯

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

ダッシュボード

• Powered by Mac OS Style Dockマルチブラウザウィンドウ（タブ）制を採⽤• マルチブラウザウィンドウ（タブ）制を採⽤

• 必要のない時は隠しておける

セッション管理

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

リソース管理

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

ログブラウザ

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

管理者画⾯

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

ExtExtを採⽤してみて（＋）を採⽤してみて（＋）ExtExtを採⽤してみて（＋）を採⽤してみて（＋）GUI SDKとしての完成度は⼗分

• GUIの基本機能を網羅

GUI SDKとしての完成度は⼗分

• 個々のコンポーネントの完成度が⾼い• かゆいところに⼿が届きすぎるユーティリティ群かゆ ろ ⼿が届きすぎる ティリティ群• ⼀貫した設計と実装かなりま とうなオブジ クト指向（私⾒）• かなりまっとうなオブジェクト指向（私⾒）

• ⾼いブラウザ互換性（IE6でもきちんと表⽰）• 外部ライブラリとの親和性（jQuery等と併存可能）• すばやく開発することができる（C Gtk+-2.0と⽐較）すばやく開発することができる（C Gtk+ 2.0と⽐較）

ExtExtを採⽤してみて（－）を採⽤してみて（－）ExtExtを採⽤してみて（ ）を採⽤してみて（ ）慣れるまで少々修⾏が必要

• ソースコードの読み込みはほぼ必須• 独⾃の継承スタイルを理解しないと⼤量のコードを書くのは難しい

Extから抜け出すのに苦労する

• Extで作ると、何はともあれExtにしかならない• JavaScript ネイティヴのDOMにほとんど触らない• ⾃前cssの適⽤が⽐較的難しい

とはいいつつ、やはりIEは厳しいか

• IE7上では、使えば使うほど挙動不審（おもにIE7が）• IE6は表⽰するのがやっと？

とはいいつつ、やはりIEは厳しいか

• IE6は表⽰するのがやっと？

というわけで、ちょっと予定より遅れそうなんですが、

なんとかなんとかリリースにはこぎつけられリリースにはこぎつけられリリースにはこぎつけられリリースにはこぎつけられそうです。そうです。