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

こんにちは！コーダーの平原です。
前回、『ウェブサイトにおけるアニメーションの歴史 〜CPUの時代 HTML〜』についてご紹介しました。
CPU処理でのアニメーションの歴史は、昔懐かしのmarquee要素やblink要素でウェブサイトのコンテンツを動かしていた時代から「Flash」や「jQuery」を使用したアニメーションの時代へと変化していきます。

今回はCPU処理を行うアニメーションの「Flash」や「jQuery」の時代についてご紹介いたします。

1. CPUの時代 Flash
2. CPUの時代 jQuery
3. まとめ

1. CPUの時代 Flash

Flashとは、動画やゲームなどの動的な表現を行う為のアプリケーションです。当時のHTMLやCSSでは実装できなかった構造やデザインを表現することができた為、ウェブコンテンツや広告、メニューボタンやブログパーツなどもFlashで作成しているサイトが多くありました。

Flashは、ActionScriptというプログラミング言語を使って、アニメーションの複雑な処理を実行することができます。又、「.swf」ファイルに変換すればブラウザで直接表示することができる為、ウェブサイトでのアニメーションはFlashで作成されたものが増えて行きます。

Flashは、1996年にフューチャーウェーブ・ソフトウェアというアメリカの会社で「FutureSplash Animator」という作成ソフトと、「FutureSplash Player」という再生プラグインが開発されたのが始まりです。
同年、マクロメディアに会社ごと買収されたことにより、作成ソフトは「Macromedia Flash」、再生プラグインは「Macromedia Flash Player」とされました。
Flashは、2005年頃までこの名前でバージョンアップを重ね、Adobe Systemsに買収された後、作成ソフトは「Adobe Flash」、再生プラグインは「Adobe Flash Player」に変更されます。

2007年、Apple社のスティーブ・ジョブズがFlashの脆弱性を指摘し、iPhoneにFlashの再生プラグインが搭載されなかったことで、スマートフォン市場が拡大すると共に、Flashは衰退していきました。

2. CPUの時代 jQuery

Flashが衰退していく中、ウェブサイトでのアニメーションはjQueryを使用したものが増えていきます。jQueryは、JavaScriptのコードで発生していた、ブラウザ毎の仕様の違いを簡単なコードだけでサポートすることが可能な、JavaScriptライブラリです。

2006年にリリースされ、JavaScriptよりも少ないコードでDOM操作や、アニメーションを実装することができる為、ノンプログラマーの間でも頻繁に使用されるようになりました。
そんなjQueryで使用されていたアニメーションのメソッドで代表的なものをいくつかご紹介します。

animate()

animate()メソッドは、セレクタのpxなどの相対値で指定できるプロパティの変化の過程をアニメーションさせることができます。

いずれのメソッドも、実際にはjQueryから直接DOMに対してCSSを上書きして、視覚的にアニメーションしているように見せています。
現在は、CSS3で同様のアニメーションを実装することが可能な為、使用することは少なくなりましたが、実装方法の一つとして知っておくことも大切ですね。

3. まとめ

私自身、Flashをウェブサイトに使用した経験は無いのですが、Flashゲームをはじめて体験した時、ウェブブラウザでダウンロードすることなく動くアニメーションに驚いたことを覚えています。jQueryのアニメーションも、実装で使用することは少なくなりましたが、ウィンドウのスクロールに対してなどは、まだまだ必要だったりしますね。
次回は、GPU処理であるCSS3のアニメーションについてご紹介したいと思います！