WEB年表（グラフ年表）

ガントチャートを利用したWEB上で表示する年表です。スクリプトを使用して項目による並び替えにも対応します。
歴史上や架空の人物を一覧表にして、生年と没年からグラフ化します。年齢を表示するので比較対象の資料とすることができます。

オリジナルの年表や統計グラフの作成が可能で、本スクリプトとデータベースのテキストを組み合わせるだけで実現します。
二次使用の許可については、ページの最後をご覧ください。

用途と特徴

テキストで作ったデータ一覧（データベース）を読み込んで、人名や生年、没年をグラフ化して年表として表示します。
人物の年齢を表示し、存命期間をグラフ化しますので、視覚的に年齢の比較ができます。
また、人物に限らず、組織や団体、建物などの存続期間を年表にしたり、漫画やアニメのキャラクタの登場した巻数・話数を年表風に見せても面白いでしょう。

• 必要なファイルは最低３つ。サーバ上で動作します。
• データベースはテキストファイルで編集します。
• 生年と没年を帯で表示し、年齢を表示します。
• 存命期間の一部を別の色で表示できます。
• 各項目（フィールド）で並び替えができます。
• 年表の幅や位置を簡単に変更できます。
• wikipediaへのリンクを自動的設定します。
• 棒グラフも作れます。

使用例

どのような年表やグラフが作れるのか、使用例をご覧ください。データベースとアイデア次第で色々なことができます。

もっと手軽に生年月日の表を作りたい場合は、WEB上で作れる年齢比較計算表をどうぞ。ただし、こちらは二次利用不可です。

画面の操作

HTMLを表示させると以下のようなメニューが表の上に表示されます。

【情報ウィンドウ】

マウスの動きに合わせて画面右上に情報ウインドウを表示します。iPadではマウスの動きをトレースできないため、タップするとその近くに表示します。

【ライン表示】

表内でマウスを動かすと行または列に色が付きます。縦列のラインは、クリックすることで色を固定することができます。複数列に固定可能で、再度クリックすると解除できます。

製作の準備

【ファイルをダウンロード】

３つの使用ファイルをダウンロードします。リンクをクリックして開くか、リンクの上で右クリックをして保存をしてください。（エンコードは全てUTF-8です）
ブラウザ上で文字化けして見える場合は、エンコードを切り替えてください。IEなら画面内で右クリック、Firefoxなら表示メニュー内で切り替えます。

保存した各ファイルの編集に際しては、文字化けしないテキストエディタを使用して編集してください。テキストエンコードは「UTF-8」を指定して保存します。上書き保存する場合は特に指定は必要ありません。

複数の年表を作る場合、list_people.jsは共有して使えますが、他の２つのファイルは名前を変えて使います。

【サーバは必須】

データベースファイルの読込はオンラインでなければできませんので、ホームページとして公開できるWEBサーバが必要になります。また、これらファイルを転送する際にはFTPソフトが必要ですので、使用するサーバの設定に従って準備を行ってください。

使用する３つのファイルを同じフォルダに入れて使用してください。

【注意点】

データベースの読込は通信機能を使っているため、オフライン（ローカル）では動作しません。
テスト時も必ずサーバに全ファイルを転送して動作確認をしてください。

グラフの種類

年表グラフと棒グラフは、生年と没年の内容で判断、生年と没年が同じなら棒グラフモードになります。
マルチグラフは他のグラフと共存可能ですが、棒グラフの設定とマルチグラフの指定が同じフィールドにある場合は棒グラフが優先されます。

HTMLファイル（list_people.html）の設定方法

初期設定はHTMLファイル内で行います。 表示に関する様々な設定と、データベースとしてカスタマイズ可能な項目を用意しています。
初期値の項目を設定するだけで直ぐに使えるようになるでしょう。

初期設定

<script type="text/javascript">
<!--
//初期設定
setInit();

