WaveにSVGを埋め込むにはどうすればいいのか

| No Comments | No TrackBacks

時間ができたので、ひさしぶりにWebプログラミング的なことをやってみることにした。

というわけでprotocolにしか興味の無かったGoogle Waveを、今日はGadgetでいじってみることにした。といってもまだ実はgadgetらしいことは何もしていない。gadgetのXMLには、iframeの中に作られるHTMLの文字列をCDATAで指定するだけだ(とりあえず今のところは)。

そんなわけで、flashのオブジェクトを含むHTMLをそのまま記述して、xmlにしてweb上に配置し、それをwaveドキュメントの中に貼り付けてみたら、意外とあっさり動いた。どうやらjavascriptもswfもリモートにあるものをそのまま使えるようだ。(まあそれくらい出来ないとyoutubeの埋め込みプレイヤーなんかも実現できないわけだから当然か。)

さて今度はそのHTMLをいろいろローカルで編集することになるだろうと考えて、ローカルHTMLで開いてみた。ここら辺からがハマり道だった。まずflashオブジェクトが上手く動作してくれない。予想はしていたが、ローカルファイルとして実行できるとセキュリティ上の問題があるということだろう。とあたりを付けたら、それは確かに当たっていた。しかしadobeのサイトでグローバル設定でswfを安全なファイルとして指定しても、やっぱり実行してくれない。どうにも困ったので、諦めてローカルでHTTPサーバ(xsp)を動かして見ることにした。

で、今回はHTMLではなく画像をいじりたいと考えていたので、SVGをいじろうと思い至って、まず単なるcompound HTML (HTML+MathML+SVG) を作ってみることにした。これがまたハマり道で、web上にあるサンプルをいくらコピーしてローカルで表示しようとしても上手くいかない。1時間近く格闘して、どうやらmime typeがapplication/xhtml+xmlになっていないのが問題っぽいということに気がついた。ひとしきりmeta タグとhttp-equiv属性を試してから、もしやと思ってファイルの拡張子を.htmlから.xhtmlにしたら、それでSVGも表示されるようになった(!)。http-equivで指定しているcontent-typeよりそっちを優先するとは...。そしてcontent-typeがapplication/xhtml+xmlを指定していると、HTTPサーバがapplication/octet-streamのように生データで返すようになるので、text/htmlにしてすることに...

ともあれ、SVGも表示できるようになったので、これを先のgadget xmlに埋め込んで表示させてみようとしたのだが、やはりこれはうまくいかない。waveのページのcontent-typeはいじりようがなく、iframeの中のhead要素の内容もgadget xmlから変更することは出来そうにない(出来るのかもしれないがそこまで深入りしていない)。

どうしたものかと思って、ふと、世の中には似たようなことを考えてやっている人がいるのではないかと思って、探してみたら、案の定あった。そこでソースを眺めて見たのだが、どうやらこれは先のようにcompound XHTMLにするのではなく、svgcanvas.svgという外部SVGをobject/embedタグで「画像として」呼び出していた。画像として、とは言っても、その中ではjavascriptが呼び出されていて、動的な変更が実装されている。なるほどこれでSVG要素の埋め込みを実現しているというわけだ。なかなかややこしいものだ。

...ここまで調べたところで、そもそも、SVG Canvasを使うくらいなら、HTML5 Canvasを使えばいいのではないかということに気がついた。気がついて、愕然としている...そうだった。SVGには愛着があるので、自然とSVGを使うつもりになっていたが、よく考えたらHTML Canvasで十分できるようなことしか考えていないのだった...

次は気を取り直してHTML Canvasとflashと肝心のgadget APIをいじってみようかと思う。

No TrackBacks

TrackBack URL: http://veritas-vos-liberabit.com/noteon/mt-tb.cgi/80

Leave a comment

About this Entry

This page contains a single entry by note on published on January 9, 2010 1:11 AM.

twitterのstreaming API was the previous entry in this blog.

ActionScriptとHTML/Javascriptのinterop is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Categories

Pages

OpenID accepted here Learn more about OpenID
Powered by Movable Type 4.23-en