CSS html javascript インタビュー インターネット

こんなにも進化を遂げたweb技術　～18年前のタグ辞典から今のトレンドを再認識する

こんにちは。アクトゼロの高寺です。

先日、自宅の本棚を整理していたら、なんとも懐かしい本が出てきました。HTMLのタグ辞典です。

20151028_01

出版されたのは平成9年！今から18年前の本になります。

20151028_02平成9年（1997年）、週刊アスキーが創刊されたこの年、私は大学1回生でした。Windows95、下手すれば3.1の環境だった当時、ウェブサイトを作るには今のような便利なソフトウェアはあまりなく、タグと呼ばれる文字列をテキストエディタでひたすら打ち込み、拡張子を.htmで保存しながら作成したものです。

例えばですが、＜B＞アクトゼロ＜/B＞のように、Bというタグで挟むと、アクトゼロのようにボールドになったり、＜ FONT COLOR=”red”＞アクトゼロ＜/FONT＞のようにFONTタグで色を指定すれば、アクトゼロのように文字色を指定できたりします。これらタグを組み合わせてサイトを作っていくのですが、その際に便利なのが、タグの機能が一覧になったタグ辞典です。

学生で時間はたんまりあったあの頃、せっせとタグを打ってサイトを作成し、京都の寺社仏閣の映像や写真などを撮影しては公開していました。ブログなど無く、SNSもまだ一般的でなかったあの頃、思い通りにブラウザに表示された時、一種の感動のようなものを感じたことを覚えています。でも、そういった経験が、私の今の仕事に直結しているのでしょうね。

20151028_03

https://archive.org/web/で当時のURLを検索してみたら、
トップページだけ残っていました。個人的な思い出で恐縮ですが懐かしすぎる…

この懐かしい本を基に、弊社制作部のエンジニアマネージャーのKamijo（参考記事）に当時と現在の技術についてインタビューしてみました。技術に明るい方には当たり前な内容ですが、この辺りを曖昧にしている方も多いのではないでしょうか？今一度、おさらいしてみましょう！

根本的に作り方を変えたCSS

◆しかし、当時はこのタグをメモ帳で打ってサイトを作ってたんだもんなー。
当時のタグの殆どは今でも動くには動くものもあるけれど、今は既に使っていないものがあります。中には現役で使っているものもありますけど。例えば、＜MARQUEE＞なんて絶対使わないですよね。

20151028_04なんとテキストが左から右へと流れていくのだ！背景の色も指定OK！！

◆うわー、懐かしい。一気に90年代のwebの雰囲気だ。笑
この＜TYPE＞なんて俺も初めて見ましたよ。笑
20151028_05

◆＜BLINK＞も使わないだろうねー。
20151028_06＜CENTER＞（文字列や画像を中心にセンタリングさせる）も使いません。テキスト列間に余白を作るタグや、フォントの色指定や書体を指定するなども使いません。

20151028_10本に掲載されているデザイン例がなんとも… 

◆え!?そうなの?当時は普通に使っていた覚えがあるけど。
こうした装飾関連の制御にはCSSを使います。

CSS（Cascading Style Sheets）
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。 例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイル（中略）など、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。
http://www.htmq.com/csskihon/001.shtml

当時のHTMLは構造だけでなく装飾関連も包括されていたのでいちいちタグを書く必要があったのですが、修正が発生した場合にいちいちすべてのタグを直さなければならず手間がかかったのですが、CSSだと一括で修正することができて手間がかからないんです。また、ブラウザも進化してCSSに対応してきたこともこの変化の理由の一つです。

◆なるほど、改めて聞くとCSSというものの機能と便利さが整理できた気がした。
この当時だと、CSS1の時代ですね。この本ではCSS関しては25ページしか書かれていませんが、CSS3となった今では分厚い本1冊分にはなるくらいの細かな種類があります。

「動き」の部分を指定するJavaScript　そしてHTMLの進化

◆JavaScript（以下、JS）についても少し書かれているね。
この当時、いわゆる「ブラウザクラッシャー」と呼ばれる大量のポップアップウインドウを開かせたり、勝手に広告をポップアップさせたりと、ユーザーにとって良くない使われ方がされることが多くなったことから、ユーザー側がブラウザでJSを無効化させることに繋がり、一時期あまり使われなくなりました。ですが、CSSが順調に進化することに連れて、例えばボタンにマウスオーバーするとボタン画像が変わるなどといった「動き」の部分に関する機能はJSを使った方がユーザーに便利な機能を付与できるという流れになってきて、今ではガンガンに使っています。

20151028_07

◆回線が太くなって、リッチなコンテンツが作れるようになったから、求められる表現の幅が広がったんだろうね。
あと、昔はInternetExploler（以下、IE）とNetscapeNavigatorのJSは共通化されていなく、別々に組まなければならないため二度手間だったのですが、ブラウザや技術の進歩により、1種の作成で済むようになったのも普及した理由だと思います。まだ、完全に標準化されている訳ではないですが、次期のECMAScriptでは標準化が更に進むと思います。

◆なるほど。整理すると、HTMLで「構造」・CSSで「装飾関連」・JSで「動き」を指定してウェブサイトは作られると。少し話が戻るけど、HTMLも進化しているよね？
この本の当時だとHTML3.2の時ですね。その後、4・XHTML・HTML5に進化しています。HTML5で一気に変わりました。それまでのものは、今まで言ったように装飾関連の制御の要素も含んでいたのですが、本格的に「構造」にフォーカスしたものになりました。昔はPCだけを意識していれば良かったのですが、今はPCだけでなく様々なデバイス、スマホ・タブレット・ゲーム機などにも対応していかなければなりません。今のスマートTVの番組表などもHTML5で書かれていたりします。

20151028_08

◆しかし、20年で4段階のHTMLの進化って、そう頻繁に変わるものではないんだ？
昔、圧倒的にIEが利用されていた頃は、新しいWindowsのリリース（4-5年程度）のタイミング位しか、新しいIEがリリースされず、それに業界が併せなければならない背景がありました。ですが、現在では様々な競合ブラウザにシェアを奪われ、IEも競合のスピードに併せざるを得なくなっています。そういう意味で、今はブラウザの新技術対応のスピードも早くなっています。

＜参考資料：ブラウザのシェア（上：日本　下：世界）＞
国内ではIEは3割程度は使われているものの、世界では2割を切っています。
（参照：https://webrage.jp/mobile/data/pc_browser_share.html）

◆技術の向上で新しい表現が実現できるのは楽しみだけど、エンジニアさんは大変だね。
昔と比べると、新しい技術は今後、より比較的早く使えるようになっていくと思いますけど、その分、毎回覚えることが多くなってきていて、その度勉強しなければならず正直大変です。でも、今のところは根底から一気に変わるわけではないので、これまでの差分の新しい部分を追加で覚えていけば良いと思っています。

以上、いかがだったでしょうか。18年前と現在のweb技術の比較を通して現在の技術的なトレンドを見直してみました。当時はタグ打ちで大変だったですが、現在ではCMSでまるでWordで文章を打つ感覚でサイトを更新できるようになったのですから便利になったものです…。

関連記事