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

» 2018年06月04日 10時00分 公開
[高橋ホイコ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/2403/26/news158.jpg 元横綱・貴乃花、再婚後の激変ぶりに驚きの声 ヒゲ生やした近影に「ショーケンみたい」「ワイルドー」
  2. /nl/articles/2403/27/news130.jpg 中山美穂、金髪&ミニ丈の大胆イメチェンに視聴者びっくり! “格付け”出演の最新ビジュアルに「誰だか分からなかった」
  3. /nl/articles/2403/26/news169.jpg 「『ちゅ〜る』の紅麹色素は大丈夫?」 小林製薬の「紅麹」報道で飼い主に不安広がる
  4. /nl/articles/2403/27/news126.jpg ミス筑波大モデル、25キロ減量したビフォーアフターに「ホント凄い」 整形疑う声も「元々は埋もれてたようですね」
  5. /nl/articles/2403/26/news161.jpg 【まとめ】小林製薬「紅麹」問題 味噌や酒など紅麹原料メーカーの自主回収相次ぐ 20社以上が発表
  6. /nl/articles/2403/27/news127.jpg 日本エレキテル連合・中野、ネタで酷使し容姿に異変→手術を決断 「ダメよ〜、ダメダメ」でブレイク、2022年にがん公表
  7. /nl/articles/2403/20/news067.jpg 「紫のトトロ買った」 “ジブリを1ミリも知らない”友だちから連絡→まさかの正体に爆笑 友だちはその後ジブリを見た?
  8. /nl/articles/2403/26/news016.jpg ドイツ人家族が日本のバウムクーヘンを実食、一番おいしいと絶賛したのは…… 満場一致の結果に「参考になります」「他の食べ比べもお願い」
  9. /nl/articles/2312/30/news041.jpg 「紫のトトロ買った」 “ジブリを1ミリも知らない”友人から連絡→まさかの正体に爆笑「それトトロやない」
  10. /nl/articles/2403/26/news145.jpg 「ご安心ください」 “紅麹ショック”でDHCとファンケルが声明…… サプリ販売は継続中 小林製薬では死亡患者がサプリ摂取
先週の総合アクセスTOP10
  1. 親が「絶対たぬき」「賭けてもいい」と言い張る動物を、保護して育ててみた結果…… 驚愕の正体が230万表示「こんなん噴くわ!」
  2. フワちゃん、収録中に見えてはいけない“部位”が映る まさかの露出に「拡大しちゃったじゃん」「またか」の声
  3. 「これは悲劇」 ヤマザキ“春のパンまつり”シールを集めていたはずなのに…… 途中で気づいたまさかの現実
  4. 「ふざけんな」 宿泊施設に「キャンセル料金を払わなくする方法」が物議 宿泊施設「大目に見てきたが厳格化する」
  5. 田代まさしの息子・タツヤ、母の逝去を報告 「あんなに悲しむ父親の姿を見たのは初めて」
  6. 「遺体の写真晒すのはさすがに」「不愉快」 坂間叶夢さんの葬儀に際して“不適切”写真を投稿で物議
  7. 大友康平、伊集院静さんの“お別れ会”で「“平服でお越しください”とあったので……」 服装が浮きまくる事態に
  8. 妊娠中に捨てられていた大型犬を保護 救われた尊い命に安堵と憤りの声「絶対に許せません」「親子ともに助かって良かった」
  9. 極寒トイレが100均アイテムで“裸足で歩ける暖かさ”に 今すぐマネできるDIYに「これは盲点」「簡単に掃除が出来る」
  10. 「奥さん目をしっかり見て挨拶してる」「品を感じる」 大谷翔平&真美子さんのオフ写真集、球団関係者が公開
先月の総合アクセスTOP10
  1. 釣れたキジハタを1年飼ってみると…… 飼い主も驚きの姿に「もはや、魚じゃない」「もう家族やね」と反響
  2. パーカーをガバッとまくり上げて…… 女性インフルエンサー、台湾でボディーライン晒す 上半身露出で物議 「羞恥心どこに置いてきたん?」
  3. “TikTokはエロの宝庫だ” 女性インフルエンサー、水着姿晒した雑誌表紙に苦言 「なんですか? これ?」
  4. 1歳妹を溺愛する18歳兄、しかし妹のひと言に表情が一変「ちがうなぁ!?」 ママも笑っちゃうオチに「かわいいし天才笑」「何度も見ちゃう」
  5. 8歳兄が0歳赤ちゃんを寝かしつけ→2年後の現在は…… 尊く涙が出そうな光景に「可愛すぎる兄妹」「本当に優しい」
  6. 1人遊びに夢中な0歳赤ちゃん、ママの視線に気付いた瞬間…… 100点満点のリアクションにキュン「かわいすぎて鼻血出そう!」
  7. 67歳マダムの「ユニクロ・緑のヒートテック重ね着術」に「色の合わせ方が神すぎる」と称賛 センス抜群の着こなしが参考になる
  8. “双子モデル”りんか&あんな、成長した姿に驚きの声 近影に「こんなにおっきくなって」「ちょっと見ないうちに」
  9. 犬が同じ場所で2年間、トイレをし続けた結果…… 笑っちゃうほど様変わりした光景が379万表示「そこだけボッ!ってw」
  10. 新幹線で「高級ウイスキー」を注文→“予想外のサイズ”に仰天 「むしろすげえ」「家に飾りたい」

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