Shut the fuck up and write some code

グダグダ言わずにコードを書きたいブログ

スマートフォンにおけるアニメーション実装 <2013年版>

スマートフォンにおけるアニメーション実装 ~FlashからHTML5へシフトするには~

昨年、某セミナーにて発表させて頂いたときのスライド、未だに見られているようで有り難いのですが、それからかなり環境が激変して、ここで書かれている内容は、今となってはさっぱり役に立たないので(!!!)、改めてまとめてみたいと思います。

注:ここで言う「アニメーションの実装」とは、スマートフォンのブラウザ上で動作するアニメーションのことです。

環境の変化

昨年も例年になく変化のある年だったのは誰もが思うところですが、数ある変化の中で個人的に重要なトピックを挙げてみます。

1. スマホ>ガラケー

具体的な数字は出せないのですが、自分が関わっている案件のサービスはユーザーはそれぞれ半分くらいの比率になってます。ソーシャルゲームの会社の方々に聞いた話でも似たような数字でした。

Lineの流行もあって若年層にもスマホがかなり浸透してきているのもあり、前職の親会社でも「これからはスマホだ!」と言い切ってたので、もはやスマートフォンに合わせてモノを作るのがデファクトスタンダードでしょう。

2. 端末のスペックの向上

iPhone5は本当に速いですね。3GSの頃Canvasを使った開発してても9-10FPS程しかでなかったのに、今は30オーバーは余裕。iOS6になってからはデバッグ環境も充実して本当に開発しやすくなりました。一方Androidは端末ごとに差異があって、某GalaxyはS2よりS3の方が処理速度が遅かったりするのですがw、全体的に見れば、性能自体は向上していると思います。

軽量化/高速化はモバイルコンテンツならば必ず考えなければいけないところですが、クライアント側の速度向上は以前に比べればそれほど気にすることもなくなってきているように思います。実際出荷台数が多いのはここ1-2年にリリースされた端末だと思うので、そこにフォーカスに当てて開発するのもありではないでしょうか。もちろん全機種対応の必要性もありますが、全機種対応をするのはコスト的に厳しいところなのですし、作るコンテンツのターゲットを見極めて対応機種の範囲を絞り込んで、開発の工数を減らし作り易さを高めることは重要です。

3. 開発環境の変化

とにかく多くのスマートフォン向けのライブラリがリリースされました。特にAdobeが出したCreateJSは当初はライブラリだけだったのが、Flashの拡張機能に変換プラグインがリリースされたことでアニメーションをJSに変換出来るようになり、一気に開発がしやすくなりました。またCoffeeScriptや Haxe,JSXといったJSにコンパイル出来る言語が充実したことによりJSの開発はとても楽になってます。SASSなどを組み合わせればCSS3のコーディングの非常に楽に出来ますし、これらを組み合わせる事で非常に効率の良い開発が出来ます。

アニメーション開発の実際

スライドでは「大きく分けて3パターン」と言っていたのでそれぞれ今はどうなのか?を言及します。あくまで個人的な意見です。

1. IDE(GUI)ツールを使ってアニメーションを作る

Adobe Edge(現Adobe Edge Animate)/ Sencha Animator / Hypeなどで作る、と言っていたのですが、今となってはどれも使わない方が良いです。CSSアニメーションはとにかくファイル/画像を大量に使うので、リクエスト数が相当多く、速度遅延のボトルネックになりやすいのが一因ですね。画像をBase64で変換して文字列としてソースに埋め込んでおくという方法もありますが、煩わしいところでもあります。またOSやブラウザごとのバグがとても多い(特にAndroid2.x系と4.x系の違い)ので、本格的なアニメーションを実装するのであれば避けたいところです。

2. JavaScript/CSSでアニメーションを実装する

enchant.jsを使うと言っていたんですが、ゲームのようなコンテンツを作るのであれば使ってもいいかもしれないですが、CSSアニメーション(enchant.jsの実際はDOM要素の座標をCSSで指定する)は前述の理由もあるので個人的にはあまり使いたく無いです。iOSもCanvas描画のアクセレーションが効くようになって浸透してきているのもあり、スマホであればCanvasベースを選択した方がいいと思います。単純な図形グラフィックであれば、シェイプで描けますしファイル数削減に繋がるのが大きいです。enchant.jsはCanvasにも対応しているので、そちらを使う事を検討しても良いのではないでしょうか。

