my html dark past(2017/12/08 社内lt大会)
TRANSCRIPT
![Page 1: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/1.jpg)
×❏_
My HTML Dark PastYoko TAMADA @tmd452017/12/08 feedforce Inc. Lightning Talks #2
![Page 2: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/2.jpg)
×❏_
ようこそ!貴方は 1000 人目の来訪者です♪
● ホームページを作るのが好きでした(いまも好きです)
● HTML や Markdown の話をしようかと思ったけど 5 分で終わる気がしない
● 老害なので古い話しかできない
● もしかして: 20 年前(そこまでではない)(震え声)
● スライドを作るためにいろいろ漁ってたらつらくなってきた
● 生暖かい目で見守ってください(爆死)
2
![Page 3: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/3.jpg)
×❏_
キリ番踏み逃げ禁止!!!!!
● 見てて具合が悪くなったら無理せずブラウザバック(休憩)してください
3
![Page 4: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/4.jpg)
×❏_
はじめてのホームページ
4
● 小学校6年生(1999 年頃)
● お昼の校内放送で流れたアニソンがきっかけでできた友達と2人で作った
● 我が家のパソコンは Windows 98、インターネットなし
● 友達の家にはインターネット(ダイヤルアップ)があった
● 友達の家にあったスキャナーで取り込んでもらった手書きイラストを掲載
● 友達がおもに作ったホームページ(メモ帳で HTML 手打ち)
● データのやりとりはフロッピーディスク
![Page 5: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/5.jpg)
×❏_
はじめてのホームページ
5
● Yahoo! GeoCities
● 無料スペース 4MB(広告表示あり)
● 背景画像、動くアイコン、などなど謎のこだ
わり
○ 容量も回線も厳しいのになんてことを
● やたら派手
● HTML 4.0、フレーム利用(ハイカラ)
![Page 6: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/6.jpg)
×❏_
6
![Page 7: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/7.jpg)
×❏_
自分だけのホームページ
7
● 中学校1年生。パソコン部に入部
● 放課後、学校のパソコンでインターネットし放題
● 自分で HTML を書いてホームページを作るようになる
● 自宅にはまだインターネットは無い
○ HTML はやっぱりフロッピーディスクに保存して学校に持っていった
![Page 8: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/8.jpg)
×❏_
自分だけのホームページ
8
● ダーク()な雰囲気が素敵なサイトに通っていた
○ 黒背景に #990000 の文字
● そのサイトで使われている素材やさんの素材(背景画像やアイコン)を使ってホー
ムページを作り始める
● HTML は他のページのソースコードをコピペして使う
○ 見出しタグを文字の大きさ変えるために使ったりしていた
○ フレームの使い方とか、テーブルの使い方とか、何もかも「他のページを見て真似する」がすべて
だった
![Page 9: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/9.jpg)
×❏_
9
![Page 10: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/10.jpg)
×❏_
事件1 はじめての凸られ
10
● 好きだったサイトにあまりにも似すぎてしまった
● そのサイトのファンのひとからメールで「パクってんじゃねーぞ」「お前がやってるの
は犯罪だ」と至極丁寧なお叱りを受ける
○ ソースコードもパーツごととはいえ、実際にコピペしていたわけだし間違いでもない
○ けどお前そのサイトの管理人でもなんでもねーじゃん!(;´Д`) と今なら思う
● ビビってサイト閉鎖
○ 当時はこわくてこわくて泣いたりしました
![Page 11: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/11.jpg)
×❏_
事件2 はじめてのダイヤルQ2
11
● 中学2年?3年?自宅にもインターネットが開通!(ダイヤルアップ)
● 部活でチャットが流行っていた延長で、ちょっとアレなチャットも含まれているポータ
ルサイトに迷い込む
○ Yahoo! 検索より excite 検索を愛用してたのも敗因な気がする
● なんかダイアログでたけどよくわからんポチーーーーっ(
● うわなんかエロいの出たキモイ(お年頃)
● 後日、高額のインターネット料金請求が来て親に怒られる
○ でも親もよくわかってないので「あかんで」って感じで終わった
○ 実際いくらだったか覚えてないけど、3分300円とかだったらしいネ
![Page 12: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/12.jpg)
×❏_
デザイン?にこだわりだす
12
● 中学~高専時代。オタク女子(やんわり)真っ盛り
● やたらフォントサイズが小さい(9px, 10px)
● 背景画像の右下固定表示(高度な技術)
● テーブルを使った凝った枠表示(高度な(ry
● エントランスページから ENTER リンクを踏むと JavaScript で別窓が開く
● iframe を使ったコンテンツ表示
● 番外編:いかに広告を(規約違反にならない程度に)見せないようにするか
![Page 13: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/13.jpg)
×❏_
13
![Page 14: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/14.jpg)
×❏_
14
![Page 15: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/15.jpg)
×❏_
CGI(チャット、掲示板、などなど)
15
● レンタル CGI ではなく、自分で設定・カスタマイズしたくなった
○ カスタマイズといっても見た目だけ
○ 凝った例でいうと発言者のアイコン表示のカスタマイズとかやってた
○ これも設置例などを見てコピペとか勘とかでやっていた
● CGI 設置可能 ホームページレンタルスペースの存在
● お絵かき掲示板まで設置したこともあった
○ しぃチャットとかご存知ですk…まだ現存しているだと…?!
○ http://hp.vector.co.jp/authors/VA016309/
● プログラミングだと思って触ってこなかったのが残念…
![Page 16: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/16.jpg)
×❏_
16※画像は http://www.kent-web.com/ より
![Page 17: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/17.jpg)
×❏_
17※画像は http://www.kent-web.com/ より
![Page 18: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/18.jpg)
×❏_
~現在
18
● HTML 4.01 の仕様理解(概ね)
● CSS の理解(ry
● JavaScript の理解(
● PHP によるサイト制作(趣味)(もうやってません)
● WordPress
● CSS Framework
● Rails
![Page 19: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/19.jpg)
×❏_
19
![Page 20: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/20.jpg)
×❏_
20
![Page 21: My HTML Dark Past(2017/12/08 社内LT大会)](https://reader033.vdocuments.net/reader033/viewer/2022051710/5a6ed75a7f8b9a7a488b50c3/html5/thumbnails/21.jpg)
×❏_
趣味で書くHTMLはたのしい
21
終──────ⓣⓜⓓ