どうもこんにちは！インターン10月生のニシグチです！
現在図書館サイトを作っていますが、ボタンのhover設定など作ってるときが楽しいです。
レイアウトがきれいに組み込めたときとかも楽しいのですが、個人的には動きのある設定を作りこんでいくときがテンション上がります。
そして動きのあるWEB技術といえばJavaScriptとかjQueryなどですね。
個人的にはJavaScriptはまだ弱いので、CSSでちょこちょこ動かしているだけなんですが、そういうアニメーション的な技術についてのルーツを調べてみましたので、今日はそのことについて書いていきます。
以前の主流だった技術
まず古くは、GIFなどでアニメーションを使って、アイコンなどの画像を動かしていました。
GIFなので容量が軽く、photoshopで簡単に作れるのがメリットです。
しかし、256色などの制限があるので、複雑な動きはできませんでした。
余談ですが、twitterのアイコンにGIF使えなくなりましたね…。この前アイコン動かしてみようと思ったのですができませんでした…。
私の印象として、GIFは昔のHTMLのホームページとかにちょっと使われていたり、最近では面白GIFみたいなイメージがあります…。
しかし近年、１シーンだけの動画などでまた使われてきているようです。
そして次に台頭したのがFlashですね。
滑らかで派手な動きのあるWEBページを作るのに適しており、全ページフラッシュで構成されているページなどもありました。
私は面白Flashを良く見ていた世代です。Flashで動くWEBサイトを見た時に｢カッコイイ！｣と衝撃を受けました。
現在でもFlashを使ったサイトはあります。しかし、appleがiPhoneなどでFlashをサポートしなくなってから衰退していきました。
この辺は｢ジョブズ アドビ Flash」なんかで検索してもらうと出てきます。要はスマホには都合が悪かったんですね。
androidは当初Flashをサポートしていましたが、2011年でandroidでもFlashのサポートは終了したようです。
近年主流の技術
そしてスマホなどのタブレット端末が台頭したことにより、html5などが主流になっていきます。
そしてjQueryやJavaScriptが使われるようになり、Flashに代わる存在となりました。
ちなみにJavaScriptはFlashが全盛期を迎える前から使われているサイトはありましたが、今のような使われ方ではなく、ちょっとしたアプリを動かすみたいな使われ方だったと思います。
なのでしばらくは不遇の時代が続いていました。
私はWEBを本格的に勉強する前は、JavaScriptはお絵かき掲示板などで使われてる技術みたいなイメージでした。
そしてですね、HTML5と一緒に出てき始めたのがCSS3を使ったアニメーションです。
CSS3で滑らかなアニメーションが作れるようになったことで、簡単に動きデータ量も少ないものが作れるようになりました。
スマホやWi-Fiなどの無線端末だと、データ量が多いと読み込みが遅くなるので、複雑なコードを書かずにデータ量を軽くできるなどのメリットがあります。
しかしブラウザによって表示が変わるなどのデメリットもあります。
そして現在ではSVGやhtml5のcanvasなどがあります。
というワケでざっとWEBのアニメーション技術を調べてみました。
動きのあるサイト好きなんで、JQueryやJavaScriptなども勉強していきたいと思っています。
それでは今日はこの辺で失礼します。
ニシグチ