CodeIQ MAGAZINECodeIQ MAGAZINE

Webで簡単・効率的にアニメーションを実現できる最新フレームワーク・CSS3アニメーションを紹介

2017.05.25 Category:勉強会・イベント Tag: , , ,

  • 8
  • このエントリーをはてなブックマークに追加

HTML5ではアニメーションの描画はできるものの、関数を駆使するなど非常に手間がかかる。そこで4月21日に開催されたhtml5j Webプラットフォーム部の勉強会では、効率的にアニメーションを実現できるフレームワークを紹介した。 by 馬場美由紀 (CodeIQ中の人)

MozillaでWebアニメーションの機能の開発者が登壇

Webでアニメーションというと、数年前まではFlashコンテンツが当たり前に使われていた。

しかしスマートフォンの普及と共に、Webから駆逐され、今はHTML5でアニメーションを表すには、setInterval関数やrequestAnimationFrame関数を使い、DOMやCanvasを繰り返し再描画するという手間のかかる作業が求められる。

そんな苦労をせずにもっと効率的にWebでアニメーションを実現する方法として、最近注目を集めているのがアニメーションフレームワークである。

最新のアニメーションフレームワークとCSS3アニメーションの実情について、海外からのゲストも含め3人の登壇者が紹介した。

最初に登壇したのはMozillaでWebアニメーションの機能を開発しているBrian Birtles(ブライアン・バートルズ)氏と赤塚大典氏。

セッションタイトルは「Browser animation in 2017 – 動く・動かせ・動け!」。まずはブライアン氏がWebアニメーションの現状について紹介した。

Webアニメーションでは今、更新ボタンを押すと、リストが変わったり、ページのナビゲーションをするなどインターフェース部分のアニメーションとして使われることが多い。

そのようなアニメーションは、CSS TransitionsやCSS Animationsを使えば、簡単なアニメーションがすぐできる。この2つをどう使い分けるのか。

Transitionsは簡単なA→Bの切り替えができる。一方CSS Animationは、A→B→CやA→B→A、繰り返しの動作ができる。

これらの技術はFirefox、Chrome、Edgeなどすべてのモダンブラウザに実装されている。

次にJavaScriptのアニメーションについて。Script animationsであれば、いろいろなことができる。

しかし欠点がある。ブラウザのアニメーションはブラウザが自動的に最適化する。つまりブラウザの処理が忙しくなると、JavaScriptのアニメーションは動きが止まってしまったりするのだ。

それでもJavaScriptを使いたい人は、新しくできたWeb Animation APIを使ってみてほしい。これを使うと、ブラウザが忙しくても、遅れることなくアニメーションを動かすことができる。

しかもJavaScriptのライブラリ同様に書ける。足りない機能は次のGitHubをチェックしてみよう。

Webアニメーションを調査するインスペクターツールを紹介

ここで赤塚氏にバトンタッチ。赤塚氏はCSSアニメーションで動いているハートのアニメーションを見せ、そのアニメーションがどう動いているか、調査するツールを紹介した。

使ったのは、Firefox Developer Tools。Webページがどのように構成されているか、あるいはエレメンツについているCSSがどんな値になっているかを調査できる。

Page Inspectorや、エラーやワーニングをみるWebコンソール、Webページの表示に時間がかかっている場合に調べるパフォーマンスツールなどが用意されている。

ここでは、今開発しているアニメーションインスペクターを紹介。それを使えばどんな調査ができるかデモで見せた。

同ツールを使うと、どんなアニメーションで構成されているかが容易にわかる。デモで見せてくれたアニメーションはハートを大きくするtransformとcolorによって文字色を変化させるアニメーションの2種類で構成されていた。

またドキュメントタイムラインをチェックすれば、アニメーション中のどこのプログレスを指しているかも把握できる。イテレーションの動き、タイミングファンクションの確認も容易にできる。

アニメーションがどういう風に動いているかがわかることで、どういう風に作ればいいかという勘所がつかめるようになる。

現在は調査ツールとしてのみの活用だが、近い将来はアニメーションが編集できるツールにしていく予定。タイミングファンクションも開発ツール上の変数で表したり、キーフレームの値をそのまま編集できるようにするなどして、調査も編集もできるようにしていく。

現在、DevToolsはReact化、およびmozilla-centralからGitHubへの移行が進められている。アニメーションインスペクターも同様で、React化とGitHubへの移行を進め、プルリクエストベースで更新していけるようにする。

なお、JavaScriptデバッガーはすでにReact化が進んでおり、GitHub上での運用が始まっている。

