「系図を描いて SVG データにしてみよう」の使い方

多分このページを読まなくても使えますが、とりあえず概要をお読みください。他の箇所は必要に応じてお読みください。

(0) 概要

ページ内には、系図を表示する領域と、ポインタの位置にある人物に関する情報を表示する領域と、メニューボタンを表示する領域と、サブメニューを表示する領域があります。 行いたい作業の種類をメニューボタンで選択すると、その種類に該当するサブメニューの入力フォームが表示されます。その入力フォームで必要な情報を入力して、少しずつ系図を作っていってください。

御意見・御感想などは Twitter でお知らせください (どうぞお気軽に)。

人物を追加する には [人を追加する] メニューを使います。 他のメニューは必ずしも必要になるとは限りません。

人物名を漢字・仮名で書く場合は [幅広モード] を選択し、ラテン文字で書く場合は [幅狭モード] を選択するのがおすすめです。 ここでのモード選択は、人物名や注釈を横書きにする際に文字列が占める幅に影響します。

今のところ他の文字体系は想定していないので、本ツール自体が動作するかどうか分かりません。

名前を修正したい人物をプルダウンリストから選択し、新しい名前を入力します。 今の名前よりも新しい名前の方が長い場合は、新しい名前に合わせて自動的に矩形が大きくなります。 今の名前よりも新しい名前の方が短い場合は、新しい名前に合わせて矩形を小さくするか、それとも、矩形の大きさをそのままにするかを選べます。

多数の側室がいる皇帝などは、矩形の高さが十分でないと綺麗に作図できません。 そのように多数の相手と横リンクで結ばれる人物の矩形の高さは、このメニューを使って適宜増やしてください。

個々の人物に対して任意の注釈 (諡号、廟号、字、別名、生没年、その他何でも構いません) をつけられます。 注釈の色は所定の選択肢の中から選べます。 なお、手作業で CSS ファイルを書き換えるか、手作業で SVG ファイルを書き換えることで、この色使いを変えられます。

注釈の変更・削除の機能はありません。注釈の変更・削除は、手作業で SVG ファイルを書き換えることで行います。

兄弟姉妹の順序、一つの王朝における王の即位の順序、ある時点での王位継承順など、何らかの (順序を示す) 数字を表示したい場合に、このメニューを使います。

順序を示す以外にも、「この人の子孫については後で調べて図に追加しよう。今は保留にして今日の作業は終わろう」といった目印として、人物の右下隅に黒の 0 番のバッジを仮につけておく、などの使い方もできます。 あるいは、入り組んだ系図の場合、同一人物を二箇所に置くことで図がこれ以上複雑にならないようにしたりしますが、「この人とこの人は同一人物ですよ」という目印としてバッジを使ってもよいかもしれませんね。

なお、バッジの変更・削除の機能はありません。バッジの変更・削除は、手作業で SVG ファイルを書き換えることで行います。

系図中の人物が数百人を越えると、誰がどこに配置されているか分からなくなってきます。 このメニューは、そういった場合に使うメニューです。 プルダウンリストで選択された人物を、系図の領域の中心に表示します。 ただ、プルダウンリストの中から目的の人物を探すのも大変なので、改善の余地が大ですね。

削除したい人物を選び、削除します。

婚姻関係などを表すために人物同士を横の線 (横リンク) で結ぶとき、[横の関係] メニューを使います。 多くの場合は [横の関係を追加する] メニューだけで用が足ります。

横線 (横リンク) で結びたい二人をプルダウンリストから選び、線の種類 (一重線か二重線か) を選び、「結ぶ」ボタンをクリックしてください。 必要に応じて二人のうちの一方を自動的に下に移動させることで、二人の間を水平な線で結びます。

横線の端点となり得る位置は、デフォルトでは、人物を表す矩形の縦の辺の、上から 1/8、2/8、3/8、4/8、5/8、6/8、7/8 の箇所です。 特に指定がなければ、4/8 の所 (縦の辺の中点) を横線の端点として自動的に選択します。そこが使用済みなら 2/8 の所を選択し、以下、6/8 の所、1/8 の所、7/8 の所、3/8 の所、5/8 の所、という優先順で選択されます。この選択は自動的に行われます。

