CPU、GPUを知る！『ウェブサイトにおけるアニメーションの歴史 〜CPUの時代 HTML〜』

こんにちは！コーダーの平原です。
10年前と比べて、現代のウェブサイトではアニメーションが沢山使われていますね。
今は当たり前のように、美しく滑らかな動きのアニメーションが実装されていますが、実は現在のやり方になるまで、アニメーションの実装方法はとても変化していました。

そこで今回、そんなウェブサイトにおけるアニメーションの歴史を、CPUとGPUの時代に分けてご紹介いたします。まずはじめに、CPU及びGPUとは何なのかを理解し、本記事では「CPUの時代 HTML」について学んでいきましょう。

1. CPUとは
2. GPUとは
3. CPUとGPUの違い
4. ウェブサイトにおけるアニメーションの歴史 〜CPUの時代 HTML〜
5. まとめ

1. CPUとは

CPU(Central Processing Unit)とは、コンピュータの制御や計算処理などを行う、中央処理装置(プロセッサ)です。
CPUは、1つの複雑な処理を丁寧に行うことができ、汎用的な処理をすることに向いています。内部に実装されているコア数は、多ければ多いほど一度にできる処理の数が増えます。
CPUのコア数は、GPUに比べて圧倒的に少ない為、一度に大量の処理を行うことには向いていません。

2. GPUとは

GPU(Graphics Processing Unit)とは、1999年に半導体のメーカーであるNVIDIAによって開発された、画像処理装置(プロセッサ)です。
GPUには、並列作業を効率よく処理する為の、何千もの数のコアが搭載されており、3Dグラフィックスや映像など、定型的かつ膨大な処理を行うことに向いています。

3. CPUとGPUの違い

CPUもGPUも、コンピュータに必要な計算処理を行なっているという点では共通していますが、構造やタスクの処理方法が大きく異なります。
先ほども述べたように、CPUが、1つの複雑な処理を丁寧に行うことができるのに対し、GPUは定型的かつ膨大な処理を行うことに向いています。
CPUで処理するには負担が大きすぎる、膨大な量の画像処理を行ってくれるのがGPUです。

4. ウェブサイトにおけるアニメーションの歴史 〜CPUの時代 HTML〜

ウェブサイトの装飾は、元々HTMLで出来るものに限られていましたが、1994年にCSSが提唱され、1996年にはW3CがCSS1を勧告し、CSSでの装飾が主流になっていきます。
Flashもこの頃開発され、ウェブサイトをアニメーションしたいという要望が高まっていた時期でした。
HTMLにも、単純なアニメーションを実装することが出来る要素が存在し、特定の要素を簡単に目立たせる為に、以下のようなものが使用されていました。

marquee要素

marquee要素では、テキストや画像を、指定した表示域内でスクロールさせることができます。これは、1995年頃に公開されたIE2(Internet Explorer2.0)の時に、IE2に独自に採用された機能です。
尚、現在はこの機能は廃止されています。現在いくつかのブラウザでは動作しますが、いつ削除されてもおかしくない為、使用することは推奨されていません。

ブラウザの対応については下記サイトのページ下部でご確認いただけます。
marquee: マーキー要素 (廃止) – HTML: HyperText Markup Language | MDN

今回は、そんなmarquee要素の仕様をご紹介する為、実装してみたものが以下になります。

5. まとめ

CPU及びGPUは、ウェブサイトにおいて必要不可欠なものであり、それぞれの特性を活かして効率的に役割分担がなされているということが分かりました。1990年代は、その時代を知っている方はご存知の通り、現代のウェブサイトのアニメーションのような滑らかで自由な動きのものではなく、現在は廃止されてしまったHTML要素などが使用されていました。次回は、ウェブサイトにおけるアニメーションの歴史のFrash、JQueryの時代について学んでいきましょう！

参考サイト :

• GPUコンピューティングとは何か? | 高性能コンピューティング | NVIDIA | NVIDIA