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.

昨日の総合アクセスTOP10

  1. /nl/articles/2109/16/news030.jpg 転校生が一言もしゃべらない、と思っていたら……? 黙り続ける理由が判明していく漫画がジーンとくる
  2. /nl/articles/2109/17/news127.jpg 市川海老蔵、小林麻央さんと暮らした家が“けいこ場”に改装完了 子どもたちの“ルームツアー動画”に反響
  3. /nl/articles/2109/17/news011.jpg インコ「のっしのっし……」→「シャキーン!」 堂々と登場するインコの姿が何回も見たくなるほど面白かわいい
  4. /nl/articles/2109/16/news147.jpg 森永製菓、太くて長い「50倍小枝」を発売 それはもう大枝なのでは
  5. /nl/articles/2109/17/news049.jpg 100均で三角コーンを欲しがる2歳娘→家に帰って遊び始めたら…… 年齢に見合わぬ高度なギャグセンスを描いた漫画につい笑顔になってしまう
  6. /nl/articles/2109/16/news022.jpg 「ギャルの幽霊」に生きる楽しさを教えられる漫画が尊い 死んだように生きる男が、生きているように笑う幽霊と出会い……
  7. /nl/articles/2109/16/news095.jpg 中国版「FGO」で中国系キャラクターの名前・イラストが突然変更に 虞美人(アサシン)は「暗匿者230」、始皇帝は「裁定者229」に
  8. /nl/articles/2109/17/news014.jpg 自分を拾ってくれた先住ワンコのことが好きすぎる保護子猫 早朝から「遊ぼうよー!」と甘える姿がいとおしい
  9. /nl/articles/2109/16/news018.jpg ちょっとそこまで昼飯を買いに行った飼い主、帰宅すると…… 猫ちゃん5匹の熱烈すぎるお出迎えがうらやましい
  10. /nl/articles/2108/19/news134.jpg 【お料理のちょっと怖い話】お徳用サイズのかつおぶしの“謎のプチプチ感”の正体

先週の総合アクセスTOP10

先月の総合アクセスTOP10

  1. 田中将大、石川佳純ら卓球女子との集合ショットに反響 「夢の共演」「どちらから声を掛けたのか気になる」
  2. 田中将大の五輪オフショット集、最後は柔道・阿部詩との2ショットでシメ! “モテ男”の期待裏切らず「美女好きですね〜」
  3. 「マジで恥ずかしいです」 中川翔子、数年ぶりの“水着披露”に恥じらいつつもマネジャー大絶賛「スタイルめっちゃいいすね!」
  4. 里田まい、楽天ユニフォーム姿の長男に「違う、そうじゃない」 父・田中将大選手そっちのけの推し愛にツッコミの嵐
  5. 野々村真、動画で退院を報告 やつれた姿に衝撃広まる「コロナがより怖くなった」「ガリガリで衝撃を受けたわ」
  6. 「薬を問われ、アル中だと言われ」 西山茉希、“うわさ”ささやかれる痩せ体形に「懸命なもんでご了承願います」
  7. 柴犬「メシ、よこさんかーい!!(激怒)」 ごはんを忘れた飼い主に皿をぶん投げる柴犬、荒ぶる姿に「爆笑した」
  8. レイザーラモンRG、コロナ療養で“10キロ減”を告白 「顔が変わっちゃいました」とやつれた姿で復帰報告
  9. 海外記者「最高のコンビニアイスを発見した」 森永チョコモナカジャンボ、ついに世界に見つかってしまう
  10. 「ついついキレイな部分ばかり載せたくなりますが」 小倉優子が公開したインスタの“現実”に「勝手に親近感が」「共感しかない」

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