系図の SVG ファイルを手作業で編集すると、横線 (一重線と二重線のいずれでも) を破線にできます。

横線の端点の位置を自分で指定したい場合にこのメニューを使います。 多くの側室がいる皇帝について作図したい場合などに便利です。

具体的には、左側の人物を選び、その人物の矩形の右辺上の位置 (横線の端点としたい位置) を選び、右側の人物を選び、その人物の矩形の左辺上の位置 (横線の端点としたい位置) を選び、線の種類を選び、「結ぶ」ボタンをクリックしてください。 必要に応じて二人のうちの一方を自動的に下に移動させることで、二人の間を水平な線で結びます。

デフォルトでも左右 7 人ずつと横線で結べる設定になっていますが、多くの側室がいる皇帝について作図したい場合などは、それでも足りなくなることがあったりします。 そうした場合にこのメニューを使います。 対象人物を選び、左辺または右辺を選び、「増やす」ボタンをクリックすると、その人物の矩形のその辺につなげられる横線の数を増やせます。

縦の辺につなげられる横線の数は、2n − 1 本です (n ≥ 3)。 つまり、7、15、31、63……本です。 一辺に 15 人だの 31 人だのを繋ぐ必要が生じることは滅多にないとは思いますが、たとえば、「つなげられる横線の数を 15 まで増やしておき、2/16、5/16、8/16、11/16、14/16 の 5 箇所に横線をつなぐ」といった使い方も可能です。2/8、3/8、4/8、5/8、6/8 の 5 箇所に横線をつなぐよりも横線同士の間隔を広くとれるので、やや見栄えが良くなります。

削除したい横線を選び、削除します。

親子関係などを表すために人物同士を縦線 (縦リンク) で結ぶとき、[縦の関係] メニューを使います。 多くの場合は [縦の関係を追加する] メニューだけで用が足ります。

一人の親から一人の子への縦線 (実線または破線) を追加できます。 また、既に横線で繋がれた二人の親から一人の子への縦線 (実線または破線) も追加できます。

たとえば、実の親子を実線で表し、養子を破線で表す、などと線の種類を使い分けるとよいかもしれません。 あるいは、何代か省略して祖先と子孫を結ぶときに破線を使う、といったことも考えられます。

個々の人物の矩形の上辺または下辺に新たな縦線を繋ぐ場合、その辺にまだ何も縦線が繋がれていなければ、その辺の中央に新たな縦線を繋ぎます。 また、新たな縦線が、その辺の中央に既に繋がれている縦線と同じ線種の場合も、その辺の中央に新たな縦線を繋ぎます。 それ以外の場合は、その辺の左または右から 1/4 の位置に、新たな縦線を繋ぎます。

横線で繋がれた二人の親から一人の子への縦線は、デフォルトでは、横線の中央からぶら下がっています。 しかし、巨大な系図を作成する場合などには、横線の下に縦線をぶら下げる位置を調整したいことがあります。 このメニューはそういうときのためのものです。

削除したい縦線を選び、削除します。

色々な動かし方のサブメニューがあります。

なお、やり直し (undo) 機能はないので、動かしてみて「失敗した」と思った場合は、一旦、[作業の各段階のファイルをダウンロードする] メニューで一つ前の段階のデータを保存し、保存した SVG ファイルを [作成済みのデータを読み込む] メニューから読み込んで、作業を再開してください。 動かし方によっては、単純に逆向きの動きをすることで元に戻せることもありますが、複数人を連動させた場合、一回の動きで元に戻せる動かし方が存在しないことが多々あります。

動かしたい人物と動かす方向とを選び、動かす量を指定してください。 縦書きの場合、84 px 単位で横に動かすと綺麗に並びます。

位置の基準にする人物と、整列の仕方と、動かしたい人物を選んでください。

選んだ人物を、その人物の親からの縦線がまっすぐになるように左右に動かせます。 逆に、選んだ人物を、その人物の矩形の下辺につながっている子 (たち) の中央に位置するように、左右に動かすこともできます。