さらに未来は、インスペクターに編集機能と+αの機能を付加してオーサリングツールにしていく。

またもう一つの側面として、開発者ではなくてアニメーション作れるクリエイターの視点を入れたアニメーションツールとしても活用できるようにしていく。

その一つの案が、Unexpected Avars。例えば標準的なアニメーションの時間軸を変更したり、リレーションを変えたりしていろんなアニメーションを見せることで、クリエイターが実現したいアニメーションをピックアップ。

それをさらにUnexpectedし、さらにその中から選んでいくことで、自分の好みのアニメーションを作っていけるというものだ。

これらのツールは少人数で開発している。ぜひ、興味のある人は参加してほしい。

Webアニメーションの課題とそれを解決する技術の開発状況

ここで再度ブライアン氏が登場。5つの問題点を挙げ、これからの技術について説明した。

問題①フレームアニメーションを作るときの問題

11枚のフレームを用いて、アニメーションを作りたいが、バックグラウンドポジションだけを書いて、ステップタイミングを使えばできるが10枚の表示しかされないという問題がある。

なぜかというと、タイミングファンクションだと、endを選んだ場合は11が、startを選んだ場合は0が出ないからだ。そこでframes(n)という関数を入れる。

Firefoxでは2月にそれを実装した。Firefox55に実装されている。Chromeも実装されている。

問題②Transitionの終わりを待つという問題

transitionendが発火されないケースは以下の通り。

・要素が消えた
・要素の親がdisplay:noneになった
・transition-propertyからtransitionされているpropertyが消えた
・transitionがそもそも生成されなかった(例:opacityが既に0になった場合)

こういう永遠までtransitionendイベントを待つバグがFirefox OSのアプリで多かった。そこで昨年、transitioncancelを含めて、新しいtransitionイベントを定義して、それを実装した。

transitionキャンセルなどができるようにしている。これからこのような仕様がchromeにも実装されていく予定。

Element.getAnimations()

というAPIを使うとよりキレイなやりかたができる。Firefoxには実装されているが、公開になるのは来年。

問題③アニメーションがぶつかる場合、同時に使えないという問題

回転のアニメーションと拡大のアニメーションは同時に使えない。Webアニメーションではcompositeを使うと、両方使えるようになる。

animation-compositionはFirefoxでもChromeでも実装視されている、リリースはされていない。CSS Animationでも使えるようになる。

問題④スクロールに沿ってアニメーションしたいという問題

スクロールするとアニメーションが変わるという表現は、JavaScriptだとできる。だがスクロールとアニメーションそれぞれには別のプロセスがあるので、それに任せたいという思いがプログラマにはある。

そこで、そういうことができるような仕様を今作っている。それができるとネイティブの実装でできるようになる。

問題⑤別のスレッドでアニメーションしたいという問題

これを実現するAPIも今作ろうとしている。来年ぐらいには実装できるかもしれない。

現在のWebアニメーションに関する技術開発の状況を紹介して、ブライアン氏と赤塚氏のセッションは終了。

CSS Working Groupレイチェル・アンドリュー氏が「CSS Grid」を紹介

続いてCSS Working Group Invited ExpertやGoogle Developer Expert for Web Technologiesを務めており、Perchの創立者でもあるRachel Andrew(レイチェル・アンドリュー)氏が登壇。

セッションタイトルは「Animation & CSS Grid」。グリッドレイアウトをする際の定義を紹介した。

まずは、display: grid; または display: inline-grid;
で親要素を指定する。そこで指定された親要素をグリッドコンテナ、グリッドレイアウトされる子要素をグリッドアイテムと呼ぶ。

グリッドコンテナは次のプロパティで列と行のサイズを指定できる。

grid-template-columns

grid-template-rows

これによって、行と列が定義できる(高さ、横幅はそれぞれスペース区切りで指定する)さらに行や列の間の余白は次のプロパティで指定する。

grid-column-gap

grid-row-gap

grid-gap

fr unitdisplay: grid;で指定されたスペースの一部を割り振るときの単位。またこの分割ユニットは、他の長さの分割ユニットと混在して使うことができる。

auto-fillキーワードとgridを使うと、複数のトラックをグリッドにフィットするように配置できる。

また柔軟なグリッドを作りたい場合は、minimax()ファンクションを使う。Grid TrackGrid CellGrid Areaなどの解説と共に、その他のCSS Gridの定義の仕方、Gridの配置のアルゴリズムなどについて紹介した。

このようにCSS Gridを使うとFlexboxよりもより柔軟なレイアウトが可能になる。CSS Gridはすべてのモダンブラウザに実装されているので、使用可能だ。

