「あんさんぶるガールズ！」をリリースしました！
エンジニアの草苅です。
「あんさんぶるガールズ！」の売りは何といっても、人気作家日日日さんに書いて頂いたシナリオと、総勢60人のかわいい女の子達なわけですが、システム面でも新しい取り組みを多く入れた意欲作となっていますので、手前味噌ながら今回はそのあたりを紹介させて頂きたいと思います。
Zepto.js による軽快な動的ローディング
また、動的ローディングによる部分書き換えを積極的に利用することで、ユーザービリティの向上を図っており、この部分にも Zepto.js は効果を発揮しています。
ソーシャルアプリの場合、iframe 内での画面遷移となるため、それ起因で動的ローディングはいろいろと問題が発生していたのですが、リリース直前で問題が解消され、なんとか日の目を見ることができました。
CreateJS によるハイパフォーマンスなHTML5アニメーション
「あんさんぶるガールズ！」では CreateJS を利用してすべてのアニメーションを制作しており、Andoroid 端末であっても Flash を利用せず、すべて Canvas でアニメーションを処理しています。
これにより、Flash変換ツールを使ったアニメーションと比較して圧倒的に高速で軽快なアニメーションを実現することができました。
未プレイの方はぜひアプリをプレイ（クエストなど）して頂けると、変換ツールや Flash のアニメーションと何が違うか、どのくらい違うのかが実感頂けると思います。
例えば、クエストであれば複数のアニメーションを連続実行する際、アニメーション実行前に、必要なアニメーションの画像をプリロードすることで、通信がアニメーションの連続実行を妨げることがないようにしています。また、クエスト中に全画面読み直しが発生することがなく、アニメーションに必要があれば差分の画像を読み込むだけという作りになっています。
また、CreateJS に未実装なものや不具合に対応するため EaselJS、PreloadJS にパッチを当てたり、Retina Display への対応や MovieClip を再利用しやすくするため、独自の拡張なども行っています。
CoffeeScript による開発効率化
1～2時間程度で習得できて、それなりに効率が上がるところが CoffeeScript の良いところだと思います。
Less による css 記述の効率化
Rails 標準であれば Sass なところですが、「あんさんぶるガールズ！」では Less を採用しています。
Asset Pipeline によるアセット集約
Rails の Asset Pipeline 機能により、アプリの production 環境への deploy 時にアセットの precompile （集約と圧縮）を行っています。
これにより development 環境では .coffee、.less を編集し、production 環境では js、css はそれぞれ1ファイルにまとめられ、minify化されたファイルが nginx 経由で転送される形となっています。
Rails 標準では画像もアセットに含まれるのですが、「あんさんぶるガールズ！」はカードゲームで画像が大量にあるということもあり、今回は画像をアセットから外し、画像に関しては Rails 3.0 までの timestamp をつけてURLを生成するように対応しています。こちらも基本的には Rail に乗りつつも臨機応変にという形です。
「あんさんぶるガールズ！」では今日の夜頃からクリスマスイベントが始まります。ぜひプレイしてみて下さい！
まとめ
今回は「あんさんぶるガールズ！」のフロント周りの概要をご紹介しました。「あんさんぶるガールズ！」では今日の夜頃からクリスマスイベントが始まります。ぜひプレイしてみて下さい！
