関西フロントエンドUG座談会#1にて『GPUアニメーションとUIデータバインドについて』LTしてきました
フロントエンド技術の移り変わりの激しさに困り果てた関西のエンジニア達により、勢いで結成された会です。
少し時間が経ってしまいましたが、関西フロントエンドUG 座談会 #1 というイベントで随分キレの悪いライトニングトークをしてきました。キレが悪いのにライトニングだなんてちゃんちゃらおかしいですね…自戒も込めてビデオ置いておきますね…
イベント所感
3月14日、Web アプリケーションのフロントエンドについて語り会いましょう、というピンポイントなイベントが大阪で開催され、20数名の参加者を迎えることになりました。
小さい会社で一人だけ js と actionscript の専従という僕にとっては、濃ゆい話の聴ける・できる、またとない機会でした。
ちょっと気になっている js 界隈のワードについて「どうよ？」と問いかけるとすぐに何がしかのレスがあり小気味よかったです。
その上僕の住居から目と鼻の先のご近所での開催ということで自転車でさっと乗りつけて、さっと所用のため家に戻ることのできる、という至便さです。
となりの芝ではフレームワークを替え替え
そうそう、案件の度にフレームワークを替えたりしていくつか試した、というお話には随分違うものだなぁ、と思いました。
僕の職場ではとある企業様とお付き合いが数年目で、現在はほぼ年中その開発に取り組ませてもらっています。その Web アプリケーションのコードは長期間熟成の複雑怪奇なジャングルで、ネットスケープ・ナビゲーター 4.x 時代のコードが残っていてですねぇ…
『GPUアニメーションとUIデータバインドについて』LT の様子ビデオ
さて、所用というのは他でもなく、イベント開催直前まで粘っても完成しなかった LT 用のビデオを、途中で抜けて完成させて舞い戻る、というものでした。
そのために自己紹介と40分間の js フレームワーク談義のあとは、alt js、css フレームワークと談義は続きますが、僕は一度退場しました。
そして、必死の作業によってライトニングトークは 2人目の途中から、出来立てホヤホヤのビデオと共に帰ってくることができました。
ボソボソとしゃべっていて分かりずらいことこの上ないですね…
LT で流していたビデオ
こちらはそのビデオを抜き出したものになります。
GPUレイヤーを効かせたアニメーションを Web アプリケーションにも！
颯爽と現れ js 界隈の話題をさらっていく数々のフレームワーク達。しかしその背景には困難さを増す js 大規模開発の現状が透けてみえます。
そのような困難さが一服したときには、よりネイティブアプリケーションに近づくために、アニメーション効果もばっちり押えておきたいですね。
ネイティブアプリケーションのようなアニメーション
Mac OSX のアプリケーションや Windows8 のモダンスタイルのように適切に設定されたアニメーション効果は、ユーザーの理解を助け操作にリズムを生みます。
ネイティブアプリケーションのようなスムースなアニメーションのためには DHTML 時代の setInterval と css-p ではなく、GPU サポートを効かせた CSS3 Transitions と CSS3 Animations が主役です。
モダンブラウザは4つの項目を手軽にアニメーションすることができます。位置（position）、大きさ（scale）、回転（rotation）、透明度（opacity）です。もし、それ以外のものをアニメーションするなら、それはご自分の頑張り次第ですが、絹のようになめらかな60fpsの動画を実現できる可能性は少ないでしょう。
先の記事によると僅かに transform(translate, rotate, scale) と opacity が GPU レイヤーが得意とするプロパティのようです。
しかしこの GPU サポートは何かと曲者です。なんと要素が GPU レイヤーで描画されている間に、ダイナミックコンテントを行うと、transitionend イベントが起きなくなってしまう問題が発生します。
Dynamic HTMLでは、ロードした後でもドキュメントのコンテントを変更できる。(中略)
これらを使えば、エレメントの挿入や削除から、個々のエレメント内のテキストや属性の変更まで行える。
ダイナミックコンテントは聞き慣れないかもしれません。先の記事が IE4 時代のものですが、DHTML（ダイナミックコンテント含む） について大変良くまとまっています、読みましょう。
牧歌的 DHTML の時代は終わり―
この症状に遭遇したとき Backbone.js ライクなデータバイドを独自に実装して使用していました。そしてしばしば、要素がアニメーションの最中に XHR が完了しコンテンツを書き換えていました。
安全に要素を書き換えるには、アニメーションの終了を待つか？または elm.style を操作してアニメーションを中断させる必要があります。
これはなかなか頭の痛い問題で、アニメーション中の要素に対してはちょっとコンテンツを書き換えて要素のサイズを測る、といったことができません。
css-p と setInterval を使っている間はいつでも要素の内容を変更できました。しかし現在の Web 開発はネイティブのパワーを引き出すために以前のような気軽さを手放さなくてはなりません。
コミットログには書き忘れましたが、今回のコミットで 10_XNodeAnime.js を追加しました。
xnode.animate( start, end, duration, easing ) として要素の x, y, 透明度 についてアニメーションが可能です。
もうひとつの終わり―
またこの問題はブラウザを問わず Mac OSX と iOS で頻出します。一方の Windows8 では起きないか、またはほとんど発生しません。
案の定、開発を Windows8 で、客先でのデモをお客様の Mac で行っていたため、肝心なところでなぜか止まるという失態を何度もやらかしました。
試金石にしようと貪欲にいきましたが、いくらかの知見と引き換えに、お客様も失ってしまいましたとさ…
この他に言っておきたかったこと
ではでは～