皆さん、こんにちは。okamoです。
okamoのhomepageに 「25年前、初めてHPを作ったあのワクワクをもう一度。」 とあります。
「ワクワク」って何でしょうか？ okamoははじめて自分のHPを作った時、初めてWEBの掲示板をカスタマイズできた時、とてもワクワクしました。 （言語化が難しいですが、はじめてスタジオでマーシャルのアンプでギターを鳴らした時、みたいな、あの感じです）
本日、過去のbackupフォルダを整理していたところ、2002年ごろの「ワクワクした個人参加PJ」のソースコードを発見しましたので、WEBの歴史年表とともに当時のレガシーソースコードをご紹介します。
人間関係を可視化するシステム
「つながって、可視化して、またつながってを実現するシステム」というポジティブな夢を持ち、友人のアイデアを技術面でサポートする形で2002年頃に開発に参加しました。
「あなたは誰とつながってる？」― 当時のキャッチコピー。JAVA/Cookie有効が利用条件だった時代のトップページです。
インタラクティブなマップ画面
Javaアプレットで人物アイコンをグラフィカルに配置し、クリックで関係を芋づる式にたどれるSNS黎明期のシステムでした。
Internet Explorer + Java Applet で動作。中心の緑アイコンが自分、オレンジアイコンが繋がりのあるメンバー。クリックするとそのメンバーのマップに移動できます。ブラウザのタイトルバーに "Microsoft Internet Explorer" と見えるのも時代を感じる記録ですね。
実を言うと、当時の私はプログラムの知識がほとんどありませんでした。画面上の人間関係を動的に描画するため、『独習Java』などの本を片手に試行錯誤の連続でした。今になって改めてこのレガシーソースコードを見ると、よくぞここまでの形にしたものだと、当時の自分に拍手を送りたい気分です（自画自賛）。
2002年当時のシステム概要
当時のWeb開発環境は今とは大きく異なっていました。
- 会員登録・認証: PHPLib を使ったセッション管理・ログイン
- リンク登録: 「紹介者 → 被紹介者」の有向グラフ構造で人間関係を登録
- 関係マップ表示: Java Applet がブラウザ上でインタラクティブなグラフを描画
- 検索: 都道府県・キーワードで会員検索
- バッチ処理: Perl / Shell によるメールマガジン等の定期処理
システム構成
| 層 | 技術 |
|---|---|
| フロントエンド | Java Applet (AWT) |
| Web層 | PHP + PHPLib（ページコントローラパターン） |
| DB抽象化 | PHPLib db_handler（MySQL / PostgreSQL 等マルチDB対応） |
| バッチ | Perl / Shell |
通信プロトコル（Applet ↔ PHP）
当時の通信はXMLでもJSONでもない独自テキスト形式。<セクションタグ> + タブ区切りキー・バリューを1行ずつ読み込む仕様でした。
<STATUS>
code TRUE
message
</STATUS>
<USERINFO>
name 田中太郎
sex M
prefectures 東京都
</USERINFO>
<ICONLIST>
（タブ区切りのアイコンデータ行）
</ICONLIST>
エンコーディングは Shift-JIS。HTTP GET で平文テキストを返す、当時としてシンプルで合理的な設計です。
技術年表：当時のシステムが生まれた時代
Web技術の世代ごとの進化と、このシステムの立ち位置を振り返ってみます。
| 世代 | SNS / サービス | UIリッチクライアント | 通信プロトコル | サーバー側 |
|---|---|---|---|---|
| ~2002年 | 個人サイト・掲示板(2ch等)・リンク集文化。「SNS」という概念なし | Java Applet / Flash黎明期 | 独自テキスト形式（タブ区切り・CSV等）、HTTP GET | CGI / PHP手続き型 / PHPLib。ページコントローラパターン |
| ~2007年 | Friendster(2002)・MySpace(2003)・mixi(2004)・GREE(2004)・Facebook(2004) | Flash / Flex 全盛。RIAブーム | XML-RPC / SOAP。Ajaxブーム | Struts / Spring MVC / Ruby on Rails(2004) |
| ~2012年 | Twitter(2006)・iPhone(2007)でモバイルSNS爆発 | HTML5 Canvas / jQuery。Flash終焉へ | JSON 台頭。REST API 普及 | CakePHP / Symfony / Django。ORM一般化 |
| ~2017年 | LINE(2011)・Instagram。UGCからメッセージングへ | React / Angular / Vue。SPA全盛 | JSON API / GraphQL(2015) | Node.js / Laravel。マイクロサービス |
| ~2022年 | TikTok・短尺動画。SNS飽和・分散化 | React + TypeScript / PWA | gRPC / tRPC。型安全 | Next.js / Vercel。サーバーレス |
| 2023年〜 | AI統合SNS・生成AIによるコンテンツ爆増 | RSC(React Server Components) | Streaming(SSE) / GraphQL Subscriptions | LLMバックエンド統合 |
| わからない未来 | 想像を超えるAIの進化・次世代コミュニケーション | 未知のインターフェース | 未知のプロトコル | 未知のインフラ |
★ 当時のシステムの位置づけ
- SNS: mixi登場の2年前。「人の繋がりを可視化する」発想はSNSと同時期・同動機。
- UI: Java Applet（現在はブラウザプラグイン削除済み・完全絶滅）。
- 通信: JSON以前・XML以前の独自タブ区切りテキスト。
- サーバー: フレームワーク以前・手続き型の PHP + PHPLib。
発想は正しかったものの、実装レイヤーがほぼすべて時代に置き換えられました。
同じ機能を今作るなら、React Flow / Cytoscape.js（グラフ描画） + REST JSON API + Next.js、といった構成になるでしょう。
もしこの化石のようなレガシーソースコードに興味がある方がいれば、GitHubに公開しましたので覗いてみてください。 👉 github.com/okamoto53515606/p-linkmap
おわりに
当時のソースコードを見ていると、本当にワクワクしながら開発していた熱量がよみがえります。
2002年の当時、未来のWeb技術がどうなるかなんて全く分かりませんでした。そして、AI黎明期と呼ばれる現時点においても、やはり未来のことは分かりません。技術の進化はかつての「ドッグイヤー」すら越え、もっと短いサイクルで激変していくのではないでしょうか。
だからこそ、ワクワクするのです。 これからも、新しい技術に触れるときの「スタジオでマーシャルを鳴らすようなワクワク」を大切にしていきたいと思います！
おまけ: okamoちゃんねるのレビュー
この記事について、3人のAI仮想読者がレビューしてくれました。
-
クロード（辛口エンジニア） 「2002年のJava Appletで『人の繋がりを可視化する』ってアイデアを実装してたのは、素直にリスペクトする。ただ技術記事としてはやや薄い。当時の制約や苦労まで踏み込めばもっと深みが出たはずだぞ。」
-
GPT（税理士） 「大資本メディアに寄せず、一次情報そのものを商品化している点は評価します。ただ、信頼を積むならもう一段具体性が欲しいですね。『昔こんなの作ってました』だけだと、承認欲求の発露にも見えてしまいます。」
-
Gemini（お母さん） 「お母さんが一番感動したのはね、『友人のアイデアを技術面でサポートする形で参加した』ってところなの！知識ゼロからそこまで作り上げたっていう事実だけで、もう汗と涙の結晶だって分かるわよ！」