sf-tech-lifeline

KO | EN

gitlite — search

#hacktoberfest #react #ai #golang #android #rust #docker #nodejs #java #awesome #vue #pytorch #mcp #openai

sf-tech-lifeline

(★ 22)

生年を入力すると、SF作品・コンピューター技術・音楽の年表(1822〜2026年、全700項目)が自分の学齢期にマッピングされるWebアプリ。解説記事はTechnoEdgeの連載CloseBoxに掲載。

sf-tech-lifeline 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# SF・コンピューター技術ライフライン

生年を入力すると、SF作品・コンピューター技術・音楽の年表(1822〜2026年、全720項目)が、あなたの学齢期(幼少期・小学生・中学生・高校生・高専生・浪人・大学生・社会人)にマッピングされるWebアプリです。

テレホーダイを高校生で迎えたのか、初音ミクを中学生で浴びたのか——あなたがどんな「インターネット老人」だったのかを判定します。

- 各項目をタップすると蘊蓄コラムが開きます(全項目に現代技術とのつながりを解説)
- Wikipediaリンク、作品にはAmazon/YouTube検索リンク付き
- SF作品(赤)/実テクノロジー(青)/音楽・カルチャー(紫)のフィルタ、「すべて開く」で205年分の通読モード
- 「興味のある分野」でコンピューター・AI・ネット・SNS・モバイル・ゲーム・楽器/DTM・オーディオ・映像/CG・ウェアラブル・タブレット・VR/AR・ロボット・宇宙・量子・ブーム・アーティストごとにオン/オフ
- 「社会人」と「生まれる前」は長くなりすぎるため、技術史の7つの時代(発明/大型計算機/PC/インターネット/Web 2.0/スマートフォン/AI)でさらに区切って表示
- 進路は高卒就職・高専(5年)・短大/専門・大学(4年)・6年制大学(医歯薬獣医)・修士・博士に対応
- 浪人・留年の年数設定に対応(帯が後ろにずれます)
- どの進路にも当てはまらない場合は「社会人になった年度」を直接指定でき、卒業から就職までの空白期間は「社会人になる前」として表示されます
- 「テーマの糸」——歌声合成、CG、写真、ローグライク、ネット文化、宇宙観測など20本のテーマを選ぶと、年表を横断して関連項目が年代順に自動再生されます(ブラウザの音声合成による読み上げ、速度切り替え、糸ごとの共有リンク`?t=`つき)
- アイコンはすべて自作SVG(権利フリー)

TechnoEdgeの連載「CloseBox」のために、Claudeとの対話(vibe coding)で制作しました。

関連記事(CloseBox / 松尾公也):

- [あなたはどんな「インターネット老人」だったのか。生年を入れると詳しくなってウンチクが語れる年表アプリを作った](https://www.techno-edge.net/article/2026/08/04/5360.html)(2026年8月4日・公開時)
- [あのSFやガジェット、ゲームに何年生で出会ったかがわかるインタラクティブ年表「SF・コンピューター技術ライフライン」を3倍に育てた。自分語りに便利なX共有機能も](https://www.techno-edge.net/article/2026/08/05/5365.html)(2026年8月5日・改訂版)

## 開発

```bash
npm install
npm run dev
```

## ビルド

```bash
npm run build
```

## GitHub Pagesへの公開

1. このリポジトリをGitHubにpush
2. リポジトリのSettings → Pages → Source を「GitHub Actions」に設定
3. mainブランチへのpushで自動デプロイされます

リポジトリ名を`sf-tech-lifeline`以外にする場合は、`vite.config.js`の`base`を合わせて変更してください。

## データの追加

年表データは`src/events.js`(年代順)、テーマの糸は`src/threads.js`、分野の定義とUIは`src/App.jsx`にあります。項目は1行足すだけです。

```js
{ y: 1999, t: "タイトル", cat: "sf" | "tech" | "music", s: "分野キー", ic: "アイコン名", n: "蘊蓄", l: ["Wikipedia記事名"], q: "検索クエリ(任意)" },
```

- `s`は`App.jsx`の`SUBS`のキー(`pc` / `ai` / `net` / `sns` / `mobile` / `game` / `inst` / `audio` / `video` / `wear` / `tablet` / `xr` / `robot` / `space` / `quantum` / `boom` / `other` / `artist_w` / `artist_j`)。SF作品には不要です。
- `l`の記事名に`en:`を付けると英語版Wikipediaにリンクします。`"https://例|表示名"`の形式で外部リンクも張れます。記事名と表示名を変えたいときは`"記事名|表示名"`と書けます。
- テーマの糸(`src/threads.js`)は`{ key, title, lead, items: [{ y: 年, m: "タイトルに含まれる文字列" }] }`の形式で、`m`から実際の項目を引き当てます(見つからない参照は黙って除外されます)。
- `a`に追加日(`"2026-08-06"`)を入れると、その日付が最新の項目群が「最近の追加」として先頭に表示されます。

## License

MIT

sf-tech-lifeline

sf-tech-lifeline 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

sf-tech-lifeline

sf-tech-lifeline 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README