2002年 9月7日
We are sorry that this entire site is in Japanese. We recommend to use translation software. There are also excellent translation services available.
SVG Cats は、ベクター形式の画像形式である SVG(Scalable Vector
Graphics)形式のファイルを対象とした、オープンソースのエディタです。
キーワードの関係を図示したり、フローチャートを書くのに便利なドロー系
グラフィックス・エディタです。
最近流行しているエキストリーム・プログラミング(XP)などの方法論では、
プログラムソースの作成を重視し、細かな文章を書くよりも
簡単なダイアログ(図)をたくさん書いて、コミュニケーションを円滑にすることが
重要であると説いています。 しかし、この手のドロー系ツールは、使いにくかったり、
高価であったりします。 そこで、どなたでも気軽に図を作成していただけるような
ツールを開発しました。
特に、キーワードの入力を強力にサポートしていますので、アイデアを形にするまでの
カード型の電子メモとして活用していただくこともできます。
Adobe 社の SVG ビューア 3.0 で動作確認しています。
このビューアは、Shift-JIS 形式の日本語に対応していないので、
作成した図の中に日本語が含まれているとき、
SVG Cats は UNICODE 形式(UTF-16)で保存します。
図を作成するためのツールという位置付けですので、 SVG のすべてをサポートするものではありません。 サポート範囲は、こちらを参照してください。
ちなみに、SVG Cats の Cats は、猫という意味ではなく、CADの類語で、 Computer Aided Typification Scribbler(コンピュータの助けを借りて、 類型化することを走り書きするツール)の略です。
SVGCats で作成した図を見るために、また本書も SVG の図を含んでいるので、 SVG ビューアをインストールしてください。ビューアは、 Adobe 社の SVG のホームページ からダウンロードすることができます。
SVG Cats は、ダウンロードした SVG Cats の圧縮ファイルを解凍するだけで、
特にインストール作業は必要ありませんが、すぐに起動できるように
以下の作業を行うことをお勧めします。
まれに、MFC42.DLL, MFC42LOC.DLL, MSVCRT.DLL が必要になることがあります。 ベクターなどから検索してください。 アンインストールは、インストール時に解凍してできたフォルダを 削除するだけです。
(補足情報) |
SVG Cats では、次のような図が簡単に作れます。 一部のサンプルは、次の章で書き方を説明しています。
| |
| |
|
HTML ファイルに以下のように記述します。 SVGCats の [ 表示(V) | 埋め込みHTML(H) ] でも 確認することができます。
<span title="この図を表示するには SVG ビューアが必要です。 http://www.adobe.co.jp/svg/"> <embed src="fig1.svg" name="fig1" width="300" height="200" type="image/svg+xml" pluginspage="http://www.adobe.co.jp/svg/"> </span> |
embed タグに wmode="transparent" を追加すると、背景を透過させることができます。
SVG の図を埋め込んだ HTML ページでも、正しく印刷することができます。
マイクロソフト・ワードに SVG ファイルをドラッグ&ドロップすると、 埋め込むことはできますが、ラスター形式(ビットマップ)の画像に変換したコピーが埋め込まれます。
書籍『図で考える人は仕事ができる』 (久恒啓一著) では、簡単な図解を作成することで問題を解決し、コミュニケーションをとりやすく なることが丁寧に説明されています。 KJ法 という発想法では、カードを使って並べていくことで考えを整理します。 こういった図解作成&発想支援ツールとして、SVG Cats を活用する方法を説明します。
| |
| |
| |
|
グラフを作成するツールといえば表計算ソフトですが、入力する数値がはっきりしないときは、 SVG Cats で簡単にグラフを書くことができます。棒の幅をピクセル単位の数値で入力する ことができるので、ある程度の手計算は必要ですが、正確なグラフを書くこともできます。 テンプレートとなるファイルを作っておくといいでしょう。
折れ線グラフを書くこともできますが、円グラフは書けません。 |
正式なプローチャートをサポートしているわけではありませんが、 処理と分岐からなる簡単なフローチャートなら、ダブルクリック・ドラッグを駆使することで、 すばやく描くことができます。
|
テキストを新規に作成する方法はいくつかあります。
Shiftキーや Ctrlキーを押しながら、何もないキャンパスの上を ダブルクリックすると、枠つきのテキストを作成することができます。
テキストを編集する方法はいくつかあります。
複数行にすることはできません。
2つの方法があります。
1つ目は、 新しく線を作成するボタンを押して、1つ目のテキスト ボックスの上でマウスの左ボタンを押し、押したまま 2つ目のテキストボックスの上まで移動して、 左ボタンを離します。つまり、2つのテキストボックス を結ぶようにドラッグします。 直線でも矢印でも折れ線でもつなぐことができます。
2つ目は、テキストボックスの上からダブルクリックドラッグ を開始します(一度クリックしてすぐにドラッグします)。 ドラッグの終点に新しくリンクされたテキストボックスができます。 終点がテキストボックスなら、そのテキストボックスとリンクします。 通常、矢印の折れ線でリンクしますが、Shiftキーを押しながら ダブルクリックドラッグを開始したときは、直線でリンクします。 (枠なしテキストや円形の枠のテキストの場合は逆になります。) Ctrlキーを押しながらダブルクリックドラッグを開始したときは、 矢印はつきません。
折れ線には、2つの頂点のほかにもう1つハンドル(通過点)があります。 このハンドルの位置によって上の図のようにさまざまな形をとります。
通過点が2つの頂点の間にあるとき、
折れ線は、横縦横(Z型)と縦横縦(N型)のどちらかになります。
ダブルクリックすることで切り替わります。
をクリックして回転モードにして、
図形のハンドルをドラッグすれば、回転できます。
テキストのプロパティ・ボックスで「方向」を「縦書き」にすると、縦書きになります。
縦書きの文字も回転できます。
回転できる図形は、次のとおりです。
次の図形は、SVG Cats での表示では回転しませんが、SVG ファイルでは回転します。
現バージョンでは、角度をつけた後で、移動したり変形すると、マウスの位置と異なる 動きをしてしまい、編集しづらくなります。特に変形についてはひどいので、 角度0に戻してから行うというのも1つの手です。
線は、微妙な傾きに対して垂直または水平に自動的に補正します。
図形の修正の際に、ラインの頂点や水平線または垂直線に近づくと自動的に接するようになります。
これら機能により、マウスの微妙な操作をしなくてもきれいな図が描けます。
この機能を無効にするときは、シフトキーを押しながら線を修正してください。
ただし、ドラッグを開始する瞬間は、シフトキーを放しておいてください。
シフトキーを押しながらドラッグを開始すると、ハンドルによるサイズ変更しないで、
ハンドルでも強制的に移動をする機能が働きます。
自動補正が働くのは次の場合です。
自動補正機能の影響を及ぼすのは、ラインまたは折れ線による、 頂点、水平線または垂直線のみです。 矩形の頂点にくっつくような自動補正機能は働きません。 これは、あまり多くの図形が影響しあうと逆に使いにくくなるためです。 どうしても自動補正機能を働かせたいときは、仮の線を引いてください。
矩形や楕円を修正するときにシフトキーを押すと、正方形や円にする機能が 同時に働きます。この機能を無効にしつつ自動補正機能も無効にすることはできません。 ハンドルを持たないで移動させることや、プロパティで数値入力することで、 微調整を行います。
楕円や長方形から円や正方形を作成するには、ドラッグ中に、 シフトキーを押します。
通常、図形ボタンを押して、図形を生成したら、図形選択モード(矢印アイコン) に戻りますが、図形ボタンをダブルクリックすると、連続図形生成モードになり、 図形を生成しても図形選択モードに戻りません。
連続図形生成モードを終了するには、図形選択ボタン(カーソルキーのボタン)を 押すか、右クリックをします。
何も図形がないところからドラッグすると、矩形の選択範囲が 現れます。その範囲に一部でも触れる図形が一度に選択されます。 コントロールキーを押しながら、選択範囲をしていしたり、 図形をクリックすると、選択中のグループに所属したり 開放したりできます。
複数の図形を選択したら、まとめて移動させたり、整列させたり、 図形の大きさをそろえたりすることができます。 複数選択している中で1つだけハンドルの色が異なる 基準となる図形があり、次の操作の中で影響するものがあります。
2つのテキストボックスが1つのリンク線でつながれているとき、 2つのテキストのみ選択すれば(リンク線は選択しなくても) まとめて移動させたり、整列させたりすることができます。
水平線や垂直線があると、その線に揃うような自動補正機能が働きますが、 これを応用すれば、複数の図形を整列させることもできます。
SVGCats は、以下の SVG 要素をサポートしていますが、
全体から見れば、ほとんどサポートしていません。(^^;
また、SVG の文法を完全に解析しているわけではないので、
SVGCats 以外で作成された SVG ファイルは、ほとんど開くことができないと思われます。
順次サポートを増やしていく予定です。
Windows が使っているフォントと Adobe SVG View のフォントは
微妙に異なるため、枠つき文字列のフォントが枠から外れることがあります。
(特に 11ポイントのときに現れます。)
この現象に対処するには、中央揃えにして、枠の横幅を大きめにしてください。
SVG には、画像のマスク処理やアニメーション処理やベジェラインなど、 マクロメディア社の FLASH に匹敵する仕様を持っていますが、 現在の SVGCats は対応していません。
(ソースパッケージをダウンロードした方は、以下のキーワードに
リンクがつきます。)
SVG Cats はオープンソース・フリーソフトです。ライセンス・フリー(無料)です。
商用に使用しても構いません。
ソースファイルは、ベクター
に登録してあるので、検索してください。
SVG Cats の著作権は、T's-Neko にあります。
配布は自由に行ってかまいませんが、
改変して配布するときは著作者に許可をとってください。
SVGCats に同梱している、Susie プラグインの著作権は、それぞれ、 たけちん氏(ifjpeg.spi, PLUGIN32.txt, ホームページ), こっくり氏(LZR.spi, readme.txt, ホームページ), 渡辺裕朗氏(ifPNG.spi, ifPNG.txt ホームページ) にあります。
オープンソースなので、自由に改良することが出来ます。 なお、オリジナルの開発は、 Visual C++ 6.0 日本語版スタンダード版を使用しています。 改良したものの著作権は、その開発者にあります。ただし、改良したものを 配布するときは、オリジナルから改良してあることと、オリジナルが ホームページ Sage Plaisir (http://www.sage-p.com/) にあることを 説明書に表示してください。
プログラムに異常があったときは、 SVG Cats のホームページ にアクセスするか電子メールでお伝え下さい。 アドレスは、neko@manbow.com です。 なお、電子メールのアドレスは変わる可能性があるので、 最新のアドレスを私のホームページ Sage Plaisir 21 (http://www.sage-p.com/) で確認してください。
ソフトウェア・デザイン館
Sage Plaisir 21
のホームページでは、プログラミング言語の歴史からオブジェクト指向まで、
プログラミングに関するさまざまな情報を提供しています。
オープンソース・ライブラリも公開しており、自由に流用することができます。
メールマガジン「週刊 IT ニュース&コラム」を発行しています。 毎週、注目の IT関連ニュースを1つ取り上げ、プログラマの視点から 見たコラムを書いています。登録およびサンプルの参照は、 Sage Plaisir 21 から行うことができます。
Sage Plaisir 21 では、ソフトウェアのダウンロードもできます。 ダウンロード数2万件を誇る圧縮解凍ツール Archives Folderizer, プログラムのソースや用語を自動リンクした HTML ファイルを生成する Knowledge Take! 2, HTML ファイルの検索を行う Knowledge Look! などがあります。
Sage Plaisir 21 (http://www.sage-p.com/) へ一度おこしください。 ブラウザ機能のある携帯電話でも見ることができます。
開発にあたり、google サーチエンジン+多くのホームページを参考にしました。
ありがとうございます。開発環境に付属の不明瞭なヘルプや、それを写した解説書しか
なかった時代に比べると、いい時代になりました。