SVG Cats 1.1 説明書

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.

 

目次


1. 概要

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(コンピュータの助けを借りて、 類型化することを走り書きするツール)の略です。


2. インストール・アンインストール

SVGCats で作成した図を見るために、また本書も SVG の図を含んでいるので、 SVG ビューアをインストールしてください。ビューアは、 Adobe 社の SVG のホームページ からダウンロードすることができます。

SVG Cats は、ダウンロードした SVG Cats の圧縮ファイルを解凍するだけで、 特にインストール作業は必要ありませんが、すぐに起動できるように 以下の作業を行うことをお勧めします。

  • SVG Cats は、SVG ファイルをドラッグ&ドロップして使うことができるので、 デスクトップに、svgcats.exe ファイルのショートカットを作っておくと便利です。 スタートメニューに登録したいときは、svgcats.exe をスタートボタンにドラッグして 数秒待って表示されるメニューから登録したい階層に持っていって登録することができます。
  • SVG ファイルを右クリックして編集を開始したいときは、 コントロールパネルのフォルダオプションから、 拡張子 svg と SVG Cats の関連付けを行っておいて下さい。

まれに、MFC42.DLL, MFC42LOC.DLL, MSVCRT.DLL が必要になることがあります。 ベクターなどから検索してください。

アンインストールは、インストール時に解凍してできたフォルダを 削除するだけです。

(補足情報)
SVG Cats は、画像ファイルの表示に Susie プラグインを 使用しています。Susieプラグインとは、さまざま画像フォーマットでもプラグインを 追加するだけで対応することができる画像ビューア Susie のプラグインです。 API が公開されているので、さまざまな画像を表示するプログラムが簡単に 開発することができます
SVG Cats のパッケージに同梱されているので、通常は気にすることなく使用することが できます。 もし、プラグインをバージョンアップしたり、(SVG Viewer は対応していないが) SVG Cats が別のフォーマットの画像を表示できるようにするには、ダウンロードした プラグインファイル(.spi)を、svgcats.exe と同じフォルダに入れてください。 (著作権の章も参照してください)


3. サンプル

SVG Cats では、次のような図が簡単に作れます。 一部のサンプルは、次の章で書き方を説明しています。


4. 使い方

4-1. 基本的な使い方

  1. SVGCats.exe をダブルクリックして、新規キャンパスを開くか、 既存の SVG ファイルを svgcats.exe にドラッグ&ドロップします。 (ただし、SVG Cats がサポートしている一部の図形しか読み込みません) -e オプションをつけると英語に、-j オプションをつけると日本語に、 オプションをつけないと Windows と同じ言語になります。

  2. 新しい図形を追加するときは、ウィンドウ左のツールバーのボタンを押してから、 キャンパスをクリックする、もしくは、作りたい大きさにドラッグします。 キャンバスの何もないところをダブルクリックするとすぐにキーワードの入力ができます。 キャンバスの何もないところをダブルクリックドラッグするとすぐに矢印ができます。

  3. 図形のプロパティが小ウィンドウに表示されていますが、 その中の1つのプロパティをダブルクリックすると、その値を変更する ことができます。 テキストをダブルクリックすると、テキストをすぐに編集することができます。 四角形や楕円などをダブルクリックすると、塗りつぶす色をすぐに指定することができます。

  4. 移動するときは、その図形をドラッグするか、カーソルキーを使います。

  5. サイズを修正するときは、そのオブジェクトをクリックしてから、 ハンドル(クリックして現れた小さい四角)をドラッグします。

  6. メニュー [ ファイル | 上書き保存 ] で、SVG ファイルを作成する ことができます。このとき、[ ファイル | パスは小文字にする ] に チェックをつけると、SVG ファイルに含まれるパス情報は、 すべて小文字に変換されます。 ホームページのサーバに置くファイルを すべて小文字にしているときに使います。

  7. できたファイルをダブルクリックすると、ブラウザが開き、 プラグインされている SVG ビューアで表示できます。

4-2. SVG の図を HTML ファイルへ埋め込むには

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 ファイルをドラッグ&ドロップすると、 埋め込むことはできますが、ラスター形式(ビットマップ)の画像に変換したコピーが埋め込まれます。

4-3. 【サンプル】簡単な図解の作り方

