[Labyrinthe Noir]>[Top]>[自作JavaScript集]>

年表グラフ

歴史上または架空の人物を一覧表にして、生年と没年からグラフ化して表示するスクリプトです。
オリジナルの年表を作成できるように3つのファイルをセットにして公開しています。HTML内の初期設定と、人物のテキストデータを用意すれば、どなたでも年表を公開することが可能です。
二次使用の許可については、ページの最後をご覧ください。

用途と特徴

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

使用例

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

年表名 内容 グラフの種類
三国志人物年表 三国志に登場する主要人物の生没年表 年表グラフ
大河ドラマ「おんな城主直虎」人物年齢表 NHKの大河ドラマ「おんな城主直虎」に関連した人物年齢表 年表グラフ
日本の湖ベスト30 湖の広さを比較する棒グラフの事例 棒グラフ
都道府県統計資料 国勢調査や統計資料からのまとめ マルチグラフ
その他の使用例

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

画面の操作

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

並替:▲ [ ] 表幅:前[<<10][>>10]後[10<<][10>>] 位置:[<1<][>1>][<10<][>10>] 歴年表

メニュー 表示例 機能
並替   並替の対象となるフィールドがない場合、並替のメニューは表示されません
ヘッダーのフィールド名にも並替のリンクがあります
□/▲/▼ 並替の状態を表示(未ソート/降順/昇順)
チェックありは、並替をしている項目。もう一度クリックすると逆順に並替
チェックなしをクリックすると並替を実行。項目毎に並び替えの向きを記憶
表幅   生年と没年のデータが表示対象でない場合、表幅のメニューは表示されません
前[<<10][>>10] 年表の前部(グラフの左端)を10年分移動
後[10<<][10>>] 年表の後部(グラフの右端)を10年分移動
位置   生年と没年のデータが表示対象でない場合、位置のメニューは表示されません
[<1<][>1>] 年表の前後を同時に1年分移動
[<10<][>10>] 年表の前後を同時に10年分移動
[<100<][>100>] 年表の前後を同時に100年分移動(表幅が100年以上ある場合に表示)
一覧 歴年表】/【一覧表 年表ファイルのデータを一覧で表示(一覧ウィンドウ)
iPadでは、サイズ指定やスクロール処理ができないため、新規ウィンドウを開いて表示します

【情報ウィンドウ】

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

【ライン表示】

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

製作の準備

使用ファイル list_people.html ブラウザで表示させるためのHTMLファイル。表示の基本設定はこの中で行います。
list_people.js 年表を出力するスクリプトのファイルです。通常の使用では改変の必要はありません。
list_people.txt データベース用のデータが入ったファイルです。中身は書き換えて使います。

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

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

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

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

【サーバは必須】

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

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

【注意点】

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

グラフの種類

名称 内容 必須項目
年表グラフ 生年と没年の間を表現するグラフ 生年(year_st)、没年(year_ed)
棒グラフ 数値のデータを実数でグラフ表示( 基準値0、上限は無制限) 生年(year_st)、没年(year_ed)
マルチグラフ 並替選択時のみグラフを表示
数値のデータの最大値を100%とした時の比率でグラフ表示( 基準値0、上限100)
複数のフィールドに設定可能
フィールド名に「*」

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

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 = 0; //列と行の同時反転
//予約フィールド名
field_bun = "区分"; //分類項目
field_link = "名前"; //wikipediaとのリンク項目(不要な場合は空欄に)
field_st = "生年"; //グラフの始め
field_ed = "没年"; //グラフの終わり
//その他
head_unit = ""; //グラフ単位

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

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

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

