これまで Kodougu では、prototype.js + script.aculo.us を使ってきたのですが、dojo.gfx（SVG と VML が使えるグラフィックスライブラリ）を使ってみたかったので、dojo に切り替えてみました。

dojo.gfx のコードは以下のような感じになります。（SVG か VML を知っているとなじみやすいです。）

  
  
  
  

  


  

  



This is a dojo.gfx example. 

上記のコードのスクリーンショットは以下の通りです。


また、dojo（0.4.2）を含む JavaScript に file:// でアクセスすると、IE7 で以下のようなエラーが発生しました。FireFox ではこのようなことは無かったので、IE がらみの問題かもしれませんが dojo.require に関連するバグかもしれません。（詳細は追っていません。）IE7 でも、Apache 上に配置して http:// でアクセスしたところ、問題なく動作しました。

symbol 'dojo.gfx' is not defined after loading '__package__.js'

概ね、dojo.gfx には満足していますが、SVG で言うところの text 要素に対応していないなど、完成度はまだまだ低いようです。

最近、JavaScript のテストを行う方法を探していました。xUnit 系の JsUnit や MochiKit に付属してくるテストフレームワークが有名どころのようです。とりあえずテスト用のメソッド名になじみのある JsUnit を使ってみることにします。

■ 目的
alert デバッグから開放される！

■ この記事に書かれていること
・ JsUnit の基本的な情報
・ 複数のテストファイルを同時に実行する方法
・ testRunner.html で毎回テストファイル名を指定しないでテストを実行する方法

■ JsUnit の概要
まず、testRunner.html というテストランナーが存在します。html ファイルの script タグ内にテストコードを書いて、テストランナーにテストファイル（html）を指定すると、テストコードを実行するという仕組みになっています。

まずは動かしてみてください。JsUnit を DL すると、testRunner.html というファイルが含まれているので、このファイルをブラウザで開いてください。テストファイル名の入力を促されるので、tests フォルダ内の適当な html ファイル（テストファイル）をフルパス指定して、Run ボタンを押してください。見慣れたグリーンバーが表示されるはずです。

テストの書き方は、テストファイルを見ればわかります。イメージとしては以下のようなコードになります。

<script language="JavaScript" type="text/javascript" 
  src="./framework/app/jsUnitCore.js">
</script>
<script language="JavaScript" type="text/javascript">
function testAssert() {
    assert("true should be true", true);
    assert(true);
}
</script>

■ テストのディレクトリ構造
とりあえず、私は以下のような構造にしてみました。

 + e:\tests
   + framework <- ここに testRunner.html など JsUnit の全てのファイル／フォルダを入れる
   - tests.html <- テストコードの一覧を持つ
   - xxxTest.html <- テストコード

■ suite を使って複数のテストファイルを実行する
複数のテストファイルを同時に実行するには、tests.html に以下のように書いて、tests.html を testRunner.html 実行してください。

<script language="JavaScript" type="text/javascript" 
    src="./framework/app/jsUnitCore.js">
</script>
<script language="JavaScript" type="text/javascript">
function suite(){
  var newsuite = new top.jsUnitTestSuite();
  newsuite.addTestPage("../xxxTest.html");
  return newsuite;
}
</script>

テストファイル名を指定する際、tests.html からではなく、testRunner.html からの相対パスを指定していることに注意してください。

■ URL にテストファイル名を含めることで、毎回の入力を回避する
毎回 testRunner.html にテストファイル名を入力するのが面倒なので、URL のパラメータ「testpage」を指定すると、ファイル名を自動的に入力してくれます。以下のような URL を作成してお気に入りに入れておくと良いでしょう。

URL の例：file:///E:/tests/framework/testRunner.html?testpage=E:/tests/tests.html

■ 参考
Javascript/JsUnit - Bobchin's Wiki
http://bobchin.ddo.jp/wiki/index.php?Javascript%2FJsUnit

もうすぐ朝・・・か。二日連続徹夜・・・。orz

Kodougu を IE でも表示できるようにしました。こちらのエントリを参照してください。
# 表示だけで、操作は一切できません。

さて、IE で表示するにあたって、壁は二つありました。
(1) VML 描画
(2) Ajax では、別のドメインにアクセスできない（セキュリティのため）

(1) ですが、これは 30 分ほどでできました。もともと、アーキテクチャ的にさまざまなレンダリングエンジンを使うことを想定しているので、VML を増やしても特に問題は発生しません。テストはちゃんと書いていないので、後で書きます。

(2) ですが、Kodougu を Web アプリに組み込むときは、JavaScript を使っています。もともと、JavaScript でブラウザを判定してから、prototype.js の Ajax.Updater で SVG/VML を取得しようとしたのですが、Ajax ではドメインを越えてデータにアクセスすることができません。ちょっとトリッキーな方法で切り抜けてみました。（後で調べたところ、割と王道のようでしたが。）

コードとしては以下のとおりです。

[code: 

]