ライブラリの選択肢としてArctic.jsもありますが、コードでアニメーションを実装するというのは、微調整が難しいので別のツールで作ったものを移植するスタイルの方がクオリティは高められますね。Easel.jsなどもそのまま使って実装するのではなく、Flashから変換したものを出力して、そのリソースを使って実装するスタイルが良いと思います。これは次でも説明します。

その他ライブラリ(主にゲーム開発用)は多数出てきてますが、実績がまだ積まれてないのが多いので、検証していかなければならないでしょう。

3. 変換ツールを使う

変換ツールというとソーシャルゲームならばExGameが代表選手ですね。GREEではReelというのがあります。これらは各プラットフォーム専用になっているので、普通に使うのは難しいところが何点です。今でも活用されてますが、FlashLite1.1向けなのと、実装がiPhone向けに特化してるのもあり、FlashLiteの変換には向いてますが、その他、例えば画面タップ以外の操作に応用させるのが難しいと言えます。前述での、スマホ>ガラケーの状況を考えるとFlashLiteの変換だけでは些か限界があるのではないでしょうか。スマホならフリック操作とか実装したいですよね。

Google Swiffyという選択肢もあります。こちらはSVGでの描画なのでAndroid2.x系での再生が出来ないのと、一旦最新版がリリースされてしまうと、旧バージョンへの変換が出来なくなってしまうので対応が煩わしい問題があります。変換ロジック、再生部分がブラックボックスになってしまっているのでバグが発生した場合原因が突き止めにくいのもありますね。AS3に対応しているのは魅力的ですが、タッチパネル系の処理にはまだ対応してないようです。

なので、スマホ向けに対幅広く使える機能を実装するにはFlashLiteでは細かいインタラクションを実装するのが難しいので、新たな方向として、swfを丸ごと変換するのではなく、リソースを細かく変換/分解しつつ、HTML5Canvas)の機能を実装していくスタイルが良いのではないでしょうか。実際自分はそのスタイルで開発しています。具体的に言うとToolkit for CreateJSを使った変換実装ですね。

タイムラインにjsの記述も可能なので、作り方次第でflaからそのままjs+htmlファイルを出力するということも可能です。ソーシャルゲーム向けのタップだけをするFlashLiteなら十二分に使えるし実装も容易です。以前にFlashをCSS3アニメーションに移植することをやっていましたが、開発時間がバカにならずFlashの開発の倍以上の時間がかかっていました。CreateJSを使うようになってASのJSへの再実装とアニメーションのタイムラインの調整だけになったので、開発時間/コストが大幅に短縮出来ました。変換時に細かいバグがあるのが気になる所ですが、そこを押さえれば十二分に使える強力なツールです。

さらにこの出力をリソースとしてHaxeやCoffeeScriptなどで実装する方法もあります。自分はCoffeeScript+CreateJSという方法でやってますが非常に効率がいいです。エディタにはintelliJ IDEAを使っていて、設定をカスタマイズするとコンパイルからアップロードまでほぼ自動化できます(もちろんPHPStormやWebStormでも出来ます)。最近はHaxeを使う方法も流行してますね。

※参考ページ
FlashでいうパブリッシュのないHTML開発で、死なないためにやっといたらいいんじゃない的なこと。〜Ctrl+Enter Again〜
パブリッシュでCoffeeScriptやSassが書き出されたりする環境をWebStormとCakefileで構築

Toolkit for CreateJSの類似として、GREEからはLWFが出ていますが、CSS3に変換するため、シェイプやマスクに対応してないので、現時点では使えないですね。LWFはUnity向けに出力出来るのが強みでないでしょうか。

アニメーション実装のこれから

FlashPlayer開発終了の混乱期から変換技術対応の黎明期を経て、新しいテクノロジーが次々と出てくるので開発環境が充実しつつあります。ですので、一つの技術に固執しないで、新しいものを試しつつ開発環境を積極的に変えていくべきでしょう。自分もここ一年でFlashLite→CSS3アニメーション(SenchaAnimator)→Canvas(Toolkit for CreateJS)と使うテクノロジーが転々としてます。色々と試した結果今はToolkit for CreateJS中心でやってますが、2-3カ月経ったらまた新しいもの、別の開発手法になっているかもしれません。

        • -

細かいところは省いてざっくりと書いてみましたが、一昨年〜昨年はFlash終了で本当に絶望していたのが、昨年後半から新たな方向性が開きつつあるので、もっと挑戦していきたいですね。アプリ>ブラウザとも言われてますが、Haxe(+NME)などクロスプラットフォームで展開できるものもあるし、面白くなってきたぞー。