Everyday Pieces ::
  • Webサービス
  • ブログパーツ
  1. ホーム
  2. プログラミング

家系図なアプリを作ってみた

2018年8月12日 プログラミング FamilyTreeVis

 ここ近年、
親戚や親類と会う機会が何故か多かったように感じます。
そういえば、単に「おじさん」「おばさん」とか言ってるけど、
あの方は家系図的にはどの位置になるのだろう?
とか、ふと気になったりしました。

 両親の戸籍とかあったりしたはずなので、
家系図とか書いてみたらどうだろうか、
と思い立ちました。

 そこで、
そんなフリーソフトとかないかなと探してみたら、
まさにそんな感じなのをみつけました。
さっそく使ってみたのですが、
まともに起動すらしない状況・・・う~む。

 自分のPCの環境のせいで動かないのかどうか不明ですが、
残念ながら使えない状況ではしようがありません。
この際なのでWebアプリとして作ってみることにしました。

 家系図というのは、
人物とそれらの関係を結ぶ線から成る
ネットワークのようなもの、なわけで、
そういったデータを視覚化すれば良いことになります。

 ということで、
そんな感じのJavaScriptなライブラリはないかなと、
まずは物色してみることにしました。
いくつか見つかりましたが、
ずばり家系図に対応しているのはないようです。
そう都合良くは行かないか(^_^;)

 色々と検討した結果、
階層なネットワーク図を生成できる機能を持った、
こちらの vis.js を使うことにしました。
vis.js は様々なタイプの視覚化に対応していますが、
今回はそのうちの Network な機能に対応している
vis-network.js を使います。

 ネットワークを構成する上で厄介だったのが、
複数回婚姻している人物をどう扱うか、です。
単純に線を引いたりすると、分かりにくくなりそうです。
そこで、同一人物を複数回登場させることで回避するようにしました。
例えば、Aさんが、Bさんと、後にCさんと婚姻した場合、
「B―A―C」のような接続にせずに、
「A―B」「A’―C」のように2つに分けるようにしました。

 必要となる入力値の構成、
それに対応したユーザインタフェースなどを検討し、
ざっくりとしたプロトタイプを作ってみましたが、
期待したような配置になってくれない感じ・・・。

 vis.js 内蔵のレイアウトエンジンによる配置が
家系図を描くことに関しては適してないのかもしれません。
悩んだ末に、配置は自前でやることにして
内部のレイアウトエンジンを無効にするために、
vis-network.js を改造することにしました。

 さて、
それからが大変でした。
特に苦労したのが世代のレベルの決め方。
親、子、孫といった各世代の階層における位置を
レベルという形で数値化するわけですが、
うまい手法を見つけ出せず、かなり時間を要しました。
世代が異なるもの同士の婚姻とか、
養子の場合はどうするとか、
ややこしい組み合わせに苦心しました。

 なんだかんだの紆余曲折を経て、
かなり時間を要することになりましたが、
どうにかアプリを作ることが出来ました。
ただ、あらゆるパターンを試せているわけでないので、
まだ不具合とか潜在しているかもしれません(^_^;)

↓こちらを参考に磯野家の家系図を作ってみた結果はこれ。

 ということで、
家系図なアプリを試すにはこちらからどうぞ。
使い方や注意点なども書いてあります。

関連記事
家系図なアプリを作ってみた(3) 家系図なアプリを作ってみた(2)

コメントする キャンセル

メールアドレスが公開されることはありません。が付いている欄は必須項目です。

投稿ナビゲーション

パーマリンク変えてキャッシュを導入してみたLubuntu 18.04 を入れてみた

カテゴリー

WordPress つぶやき トピック プログラミング 未分類

タグ

AS3 enchant.js FamilyTreeVis Flash Geolocation gif.js kinect Linux MMD MoneyTrackNote OpenCV PDFカレンダー RISC-V three.js セキュリティ テーマ自作 ブログパーツ 動物 動画 麻雀

アーカイブ

© Everyday Pieces ::