My HTML Dark Past（2017/12/08 社内LT大会）

Transcript

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

   View Slide

2. ×
   ❏
   _
   ようこそ！貴方は 1000 人目の来訪者です♪
   ● ホームページを作るのが好きでした（いまも好きです）

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

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

   ● もしかして： 20 年前（そこまでではない）（震え声）

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

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

   2
   

   View Slide

3. ×
   ❏
   _
   キリ番踏み逃げ禁止！！！！！
   ● 見てて具合が悪くなったら無理せずブラウザバック（休憩）してください

   3
   

   View Slide

4. ×
   ❏
   _
   はじめてのホームページ
   4
   ● 小学校６年生（1999 年頃）

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

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

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

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

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

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

   

   View Slide

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

   ● 無料スペース 4MB（広告表示あり）

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

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

   ● やたら派手

   ● HTML 4.0、フレーム利用（ハイカラ）

   

   View Slide

6. ×
   ❏
   _
   6
   

   View Slide

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

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

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

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

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

   

   View Slide

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

   ○ 黒背景に #990000 の文字

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

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

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

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

   

   View Slide

9. ×
   ❏
   _
   9
   

   View Slide

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

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

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

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

    ● ビビってサイト閉鎖

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

    

    View Slide

11. ×
    ❏
    _
    事件2 はじめてのダイヤルQ2
    11
    ● 中学２年？３年？自宅にもインターネットが開通！（ダイヤルアップ）

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

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

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

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

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

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

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

    

    View Slide

12. ×
    ❏
    _
    デザイン？にこだわりだす
    12
    ● 中学～高専時代。オタク女子（やんわり）真っ盛り

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

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

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

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

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

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

    

    View Slide

13. ×
    ❏
    _
    13
    

    View Slide

14. ×
    ❏
    _
    14
    

    View Slide

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

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

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

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

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

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

    ○ しぃチャットとかご存知ですｋ…まだ現存しているだと…？！ 

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

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

    

    View Slide

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

    View Slide

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

    View Slide

18. ×
    ❏
    _
    ～現在
    18
    ● HTML 4.01 の仕様理解（概ね）

    ● CSS の理解（ry

    ● JavaScript の理解（

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

    ● WordPress

    ● CSS Framework

    ● Rails

    

    View Slide

19. ×
    ❏
    _
    19
    

    View Slide

20. ×
    ❏
    _
    20
    

    View Slide

21. ×
    ❏
    _
    趣味で書く
    HTMLは
    たのしい
    21
    終
    ──────
    ⓣⓜⓓ
    

    View Slide