選んだ人物とその子孫をまとめて下に移動します。 もちろん、下に動かす対象の人物と横線で繋がった人物 (とその子孫) も、連動して下に移動します。 移動量は指定できます。

選んだ人物から始めて、右・下のつながりをたどってたどり着く人たちを、まとめて右に移動します。 移動量は指定できます。

選んだ人物から始めて、左・下のつながりをたどってたどり着く人たちを、まとめて左に移動します。 移動量は指定できます。

系図の個々の部分ではなく全体に関するいくつかのメニューがあります。

余白の調整などのために系図全体を上下左右に動かしたいときに使います。 動かし過ぎたと思ったら、逆方向へ動かしてみてください。

系図全体の高さを増やしたい場合や、(系図全体の高さを減らすことで) 下の余白を減らしたい場合に使います。 上の余白を減らしたい場合は、[全体をずらす] メニューで全体を上にずらしてください。

系図全体の幅を増やしたい場合や、(系図全体の幅を減らすことで) 右の余白を減らしたい場合に使います。 左の余白を減らしたい場合は、[全体をずらす] メニューで全体を左にずらしてください。

上下左右に一律の余白を設定するときに使います。 最後の仕上げに使うと便利です。

出来上がった系図の SVG ファイルの中に系図のタイトルを埋め込んでおくと、ブラウザで系図を表示したときにそのタイトルがツールチップとして表示されるでしょうし、スクリーンリーダ利用時にもそのタイトルを読み上げてもらえる可能性があります。 このメニューは、そのタイトルを入力するためのものです。 タイトルの初期値は空文字列です。

出来上がった系図の SVG ファイルの中に系図の説明文を埋め込んでおくと、スクリーンリーダ利用時にその説明文を読み上げてもらえる可能性があります (ただし説明文自体は画面には表示されません)。 このメニューは、その説明文を入力するためのものです。 説明文の初期値は空文字列です。 系図の用途によっては、アクセシビリティ向上のために説明文を埋め込むことも検討してみてください。

[現状のファイルをダウンロードする] メニューで SVG ファイルをダウンロードすれば十分なことが多いかと思います。 やり直し (undo) 機能がないので、代わりに、[作業の各段階のファイルをダウンロードする] メニューを用意してあります。 [系図ビューワをダウンロードする] メニューでは、作成した系図の簡易ビューワを構成するファイル群をまとめてダウンロードできます。 他にもちょっとした出力機能があります。

デバッグ用に作ったようなメニューなので、通常は使う必要がないと思います。

現状の系図のデータを SVG ファイルとしてダウンロードできます。 ファイル名の接頭辞を指定できます。

また、カスタムデータ属性を残すか削除するかも指定できます。 ダウンロードしたファイルを再び本ツールで開いて系図を編集したい場合には、カスタムデータ属性を残しておいてください。 系図が完成して、もう本ツールでその系図を開くつもりがなく、他のアプリでその SVG ファイルを利用するために少しでもファイルサイズを小さくしたい場合にのみ、カスタムデータ属性を削除してください。

ダウンロードした SVG ファイルは、ブラウザで閲覧できます。 編集中と同じスタイル (色や線の幅など) で閲覧するために、ダウンロードした SVG ファイルと同じフォルダに、SVG 用のスタイルシートファイルを置いてください。

前述のとおり、やり直し (undo) 機能はありません。 その代わり、作業の各段階のデータを SVG ファイルとしてダウンロードできるようにしてあります。

なお、[現状のファイルをダウンロードする] メニューの接頭辞入力欄の文字列を、ファイル名の接頭辞として利用しています。

ダウンロードした SVG ファイルは、ブラウザで閲覧できます。 編集中と同じスタイル (色や線の幅など) で閲覧するために、ダウンロードした SVG ファイルと同じフォルダに、SVG 用のスタイルシートファイルを置いてください。

あまり使い道がないかもしれませんが、系図内の人物一覧をテキストファイルとしてダウンロードできます。 [注釈の行を追加する] メニューを用いて付加した注釈行の内容も出力するかどうかを選べます。