変数 データの種類 内容
dtitle 文字列 人物年表 HTMLのタイトルを表示
dcomment 文字列 人物の生没年表 ページに表示される説明文
db_code 文字列 後漢,魏,蜀,呉,晋 区分フィールドに対応する区分名を「,」区切りで記入。自動で配列にします。
db_file 文字列 list_people.txt 読み込むデータベースファイル
hs_file 文字列 history.txt 読み込む年表ファイル(なくても動作)
year_st 数値 180 グラフの始まりの西暦年(紀元前はマイナス表記)
year_ed 数値 280 グラフの終わりの西暦年(紀元前はマイナス表記)
age_st 数値 0 / 1 年齢を表示する場合、最初の年齢表示。1なら数え年。
変数 データの種類 内容
ed_unknown 数値 0 / 1 没年が不明の場合、レコードを表示(1)するか否(0)か
view_age 数値 0 / 1 グラフ内に年齢を表示するか否か(棒グラフ、マルチグラフでは枠のみ)
line_number 数値 0 / 1 行番号を表示するか否か
line_row 数値 0 / 1 列と行をマウスに連動させて同時に反転させる(年齢表示ありの場合のみ)
変数 データの種類 内容
field_bun 文字列 区分 変数codeでデータを分類するフィールド名
field_link 文字列 名前 wikipediaへのリンクを設定するフィールド名
field_st 文字列 生年 グラフの開始位置を決めるフィールド名
field_ed 文字列 没年 グラフの終了位置を決めるフィールド名
field_st2 文字列 始年 任期の開始位置を決めるフィールド名
field_ed2 文字列 終年 任期の終了位置を決めるフィールド名
変数 データの種類 内容
head_unit 文字列 年 / 回 / 話 ヘッダーに表示する単位

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

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

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

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

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

凡例

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

グラフの種類 年齢表記 クラス名と凡例 実例 備考
存命期間 なし <span class='graph1'>存命</span> 存命 文字は標準色
あり <span class='age1'>年齢</span> 年齢 文字はグラフ内文字色
任意期間 なし <span class='graph2'>任期</span> 任期 文字は標準色
あり <span class='age2'>任期</span> 任期 文字はグラフ内文字色

テストモード

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

例:list_people.html?test

データベースファイル(list_people.txt)の仕様

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

基本的な仕様として、改行までの1行が1つのレコード(一人分のデータ)、レコード内を「,」またはタブで区切ったものが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ファイル内で変更可)
これらのフィールドをマルチグラフモードに設定することはできません。(設定無効)

フィールド名 内容 設定方法 データの種類
区分 データを分類するための区分コードで、区分名に置き換えて表示されます。0から始めます HTML内のcodeで設定 数値
名前 wikipediaへのリンクを設定します HTML内のfield_wikiで設定 文字列
差替 名前でリンクできない場合にwikipediaへの正しいリンク先を設定します 自動判定 文字列 or "!"
生年 没年と組み合わせて存命期間のグラフを表示します 自動判定 数値 or "?"
没年 生年と組み合わせて存命期間のグラフを表示します 自動判定 数値 or "?" or ""
始年 終年と組み合わせて任意期間のグラフを表示します 自動判定 数値
終年 始年と組み合わせて任意期間のグラフを表示します 自動判定 数値 or ""

【名前と差替について】

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>

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

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

不明の場合 生年および没年が不明の場合、「?」とします。
始年・終年が不明の場合に「?」とすると、生年または没年と同じに設定します。表示したくない場合は空欄にします。
例:?
不確かな場合 年数・没年・始年・終年が違う可能性がある場合、数値の後ろに「?」を付けます。 例:200?
存命中の場合 没年は空の値または「-」とします。(生年がない場合無効) 例:
任期中の場合 存命中で任意期間も終了していない場合、終年を空の値または「-」にします。(始年が不明の場合無効) 例:
日付形式 日付形式(.または/で年月日を区切る)にすることで、一部に日付を表示できます。 例:1836.1.3

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

その他仕様について

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

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

年表ファイル(history.txt)の設定方法

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

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

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

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

その他の注意点

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

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

スクリプトファイル(list_people.js)の仕様

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

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

予約フィールド名

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

変数 データの種類 初期値 内容
field_bun 文字列 区分 変数codeでデータを分類するフィールド名
field_link 文字列 名前 wikipediaへのリンクを設定するフィールド名
field_st 文字列 生年 グラフの開始位置を決めるフィールド名
field_ed 文字列 没年 グラフの終了位置を決めるフィールド名
field_link2 文字列 差替 差替項目の予約フィールド名
field_st2 文字列 始年 始年項目の予約フィールド名
field_ed2 文字列 終年 終年項目の予約フィールド名

色設定

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

変数 データの種類 初期値 内容
hcolor1 文字列 #ffff99 ヘッダーの背景色
hcolor2 文字列 #3333cc ヘッダーの文字色(年表あり)
hcolor3 文字列 #999999 ヘッダーの文字色(年表なし)
tcolor1 文字列 #ff99cc グラフ内の文字色
tcolor2 文字列 #555555 生年と没年の文字色
gcolor1 文字列 #ffccff グラフの基本となる背景色
gcolor2 文字列 #cceeff データに始年と終年がある場合のグラフの背景色
gcolor3 文字列 #ffcc33 グラフ上でマウスの位置に対応した行や列の背景色
gcolor4 文字列 #ffddff テーブル内のリンクにマウスを重ねたときの背景色

