【第2回】スマホ向けアプリ開発におけるアニメーション技術の活用

テクノロジー

コラム

2012.5.14 MON

　短期集中連載　
「アメーバピグ」スマホ版アプリの開発者が考える
これからのWebディベロッパーに知ってほしい
スマートフォン・アプリ開発の実践テクニック



解説：原一成（株式会社サイバーエージェント）

【第2回】
スマホ向けアプリ開発におけるアニメーション技術の活用

「アメーバピグ」には自分のアバター自身が動いてコミュニーケションする「アクション」機能があります。「おじぎ」「うれしい」「かなしい」など、たくさんの種類が用意されており、テキストのみでの会話に比べ、より直感的に気持ちを伝えることができます。今回はこのアクションのスマートフォン対応についてご説明します。

【今回のPoint】
・Flashは使えないが、それ以外のアニメーション技術が利用できる
・技術の選定には、互換性およびGPU処理への対応状況がポイント
・現時点ではCanvasやCSS3で対応するのがよいだろう

Flashが使えないスマホ時代のアニメーション技術

ご存知の方も多いかと思いますが、現時点ではiOSでFlash（swf）コンテンツを動作させることができません。したがって、スマートフォン環境でアニメーションを使いたい場合は別の方法を探す必要があります。

筆頭はHTML5で実装された「Canvas」でしょうか。互換性が高く、表現力も豊富で次世代のスタンダードになる可能性もあります。実際に「アメーバピグ」の新規作成機能でも使用しています（Canvasに関する詳細は[こちらの解説記事]もご参照ください）。

一方で、CSS3も魅力的です。互換性はやや低く、再生・停止などのコントロールがしにくいなどの問題点もありますが、JavaScriptによるDOM操作よりも比較的スムーズに動作させることができ、簡単なアニメーションには特に向いているといえます。また、SVGはベクターデータで描画されることから、画面サイズに左右されることなく解像度にあわせて最適な状態で表示することができ、容量も削減できるため魅力的ではありますが、Android 2.x以下では対応していません。

このようにいくつかの技術が存在するわけですが、実際に使用する技術を選定する際には、互換性とGPU処理に対応しているかどうかがポイントとなります。互換性とは、同じコードやファイルでどれだけ多くの環境で同じように表現できるかを指します。

また、GPUはグラフィックを専門に扱うハードウェアのことで、CPUに変わって描画処理を担当することでよりスムーズに描画できるようになります。以上の点から、現在のスマートフォン環境ではCanvas、CSS3が有力な選択肢となります。アメーバピグではアクションとの相性を踏まえた上で、CSS3とJavaScriptによるDOM操作を合わせた技術で表現することにしました。

スマートフォンにおけるアニメーション技術の比較。今すぐ取りかかりたいのはCanvas、もしくはCSS3、JavaScriptによるDOM操作ではないでしょうか

ピグのアクションをJavaScriptとCSSで再現！

それでは今回のスマートフォン対応手順について説明しましょう。

1. 体のパーツごとの領域を用意する（HTML、CSS）

アバターを構成する各パーツをカスタムデータ属性で定義。アニメーションさせるため、CSS3のtransformプロパティ（スマホ用にはベンダープリフィクスを付けて-webkit-transformと記述）を記述します。アニメーションの基点は(0,0)の位置としています

それぞれのパーツごとにdiv要素を用意します。パーツ名はカスタムデータ属性を使ってdata-parts=”f_frontHair”のように設定しています。また、パーツの初期位置をCSS3の-webkit-transformというプロパティを使って設定しています。

2. 各パーツに体、アイテムを配置（HTML、CSS、Image、JavaScript）

「帽子」などのアイテムは、JSON（JavaScript Object Notation）形式で個別のオブジェクトとして用意します

続いて、アバターに「帽子」アイテムを被せてみましょう。
アイテムのデータは図右上の点線内のようなJSON形式で用意します。JSONの記述としては、どのパーツ内に配置するアイテムかを判別するための“part”プロパティ、位置・起点情報を記述した“position”および“origin”プロパティ、画像データが埋め込まれた“data”プロパティなどがあります。また、画像データは“http://www.~~.jp/img.png”といった記述形式ではなく、データURIスキームを使って“data:image/png;base64,~~~”という記述形式で埋め込んでいます。

こうすることで、ピグで必要とする多くの画像データを毎回サーバにリクエストすることなく、スムーズな表示を実現することができます。さらに続けて、これらのデータを先ほどのdiv要素に追加します。JSONデータの“parts”プロパティ“f_ftontHair”に対応するdiv要素に画像を追加しています。この一連の流れをアイテムの数だけ繰り返すことで、アバターの表示が完成します。

では、このアバターを動かしてみましょう。

3. 各パーツをフレームごとに動かす（CSS、JavaScript)

“-webkit-transform: matrix();”を利用したアニメーション（※画像をクリックすると拡大します）

アクションはフレームごとにパーツの位置、スケール、伸縮率を変更して表現します。パラパラマンガをイメージしていただけるとわかりやすいかと思います。

今回はフレームごとにJavaScriptで“-webkit-transform: matrix();”の値を変更することでアクションさせています。なお、matrixの引数には前から順に「x方向の伸縮率」、「y方向の傾斜率」、「x方向の傾斜率」、「y方向の伸縮率」、「x方向の移動px数」、「y方向の移動px数」を指定しています。

GPU対応を確認して、動きをよりスムーズに

アニメーションがある程度完成し、さまざまな端末で確認してみたところ、動きがカクカクしていることがわかりました。対応策を調査したところ、CSS3のアニメーションではGPU処理を適用できることが判明し、実際に試してみるとGPUを利用することでよりスムーズに動くことが確認できました。

具体的には、GPU対応している端末ではCSSで指定の要素に-webkit-transform: translate3d(0, 0, 0);、もしくは-webkit-transform-style: preserve-3d;を設定することでGPUを利用した描画が可能となります。なお、GPU処理が適用されているかどうかを確認するには、iOSシミュレーターの[デバッグ]→[ブレンドレイヤー]機能を使うと便利です。

GPUが使われているかどうかは、iOSシミュレーターで見ることができます。適用されている場合は、アバターのまわりが赤く表示されます

駆け足となりましたが、ご理解いただけましたでしょうか。こちらで説明した内容は、ほんの一例に過ぎません。一番有効な方法はとにかく試してみること、試行錯誤を繰り返すことに尽きると思います。その際に今回の内容が少しでも参考になれば幸いです。

次回は、アプリ化する手順、その際に気をつけるべきポイントについてご説明します。

TOPページに戻る
【第1回】「スマホ向けアプリ「ピグトーク」開発から見た開発プロセスの課題」へ戻る（2012.5.7公開）
【第2回】「スマホ向けアプリ開発におけるアニメーション技術の活用」へ戻る（2012.5.14公開）
【第3回】「スマホ向けアプリ開発における　ハイブリッドアプリの利点」へ戻る（2012.5.21公開）
【第4回】「スマホ向けアプリ「ピグトーク」開発時のTipsと苦労した点」（2012.5.28公開予定）