//初期値
dtitle = "三国志人物年表"; //このページのタイトル
dcomment = "主要人物の生没年表"; //説明書き
db_code = "後漢,魏,蜀,呉,晋"; //区分名
db_file = "list_people.txt"; //データベースファイル
hs_file = ""; //年表ファイル（オプション）
year_st = 180; //年表の最小値
year_ed = 280; //年表の最大値
//機能選択(0=OFF/1=ON)
age_st = 0; //年齢表記の初値（1なら数え年）
ed_unknown = 1; //没年不明の表示
view_age = 1; //年齢表示
line_number = 0; //行番号表示
line_row = 1; //列と行の同時反転
//予約フィールド名
field_bun = "区分"; //分類項目
field_link = "名前"; //wikipediaとのリンク項目（不要な場合は空欄に）
field_st = "生年"; //グラフの始め
field_ed = "没年"; //グラフの終わり
//その他
head_unit = "年"; //グラフ単位

//メイン処理
startMain();
-->
</script>

データのフィールド名については、データベースファイル（list_people.txt）の中で設定します。

下記に太字で表記した6項目の変数がデータベースに合わせて最初に調整すべき項目です。

予約フィールド名をここで上書きして変更します。
スクリプトファイルで設定された初期値を個別に変更したい場合は、これら設定に続いて指定します。

機能選択のため数値の0か1を指定する場合、0はオフ、1はオンとなります。

変数を設定しない場合、変数を削除するとデフォルト値となります。

【棒グラフモードについて】

field_st（生年）とfield_ed（没年）に同じフィールド名を指定すると0を起点にした棒グラフになります。

凡例

グラフの凡例を組み込みたい場合、下記のようなクラス名と凡例を<span>タグで用意すると良いでしょう。

テストモード

URLの後ろに「?test」と入力すると、データベースの読込テストができるテストモードとなります。
テストモードでは、データベースを単純に読み込んだ後、データを一覧表にして表示します。データが正常に表示されない場合、テストモードでデータのずれがないか確認してください。

例：list_people.html?test

データベースファイル（list_people.txt）の仕様

データベースとして正しく読み込むために幾つかのルールに従ってテキストファイルを作成してください。
形式としてはカンマ区切りまたはタブ区切りのテキストファイル（CSV形式）です。データベースソフトやExcelで出力することもできます。（拡張子は.txtでも.csvでもかまいません）

基本的な仕様として、改行までの1行が１つのレコード（一人分のデータ）、レコード内を「,」またはタブで区切ったものが１つのフィールド（データ項目）です。

+区分,+名前,字,+生年,+没年,始年,終年
0,霊帝,,156,189,168,189
0,少帝弁,,173,190,189,189
0,献帝,,181,234,189,220
1,曹操,孟徳,155,220
1,曹丕,子桓,187,226,220,226
1,曹叡,元仲,206,239,226,239
1,曹芳,蘭卿,232,274,239,254
1,曹髦,彦士,241,260,254,260
1,曹奐,元帝,246,303,260,265
（以下省略）

レコードの仕様

先頭に「//」があるレコードは読み込みしません。コメント行として使用できます。

1行目はフィールド名レコードとして、フィールド名を自動取得します。このとき、フィールドの最大数も決定します。 このフィールド最大数を超えるフィールドがデータレコードにあった場合、それらは読み込みされません。
2行目以降のレコードは表示用のデータレコードとします。

フィールドのセパレータには「,」またはタブが使用可能です。
フィールド名レコードを調査して、セパレータを自動的に決定しています。

フィールド名レコードもデータレコードも、各フィールドはセパレータで分轄して読み込みます。
セパレータが「,」でフィールド内にも「,」を使っている場合は、フィールドの前後を「"」で囲う必要があります。
フィールド数が、フィールド名より多い場合、データは読み込まれません。逆に少ない場合は、空のデータを自動的に追加します。

フィールド名レコードの仕様

【接頭文字】

フィールド名の頭に記号を付けることでフィールドの扱いに規則を与えることができます。この記号を接頭文字と呼びます。

【補足情報】

フィールド名の後に記号を付けることでフィールドに補足情報を付け加えることが出来ます。これに使う記号を補足記号と呼びます。

