Upgrade to Pro — share decks privately, control downloads, hide ads and more …

My HTML Dark Past(2017/12/08 社内LT大会)

Yoko TAMADA
December 14, 2017
120

My HTML Dark Past(2017/12/08 社内LT大会)

Yoko TAMADA

December 14, 2017
Tweet

Transcript

  1. ×

    _
    My HTML Dark Past
    Yoko TAMADA @tmd45
    2017/12/08 feedforce Inc. Lightning Talks #2

    View full-size slide

  2. ×

    _
    ようこそ!貴方は 1000 人目の来訪者です♪
    ● ホームページを作るのが好きでした(いまも好きです)

    ● HTML や Markdown の話をしようかと思ったけど 5 分で終わる気がしない

    ● 老害なので古い話しかできない

    ● もしかして: 20 年前(そこまでではない)(震え声)

    ● スライドを作るためにいろいろ漁ってたらつらくなってきた

    ● 生暖かい目で見守ってください(爆死)

    2

    View full-size slide

  3. ×

    _
    キリ番踏み逃げ禁止!!!!!
    ● 見てて具合が悪くなったら無理せずブラウザバック(休憩)してください

    3

    View full-size slide

  4. ×

    _
    はじめてのホームページ
    4
    ● 小学校6年生(1999 年頃)

    ● お昼の校内放送で流れたアニソンがきっかけでできた友達と2人で作った

    ● 我が家のパソコンは Windows 98、インターネットなし

    ● 友達の家にはインターネット(ダイヤルアップ)があった

    ● 友達の家にあったスキャナーで取り込んでもらった手書きイラストを掲載

    ● 友達がおもに作ったホームページ(メモ帳で HTML 手打ち)

    ● データのやりとりはフロッピーディスク


    View full-size slide

  5. ×

    _
    はじめてのホームページ
    5
    ● Yahoo! GeoCities

    ● 無料スペース 4MB(広告表示あり)

    ● 背景画像、動くアイコン、などなど謎のこだ
    わり

    ○ 容量も回線も厳しいのになんてことを 

    ● やたら派手

    ● HTML 4.0、フレーム利用(ハイカラ)


    View full-size slide

  6. ×

    _
    自分だけのホームページ
    7
    ● 中学校1年生。パソコン部に入部

    ● 放課後、学校のパソコンでインターネットし放題

    ● 自分で HTML を書いてホームページを作るようになる

    ● 自宅にはまだインターネットは無い

    ○ HTML はやっぱりフロッピーディスクに保存して学校に持っていった 


    View full-size slide

  7. ×

    _
    自分だけのホームページ
    8
    ● ダーク()な雰囲気が素敵なサイトに通っていた

    ○ 黒背景に #990000 の文字

    ● そのサイトで使われている素材やさんの素材(背景画像やアイコン)を使ってホー
    ムページを作り始める

    ● HTML は他のページのソースコードをコピペして使う

    ○ 見出しタグを文字の大きさ変えるために使ったりしていた 

    ○ フレームの使い方とか、テーブルの使い方とか、何もかも「他のページを見て真似する」がすべて
    だった


    View full-size slide

  8. ×

    _
    事件1 はじめての凸られ
    10
    ● 好きだったサイトにあまりにも似すぎてしまった

    ● そのサイトのファンのひとからメールで「パクってんじゃねーぞ」「お前がやってるの
    は犯罪だ」と至極丁寧なお叱りを受ける

    ○ ソースコードもパーツごととはいえ、実際にコピペしていたわけだし間違いでもない 

    ○ けどお前そのサイトの管理人でもなんでもねーじゃん!(;´Д`) と今なら思う 

    ● ビビってサイト閉鎖

    ○ 当時はこわくてこわくて泣いたりしました 


    View full-size slide

  9. ×

    _
    事件2 はじめてのダイヤルQ2
    11
    ● 中学2年?3年?自宅にもインターネットが開通!(ダイヤルアップ)

    ● 部活でチャットが流行っていた延長で、ちょっとアレなチャットも含まれているポータ
    ルサイトに迷い込む

    ○ Yahoo! 検索より excite 検索を愛用してたのも敗因な気がする 

    ● なんかダイアログでたけどよくわからんポチーーーーっ(

    ● うわなんかエロいの出たキモイ(お年頃)

    ● 後日、高額のインターネット料金請求が来て親に怒られる

    ○ でも親もよくわかってないので「あかんで」って感じで終わった 

    ○ 実際いくらだったか覚えてないけど、3分300円とかだったらしいネ 


    View full-size slide

  10. ×

    _
    デザイン?にこだわりだす
    12
    ● 中学~高専時代。オタク女子(やんわり)真っ盛り

    ● やたらフォントサイズが小さい(9px, 10px)

    ● 背景画像の右下固定表示(高度な技術)

    ● テーブルを使った凝った枠表示(高度な(ry

    ● エントランスページから ENTER リンクを踏むと JavaScript で別窓が開く

    ● iframe を使ったコンテンツ表示

    ● 番外編:いかに広告を(規約違反にならない程度に)見せないようにするか


    View full-size slide

  11. ×

    _
    CGI(チャット、掲示板、などなど)
    15
    ● レンタル CGI ではなく、自分で設定・カスタマイズしたくなった

    ○ カスタマイズといっても見た目だけ 

    ○ 凝った例でいうと発言者のアイコン表示のカスタマイズとかやってた 

    ○ これも設置例などを見てコピペとか勘とかでやっていた 

    ● CGI 設置可能 ホームページレンタルスペースの存在

    ● お絵かき掲示板まで設置したこともあった

    ○ しぃチャットとかご存知ですk…まだ現存しているだと…?! 

    ○ http://hp.vector.co.jp/authors/VA016309/ 

    ● プログラミングだと思って触ってこなかったのが残念…


    View full-size slide

  12. ×

    _
    16
    ※画像は http://www.kent-web.com/ より

    View full-size slide

  13. ×

    _
    17
    ※画像は http://www.kent-web.com/ より

    View full-size slide

  14. ×

    _
    ~現在
    18
    ● HTML 4.01 の仕様理解(概ね)

    ● CSS の理解(ry

    ● JavaScript の理解(

    ● PHP によるサイト制作(趣味)(もうやってません)

    ● WordPress

    ● CSS Framework

    ● Rails


    View full-size slide

  15. ×

    _
    趣味で書く
    HTMLは
    たのしい
    21

    ──────
    ⓣⓜⓓ

    View full-size slide