さらに詳しいコードについて知りたい人は、こちらのサイトでビデオチュートリアルを参照してほしい。

「BizSparkとMicrosoft Imagine」プログラムを紹介

休憩中に登壇したのは、日本マイクロソフトの物江修氏。「BizSparkとMicrosoft Imagine」について紹介した。

BizSpark」はこれから起業する人、起業して5年未満で非上場の人が5年間、マイクロソフトの開発ツールとクラウド環境を3年間無償で使えるというサービスである。

BizSpark参加要件は、事業の核をなすソフトウェアベースの製品、もしくはオンラインサービスの開発に積極的に推進していること。年間売り上げが1億2000万円未満。

次に紹介するのは「Microsoft Imagine」。これは学生と教育機関向けのプログラム。Microsoft Imagineのサブスクリプションとは、学生の時にダウンロードしておくと就職してからもそのまま使えるというお得なプログラムだ。

参加要件は、大学。専門学校、高校の学生であること。学生認証のために以下のいずれかが必要となる。

・シボレスの学校用ログイン情報
・国際学生証(ISIC)
・Microsoft Imagine認証コード
・在籍証明ドキュメントのアップロード

手軽にアニメーションを実装できるプレイグランドサイト「Animista」

引き続いて登壇したのは、X氏。実は今回、諸事情があり、名前が明かせないとのこと。「Animistaでお手軽アニメーション実装」。

アニメーションで起きる現場の問題。まずはリソース的な問題。CSSアニメーションはCSSの中でも学習コストは比較的高いことや、センス的なものが問われるのではという印象があること。さらにそれらのバイアスから、プロジェクトメンバーの肥大化し、コミュニケーションコストも増えていく。

ツール的な問題もある。アニメーションのライブラリの多くは基本的な使い方しか提示されていない。実際にコーディングしながらでないと、調整できないケースが多い。それで疲弊する人が多い。

これらの問題を解決するのがAnimaista。これを使えば簡単にCSSアニメーションが作れる。

AnimistaはクロアチアのC2という会社のUXデザイナーのアナ・トラバス氏が作成したCSSアニメーションのプレイグラウンドサイトである。まだβ版だが、この会社のサイトを見るとCSSアニメーションをバリバリ使っているので、信頼感がある。

Animistaは実際のコードも生成してくれる。BSDライセンスなので無保証、著作権、ライセンスの明記が必要。成果物に開発者・配布者の名前を使わないことが条件となっている。

アニメーションの現場では、デザイナーはPhotoshopでデザインを起こし、動き方など演出の要望をスプレッドシートで出し、エンジニアはそれに従ってJavaScriptでコードを書く。

そのために綿密なコミュニケーションが必要になっている。しかもデザイナーは感覚値で指示してくるので、エンジニアが求める指示の具体性と乖離がある。

その乖離をAnimistaは埋めてくれる。プレイグラウンドツールを通じて、デザイナー側が検証でき、デザイナーが検証したカテゴリとオプションを伝えることで、食い違いがない演出を再現する。

そしてアニメーションのCSSを生成する。そして、それをhtmlにclassを追加してCSSはコピーアンドペーストするだけで容易にサイトに反映できる。このように具体的なコミュニケーションができるので、作業コストも削減されるようになるのだ。

ただ注意したいのは、アニメーションのCSSを生成するのであって、パーツを生成するのではないということ。ダウンロードはFileSystem APIに依存しており、Chromeのみに対応。

EdgeやFirefox、Safariの場合はサイトから直接コピーして使う。プレイグラウンドサイトはPCブラウザのみで活用できる。

Animistaが機能すればデザイナーと具体的なコミュニケーションがででき、何度も書き換えながらブラッシュアップするという手間がなくなることが期待できる。

Animistaは生のコードが生成されるので、そのコードを読み解きながらCSSアニメーションの理論を学ぶことができる。ぜひトライしてほしい。

Webアニメーションに関するQ&Aの時間も

最後は、最初に登壇したブライアン氏とX氏が登壇し、これまでのセッションの質疑応答を踏まえたパネルディスカッション「アニメーションについての存在意義を議論しよう」を展開した。

──Webアニメーションの実装はどうなっていくべきか。できるだけCSSで実装すべき?JavaScriptで実装すべき、ライブラリやフレームワークが進化するのを待つべき?

ブライアン:ブラウザの開発をしているので、ブラウザの機能を使ってほしい。まずはCSS Transitionでやってみる。それでできなければCSS Animationにチャレンジ。その次がJavaScript。CSS Animationだけでできることも多い。

