歴史の人物を一覧表にして、生年と没年からグラフ化して表示するスクリプトです。
オリジナルの年表を作成できるように公開しています。HTML内の修正箇所は少ないため、データベースさえ用意すればどなたでも手軽に年表を作ることが可能です。
| 使用例１： | 三国志人物年表 | 三国志に登場する主要人物の年表 |
| 使用例２： | 三国志皇帝年表 | 三国志に登場する皇帝の年表 |
| 使用例３： | 戦国「江」年表 | NHKの大河ドラマ「江」に関連した年表 |
| 使用例４： | ランドマーク一覧 | 日本のランドマーク（建築物）の一覧表 |
データベースを利用してデータを取り込み、人名と生年と没年を表示したグラフを作成し、年表として表示します。
歴史上の人物であれば、どの年代に誰が居たのか確認すると共に、年齢を比較して見ることができます。
また、人物に限らず、組織や団体の存続を年表にしたり、漫画やアニメのキャラクタの登場回を年表風に見せることもできます。
使用ファイル：list_people.html / list_people.js / list_people.txt （エンコードは全てUTF-8です）
３つの使用ファイルをダウンロードします。リンクをクリックして開くか、リンクの上で右クリックをして保存をしてください。
表示や保存の際には、テキストエンコードをUTF-8で保存します。日本語が文字化けしていなければ正しいエンコードです。
データベースファイルの読込はオンラインでなければできませんので、ホームページとして公開できるスペースが必要になります。また、これらファイルを転送する際にはFTPソフトが必要ですので、使用するサーバの設定に従って準備を行ってください。
| list_people.html | ブラウザで表示させるためのHTMLファイル。表示の基本設定はこの中で行います。 |
| list_people.js | 年表を出力するスクリプトのファイルです。通常の使用では改変の必要はありません。 |
| list_people.txt | データベース用のデータが入ったファイルです。中身は書き換えて使います。 |
これら３つのファイルは同じフォルダに入れて使用してください。
複数の年表を作る場合、list_people.jsは共有して使います。他の２つのファイルは名前を変えて使ってください。
初期設定はHTMLファイル内で行います。 表示に関する様々な設定と、データベースとしてカスタマイズ可能な項目を用意しています。
初期値のうち、上から６つ目まで調整すれば直ぐに使えます。
<script type="text/javascript">
<!--
//初期値
dtitle = "三国志人物年表"; //このページのタイトル
dcomment = "主要人物の生没年表"; //説明書き
code = new Array("後漢","魏","蜀","呉","晋","張角","董卓","袁紹"); //区分名
db_file = "list_people.txt"; //データベースファイル
year_st = 180; //年表の最小値
year_ed = 280; //年表の最大値
ed_unknown = 1; //没年不明の処理：0=非表示/1=表示
view_age = 1; //年齢表示：0=非表示/1=表示
hcolor = "ffff99"; //ヘッダー背景色
tcolor = "ff99cc"; //グラフ文字色
gcolor1 = "ffccff"; //グラフ背景色（生没期間）
gcolor2 = "cc66cc"; //グラフ背景色（任意期間）
gcolor3 = "ffff55"; //グラフ背景色（選択時）
//項目名
field_bun = "区分"; //分類項目
field_wiki = "名前"; //wikipediaとのリンク項目（不要な場合は空欄に）
field_wiki2 = "差替"; //リンク差し替え
field_st = "生年"; //グラフの始め
field_ed = "没年"; //グラフの終わり
field_st2 = "始年"; //期間の始め
field_ed2 = "終年"; //期間の終わり
//リンク
link_wiki = "http://ja.wikipedia.org/wiki/"; //wikipedia等へのリンク
link_back = "http://www.shurey.com/"; //前ページがない場合の戻り先
//その他
head_unit = "年"; //ヘッダー表示単位
-->
</script>
データのフィールド名については、データベースファイル（list_people.txt）の中で設定します。
| 変数 | データの種類 | 内容 |
|---|---|---|
| dtitle | 文字列 | HTMLのタイトルを表示 |
| dcomment | 文字列 | ページに表示される説明文 |
| code | 配列 | 区分フィールドに対応する区分名。1つ目が「0」 |
| db_file | 文字列 | 読み込むデータベースファイル |
| year_st | 数値 | グラフの始まりの西暦年（紀元前はマイナス表記） |
| year_ed | 数値 | グラフの終わりの西暦年（紀元前はマイナス表記） |
| ed_unknown | 数値 | 没年が不明の場合、レコードを表示するか否か |
| view_age | 数値 | グラフ内に年齢を表示するか否か |
| hcolor | 文字列 | ヘッダーの背景色 |
| tcolor | 文字列 | グラフ内の文字色 |
| gcolor1 | 文字列 | グラフの基本となる背景色 |
| gcolor2 | 文字列 | グラフ上でマウスを重ねたり、クリックしたときの背景色（IE非対応） |
| gcolor3 | 文字列 | データに始年と終年がある場合のグラフの背景色 |
| 変数 | データの種類 | 内容 |
| field_bun | 文字列 | （区分）変数codeでデータを分類するフィールド名 |
| field_wiki | 文字列 | （名前）wikipediaへのリンクを設定するフィールド名 |
| field_wiki2 | 文字列 | （差替）リンクの差替分を指定 |
| field_st | 文字列 | （生年）グラフの開始位置を決めるフィールド名 |
| field_ed | 文字列 | （没年）グラフの終了位置を決めるフィールド名 |
| field_st2 | 文字列 | （始年）グラフ内の任意期間の開始フィールド名 |
| field_ed2 | 文字列 | （終年）グラフ内の任意期間の終了フィールド名 |
| 変数 | データの種類 | 内容 |
| link_wiki | 文字列 | 名前に設定するwikipedia等へのリンク |
| link_back | 文字列 | 前ページがない場合の戻り先 |
| 変数 | データの種類 | 内容 |
| head_unit | 文字列 | ヘッダーに表示する年代の単位。「回」や「話」などでも使えます。 |
予約名として定義されるフィールド名もここで変更が可能です。
| 区分 | 代 | 名前 | 称号 | 以前 | 180年 | 190年 | 以後 | ||||||||||||||||||
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ||||||
| 後漢 | 12 | 劉宏 | 霊帝 | 156 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 189 | ||||||||||
| 後漢 | 13 | 劉弁 | 少帝弁 | 173 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 190 | |||||||||
| 後漢 | 14 | 劉協 | 献帝 | 181 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 234 | |
■■■■■■
| 区分 | 代 | 名前 | 称号 | 以前 | 180年 | 190年 | 以後 | ||||||||||||||||||
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ||||||
| 後漢 | 12 | 劉宏 | 霊帝 | 156 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 189 | ||||||||||
| 後漢 | 13 | 劉弁 | 少帝弁 | 173 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 190 | |||||||||
| 後漢 | 14 | 劉協 | 献帝 | 181 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 234 | |
■■■■■■
URLの後ろに「?test」と入力すると、データベースの読込テストができるテストモードとなります。
テストモードでは、データベースを単純に読み込んだ後、データを一覧表にして表示します。データが正常に表示されない場合、テストモードでデータのずれがないか確認してください。
データベースとして正しく読み込むために幾つかのルールに従ってテキストファイルを作成してください。
基本的な仕様として、改行までの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内のcodeで設定 | 数値 |
| 名前 | wikipediaへのリンクを設定します。 | HTML内のfield_wikiで設定 | 文字列 |
| 差替 | 名前でリンクできない場合にwikipediaへの正しいリンク先を設定します。 | 自動判定 | 文字列 |
| 生年 | 没年と組み合わせてグラフを表示します。 | 自動判定 | 数値 or "?" |
| 没年 | 生年と組み合わせてグラフを表示します。 | 自動判定 | 数値 or "?" or "" |
| 始年 | 終年と組み合わせてグラフを表示します。 | 自動判定 | 数値 |
| 終年 | 始年と組み合わせてグラフを表示します。 | 自動判定 | 数値 |
【名前と差替について】
wikipediaへのリンクは基本のURLに名前の文字列を足しています。
<a href="http://ja.wikipedia.org/wiki/名前">名前</a>
差替を設定した場合、名前の部分を差替データと入れ替えます。
<a href="http://ja.wikipedia.org/wiki/差替">名前</a>
「http」から始まる差替データの場合はwikipediaの基本URLは無視されます。
<a href="差替">名前</a>
【生年・没年・始年・終年について】
| 不明の場合： | 生年および没年が不明の場合、「?」とします。 | 例：? |
| 不確かな場合： | 年数・没年・始年・終年が違う可能性がある場合、数値の後ろに「?」を付けます。 | 例：200? |
| 存命中の場合： | 没年には何も入力せず、空の値とします。 | 例： |
生年が不明の場合、表の先頭からグラフが表示されます。
没年が不明の場合は、グラフは表示されません。
（使用例１を参照）
存命中の場合は、生年から最後までグラフが表示されます。
始年および終年は、生没期間のグラフがある場合にその範囲の背景色を変更して表示します。（使用例２と３を参照）