IE3のウェブサイトに、Internet Explorer 3向けのバージョンをつくりました。

実は、ie3.jpのフッターにある小さな「IE3 for IE3」バナーが、このサイトへの入口になっています。

ブラウザに届くのは、テーブルレイアウトとGIF・JPEGで構成した、当時の作り方のページ。一方、その裏側では、今のCMSやNode.js、GitHub Actionsが動いています。コンテンツを管理・更新する仕組みは現代のまま、古いブラウザが読める形に変換して届けています。

Internet Explorer 3って、どんなブラウザ？

Internet Explorer 3は、1996年に登場したWebブラウザです。文章や画像を表示し、リンクをたどり、フォームに入力して情報を送る。Webサイトの基本的なことは、この頃からできました。

一方で、今のWebの作り方がそのまま通用するわけではありません。

• 文章や写真を載せる： HTMLとJPEG・GIFで表示できます。
• 情報を横に並べる： 表をつくるtableタグを、レイアウトにも使います。
• 色や文字の大きさを変える： HTMLの属性や、一部のCSSで指定します。
• 余白を細かく調整する： CSSには制約があり、今回は透明GIFを挟んで調整しています。
• 画面幅に合わせて配置を切り替える： 今のレスポンシブ設計で使うメディアクエリやFlexbox、Gridは使えません。今回は固定幅にしました。
• 動画をページ内で再生する： 今のHTML5動画や埋め込みプレーヤーは動きません。今回は画像やリンクに置き換えています。
• JavaScriptで動きをつける： 当時のJavaScriptは使えますが、現在の構文やブラウザAPIを前提にしたコードは、そのままでは動きません。

CSSもすでに登場していましたが、対応はまだ限定的でした。たとえば、今では当たり前に使う内側の余白指定「padding」も未対応です。当時のW3Cの記録にも、こうした制約が残っています。

IE3で表示するためにやったこと

ページはHTML 3.2をベースに、幅600pxのテーブルで組みました。文字の色やサイズはfontタグ、背景色はbgcolor、位置合わせはalign属性で指定しています。

余白には、1×1pxの透明画像「spacer.gif」を使っています。必要な幅や高さに引き伸ばし、文字や画像の間に挟む方式です。今ならCSSで済む指定を、テーブルのセルや透明な画像でつくっています。

CMSの画像は、Node.jsの画像処理ライブラリ「sharp」で縮小し、JPEGに変換。透過部分にはページの背景色を敷き、ロゴなどにはGIFを使いました。

文字コードも、編集時と公開時で分けています。ソースはUTF-8で管理し、公開直前にCP932（Windows版のShift_JIS）へ変換します。変換できない記号は置き換え、対応しない絵文字は取り除く処理も入れています。

削ったもの、持ち込まなかったもの

通常版の見た目や動作を、そのまま移植することはしていません。レスポンシブなレイアウトや複雑なアニメーションは持ち込まず、固定幅のページに文章と画像を並べる構成にしました。

記事本文も、CMSが出力したHTMLをそのまま渡すのではなく、必要な要素を組み直しています。段落、見出し、箇条書き、リンクなどは残し、装飾用のクラスやスタイル、本文中のスクリプトは取り除きます。

動画や音声の埋め込みプレーヤーはリンクに置き換えています。ただし、リンク先のサービスまでIE3で使えるようにするものではありません。CMSから取り込むアニメーション画像も、静止画として扱っています。

ブラウザ上でAPIを呼び出して記事を組み立てる処理もありません。IE3には、あらかじめ完成したHTMLと画像を渡します。JavaScriptは、推奨ブラウザを知らせる簡単な判定などにとどめています。

更新をつなぐGitHub Actions

WorkとLogの更新には、通常版と同じPayload CMSを使っています。公開から反映までの流れは、次のようになっています。

1. CMSの操作を受け取る

公開・非公開・削除などをきっかけに、CMSがGitHub Actionsのsync-media.ymlを呼び出します。このワークフローは更新の受け口で、ページ生成用のupdate-content.ymlを起動します。

2. 記事と画像を取得して変換する

GitHub Actions上でNode.jsを動かし、通常版サイトのAPIからWork・Logの一覧と詳細を取得します。本文をHTML 3.2向けに組み直し、画像を変換して、トップページ・一覧・詳細ページを生成します。公開一覧から外れた記事の生成物も整理します。

3. 変更があれば保存し、公開処理へ進む

生成結果に差分がある場合だけGitへコミットし、deploy.ymlを明示的に起動します。この更新経路では、内容が変わっていなければデプロイも行いません。

4. 文字コードを変換してFTPで配置する

公開用ファイルをUTF-8からCP932へ変換し、FTPでサーバーへアップロードします。文字コードの変換に失敗した場合は、公開処理を止めます。

CMSからの通知を取りこぼした場合に備えて、Work・Logは毎日取得する設定にもしています。Labは別の流れで、GitHub上のJSONと画像から毎週ページを更新し、同じ公開処理につなげています。

裏側は現代、ブラウザに届くのは当時のWeb

記事を書く場所はいつものCMSで、画像変換やHTML生成はNode.js、更新と公開の実行はGitHub Actionsが担当します。古いブラウザのために必要な処理を、公開前にまとめて済ませているわけです。

当時のWebの作り方を再現しながら、更新は今の環境で続けられる。この組み合わせで、IE3の新しい記事もInternet Explorer 3向けのページとして届けられるようにしました。

「当時のブラウザで動かしたい」にも、対応します

ここまでつくったので、最後に営業です。

IE3は、Internet Explorer 3で動かす必要がある案件にも対応できます。

古いPCを使った展示、当時の操作感まで含めた作品、特定の環境でしか動かせないWebサイト。「このブラウザで、この表現を実現したい」という条件があれば、ぜひ相談してください。

使える機能を確かめ、難しい部分は別の方法に置き換える。必要なら、今回のように裏側に現代の仕組みをつくり、古い環境へ届けるところまで設計します。

見た目を懐かしくするだけでなく、その環境で動かすために何が必要かを考え、実装と検証まで取り組みます。

推奨環境が1996年でも、ご相談ください。IE3が対応します。