「メモ帳でホームページを作る技術」はもう使えないのか？ Windows 98で現代のTwitterっぽいものを再現してみた（2/3 ページ）
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アイコンの完成です。タッチパッドで描くことになり、苦労しました。
ここで事件発生です！ なんと、ペイントでJPEG形式保存ができないではないですか。ホームページの画像はJPEG・GIF・PNGのどれかです。初期のペイントがBMP形式だったのは把握していましたが、Windows 98でもまだJPEG対応していなかったとは……。
BMPをJPEGに変換できるプリインストールソフトがあったので、そちらでなんとか変換ができました。メモ帳とペイントだけでTwitter作れるとかウソをついてしまいました。あああー。
ソースに画像を表示するコードを追加します。マウスコンピューターの公式Twitter画面（っぽいもの）が再現できましたー！
めちゃくちゃそれっぽい！ 「いま、Windows 98でTwitter開いたらこんな感じ」感がよく出ています。オシャレなカフェにWindows 98持ち込んで、この画面開いてドヤリングしたいわー。
今では使えないタグばかりになりました
完成したソースコードを眺めると、9割がた現在ではやってはいけない書き方をしています。文字の大きさや色を指定する＜FONT＞、文字を太くする＜B＞は代表的な例です。筆者は最新のHTML5には疎いのできちんと把握しきれていませんが、もう、もう、全然アウトな知識になっているはずです。仕事の役には立ちません。
さらに、今はやってはいけない極め付きの技術をお伝えしましょう。「spacer.gif」です。ちょっとここに隙間を入れたいなと思ったとき、背景色と同じ色の画像を作って表示させるのです。なにかと力業で見た目を整えていました。
実際にツイートする機能は作れなかったので、ツイートボタンを押すと「工事中」って出るようにしておきました。満足です。
Copyright © ITmedia, Inc. All Rights Reserved.
新1000円札を300枚両替→よく見たら…… 激レアな“不良品”に驚がく 「初めて見た」「こんなのあるんだ」
「博物館行きでもおかしくない」 ハードオフ店舗に入荷した“33万円商品”に思わず仰天 「これは凄い！！」
家の壁に“ポケモン”を描きはじめて、半年後…… ついに完成した“愛あふれる作品”に「最高」と反響
「マジかーーー！」 新札の番号が「000001」だった…… レア千円を入手した人が幸運すぎると話題 「555555」の人も現る「御利益ありそう」「これは相当幸運」
浅田真央、男性と“デート” 驚きの場所に「気づいた人いるかな？」
身内にも頼れず苦労ばかりの“金髪ギャルカップル”→10年後…… まさかまさかの“現在”に「素敵」「美男美女でみとれた」
海岸で大量に拾った“石ころ”→磨いたら…… 目を疑う大変貌に「すごい発見！」「石って本当にすてき」【カナダ】
トイレットペーパーの芯を毛糸でぐるっと埋めていくと…… 冬に大活躍しそうなアイテムが完成「編んでるのかと思いきや」【海外】
生後1カ月の保護子猫、後頭部を見るとあのアルファベットが……→9カ月の現在にびっくり 「プレミアム猫」「本当にPですね」
辻希美、17歳長女・希空に「ダサすぎるって」とツッコんだ格好
- ザリガニが約3000匹いた池の水を、全部抜いてみたら…… 思わず腰が抜ける興味深い結果に「本当にすごい」「見ていて爽快」
- ズカズカ家に入ってきたぼっちの子猫→妙になれなれしいので、風呂に入れてみると…… 思わず腰を抜かす事態に「たまらんw」「この子は賢い」
- フォークに“毛糸”を巻き付けていくと…… 冬にピッタリなアイテムが完成 「とってもかわいい！」と200万再生【海外】
- 鮮魚スーパーで特価品になっていたイセエビを連れ帰り、水槽に入れたら…… 想定外の結果と2日後の光景に「泣けます」「おもしろすぎ」
- 「申し訳なく思っております」 ミスド「個体差ディグダ」が空前の大ヒットも…… 運営が“謝罪”した理由
- 「タダでもいいレベル」 ハードオフで1100円で売られていた“まさかのジャンク品”→修理すると…… 執念の復活劇に「すごすぎる」
- 母親から届いた「もち」の仕送り方法が秀逸 まさかの梱包アイデアに「この発想は無かった」と称賛 投稿者にその後を聞いた
- ある日、猫一家が「あの〜」とわが家にやって来て…… 人生が大きく変わる衝撃の出会い→心あたたまる急展開に「声出た笑」「こりゃたまんない」
- 友人のため、職人が本気を出すと…… 廃材で作ったとは思えない“見事な完成品”に「本当に美しい」「言葉が出ません」【英】
- セレーナ・ゴメス、婚約発表 左手薬指に大きなダイヤの指輪 恋人との2ショットで「2人ともおめでとう！」「泣いている」
- 「何言ったんだ」 大谷翔平が妻から受けた“まさかの仕打ち”に「世界中で真美子さんだけ」「可愛すぎて草」
- 「絶句」 ユニクロ新作バッグに“色移り”の報告続出…… 運営が謝罪、即販売停止に 「とてもショック」
- 「飼いきれなくなったからタダで持ってきなよ」と言われ飼育放棄された超大型犬を保護→ 1年後の今は…… 飼い主に聞いた
- アレン様、バラエティー番組「相席食堂」制作サイドからのメールに苦言 「偉そうな口調で外して等と連絡してきて、」「二度とオファーしてこないで下さぃませ」
- 「明らかに……」 大谷翔平の妻・真美子さんの“手腕”を米メディアが称賛 「大谷は野球に専念すべき」
- 「やはり……」 MVP受賞の大谷翔平、会見中の“仕草”に心配の声も 「真美子さんの視線」「動かしてない」
- ドクダミを手で抜かず、ハサミで切ると…… 目からウロコの検証結果が435万再生「凄い事が起こった」「逆効果だったとは」
- 「母はパリコレモデルで妹は……」 “日本一のイケメン高校生”グランプリ獲得者の「家族がすごすぎる」と驚がくの声
- 「ごめん母さん。塩20キロ届く」LINEで謝罪 → お母さんからの返信が「最高」「まじで好きw」と話題に
- 「真美子さんさすが」 大谷翔平夫妻がバスケ挑戦→元選手妻の“華麗な腕前”が話題 「尊すぎて鼻血」
提供：株式会社マウスコンピューター
アイティメディア営業企画／制作：ねとらぼ編集部／掲載内容有効期限：2018年6月10日