例えば、Excelのオートシェイプで、四角と三角をコネクタでつないで、簡単な図を作ったりできますが、こういった図形描画をWeb上で行いたいのです。
自由に操作できる必要は無いので、表示する事が出来ればいいのですが、そういったツールは無いでしょうか。
表示内容としては、以下のような物を希望しています。
ttp://ondras.zarovi.cz/sql/demo/?keyword=default
表示内容としては、職場のネットワーク構成を図にするような感じを想像していただければ、大体解っていただけると思います。
出来れば実例まであるとありがたいです。
No.2ベストアンサー
- 回答日時:
候補としては SVG、VML と Canvas ですが、IE と他のブラウザの両方で
使えるのは Canvas だけです。
SVG、VML がベクトルグラフィックスで有ることに対して
Canvasはペイント系のグラフィックスAPIです。
IE は Canvas をサポートしていませんが、Google の
excanvas を使えば VMLでエミュレートできるので、
ブラウザ側にプラグインを導入することなく、全ての
ブラウザで同一のコードで使えます。
No.1
- 回答日時:
SVG(Scalable Vector Graphics) なら、ウェブページとの相性もいいし、HTML5 の標準に入ったから、これからは、どんどんつわれるかも!
http://ja.wikipedia.org/wiki/Scalable_Vector_Gra …
http://www.w3.org/Graphics/SVG/
HTML では object タグをつかうと svg ファイルを埋め込めるよ。
ちなみに、IE は ver9 以上ね。
かっこいい図は、ウェブデザイナさんに Illustrator で作ってもらって、SVG にエクスポート。
そうでないひとは、Inkscape で!
http://inkscape.org/index.php?lang=ja
あと JavaScript で動くウェブツールもあるから、ちょっと作ってみたいときに便利。
http://code.google.com/p/svg-edit/
Demos のリンクの先の SVG エディタで画像をつくってみた!
Firefox とかの data: スキーマが使えるウェブブラウザなら、下の文字列をロケーションバーに入力すると画像が表示されるよ。
※ 回答文字数超えちゃったから、データはテキストエディタでかなり圧縮
data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+PCFET0NUWVBFIHN2ZyBbPCFFTlRJVFkgcG9ydCAnPHJlY3QgY2xhc3M9ImMwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+Jz48IUVOVElUWSBwb3J0cyAnPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSI+JnBvcnQ7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgsMCkiPiZwb3J0OzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNiwwKSI+JnBvcnQ7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LDApIj4mcG9ydDs8L2c+Jz48IUVOVElUWSBodWIgJzxyZWN0IGNsYXNzPSJjMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjE3Ii8+PHJlY3QgY2xhc3M9ImMwIiB5PSIzIiB3aWR0aD0iNTAiIGhlaWdodD0iMTEiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjUsNi41KSI+JnBvcnRzOzwvZz4nPjwhRU5USVRZIHBjICc8cGF0aCBjbGFzcz0iYzAiIGQ9Im0yNywyNGwxMywtNmwwLDNsLTEzLDZsMCwtM3oiLz48cGF0aCBjbGFzcz0iYzAiIGQ9Im0xNiwwbDI3LDBsLTMsMThsLTI3LDBsMywtMTh6Ii8+PHBhdGggY2xhc3M9ImMwIiBkPSJtMTMsMThsMjcsMGwtMTIsNmwtMjcsMGwxMiwtNnoiLz48cmVjdCBjbGFzcz0iYzAiIHg9IjAiIHk9IjI0IiB3aWR0aD0iMjciIGhlaWdodD0iMyIvPjxwYXRoIGNsYXNzPSJiayIgZD0ibTE4LDJsMjEsMGwtMiwxNGwtMjEsMGwyLC0xNHoiLz4nPjwhRU5USVRZIHN3aXRjaCAnPHJlY3QgZmlsbD0iIzQ0NCIgc3Ryb2tlPSIjMDAwIiB3aWR0aD0iNjEiIGhlaWdodD0iMTUiIC8+Jz5dPjxzdmcgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5saW5le2ZpbGw6bm9uZTtzdHJva2U6IzAwMDt9LmMwe2ZpbGw6I2NjYztzdHJva2U6IzAwMDt9LmJre2ZpbGw6IzAwMDtzdHJva2U6IzAwMDt9Ll8we2ZpbGw6bm9uZTtzdHJva2U6IzAwMDt9dGV4dHt0ZXh0LWFuY2hvcjptaWRkbGU7Zm9udC1mYW1pbHk6dmVyZGFuYTtmb250LXNpemU6MTFweDtzdHJva2Utd2lkdGg6MDtzdHJva2U6IzAwMDtmaWxsOiMwMDA7fTwvc3R5bGU+PHRpdGxlPihjKWRzY3JpcHR5PC90aXRsZT48Zz48bGluZSB4MT0iMTUzIiB5MT0iMTU2IiB4Mj0iMTUzIiB5Mj0iMzkyIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUsMjM4KSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NSwyOTUpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2OSwyNjUpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOSwxNzYpIj4maHViOzwvZz48dGV4dCB5PSIyMDYiIHg9IjE1MyI+SFVCPC90ZXh0PjxsaW5lIHgxPSIxMjciIHkxPSIyNDgiIHgyPSIxNTMiIHkyPSIyNDgiLz48bGluZSB4MT0iMTUzIiB5MT0iMjc0IiB4Mj0iMTgxIiB5Mj0iMjc0Ii8+PGxpbmUgeDE9IjEyNiIgeTE9IjMwNCIgeDI9IjE1MiIgeTI9IjMwNCIvPjxsaW5lIHgxPSIzMTAiIHkxPSI5MSIgeDI9IjMxMCIgeTI9IjM4OCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0MywyMzcpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0MywyOTMpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNywyNjMpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4NywxNzUpIj4maHViOzwvZz48dGV4dCB5PSIyMDUiIHg9IjMxMSI+SFVCPC90ZXh0PjxsaW5lIHgxPSIyODUiIHkxPSIyNDciIHgyPSIzMTEiIHkyPSIyNDciLz48bGluZSB4MT0iMzExIiB5MT0iMjczIiB4Mj0iMzM5IiB5Mj0iMjczIi8+PGxpbmUgeDE9IjI4NCIgeTE9IjMwMyIgeDI9IjMxMCIgeTI9IjMwMyIvPjxsaW5lIHgxPSI0NTkiIHkxPSIxNTUiIHgyPSI0NTkiIHkyPSIzOTEiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOTEsMjM1KSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOTAsMjkzKSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NzUsMjYzKSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzUsMTcyKSI+Jmh1Yjs8L2c+PHRleHQgeT0iMjA1IiB4PSI0NTkiPkhVQjwvdGV4dD48bGluZSB4MT0iNDMzIiB5MT0iMjQ3IiB4Mj0iNDU5IiB5Mj0iMjQ3Ii8+PGxpbmUgeDE9IjQ1OSIgeTE9IjI3MyIgeDI9IjQ4NyIgeTI9IjI3MyIvPjxsaW5lIHgxPSI0MzIiIHkxPSIzMDMiIHgyPSI0NTgiIHkyPSIzMDMiLz48bGluZSB4MT0iMTUzIiB5MT0iMTU2IiB4Mj0iNDU4LjE5ODMiIHkyPSIxNTYiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNzUpIj4mc3dpdGNoOzwvZz48cGF0aCBjbGFzcz0iXzAiIGQ9Im00MzUsNzJjMSwtMTQgMjUsLTE5IDMxLC02YzYsLTEzIDMwLC04IDMwLDdjMTgsLTEgMTksMjQgLTEsMjRjLTUsMTQgLTIxLDE1IC0yNywyLjVjLTUsMTIgLTI3LDEzIC0zMiwtNGMtMTYsLTEgLTE2LC0yMyAtMCwtMjR6Ii8+PGxpbmUgeDE9IjM0MiIgeTE9IjgzIiB4Mj0iNDIzIiB5Mj0iODMiLz48L2c+PC9zdmc+
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- CAD・DTP 「機能ブロック図」の描画用フリーソフトを教えてください 1 2022/09/23 16:12
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- その他(ソフトウェア) 簡単な絵が描けるソフト(wordに挿入) 3 2022/05/20 22:16
- Excel(エクセル) ExcelのVBAコードについて教えてください。 1 2022/06/17 15:40
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(Microsoft Office) エクセルのマクロについて教えてください。 5 2023/01/21 09:39
- その他(IT・Webサービス) サイト上のフォルダ階層一覧、ファイル一覧を閲覧する方法は? 1 2022/11/11 15:49
- Visual Basic(VBA) エクセルのマクロについて教えてください。 2 2023/06/04 09:39
- マウス・キーボード 不良表示キー(キーボード) 3 2022/04/27 10:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マイクラPC版のコマンドで効率...
-
エクセルで最後の文字だけ置き...
-
阪急三番街 ATM(ゆうちょ)は...
-
同一のユーザー、同一商品のと...
-
Unionした最後にGROUP BYを追加...
-
DataTableで重複行を削除したい
-
書籍の内容はまともでしょうか?
-
副問合せの書き方について
-
SQL Left Join で重複を排除す...
-
WHERE id = ? について
-
min句のSQLを改造し二番目に小...
-
MySQLのint型で001と表示する方...
-
別テーブルからSELECTした値を...
-
所有格の意味
-
select文のwhere句に配列を入れ...
-
スクリーンセイバー
-
MySQLの抽出について
-
ポスグレでの幾何学データ配列...
-
AUTO_INCREMENTのあるテーブル...
-
【MySQL】本当に困っているので...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセルで最後の文字だけ置き...
-
SQL Left Join で重複を排除す...
-
副問合せの書き方について
-
SQLサーバから、項目の属性(型...
-
VIEWの元のテーブルのindexって...
-
select文のwhere句に配列を入れ...
-
selectした大量データをinsert...
-
センノシド異性体構造式
-
Unionした最後にGROUP BYを追加...
-
insertを高速化させたい
-
SQLにて特定の文字を除いた検索...
-
マイクラPC版のコマンドで効率...
-
ある条件の最大値+1を初番する...
-
inner joinをすると数がおかし...
-
sqlで、600行あるテーブルを100...
-
エクセルの関数について教えて...
-
Access パラメータクエリをcsv...
-
URL と行番号の指定
-
複数テーブルのGROUP BY の使い...
-
PL/SQLの変数について
おすすめ情報