以下の六つのファイルを同じディレクトリに置いて、HTML ファイルをブラウザで開くと、簡易的な系図ビューワとして使えます。

系図を眺めるだけならこのままでも使えますが、ビューワ本体の HTML ファイルを編集して、系図中の人物、横の関係、縦の関係について情報を書き加えると、ビューワをさらに便利にできます。

ビューワは、?pid=p123 のようなクエリ文字列付きで呼び出された場合に、指定された人物 (この例では ID が p123 の人物) の詳細情報を表示し、かつ、その人物を中心に表示するようになっています (クエリ文字列がない場合は、一番若い ID (大抵は p0) の人物を指定人物と見なします)。 任意の他の HTML ファイルからビューワにリンクするときに、リンク先を pedigree_viewer_yyyy-mm-dd_hhmmss.sss.html?pid=p123 のように指定すると便利です。

また、画面右上の「系図」「一覧」ボタンにより、系図を表示するモードと、系図中の人物・横の関係・縦の関係についての情報のリスト (ユーザが編集したもの) を表示するモードとを切り換えられます。 何も指定せずにビューワを開くと系図表示モードが適用されますが、?page_style=list のようなクエリ文字列付きで呼び出すと、リスト表示モードが適用されます。

作成済みのデータを読み込むためのメニューです。

[現状のファイルをダウンロードする] メニューまたは [作業の各段階のファイルをダウンロードする] メニューまたは [系図ビューワをダウンロードする] メニューで保存した SVG ファイルを読み込むことができます。 SVG ファイルを読み込んだ後は、好きなように編集できます。編集が済んだら、適宜また SVG ファイルを保存してください。

系図の編集中に、(ブラウザの [戻る] ボタンをタップしてしまったとかで) うっかり別のページに行ってしまったり、うっかりリロードしてしまったり、うっかりタブを閉じてしまったり、ということがなきにしもあらず。 その場合、系図が残っていれば幸いで、データが消えていることもあります (多分、ブラウザの設定によります)。 そういうデータ消滅の救済策となるかもしれないメニューです。 が、[表示する] ボタンを押してデータを復活できるかどうかは、ブラウザの設定によりますので、あまり頼りになさいませぬよう。

(8) 保存済みデータに対する手作業での編集

テキストエディタでちょちょっとファイルを編集すれば、系図の見た目をお好みのものに変えられます。 また、簡易ビューワに説明文を書き足すと、より便利なビューワになるかもしれません。

(8-1) 系図の SVG ファイルを編集する

スタイルを変更したいとき、あるいは、間違って追加したバッジや注釈を削除したいときは、手作業で SVG ファイルを編集してください。 SVG ファイルの実体はテキストファイルなので、テキストエディタで編集できます。

系図の SVG ファイルの冒頭付近に、以下のような style 要素があります。 ここを編集することで、スタイルを変更できます。

<style> @import url(pedigree_svg.css); </style>

たとえば、皇帝用のスタイルを以下のように定義することも可能です。 この場合、このスタイルを適用したい人物に相当する rect 要素の class 属性に (neutral、feminine、または masculine の代わりに) emperor を指定します。

<style> @import url(pedigree_svg.css); rect.emperor { stroke: hsl(255, 100%, 50%); fill: hsla(255, 100%, 70%, 0.5); } </style>