解説します。以下の URI は、JavaScript を返しますが、この中で SVG/VML の情報を保持した kodougu_diagram_html という変数を（JavaScript で）定義しています。

http://www.kodougu.net/rendering/diagram_javascript/1

以下の一行で、HTML に SVG/VML を埋め込んでいます。

$("test_kodougu").innerHTML = kodougu_diagram_html;

つまり、JavaScript はドメインを越えて情報を取得することはできませんが、JavaScript そのものは他のドメインから持ってこれるので、動的に必要な情報を含んだ JavaScript を返す API を作ったというわけです。

あー、疲れた。(--;

Kodougu の開発中に気になったのですが、ブラウザをリロードしても JavaScript の更新が反映されないことがあるようです。キャッシュが効いているのでしょう。

Rails では、javascript_include_tag メソッドを使うと、以下のように JavaScript のファイル名の後ろに数字（たぶん時間）を追加して展開してくれます。これだと、アクセスするたびに URL が変更されるため、ブラウザのキャッシュの影響を受けません。

[code: ]

SVG では JavaScript のインクルードは xlink を使うため、Rails のヘルパーメソッドを使うことはできません。そこで、以下のように書いてみました。

[code: 



■ SVG（FireFox 1.5 以降で動作確認済み）

こちらは、script.aculo.us を使わずに自力で ECMAScript（JavaScript）をたたいて、SVG に埋め込んでいます。



※ IE では動作しません。



■ パフォーマンス

VML + script.aculo.us よりも SVG + ECMAScript の方が動作が軽いです。というか、かなりの差があります。調査していませんが以下のような原因が考えられます。



・ script.aculo.us のせい

script.aculo.us では、要素を半透明にしたりしています。



・ 環境依存

私の PC でだけパフォーマンスの差が出ているのかもしれません。（WinXP + IE6 + Pen4 2.8GHz + Mem 1GB + Geforce2 MX）



・ JavaScript エンジンの速度の差

もしかすると、スクリプトは IE の方が遅いとかあったかもしれません。



ふー、疲れた。


  

Web を彷徨っていたら、以下の記事で GWT（Java で JavaScript を書ける Google のツール）で TreeView を表現しているのを見かけました。私は GWT には詳しくないのですが、こんなこともできるんですね。JavaScript で Tree を表現しようとすると結構大変そうですけど。

OpenKM: Ajax Document Management System
http://ajaxian.com/archives/openkm-ajax-document-management-system

気になったので GWT を調べたら・・・Tree がありました！これで、TreeItem のドラッグアンドドロップとかできると完璧ですが・・・その辺はどうなっているんでしょう。Yahoo! UI Library（YUI）にも TreeView があったと思いますが、そのうち試して見たいところです。

Yahoo! User Interface Library
http://developer.yahoo.com/yui/

私にしては珍しく、朝早く（5時くらい）起きてしまいました・・・。

さっくりと VML（Vector Markup Language）を調査しました。SVG から調べていない理由としては、とりあえず IE で動かそうという気になったということもありますが、実は仕様書が VML の方が読みやすかったからだったりします。(^^;

VML は SGML をベースにした言語みたいです。したがって、ぱっと見 HTML に近いですし、レイアウトには CSS を使ったりします。まだ試していませんが、HTML に埋め込むと、JavaScript を使って DOM にアクセスできるみたいなので、prototype.js とかで Ajax で更新とかもできそうです。Kodougu でもうまく実装すれば JavaScript の Code をほとんど書かずに済むかも・・・。
（実装方針としては、サーバーで VML/SVG を出力して、JavaScript では Event 処理だけを記述する感じです。）

おや、Google Maps でも VML がかなり使われているらしいです。
http://eto.com/d/0503.html#VML

Kodougu は Web 上で動作するモデリングツールです。今私が頭を悩ませているのは、クライアントにどの技術を選択するのかです。ざっくりと以下のような候補が考えられます。
・ JavaScript（VML or SVG）
・ Flash
・ JavaApplet

今の世の中の流れを考えれば、間違いなく JavaScript です。ただ、モデリングツールのようなアプリケーションを開発する場合、ベクトル形式の描画処理が必要になってきます。JavaScript の世界では、ベクトル形式の描画の決定的な方法が存在しないのです。ベクトル形式の描画用の技術としては、VML や SVG が存在していますが、これがめちゃくちゃブラウザ依存の世界で、とてもですがまじめに実装する気が起こりません。

Flash や JavaApplet は、モデリングツールに必要な機能はそろっているのですが、世の中の流れからは逆行しちゃいますし、ブラウザだけでモデリングができるという Kodougu の利点と若干相容れないことになってしまいます。
# それに私はあまりこれらが好きじゃないですし。

この辺の事情から Gliffy も Flash で実装されているんだと思うんですよね。はぁ、どうしたもんだろ。

ちなみに、未踏の提案では JavaScript と言っちゃったので、最終的には JavaScript で実装しちゃうのだと思います。クロスブラウザな設計にして、未踏の期間中は IE だけで動作って感じですかね。うーん・・・。