2012年12月18日火曜日

「あんさんぶるガールズ!」をリリースしました!

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

エンジニアの草苅です。


僕が8月頃からPM兼プログラマーとして関わっているアプリ「あんさんぶるガールズ!」が11月22日にGREEプラットフォームでリリースされました!

あんさんぶるガールズ!」の売りは何といっても、人気作家日日日さんに書いて頂いたシナリオと、総勢60人のかわいい女の子達なわけですが、システム面でも新しい取り組みを多く入れた意欲作となっていますので、手前味噌ながら今回はそのあたりを紹介させて頂きたいと思います。


Zepto.js による軽快な動的ローディング

「あんさんぶるガールズ!」では、多くのソーシャルアプリが採用している jQuery ではなく、Zepto.js を採用することでネットワーク負荷や初期化処理時間を軽減しています。
また、動的ローディングによる部分書き換えを積極的に利用することで、ユーザービリティの向上を図っており、この部分にも Zepto.js は効果を発揮しています。
ソーシャルアプリの場合、iframe 内での画面遷移となるため、それ起因で動的ローディングはいろいろと問題が発生していたのですが、リリース直前で問題が解消され、なんとか日の目を見ることができました。


CreateJS によるハイパフォーマンスなHTML5アニメーション

「あんさんぶるガールズ!」では CreateJS を利用してすべてのアニメーションを制作しており、Andoroid 端末であっても Flash を利用せず、すべて Canvas でアニメーションを処理しています。
これにより、Flash変換ツールを使ったアニメーションと比較して圧倒的に高速で軽快なアニメーションを実現することができました。
未プレイの方はぜひアプリをプレイ(クエストなど)して頂けると、変換ツールや Flash のアニメーションと何が違うか、どのくらい違うのかが実感頂けると思います。

例えば、クエストであれば複数のアニメーションを連続実行する際、アニメーション実行前に、必要なアニメーションの画像をプリロードすることで、通信がアニメーションの連続実行を妨げることがないようにしています。また、クエスト中に全画面読み直しが発生することがなく、アニメーションに必要があれば差分の画像を読み込むだけという作りになっています。

また、CreateJS に未実装なものや不具合に対応するため EaselJS、PreloadJS にパッチを当てたり、Retina Display への対応や MovieClip を再利用しやすくするため、独自の拡張なども行っています。


CoffeeScript による開発効率化

弊社のすべてのアプリは Ruby on Rails 上に構築されており、「あんさんぶるガールズ!」では特に Rails らしい書き方となるように意識してソースコードを書くようにしています。
より Rails らしくという方向性ということもあり、JavaScript の記述には Rails 標準である CoffeeScript を採用しています。
CoffeeScript によって JavaScript のバッドノウハウをあまり意識しなくてよくなり、可読性が上がり、結果的にチーム開発の効率が上がったと思います。
1~2時間程度で習得できて、それなりに効率が上がるところが CoffeeScript の良いところだと思います。


Less による css 記述の効率化

Rails 標準であれば Sass なところですが、「あんさんぶるガールズ!」では Less を採用しています。
これは css を一番書くデザイナーさんの希望によるものです。Rail に乗ることも重要ですが、一番 css を書く人に決めてもらうのが一番だという判断となりました。


Asset Pipeline によるアセット集約

Rails の Asset Pipeline 機能により、アプリの production 環境への deploy 時にアセットの precompile (集約と圧縮)を行っています。
これにより development 環境では .coffee、.less を編集し、production 環境では js、css はそれぞれ1ファイルにまとめられ、minify化されたファイルが nginx 経由で転送される形となっています。
Rails 標準では画像もアセットに含まれるのですが、「あんさんぶるガールズ!」はカードゲームで画像が大量にあるということもあり、今回は画像をアセットから外し、画像に関しては Rails 3.0 までの timestamp をつけてURLを生成するように対応しています。こちらも基本的には Rail に乗りつつも臨機応変にという形です。


まとめ

今回は「あんさんぶるガールズ!」のフロント周りの概要をご紹介しました。

「あんさんぶるガールズ!」では今日の夜頃からクリスマスイベントが始まります。ぜひプレイしてみて下さい!


1 件のコメント:

  1. Thanks for sharing, nice post!

    Tại Bruno.vn chúng tôi còn hướng dẫn bạn chọn quần áo cho nam giới hay hướng dẫn cách chọn quần Jeans nam hay chọn sơ mi với cách chọn áo sơ mi cho nam hay hướng dẫn cách phối đồ với áo sơ mi nam cực hiệu quả hay cách phối màu quần áo nam cho nam giới. Tại Bruno, bạn có thể thấy các kiểu áo sơ mi đẹp nhất hiện nay hay cách chọn size áo thun nam hay chọn cách chọn size áo khoác nam hay hướng dẫn cách chọn áo sơ mi nam hiệu quả hay bảng size áo sơ mi nam cho bạn lựa chọn hay cách chọn size quần jean nam phù hợp hay hướng dẫn các bạn cách tính size quần hay bài viết quần size M là bao nhiêu cho bạn lựa chọn. Bạn có thể tới trực tiếp hoặc dịch vụ mua quan ao tren mang hay thắc mắc mua quần jean nam ở đâu đẹp TPHCM thời trang hàng hiệu hay mua quần jean nam rẻ ở đâu thì đến Bruno nhé. Bạn có thể giải đáp ở sài gòn nên mua quần áo ở đâu uy tín, hàng hiệu hay và Bruno là địa chỉ shop thời trang nam online TPHCM uy tín, hàng hiệu hay shop quần áo nam đẹp ở tphcm thì lựa chọn hàng đầu là Bruno.

    返信削除