もうすぐ朝・・・か。二日連続徹夜・・・。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 を作ったというわけです。

あー、疲れた。(--;

Posted by あかさた
Kodougu では、SVG と prototype.js を組み合わせて使っています。組み合わせてみてわかったことですが、prototype.js の機能は一部使えなくなります。事情については、以下に書いてあります。

script.aculo.us を使って SVG や VML の要素を動かす

Ajax の機能は使えるので、その部分と便利関数を主に利用しています。以下、SVG に直接 JavaScript を埋め込む方式の場合の Ajax の例です。

Kodougu より:
[code:     xmlns='http://www.w3.org/2000/svg' 

xmlns:xlink="http://www.w3.org/1999/xlink" >








]

こんな感じ(”[]”は小文字に変換してください。)です。ただし、Updater は使えませんでした。今は、手動で Response として受け取った XML 要素を、SVG 内の要素と置き換えています。(Element.appendChild() などを活用しています。)

余力があったら、prototype.js を SVG 上で Updater が動作するように改造するかもしれません。

Posted by あかさた