NATSUMIこんにちは!コーダーの平原です。10年前と比べて、現代のウェブサイトではアニメーションが沢山使われていますね。今は当たり前のように、美しく滑らかな動きのアニメーションが実装されていますが、実は現在のやり方になるまで、アニメーションの実装方法はとても変化していました。そこで今回、そんなウェブサイトにおけるアニメーションの歴史を、CPUとGPUの時代に分けてご紹介いたします。HTML」について学んでいきましょう。Unit)とは、コンピュータの制御や計算処理などを行う、中央処理装置(プロセッサ)です。CPUは、1つの複雑な処理を丁寧に行うことができ、汎用的な処理をすることに向いています。内部に実装されているコア数は、多ければ多いほど一度にできる処理の数が増えます。CPUのコア数は、GPUに比べて圧倒的に少ない為、一度に大量の処理を行うことには向いていません。Unit)とは、1999年に半導体のメーカーであるNVIDIAによって開発された、画像処理装置(プロセッサ)です。GPUには、並列作業を効率よく処理する為の、何千もの数のコアが搭載されており、3Dグラフィックスや映像など、定型的かつ膨大な処理を行うことに向いています。CPUとGPUの違いCPUもGPUも、コンピュータに必要な計算処理を行なっているという点では共通していますが、構造やタスクの処理方法が大きく異なります。先ほども述べたように、CPUが、1つの複雑な処理を丁寧に行うことができるのに対し、GPUは定型的かつ膨大な処理を行うことに向いています。CPUで処理するには負担が大きすぎる、膨大な量の画像処理を行ってくれるのがGPUです。HTML〜ウェブサイトの装飾は、元々HTMLで出来るものに限られていましたが、1994年にCSSが提唱され、1996年にはW3CがCSS1を勧告し、CSSでの装飾が主流になっていきます。Flashもこの頃開発され、ウェブサイトをアニメーションしたいという要望が高まっていた時期でした。HTMLにも、単純なアニメーションを実装することが出来る要素が存在し、特定の要素を簡単に目立たせる為に、以下のようなものが使用されていました。marquee要素marquee要素では、テキストや画像を、指定した表示域内でスクロールさせることができます。Explorer2.0)の時に、IE2に独自に採用された機能です。現在はこの機能は廃止されています。現在いくつかのブラウザでは動作しますが、いつ削除されてもおかしくない為、使用することは推奨されていません。ブラウザの対応については下記サイトのページ下部でご確認いただけます。MDN今回は、そんなmarquee要素の仕様をご紹介する為、実装してみたものが以下になります。CodePen.blink要素blink要素では、テキストを点滅させて表示することができます。Navigator2.0の時に、独自に採用された機能です。現在はこの機能は廃止されています。CSS仕様書では、ブラウザがblink要素を無視することを許可しており、全てのブラウザで削除されています。その為、blink要素のみでの仕様確認はできませんが、CSSを代用する形でテキストの点滅を再現したものが以下になります。まとめCPU及びGPUは、ウェブサイトにおいて必要不可欠なものであり、それぞれの特性を活かして効率的に役割分担がなされているということが分かりました。1990年代は、その時代を知っている方はご存知の通り、現代のウェブサイトのアニメーションのような滑らかで自由な動きのものではなく、現在は廃止されてしまったHTML要素などが使用されていました。