あるいは、このような独自のスタイル定義を、pedigree_svg.css に追加するのでも構いません (その場合は、SVG ファイルでは class 属性を編集するだけでよく、style 要素を編集する必要はありません。

あるいは、新たな別の CSS ファイルでこのような独自のスタイルを定義することも考えられます。 たとえば、その新たな CSS ファイルの名前が user_defined.css であれば、SVG ファイルのstyle 要素を以下のように編集します (rect 要素の class 属性も適宜編集してください)。

<style> @import url(pedigree_svg.css); @import url(user_defined.css); </style>

間違った注釈を追加してしまった場合は、その注釈に該当する text 要素を削除してください。 注釈の text 要素の例を以下に示します。

<text writing-mode="tb" id="p22n0" x="10332" y="1512" textLength="48" lengthAdjust="spacing" dx="8" dy="0" class="note blue">梁武帝</text>

間違ったバッジを追加してしまった場合は、そのバッジに該当する circle 要素と text 要素のペアを削除してください。 そうしたペアの例を以下に示します。

<circle id="p2b_upper_right" cx="1722" cy="282" r="17" fill="darkblue"></circle> <text id="p2bn_upper_right" x="1710" y="290" textLength="8" dx="8" dy="0" class="num_badge">1</text>

circle 要素の fill 属性の値を書き換えると、バッジの色を変更できます。 色指定の仕方は、<color> データ型の説明ページなどが参考になります。

横線に関しては破線の選択肢を用意していませんが、横線を描く path 要素で class="double dashed" のように dashed という値を追記すれば、横線を破線にできます (この例は二重線ですが、一重線でも同様です)。

(8-2) ビューワの HTML ファイルを編集する

系図の簡易ビューワを構成するファイルのうち、HTML ファイルを適宜編集しておくと、個々の人物に関する説明と系図を同時に見られて便利です。 具体的には以下の通りです。

下記の段落 (p 要素の中身) を書き換えて、系図についての全般的な説明などを書いておくようにすると便利です。

<div id="info_all"> <p>この段落は、お好きなように編集してください。</p>

また、この p 要素の下には dl 要素があり、その中には、 dt 要素と dd 要素のペアが並んでいます。 各ペアは、ある一人の人物か、ある横リンク (婚姻関係) か、ある縦リンク (親子関係) に対応します。 その人物・横リンク・縦リンクについての情報を dd 要素の中に書き留めておくと便利です。 たとえば以下の例のイタリック体の部分のように、任意のメモやリンクを埋め込めます。

<dt id="p162_t">司馬懿</dt> <dd id="p162_d"> <button type="button" onclick="look_at('p162')">司馬懿を見る</button> <button type="button" onclick="reselect('p162')">司馬懿を選択する</button> 179年 〜 251年。字は仲達。 <a href="https://ja.wikipedia.org/wiki/%E5%8F%B8%E9%A6%AC%E6%87%BF">Wikipedia</a> | <a href="https://zh.wikisource.org/wiki/%E6%99%89%E6%9B%B8/%E5%8D%B7001">『晋書』宣帝紀</a> </dd>

(8-3) SVG 用の CSS ファイルを編集する

SVG 用の CSS ファイル (pedigree_svg.css) の fill プロパティ (矩形の背景色、文字色) や stroke プロパティ (矩形の枠線の色、縦線や横線の色) をお好きなように書き換えてください。 色指定の仕方は、<color> データ型の説明ページなどが参考になります。

例として、注釈・バッジ以外の本体部分を白黒にするための CSS ファイル (monochrome_svg.css) を用意しました。 これをダウンロードして pedigree_svg.css と名前を付け替え、系図の SVG ファイルと同じフォルダにおけば、系図を白黒で表示できます。 さらに、以下のように stroke プロパティの値を none に書き換えることで、人物の矩形の枠線をなくすことも可能です。

rect.neutral, rect.feminine, rect.masculine { stroke: none; fill: white; }

お好みのフォントを使うように font-family プロパティを書き換えるのも良いかもしれません。

また、破線用の stroke-dasharray の設定を書き換えれば、一点鎖線にしたり細かい点線にしたりできます。 指定方法は、stroke-dasharray の説明ページが参考になります。

もちろん、独自のクラスを新たに定義することもできます。 たとえば、(rect 要素に関する) 皇帝用のクラスや、(path 要素に関する) ある特定の家系用のクラスを定義するのも良いかもしれません。

(8-4) HTML 用の CSS ファイルを編集する

系図の簡易ビューワを構成するファイルのうち、HTML 用の CSS ファイル (pedigree_viewer.css) を編集すると、ビューワの雰囲気を変えられます。 color, background, border-color, font-family あたりのプロパティをお好みに応じて書き換えてみてください。 色指定の仕方は、<color> データ型の説明ページなどが参考になります。