書籍『図で考える人は仕事ができる』久恒啓一著) では、簡単な図解を作成することで問題を解決し、コミュニケーションをとりやすく なることが丁寧に説明されています。 KJ法 という発想法では、カードを使って並べていくことで考えを整理します。 こういった図解作成&発想支援ツールとして、SVG Cats を活用する方法を説明します。

  • 最初に、キーワードをどんどん入力していきます。
  • をクリックしてから、キャンバスをクリックします。 すると、キーワードを入力するウィンドウが開くので、『問題が発生したら?』 と入力します。
  • マウスをに合わせる操作をしているうちに、 キーワードを忘れてしまうことがあるので、別の入力開始方法として、 スペースキーを押す方法があります。
  • スペースキーで入力を開始したときは、四角い枠がつきます。 枠をなくすときや、丸い枠に変えるときは、プロパティ・ボックスの 『枠の形状』をダブルクリックして選択します。
  • 確定した直後にもう一度キーワードを編集し直すときは、そのまま、 リターンキーを押してください。(テキストを選択した状態で、リターンキーを 押すと、そのテキストを編集します)
  • 以上の操作方法を使って、キーワードをいくつか作成します。
  • 次に、キーワードを並べなおして、関連のあるキーワードを線や矢印で結びます。
  • キーワード(テキスト)などは、ドラッグすることで移動させることができます。 テキストを選択して表示される小さな四角(ハンドル)をドラッグすることで、 枠などの大きさを変えることができます。
  • キーワードとキーワードの関連を線で結ぶときは、 , , のいずれかをクリックして、キーワードからキーワードへドラッグします。
  • キーワードの上から関連先のキーワードにダブルクリックドラッグ しても、線で結ぶことができます。つまり、キーワードの上でマウスの左ボタンを、 押し→放し→押しと素早く行い、押したままマウスカーソルをキーワードまで 持っていき、放します。このとき、枠がないときや丸い枠のときは、 直線の矢印が、四角い枠やその他の枠のときは折れ線の矢印ができます。 折れ線と直線を変えて作成したいときは、シフトキーを押しながら ダブルクリックドラッグします。作成した後で、プロパティ・ボックスで 修正することもできます。
  • すでにあるキーワードから関連した新しいキーワードを作成するときも、 ダブルクリックドラッグが使えます。キーワードの上から、新しいキーワードを 作成する位置まで、ダブルクリックドラッグします。ボタンを離した位置に 何もなければ、そこにテキストボックスができます。
  • いくつかのキーワードをグループ化します。
  • グループ化する領域を書くときは、などを押してから、 図形を描く範囲をドラッグします。
  • グループ名を書くときは、を押してから、書きたいところを クリックします。
  • 上下関係(手前と奥)を調節するときは、図形を右クリックして 「前後関係」のメニューを選んでください。そのメニューに書いてある キー(I,J,K,M)を押しても同じ効果があります。
  • 最後に、タイトルを書きます。
  • (図形の上でなければ、)何もないところをダブルクリックして テキストを書くことができます。
  • プロパティ・ボックスの『フォント』をダブルクリックして、 フォントの大きさなどを設定します。ただし、Adobe 社の SVG Viewer では、 日本語に対して太字があまり効きません。太字を使うときはゴシック体、 細字を使うときは明朝体を使うようにしてください。
  • メニュー [ファイル(F) | 上書き保存(S)] で、SVG ファイルを 作成することができます。作成した SVG ファイルは、SVG Viewer が インストールしてあると、ダブルクリックして見ることができます。 HTMLファイルに埋め込むこともできます。
  • 保存した SVG ファイルを再び SVG Cats で開くこともできます。 ただし、SVG Cats 以外で作成した SVG ファイルを開こうとすると、多くの場合、 正しく読み込むことができません。 これは、SVG Cats が、SVG を完全にサポートしているわけではないためです。

4-4. 【サンプル】グラフの作り方

グラフを作成するツールといえば表計算ソフトですが、入力する数値がはっきりしないときは、 SVG Cats で簡単にグラフを書くことができます。棒の幅をピクセル単位の数値で入力する ことができるので、ある程度の手計算は必要ですが、正確なグラフを書くこともできます。 テンプレートとなるファイルを作っておくといいでしょう。

  1. キャンパスをダブルクリックして、文字「整数演算」、 「グラフィックス性能」、「駆動時間」、「ベンチマーク結果」 を入力します。「ベンチマーク結果」を選択して、 プロパティ・ボックスから「サイズ」をダブルクリックして 12を設定します。

  2. を選択して、縦線を描画します。 プロパティ・ボックスから「線幅」をダブルクリックして 2を入力してください。

  3. を選択して、1つ四角形を作成します。 2つ目以降は、1つ目の四角形を元にコピー&ペーストします。 (あとで整列を行うため、ここではラフに配置します)

  4. 縦線と3つの四角形を選択します。このとき、キーボードの Shift キーまたは Ctrlキーを押したまま、マウスで図形を クリックすることで、複数の図形を同時に選択します。 図形が何も無いところからドラッグを開始することで、 複数の図形を同時に選択することもできます。

  5. ボタンを押して、 左整列します。

  6. 今度は、四角形3つのみを選択してから、 ボタンを押して、 等間隔にします。 3つ選択した状態でどれか1つの図形を ドラッグすると、3つの図形が同時に移動します。 間隔を狭めるときは、端の図形を調整してから もう一度3つの図形を選択し、等間隔ボタンを押します。

  7. 四角形をダブルクリックして、棒の色を設定します。

  8. テキスト3つを選択してから、 ボタンを押して、 右にそろえます。

  9. 四角形(棒)を選択して、右中央のハンドルを ドラッグして長さを調節します。 この際、 プロパティ・ボックスの「幅」を数値入力することもできます。

