NATSUMIこんにちは!コーダーの平原です。HTML〜』についてご紹介しました。CPU処理でのアニメーションの歴史は、昔懐かしのmarquee要素やblink要素でウェブサイトのコンテンツを動かしていた時代から「Flash」や「jQuery」を使用したアニメーションの時代へと変化していきます。今回はCPU処理を行うアニメーションの「Flash」や「jQuery」の時代についてご紹介いたします。FlashFlashとは、動画やゲームなどの動的な表現を行う為のアプリケーションです。当時のHTMLやCSSでは実装できなかった構造やデザインを表現することができた為、ウェブコンテンツや広告、メニューボタンやブログパーツなどもFlashで作成しているサイトが多くありました。Flashは、ActionScriptというプログラミング言語を使って、アニメーションの複雑な処理を実行することができます。「.swf」ファイルに変換すればブラウザで直接表示することができる為、ウェブサイトでのアニメーションはFlashで作成されたものが増えて行きます。Player」という再生プラグインが開発されたのが始まりです。Player」とされました。Player」に変更されます。2007年、Apple社のスティーブ・ジョブズがFlashの脆弱性を指摘し、iPhoneにFlashの再生プラグインが搭載されなかったことで、スマートフォン市場が拡大すると共に、Flashは衰退していきました。jQueryFlashが衰退していく中、ウェブサイトでのアニメーションはjQueryを使用したものが増えていきます。jQueryは、JavaScriptのコードで発生していた、ブラウザ毎の仕様の違いを簡単なコードだけでサポートすることが可能な、JavaScriptライブラリです。2006年にリリースされ、JavaScriptよりも少ないコードでDOM操作や、アニメーションを実装することができる為、ノンプログラマーの間でも頻繁に使用されるようになりました。そんなjQueryで使用されていたアニメーションのメソッドで代表的なものをいくつかご紹介します。animate()animate()メソッドは、セレクタのpxなどの相対値で指定できるプロパティの変化の過程をアニメーションさせることができます。CodePen.slideToggle()slideToggle()メソッドは、要素をスライドして表示・非表示をセレクタの状態によって切り替えるアニメーションさせるjQueryのメソッドです。セレクタが表示状態の場合は、slideDown()メソッドが、非表示状態の場合はslideUp()メソッドが適用されます。CodePen.fadeIn()fadeIn()メソッドは、要素をフェードインで表示させるjQueryメソッドです。表示状態のセレクタを非表示にするにはfadeOut()メソッドを使用します。CodePen.いずれのメソッドも、実際にはjQueryから直接DOMに対してCSSを上書きして、視覚的にアニメーションしているように見せています。現在は、CSS3で同様のアニメーションを実装することが可能な為、使用することは少なくなりましたが、実装方法の一つとして知っておくことも大切ですね。まとめ私自身、Flashをウェブサイトに使用した経験は無いのですが、Flashゲームをはじめて体験した時、ウェブブラウザでダウンロードすることなく動くアニメーションに驚いたことを覚えています。jQueryのアニメーションも、実装で使用することは少なくなりましたが、ウィンドウのスクロールに対してなどは、まだまだ必要だったりしますね。