Special
» 2018年06月04日 10時00分 公開

「メモ帳でホームページを作る技術」はもう使えないのか? Windows 98で現代のTwitterっぽいものを再現してみた (2/3)

[高橋ホイコ,PR/ねとらぼ]
PR

Excelアート的な古代ハック技術「テーブルレイアウト」

 さあ、メモ帳でTwitterを作りますよ! アクセサリからメモ帳を開きましょう。

 最初にホームページの呪文「<HTML><HEAD></HEAD><BODY></BODY></HTML>」を打ち込みます。今では小文字で書かれるタグも、昔は大文字でした。

メモ帳で入力 ホームページの呪文を入力

 BODYタグの間に本文を書きます。まず、書くのはTABLEという表のタグです。そう、今となっては全面否定されている「テーブルレイアウト」を使います。

テーブルレイアウト説明 テーブルレイアウトの罫線を表示させた状態。最終的に罫線を消します

 画面全体に表を表示させ罫線を消します。表の枠組みを使ってデザインするという大胆な手法です。1997年頃から一気に広まったものの、1999年12月のW3C勧告で「表じゃないものに表を使うな」と否定され徐々に消えていきました。今やると先生に怒られます。

タグを打ち続けるところ メモ帳でそのままタグを打ちこみます。このファイルをブラウザで開けばホームページ画面になります

 太字を書きたければ<B>タグで囲い、文字の色や大きさを変えたければ<FONT>、改行するには<BR>を使ってコードを書いていきます。これらのタグだけでTwitter画面っぽいものができちゃいます。たった1〜2時間で文字部分が完成しました。

文字部分の完成形 文字部分が完成しました! あとは画像を入れるだけ

 現代風にCSSを使ってデザインしようとするとしこたま時間がかかる筆者ですが、テーブルレイアウトならサクサク作れちゃいました。若い頃培った技術はこんなにも体に入っているものかと、年寄りっぽいことを感じてしまいました。

画像は「食品ラップ」を使って描こう!

 画像を作っていきましょう。メモ帳と同様に古くからWindowsに入っている「ペイント」を使います。こちらでも今では考えられないアナログな手法を使いますよ!

 かつて画像のトレース作業で使っていたのはなんと「食品ラップ」です。写したい元の画像の上に食品ラップを張り、マジックでトレースします。次に食品ラップをPC画面に張り、ペイントでそれをなぞってトレースするのです。

 もしかしたらこのやり方をしていたのはWindows 3.1も登場していない90年頃かもしれません。雑誌のイラストなどをこうしてトレースして遊んでいました。CRTモニターなら静電気でうまく張り付くのですが、液晶画面では張り付かないですね。

ラップを画面に張った 作りたい画像をラップに写す

文字部分の完成形 Twitterアイコンもマジックでなぞります

ペイントにラップを貼る ペイントでラップのイラストをなぞる。ラップのイラストが小さすぎました

 遠くから見ればそれっぽく見えるTwitterアイコンの完成です。タッチパッドで描くことになり、苦労しました。

Twitterアイコンの完成 Twitterアイコンが描けた―!

タッチパッド PS/2マウスがないからタッチパッドで描くしかない、辛い

 ここで事件発生です! なんと、ペイントでJPEG形式保存ができないではないですか。ホームページの画像はJPEG・GIF・PNGのどれかです。初期のペイントがBMP形式だったのは把握していましたが、Windows 98でもまだJPEG対応していなかったとは……。

ペイントの保存画面 JPEGで保存できないだとっ!

 BMPをJPEGに変換できるプリインストールソフトがあったので、そちらでなんとか変換ができました。メモ帳とペイントだけでTwitter作れるとかウソをついてしまいました。あああー。

 ソースに画像を表示するコードを追加します。マウスコンピューターの公式Twitter画面(っぽいもの)が再現できましたー!

完成したTwitter画面 Twitter画面できたー!!

 めちゃくちゃそれっぽい! 「いま、Windows 98でTwitter開いたらこんな感じ」感がよく出ています。オシャレなカフェにWindows 98持ち込んで、この画面開いてドヤリングしたいわー。

今では使えないタグばかりになりました

 完成したソースコードを眺めると、9割がた現在ではやってはいけない書き方をしています。文字の大きさや色を指定する<FONT>、文字を太くする<B>は代表的な例です。筆者は最新のHTML5には疎いのできちんと把握しきれていませんが、もう、もう、全然アウトな知識になっているはずです。仕事の役には立ちません。

やっていはいけないところにハイライト 書いたコードのうち今使えないものに黄色を入れました。ほとんどダメだー

 さらに、今はやってはいけない極め付きの技術をお伝えしましょう。「spacer.gif」です。ちょっとここに隙間を入れたいなと思ったとき、背景色と同じ色の画像を作って表示させるのです。なにかと力業で見た目を整えていました。

スペーサーの説明 背景色の画像で表示位置を調整していた

 実際にツイートする機能は作れなかったので、ツイートボタンを押すと「工事中」って出るようにしておきました。満足です。

工事中 ツイートボタンを押すと「工事中」と表示されるJavaScriptを入れておきました

Copyright © ITmedia, Inc. All Rights Reserved.


提供:株式会社マウスコンピューター
アイティメディア営業企画/制作:ねとらぼ編集部/掲載内容有効期限:2018年6月10日