ちょっとした説明のためにWikiに図を入れたい、
たったそれだけのことをするのに、結構回りくどいことを強いられる。
手元のIllustratorで描いて、gifやらjpegやらに書き出して、アップロードってのは、どうにも鶏に牛刀感。
文字通り取ってつけたように「アクセサリ」の中にあるペイントで描いたなら、描きながら自分で手を加えるのも一苦労。
googleのイメージ検索で探してきて、「こんな雰囲気のもの」、という説明ができるものはいいけど、概念図とかは描くしかない（樹形図とかはASCIIアートってのもあるけど、それ以上となると職人の世界だ）。
再利用が可能で、ブラウザ上で編集、保存ができる画像環境ってのが見当たらなかったので、作ってみた。
・↑に何も表示されない時はSVGViewerをインストール。
・IEの6とASV3(AdobeSvgViewerのver.3.0)で動作確認しています。
うまく表示されました？
そのままだと、ただの画像みたいですが、ちょっとクリックしてみてください。編集用の大画面が広がります。各機能のテスト中なので大分殺風景ですが、わかりづらく、色々出来るようになってます。
右側には大きく分けて2つのボタン群があります。
最初のボタン群はツールを選択するボタン。
Selectツールはボタンを押した後、オブジェクトをクリックして選択出来ます。シフトを押しながら選択するとちょっと挙動がちがいます。選択で表示されたハンドル(小さな四角)を触るとオブジェクトを変形したり、動かしたり出来ます。
Line,Rectangle,Text等を選んで白いキャンバスの部分をクリックすると、それぞれ線やら四角形や文字が入力できます。
次のボタン群は選択したオブジェクトをどうにかするボタン。
複数のオブジェクトを選択した状態で、Groupボタンを押すと、オブジェクト同士が関連付けられて、同時に操作できるように。解除はBreakupGroupで。
普段は画像だけど、そのまま再編集モードに突入できて、気に入ったところで保存。
ページへの貼り付けも、いくつかのタグを書くだけでOK。
イメージタグを入れる代わりに使えたらいいな。そういう感じ。
デモでは出来ないようにしてますが、保存するところまで確認できているので、
がっぷり整理したら、誰でもタグを書いて使える感じに公開できそうです。
今後のこともあり、SVGを使ってみることにしたらアラ大変。javascriptとJScriptがECMAScriptになってたのをコレがきっかけで知ったくらいだから、慣れるまでに苦労しました。出来ること、出来ないことを確認しながらコーディング。
画像オブジェクトの操作は、KevinLindseyさん（ケブリン）の素敵な2Dライブラリに少しだけ手を入れたものを使っています。保存周りにはXML.comで紹介されているテクニックを。
役に立つのはSVG学習辞典、SVG仕様書（邦訳はここ）。wemaと融合させた人も。
ブラウザ互換性は低いはず。ASVのScriptエンジンを使えば統一できるのですが、ASVがブラウザと協調動作せず、今度は編集したものをサーバに送って保存できなくなってしまうので困り者。
実をいうと、今日から開催されるSVGOpen2004というお祭りにお仕事のため参加できず、なんだか寂しいので気を紛らわせようとしている感じです。
すばらしいです。
Posted by: aiueo : September 19, 2004 02:27 AM