年末だしwebサイトで使われるアニメーション技術の移り変わりを追ってみた

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは！
普段はフロントエンジニア兼webデザイナーとして日々精進している山田、いえ
GORILLA-Yこと、ただのゴリラです。
ウホッホッ！ホキキー！

というわけで今回のネタはこちら！

年末だから人生ふり返ろうのついでにweb制作でよく使われるアニメーション技術の歴史を振り返ってみよう

ドンッ！！！！

「なんだ昔話か」というツッコミはさておき、
シャレオツ(お洒落)＆インタラクティブなwebサイトでよく使われるアニメーション、
それらはどんな技術変遷を経て使われてきたのでしょうか。

今回はそんなwebサイトで使われるアニメーションの技術の移り変わりについて追いかけていきましょう！
なつかしいあれこれが登場しますよ！

1990年代　-web黎明期-

自分もこの時代は業界にいなかったのですが、色んなまとめを見てみると、ある意味この時代が一番面白かったかもしれません(笑)
まとめサイトを眺めているとこの時代のwebサイトで使われるアニメーションは「アニメーションgifを使ってパラパラ漫画を作り、チカチカさせる」「ナマのJavaScriptでチカチカさせる」など割と遊びやアクセントとして使われることが多かったように思います
掲示板が流行って「キリ番」踏んだ方にどうのこうのなんてのが流行っていたのもこの頃です。
個人的には「アナタは※※※※人目の訪問者です」のテキスト部分をチカチカさせているサイトが多かった気がします(笑）

今も語り継がれる伝説のサイト。あまりのファンの多さから長らく愛されてきましたが、
2013年に惜しまれながら閉鎖となりました。
お写真はinternet archiveより。

2000年代初頭　- Macromedia Flashの普及 -

この時期になるとマクロメディア社が開発した「Macromedia Flash」(以下：Flash)がwebサイトで使われるようになります。
ウィキペディア先生によると日本で普及し始めたのはFlashのバージョンが4の頃。
本格アニメーションが比較的簡単に実装できることや、制作費を抑えてインタラクティブな実装を可能にしたFlashは数々の企業サイトが採用していきました。
他にも個人制作Flashの投稿コミュニティやブラウザーゲームの流行。某巨大掲示板の人気拡充もあり、頻繁にweb上で見かけるようになります。
また、Flashはバージョンアップを繰り返す度に、搭載されているスクリプト言語「Action Script」の高度化が行われ、よりハイクオリティなアニメーションが比較的簡単に実装できるようになっていき、利用する製作者やファンが増えていった背景も大きいと思われます。
その後マクロメディア社はAdobe社に買収。Adobe Flashへと名前を変え、webサイトでアニメーションを実装する際のスタンダードとして、広く使われていきます。
※2016年現在は「Adobe Animate CC」へと名前が変わっています。

Adobe Animate CC

2006年　- jQueryと名付けられたJavaScriptライブラリの登場-

そんなFlashが隆盛を極める中、web上に突如彗星のように奴が現れます。
そう、現在もJavaScriptを覚えるなら必ずセットで覚える（っていうか先に触る人のほうが多そうな）であろう、泣く子も納得して泣き止んでしまうjQuery先生が登場します。
簡単な記述でアニメーションを実装できるjQuery先生は瞬く間にwebを席巻。
「webサイトにアニメーションをつける」際、技術候補として今も真っ先にあげられるほどに、人気を博していきます。
※他にもprototype.jsなどのライブラリも人気でした。
この時期のwebサイトでアニメーションを取り入れる場合、Flashで実装するか、jQueryやprototype.jsなどのJavaScriptライブラリを使って実装するかという二極化で進んでいったように思います。
広告出稿を行っているポータルサイトなどもFlash動画をリッチ広告として扱ってましたし。
なお、余談ですが小生はこの時期にweb業界に飛び込んできました(笑)

https://jquery.com/

2008年　-iPhone/スマートフォンの登場とFlashの衰退-

それまでガラケーとPCしかなかったwebの世界に新たな端末iPhoneが登場、スマートフォン分野が開花します。
各社一斉にこの新市場に乗り込み、様々なスマートフォン端末がリリースされていき、スマートフォンは企業はもとより、各家庭にまで瞬く間に普及していきました。
そして普及していく過程でweb制作のスタンスは大きく変わっていきます。
webサイトのアニメーションを考えるとここが大きな分岐点になったと言っても過言ではないでしょう。
なぜならiPhoneが普及していくにつれて、Flashが衰退していったためです。ではなぜFlashは衰退したのでしょう？
そもそもリリース当初からiPhoneはFlashの仕様や形式に対応していませんでした。当然多くの企業がFlashをサイトの一部、場合によっては全体に使っていたので「対応してほしい」というリクエストがAppleに寄せられたりadobe側からも対応するよう要請がありました。
しかし、2010年、当時AppleのCEOだった故スティーブジョブス氏が今も語り草になっている「Thoughts on Flash」という声明を発表、iPhone/ipadではFlashの対応は行わないと明言したのです。
当然スマートフォンの分野で抜きん出たシェア率を誇っていたiPhoneですから、各企業も対応を考えていきます。
そうしてiPhone向けにwebサイトを対応させていく過程でFlashが使われることが少なくなり、どんどんと衰退していったのです。

appleの公式に乗せられた原文
日本語訳もさまざまなメディアで残っています。
http://www.apple.com/hotnews/thoughts-on-flash/

2011年 -cssの進化。3Dグラフィックスを表現するwebGLの登場-

Flashが衰退していき、webサイトにアニメーションを実装するときは「jQuery」を使っていこうというのがスタンダードな流れとして落ち着いた頃、cssがLevel3へと進化を遂げます(CSS3)。
transitionsモジュールやAnimationsモジュールが登場(css3として勧告されたように思いがちですが、正式には独立したモジュールとして勧告されたようです。また現在も試用段階を脱していません)。
chromeやfirefoxなどモダンブラウザが次々に対応していった背景から徐々に実装されているサイトが増えていきました。
cssで動作するアニメーションは軽快で、ブラウザ要件が決まっているサイトであれば手軽に実装できるのが魅力です。
またアニメーションというよりもっと新しい概念にはなるのですが、この頃から2006年MozillaがCanvas 3Dの実験を始めたことがきっかけで作られたwebGLも普及していきます。
webGLは3Dグラフィックをwebサイトで表現する技術で現在も注目されている技術です。
具体的にはhtml5に搭載されたAPIを使ってcanvasに描いていきます。
webGLはちょうどこの2011年に深刻なセキュリティホールが見つかったため、ちょっと据え置き感がでましたが、圧倒的な3Dグラフィックスで魅せる技術はやはり魅力的ですね。
なお、そのセキュリティに関する問題は現在解消済みのようです。

webGLで作成されたサイト
http://helloracer.com/webgl/

2016年　-現在-

では現在はというと、先述の技術であるcssのモジュールやcssライブラリ、jQueryなどのJavaScriptライブラリを主としながらも、先述のwebGLだったりといった新しい技術を使って実装されるパターンもどんどんと出てきている状況です。
前回の記事でも紹介したProcessingですが、実はweb上で動かすために作られたJavaScriptのライブラリがあります。
こちらはメディアアートなどの表現として使われることが多いです。

processing.js
http://processingjs.org/download/