【予約フィールド名】

HTMLで指定された以下のフィールド名を使うことで、それぞれの機能が働きます。（太字のフィールド名はHTMLファイル内で変更可）
これらのフィールドをマルチグラフモードに設定することはできません。（設定無効）

【名前と差替について】

wikipediaへのリンクは基本URL（スクリプトファイルの初期値link_wiki）に名前フィールドの文字列を足して以下のようにHTMLを出力しています。

<a href="http://ja.wikipedia.org/wiki/名前">名前</a>

差替フィールドを設定した場合、名前の部分を差替フィールドのデータと入れ替えます。（差替フィールドが空の場合は無効）

<a href="http://ja.wikipedia.org/wiki/差替">名前</a>

差替フィールドのデータが「http」から始まる場合、基本URLを使わず差替フィールドのURLをリンク先とします。

<a href="差替">名前</a>

名前フィールドのデータの先頭に「!」を付けるか差替データを「!」にした場合、<a>タグを出力しません。

使用例：「軍師官兵衛」のデータファイル

データレコードの仕様

【生年・没年・始年・終年について】

生年が不明の場合、表の先頭からグラフが表示されます。 没年が不明の場合は、グラフは表示されません。 （使用例１を参照）
存命中の場合は、生年から最後までグラフが表示されます。
始年および終年は、生没期間のグラフがある場合にその範囲の背景色を変更して表示します。（使用例２と３を参照）

その他仕様について

データ読込直後の表示は1番目のフィールドで昇順に並び替えを行っています。並び替えの接頭文字がある場合はそれに従います。

データの表示が正しくない場合、フィールドの数や「,」の位置がずれている場合があります。テストモードで読込が正しい順序かどうか確認しましょう。

年表ファイル（history.txt）の設定方法

オプション設定として年表ファイルを追加することができます。
指定した年にマウスを載せると年表データを表示します。
データは1行毎に「年数,内容」という形式になっています。

184,黄巾の乱
189,董卓が相国となる
190,反董卓連合軍が結成
191,洛陽を焼き、長安へ遷都
//192,董卓死す
193,劉備、徐州の陶謙の元へ
（以下省略）

また「年数」部分には「1600.1.1」や「1600/1/1」のように日付形式も入力可能です。その場合、内部の処理で日付を「内容」の前に移し替えて表示します。

棒グラフモードで、年表ファイルがない場合は、データを自動的に生成して年表データとします。
マルチグラフでは使用しません。

その他の注意点

HTMLファイルの表示においてデータの更新が反映されない場合、年表ファイルを直接ブラウザで表示して更新してください。

現時点では並び替えには対応していませんので、事前に必要な順序で作成してください。

スクリプトファイル（list_people.js）の仕様

通常はそのままお使いください。一部変更可能な項目がありますので、その点だけ解説します。
変数の初期設定のうち、項目名と初期値は変更可能です。

予約フィールド名、色設定、初期値については、全HTMLファイルで共有される設定です。個別に設定したい場合は、各HTMLファイル内で記述します。
スクリプトファイルの各設定を読み込み後、HTMLファイル内の設定を行っています。

予約フィールド名

予約フィールド名の初期値を設定しています。
予約フィールド名以外の項目がデータベースファイルにある場合、一般フィールド名として扱います。

色設定

テーブル内の色設定です。

初期値

色以外のデザインに関する設定値です。

【ブーリアン】

条件文では「true/false」を「真/偽」と呼びますが、ここでは変数に対して「yes/no」もしくは「on/off」という意味になります。

【没年齢の表示】

没年齢は生年と没年の単純計算だけでなく、月日も考慮して算出しています。
標準値はfalseになっています。（表示されません）
年表グラフの場合にのみ機能します。

著作権

このページの最初に紹介した事例（HTMLファイル）およびデータベースファイル（テキストファイル）は著作権を放棄しています。
スクリプトファイルについては、秀麗が著作権を有しており、二次配布を禁止いたします。改変して使用することは問題ありません。

2013.11.19　秀麗

更新履歴

戻る