折れ線グラフを書くこともできますが、円グラフは書けません。

4-5. 【サンプル】フローチャートの作り方

正式なプローチャートをサポートしているわけではありませんが、 処理と分岐からなる簡単なフローチャートなら、ダブルクリック・ドラッグを駆使することで、 すばやく描くことができます。

  1. startは、を選択してから、キャンパスをクリックし、 start と入力します。

  2. 一発ギャグとそこまでの矢印は、start をダブルクリックドラッグします。 つまり、start の上でマウスの左ボタンを、押し→放し→押しと素早く行い、 押したままカーソルを下にドラッグして、ボタンを離すとそこにテキストボックスが できます。そこで「一発ギャグ」と入力します。 このとき、丸い枠のテキストが作成されるので、 プロパティボックスの「枠の形状」をダブルクリックして「矩形・長方形」を選択します。 もし、ダブルクリックドラッグが難しいときは、を選択してから、 キャンパスをクリックしてテキストを作成し、を選択して、 start から一発ギャグへドラッグします。そして、プロパティ・ボックスの「頂点2の形状」 をダブルクリックして矢印を選択します。

  3. つかみはOK?も同様に作成します。ただし、ダブルクリックドラッグすると、 四角いテキストボックスができるので、プロパティ・ボックスの中の「枠の形状」を ダブルクリックして、ひし形を選択します。

  4. YesNo!は、を選択してから、文字を書くところに クリックします。そして、テキスト入力ウィンドウで Yes, No! を入力してください。 任意の位置で右クリックするなどして を選択した状態にしてから、 文字を書くところにダブルクリックしても同様に文字が書けます。

  5. 張り芸へ振りもなくオチへendは、これまでに説明したように、 ダブルクリックドラッグなどで作成します。

  6. つかみはOK?から Yes 方向への矢印は、一度右下の角までダブルクリックドラッグ します。そこにテキストボックスができますが、キャンセルを押して、矢印だけにします。 (もしくは、 を選択して、つかみはOK?からドラッグ して折れ線を作成し、プロパティ・ボックスの中から「頂点2の形状」を「矢印」にします。) その矢印をクリックして、Yesの文字の近くに現れたハンドルを、矢印の先よりも 右に持ってきます。そして、矢印の先を、「張り芸へ」の下の矢印にドラッグします。


4-6. テキスト文字を作成・修正するには

テキストを新規に作成する方法はいくつかあります。

Shiftキーや Ctrlキーを押しながら、何もないキャンパスの上を ダブルクリックすると、枠つきのテキストを作成することができます。

テキストを編集する方法はいくつかあります。

複数行にすることはできません。

4-7. テキストボックス同士を線でつなぐには

2つの方法があります。

1つ目は、 新しく線を作成するボタンを押して、1つ目のテキスト ボックスの上でマウスの左ボタンを押し、押したまま 2つ目のテキストボックスの上まで移動して、 左ボタンを離します。つまり、2つのテキストボックス を結ぶようにドラッグします。 直線でも矢印でも折れ線でもつなぐことができます。

2つ目は、テキストボックスの上からダブルクリックドラッグ を開始します(一度クリックしてすぐにドラッグします)。 ドラッグの終点に新しくリンクされたテキストボックスができます。 終点がテキストボックスなら、そのテキストボックスとリンクします。 通常、矢印の折れ線でリンクしますが、Shiftキーを押しながら ダブルクリックドラッグを開始したときは、直線でリンクします。 (枠なしテキストや円形の枠のテキストの場合は逆になります。) Ctrlキーを押しながらダブルクリックドラッグを開始したときは、 矢印はつきません。

4-8. 折れ線の折れる方向を変えるには

折れ線には、2つの頂点のほかにもう1つハンドル(通過点)があります。 このハンドルの位置によって上の図のようにさまざまな形をとります。

通過点が2つの頂点の間にあるとき、 折れ線は、横縦横(Z型)と縦横縦(N型)のどちらかになります。
ダブルクリックすることで切り替わります。

4-9. 図形を回転させるには・縦書きにするには