X:コミュニケーションのコストはアニメーションにかかってくると思うので、早く実装でき、復習できるものを使うこと。何が動いているかわからないものはダメ。掘りさげないといけなくなるので地獄を見る。

デザイナーの要求は半端ない。平気でスプレッドシート何十行もの要求がくる。調整がしやすくて、どうやって実装できるか復習できるモノを選ぶことをお勧めする。

──Webアニメーションは学習コストがかかるという。どうすればそれを下げることができるのか。

X:Animistaをお勧めしたのは、コードを吐き出しれくれるから。修正の勘所はそれを見ることでつかむことができる。

ブライアン:CSS Animationはそんなに難しくない。すぐに覚えられると思う。

──アニメーションをWebサイトに使う効果について。

ブライアン:アニメーションによってインターフェースがわかりやすくなることもある。ぜひ、使ってほしい。

──アニメーションを使うと困る、使わない方がいいもの。

X:テキストをきちんと読んで欲しいというページには使わない方がよい。情報をきっちりと文字で与えなければいけないところにアニメーションを使うと、読まれなくなってしまうからだ。目的に対して、脇道にそれたところにアニメーションを使うと伝えたい情報を逃してしまう。

ブライアン:パフォーマンスを考えないといけない。滑らかな動きを保証できなければ使わない方が良い。その辺は気をつけないといけない。

ここで会場の参加者から質問を募った。

──アニメーションテストはどうやればよい?自分のPCでは動くがスマホでは動きにくいとかいう検証について教えてほしい。

ブライアン:Firefox OSの開発をしていたときは、すごく低いスペックの端末を使ってやっていた。機械的なテストづくりは頑張ればできるが、普通のホームページにはやりすぎかもしれない。

X:感覚的にOKならばOKという感じで、感覚値でテストしている。人が頑張るしかない。今回の勉強会を通してわかったことは、Webアニメーションはまだ発展途上の技術だということ。

だが、短いアニメーションなら十分、活用できることもわかった。興味がある人は、ぜひ、今から始めてみてはいかがだろう。

  • 8
  • このエントリーをはてなブックマークに追加

■関連記事

「React.js × React Native」―メリット・デメリット、将来はどうなる?【後編】... LT1「Webpackを使ったReact Hot Loaderの導入」 パネルディスカッションの後は、LTタイムに。最初に登壇したのはISAOで社内SNS「Goalous」の開発を行っているフロントおよびサーバサイドエンジニアの吉田将之さん。テーマは「Webpackを使ったReact Hot Lo...
「React.js × React Native」―メリット・デメリット、将来はどうなる?【前編】... React・React Nativeをテーマにパネルディスカッション 3月16日、リクルートテクノロジーズで、React.js meetupとReact Native meetupによる合同勉強会が開催された。 今回の勉強会はWeb開発において急速に普及しつつあるReact、そしてその書き方をベ...
これからのWebエンジニアの必須スキル!?「Payment」の実情と実装できる技術を一挙紹介... Web Payment Browser API(Payment Request API)を実装する 最初に登壇したのは、Google Developer Advocateの北村英志さん。 セッションタイトルは「はじめてのWeb Payments」。 ▲Google Developer Advoc...
JavaScriptとネイティブをつなぐ便利機能!──React Native ネイティブモジュール... bridgeとはどんな技術か React Nativeに関する勉強会「React Native meetup#4」が、1月26日に渋谷のエンジニア&デザイナー向け無料イベントスペース「21cafe(ニイイチカフェ)」で開催された。 最初に登壇したのはキュア・アップ CTOの髙木健介(janu...
VRコンテンツはいかにして開発するか?「VR Tech Tokyo #5」でそのコツが解明された... VRアクティビティの企画作りにはゲーム制作経験が邪魔 VR関連の開発者向け勉強会「VR Tech Tokyo」。 第5回目となる今回は、土曜日の午後に開催。時間的にも余裕のある中で、セッションが開催され、また同セッションで紹介されたさまざまなVRがデモ展示された。 最初に登壇したのは、バンダ...
WebVRと支える技術・コンテンツ作成入門ほか全セッションレポート──シン・WebVRとか文化祭... 基調講演を務めたのはMozillaの清水氏 基調講演に登壇したのは、Mozilla Japanの清水智公氏。講演タイトルは「WebVRとそれを支える技術」。 非営利団体Mozillaは、ブラウザベンダーの中でWebだけで勝負している唯一のベンダーである。Mozillaでも昨年より、ブラウザでVR...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