初期値

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

変数 データの種類 内容
fld_sort ブーリアン true/false ヘッダーのフィールド名に並替リンクを表示
fld_unit ブーリアン true/false ヘッダーのフィールド名に単位を表示
fld_nowrap ブーリアン true/false フィールド内の折返禁止
b_move ブーリアン true/false 表位置の移動メニューを表示
auto_history ブーリアン true/false 棒グラフモードで年表ファイルがない場合、自動的に年表データを作成
b_comma ブーリアン true/false 数値と自動判定されたデータに対し、カンマを付ける
p_point 数値 0 ~ 8 マルチグラフモードで百分率を計算したときに表示する小数点以下の桁数
age_st 数値 0 / 1 生まれた年の年齢(1なら数え年になる)
age_ed ブーリアン true/false 没年齢の表示(情報ウィンドウと枠無グラフ内に表示)
txt_age_ed 文字列 才没 没年齢表示後のテキスト(情報ウィンドウに表示)
txt_ylist 文字列 歴年表 年表ファイルを開くリンクの文字列
txt_nlist 文字列 一覧表 年表ファイルを開くリンクの文字列(棒グラフ用)
dataMark 文字列 年表データの頭に付ける区切記号
link_wiki 文字列 http://ja.wikipedia.org/wiki/ 名前に設定するwikipedia等へのリンク(基本URL)
link_target 文字列 wikipedia 新規ウィンドウ(タブ)を開くときの共通名
link_back 文字列 http://www.shurey.com/ リンク元ページが不明の場合の戻り先を指定
リンク元と戻り先のドメイン名が同じ場合にリンク元へ戻る

【ブーリアン】

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

【没年齢の表示】

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

著作権

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

2013.11.19 秀麗

更新履歴

2013.11.20 テストモードで日付の順序をチェックする機能
2013.11.18 始年または終年に「?」がある場合、生年または没年と同じとして表示
2013.5.4 新しいウィンドウで開かれた場合の戻りページを設定
2012.11.12 没年齢の表示に対応(デフォルトはオフ)
2012.10.21 データのセパレータに「,」またはタブが使用可能(自動判別)
2012.9.17 年齢表示で列が反転するとき、行も同時に反転する設定を追加
2012.6.16 リンクしない機能が正しくソートされない不具合を修正
2012.6.11 戻るリンクのドメイン名をチェックして同じなら戻る
2012.5.29 色設定をスクリプトファイルへ移動し、項目を増加
2011.11.28 初期設定の変更(link_wikiをHTMLファイルからスクリプトファイルへ)
2011.8.14 初期設定の手順を変更(個別設定を後から上書き)
2011.6.28 数え年の年齢表記に対応
2011.6.21 マルチグラフモードにマウスイベントを追加
2011.6.12 棒グラフモードの場合、年表データを自動生成
2011.6.5 名前/差替データによるリンクしない機能
2011.6.3 表位置の移動(表示幅の前後を同時変更)に対応
2011.6.1 フィールド名に並替のリンクを設置
2011.5.28 年表ファイルのデータを一覧で枠表示
2011.5.21 並替手順の見直し
2011.5.20 単位表示に対応
2011.5.18 数値データにカンマを自動で付ける
2011.5.17 マルチグラフモードを追加
2011.5.16 存命中・任期中の処理
2011.5.15 生年、没年、始年、終年に日付形式が可能
2011.5.13 若干のデザイン変更(CSS)
2011.5.11 マウスに反応して情報ウィンドウを表示
2011.5.8 年表ファイルを導入
2011.5.7 区分名の書式を変更
2011.5.4 行番号を追加
2011.5.3 コメントアウト、数値自動右揃えに対応
2011.5.2 並替を昇順・降順に切り替え
2011.5.1 棒グラフに対応。存命中の処理
2011.4.29 空白フィールドの追加処理
2011.4.28 任意期間に対応(始年・終年を追加)、差替機能追加
2011.4.27 HTMLファイルとスクリプトを完全分離
2011.4.26 フィールド非表示、並替、表の幅変更に対応
2011.4.24 年表グラフ、区分処理、フィールド名自動取得、wikipedia自動リンクを実装

戻る