をクリックして回転モードにして、 図形のハンドルをドラッグすれば、回転できます。
テキストのプロパティ・ボックスで「方向」を「縦書き」にすると、縦書きになります。 縦書きの文字も回転できます。

回転できる図形は、次のとおりです。

次の図形は、SVG Cats での表示では回転しませんが、SVG ファイルでは回転します。

現バージョンでは、角度をつけた後で、移動したり変形すると、マウスの位置と異なる 動きをしてしまい、編集しづらくなります。特に変形についてはひどいので、 角度0に戻してから行うというのも1つの手です。

4-10. 自動補正機能を無効にするには

線は、微妙な傾きに対して垂直または水平に自動的に補正します。 図形の修正の際に、ラインの頂点や水平線または垂直線に近づくと自動的に接するようになります。 これら機能により、マウスの微妙な操作をしなくてもきれいな図が描けます。
この機能を無効にするときは、シフトキーを押しながら線を修正してください。 ただし、ドラッグを開始する瞬間は、シフトキーを放しておいてください。 シフトキーを押しながらドラッグを開始すると、ハンドルによるサイズ変更しないで、 ハンドルでも強制的に移動をする機能が働きます。

自動補正が働くのは次の場合です。

自動補正機能の影響を及ぼすのは、ラインまたは折れ線による、 頂点、水平線または垂直線のみです。 矩形の頂点にくっつくような自動補正機能は働きません。 これは、あまり多くの図形が影響しあうと逆に使いにくくなるためです。 どうしても自動補正機能を働かせたいときは、仮の線を引いてください。

矩形や楕円を修正するときにシフトキーを押すと、正方形や円にする機能が 同時に働きます。この機能を無効にしつつ自動補正機能も無効にすることはできません。 ハンドルを持たないで移動させることや、プロパティで数値入力することで、 微調整を行います。

4-11. 正方形や円を描画するには

楕円や長方形から円や正方形を作成するには、ドラッグ中に、 シフトキーを押します。

4-12. 連続して図形を生成するには

通常、図形ボタンを押して、図形を生成したら、図形選択モード(矢印アイコン) に戻りますが、図形ボタンをダブルクリックすると、連続図形生成モードになり、 図形を生成しても図形選択モードに戻りません。

連続図形生成モードを終了するには、図形選択ボタン(カーソルキーのボタン)を 押すか、右クリックをします。

4-13. 複数の図形を選択してそろえるには

何も図形がないところからドラッグすると、矩形の選択範囲が 現れます。その範囲に一部でも触れる図形が一度に選択されます。 コントロールキーを押しながら、選択範囲をしていしたり、 図形をクリックすると、選択中のグループに所属したり 開放したりできます。

複数の図形を選択したら、まとめて移動させたり、整列させたり、 図形の大きさをそろえたりすることができます。 複数選択している中で1つだけハンドルの色が異なる 基準となる図形があり、次の操作の中で影響するものがあります。

2つのテキストボックスが1つのリンク線でつながれているとき、 2つのテキストのみ選択すれば(リンク線は選択しなくても) まとめて移動させたり、整列させたりすることができます。

水平線や垂直線があると、その線に揃うような自動補正機能が働きますが、 これを応用すれば、複数の図形を整列させることもできます。


5. SVG のサポート範囲

SVGCats は、以下の SVG 要素をサポートしていますが、 全体から見れば、ほとんどサポートしていません。(^^;
また、SVG の文法を完全に解析しているわけではないので、 SVGCats 以外で作成された SVG ファイルは、ほとんど開くことができないと思われます。
順次サポートを増やしていく予定です。

Windows が使っているフォントと Adobe SVG View のフォントは 微妙に異なるため、枠つき文字列のフォントが枠から外れることがあります。 (特に 11ポイントのときに現れます。)
この現象に対処するには、中央揃えにして、枠の横幅を大きめにしてください。

SVG には、画像のマスク処理やアニメーション処理やベジェラインなど、 マクロメディア社の FLASH に匹敵する仕様を持っていますが、 現在の SVGCats は対応していません


6. プログラムガイド

(ソースパッケージをダウンロードした方は、以下のキーワードに リンクがつきます。)

6-1. 主なユースケース

6-2. ウィンドウ構成、クラス構成

6-3. ビルド履歴


7. 著作権・サポート

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/) で確認してください。


8. !広告! ソフトウェア・デザイン館 Sage Plaisir 21


ソフトウェア・デザイン館 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/) へ一度おこしください。 ブラウザ機能のある携帯電話でも見ることができます。


9. 関連資料・謝辞

開発にあたり、google サーチエンジン+多くのホームページを参考にしました。 ありがとうございます。開発環境に付属の不明瞭なヘルプや、それを写した解説書しか なかった時代に比べると、いい時代になりました。


written by T's-Neko   neko@manbow.com