2026年9月29日　モータースポーツ史年表アプリ開発ジャーナル

2026年9月29日　モータースポーツ史年表アプリ開発ジャーナル

今日は、以前から考えていた「モータースポーツ史の静的年表アプリ」を、実際にGitHub Pages上で動かし始めた。

まずGitHubに新しく motorsports-history リポジトリを作成。公開設定をPublicにし、READMEを用意したうえで、最初の index.html を作成した。GitHub Pagesも有効化し、

で実際にWebページが表示されるところまで確認できた。

その後、単なるHTMLページではなく「データから年表を生成する」構成へ進めた。

今回の基本方針は、

• HTML
• CSS
• JavaScript
• JSON

だけで構成し、追加の動的サーバーは使わない完全な静的サイトとすること。

歴史データは data/timeline.json に保存し、JavaScriptがJSONを読み込み、画面に年表として表示する方式にした。

特に今回こだわったのが、歴史資料特有の「日時の曖昧さ」を扱えるようにすること。

たとえば、

• 1967年5月3日
• 1966年
• 1980年代中盤頃
• ある時代にわたって続いた出来事

などを同じ年表上で扱えるよう、

"time_span": {
  "start": "...",
  "end": "...",
  "precision": "..."
}

"time_span": {
  "start": "...",
  "end": "...",
  "precision": "..."
}

という機械処理用の日付と、

"display": {
  "date_text": "...",
  "scale": "spot"
}

"display": {
  "date_text": "...",
  "scale": "spot"
}

という人間向け表示を分けて持たせた。

これによって、画面には「1966年」と表示しつつ、内部では start を使って正しく年代順に並べられるようになった。

また、scale に

• spot = ある時点の出来事
• span = ある期間続いた出来事

という考え方も入れた。

CSSでは、spot は年表上の丸、span は縦長のマーカーとして視覚的に区別できるようにした。

次に、カテゴリー機能を追加した。

最初はHTMLに

「すべて / 歴史 / レース / 技術」

というボタンを直接書いていたが、途中から設計を変更。

JSON内の categories をJavaScriptが自動的に集めて、フィルターボタンそのものを自動生成する方式にした。

これにより、JSONに新しいカテゴリーを追加すると、HTMLを書き換えなくても自動的に新しいボタンが表示されるようになった。

実際に、

"categories": [
  "circuit",
  "history"
]

"categories": [
  "circuit",
  "history"
]

と書くだけで、

「サーキット」「歴史」

というフィルターが自動生成された。

各年表カードの下にも、カテゴリーを小さなタグとして表示するようにした。

今日からサンプルデータだけではなく、本番データも入れ始めた。

最初の実データは、

1966年　富士スピードウェイ開業

次に、

1936年　多摩川スピードウェイ開場

を登録。

JSON内での記述順とは関係なく、time_span.start を基準にJavaScriptが自動ソートし、

1936年
↓
1966年

と正しく並ぶことも確認できた。

途中、一度 timeline.json のカンマが抜けてJSONの読み込みエラーが発生。

画面に、

「年表データを読み込むことができませんでした。」

と表示されたが、原因を確認したところ、データとデータの間のカンマ不足だった。

修正すると正常に復旧。

JSONはとてもシンプルだが、そのぶんカンマ1個でも動かなくなるということも、実際に手を動かしたことでよく分かった。

さらに今日は「典拠」の仕組みも追加した。

歴史データなので、最終的には「何を根拠にこの出来事を書いているか」を残せるよう、

"sources": [
  {
    "title": "",
    "author": "",
    "publisher": "",
    "year": null,
    "url": "",
    "note": ""
  }
]

"sources": [
  {
    "title": "",
    "author": "",
    "publisher": "",
    "year": null,
    "url": "",
    "note": ""
  }
]

という形を用意した。

まだ実際の資料情報は入れていないが、富士スピードウェイのカードには、

典拠
典拠未登録

と表示されるところまで実装できた。

一方、sources: [] のデータでは空の典拠欄が表示されないようにも調整した。

今日の時点で、このアプリには、

年表表示
年代順ソート
曖昧な日時の扱い
spot / span 表現
カテゴリー自動生成
カテゴリー絞り込み
カテゴリータグ表示
典拠情報の表示

まで実装できた。

見た目はまだシンプルだが、構造としてはかなりしっかりしてきた。

最初は「年表サイト」を作るつもりだったけれど、作っているうちに、これは単なる年表というより、

モータースポーツ史の小さなデジタルアーカイブ

に近づいている気がする。

今後は、

人物
車両
チーム
メーカー
サーキット
レギュレーション
安全技術
文化
出来事
典拠

などを関連付けていける。

さらにその先には、RAGやAI検索、MCPなどを使った、

対話できるモータースポーツ史アーカイブ

への発展も考えられる。

今日は、GitHub Pagesに最初のページを出すところから始めて、ここまで来た。

かなり大きな一歩だった。

Follow me!