グラフ年表スクリプト

歴史の人物を一覧表にして、生年と没年からグラフ化して表示するスクリプトです。
オリジナルの年表を作成できるように公開しています。HTML内の修正箇所は少ないため、データベースさえ用意すればどなたでも手軽に年表を作ることが可能です。

用途と特徴

データベースを利用してデータを取り込み、人名と生年と没年を表示したグラフを作成し、年表として表示します。
歴史上の人物であれば、どの年代に誰が居たのか確認すると共に、年齢を比較して見ることができます。
また、人物に限らず、組織や団体の存続を年表にしたり、漫画やアニメのキャラクタの登場回を年表風に見せることもできます。

• データベースと連動させることで、リアルタイムに表の内容を変更可能。
• 項目名の設定はデータベースから自動取得。
• 生年と没年を帯にして表示。また、設定により年齢を表記することも可能。
• 始年と終年を使って、任意の期間を別の色で表示。
• 各フィールドで並び替えが可能。（昇順/降順切り替わります）
• 年表の開始と終端は動的に変更可能。
• wikipediaへのリンクを自動設定。（リンク差し替えも可能）
• 棒グラフにもなります。（0以上）

使用例

その他の使用例

画面の操作

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

【情報ウィンドウ】

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

製作の準備

使用ファイル：list_people.html / list_people.js / list_people.txt （エンコードは全てUTF-8です）

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

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

【サーバは必須】

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

【データベースとの連動】

これは必須ではありませんが、データベースと連動することで、データの編集が容易になります。
データをテキスト（CSV）読込にしたため、手書きのテキストファイルだけでなく、データベースから出力したテキストで上書きすることにより、データをリアルタイムに置き換えることが可能です。

ファイルの役割

これら３つのファイルは同じフォルダに入れて使用してください。
複数の年表を作る場合、list_people.jsは共有して使います。他の２つのファイルは名前を変えて使ってください。

【注意点】

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

グラフの種類

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

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)
ed_unknown = 1; //没年不明の表示
view_age = 1; //年齢グラフ表示
line_number = 0; //行番号表示
//色設定
hcolor = "ffff99"; //ヘッダー背景色
tcolor = "ff99cc"; //グラフ文字色
gcolor1 = "ffccff"; //グラフ背景色（生没期間）
gcolor2 = "cc66cc"; //グラフ背景色（任意期間）
gcolor3 = "ffff55"; //グラフ背景色（選択時）
//予約フィールド名
field_bun = "区分"; //分類項目
field_link = "名前"; //wikipediaとのリンク項目（不要な場合は空欄に）
field_st = "生年"; //グラフの始め
field_ed = "没年"; //グラフの終わり
//その他
head_unit = "年"; //グラフ単位

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

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

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

予約名として定義されるフィールド名もここで変更が可能です。

変数を設定しない場合、変数は消さないでください。与える値を空にするため、文字列を消して「""」とします。数値の場合は「0」にします。

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

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

色の設定例

■■■■■

//色設定
hcolor = "ffff99"; //ヘッダー背景色
tcolor = "ff99cc"; //グラフ文字色
gcolor1 = "ffccff"; //グラフ背景色（生没期間）
gcolor2 = "cc66cc"; //グラフ背景色（任意期間）
gcolor3 = "ffff55"; //グラフ背景色（選択時）

■■■■■

//色設定
hcolor = "ffff99"; //ヘッダー背景色
tcolor = "ff99cc"; //グラフ文字色
gcolor1 = "ffccff"; //グラフ背景色（生没期間）
gcolor2 = "ccffff"; //グラフ背景色（任意期間）
gcolor3 = "ff9944"; //グラフ背景色（選択時）

テストモード

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
（以下省略）

レコードの仕様

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

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

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

フィールドの仕様

【接頭文字】

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

【補足情報】

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

【予約フィールド名】

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

【名前と差替について】

wikipediaへのリンクは基本URL（スクリプトファイルの初期値link_wiki）に名前の文字列を足して設定しています。

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

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

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

差替フィールドが「http」から始まるデータの場合、基本URLを使わず差替フィールドのみ設定します。外部サイトの場合、httpから表記が必要です。

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

名前フィールドのデータの先頭に「!」を付けるか差替データを「!」にした場合、リンクをしません。

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

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

その他仕様について

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

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

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

年表ファイルを設定することで、年表データ（一覧データ）として、マウスのイベントや一覧ウィンドウに表示します。
データは1行毎に「年数,内容」という形式になっています。

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

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

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

その他の注意点

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

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

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

通常はそのままお使いください。一部変更可能な項目がありますので、その点だけ解説します。
変数の初期設定のうち、項目名と初期値は変更可能です。
予約フィールド名や初期値は初期設定ルーチンの中にあり、HTMLファイル内の初期設定より先に読み込まれています。

予約フィールド名

予約フィールド名の初期値を設定しています。個別に変更が必要な場合は、HTMLファイル内の初期値に追加してください。

初期値

色以外のデザインに関する設定値です。
これらの値は全HTMLファイルに影響がありますので、個別に設定が必要な場合は、HTMLファイル内の初期値に追加してください。

【ブーリアン】

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

著作権

このページの最初に紹介した事例（HTMLファイル）およびデータベースファイル（テキストファイル）は著作権を放棄しています。
スクリプトの著作権は秀麗が有していますが、改変して使用することができます。その際はスクリプトの最後に改変者のクレジットを足してください。二次配布は認めていません。

2011.4.24

履歴

戻る