ハイブリットソーシャルゲームの現場

Copyright © POKELABO.inc All Rights Reserved.Confidential Copyright © POKELABO.inc All Rights Reserved.Confidential
ハイブリッドソーシャルアプリの現場
Social Game Development with HTML5
2013/05/28
クリエイティブ事業部鈴木匠太
ソーシャルメディア事業部前田翔梧

自己紹介
鈴木匠太(29) 元Flasher
クリエイティブ事業部部長
主にアニメーション演出部分を担当
CreateJSやAfterEffectsをよく使用する
富士登山、スカイダイビング、マラソンを嗜む
前田翔梧(29) 元日立Sler
ソーシャルメディア事業部リードエンジニア
主にPHP＋Android™ Javaなどで開発
人と繋がることが好き
スノボ、サッカー、プログラムを嗜む

今日お伝えしたいこと
◆ポケラボってどんな会社なの？
◆なぜハイブリッドアプリを採用したのか？
◆実際、ハイブリッドアプリってどうなの？
◆ポケラボエンジニアがAndroid™で目指す事

Copyright © POKELABO.inc All Rights Reserved.Confidential
※セガとセガロゴは株式会社セガの登録商標です。
Copyright © POKELABO.inc All Rights Reserved.Confidential
会社紹介
◆会社名
株式会社ポケラボ
Pokelabo, Inc.
◆設立 2007年11月
◆社員数 200名程
◆資本金 13億7,290万円
◆事業内容
モバイル向けソーシャルアプリ
の企画・開発・運営
元マンションベンチャー

プラットフォームの情報を共有
×
GREEさんのノウハウを活かす
※すべての商標は、それぞれの所有者に帰属します
。

コンソールの技術を習得する
セガさんのノウハウを活かす
×
このCMをGW中に見ませんでしたか？
※セガとセガロゴは株式会社セガの登録商標です。

海外での展開・運営方法を習得する
aeria GAMESさんのノウハウを活かす
×
ドイツ 5位 / フランス 14位 / US 47位
フィリピン・シンガポール 3位
フィジーパナマ
GROSS1位

メイン運営サービス紹介
海外にも積極的に進出！
GOOD
BAD
iOSでは比較的高いランキングを叩き出しているが
Android™に関しては課題だらけの状況！

なぜ、ハイブリッドアプリを採用したのか？

And more…
2008年
「Start」
Off deck site apps
2009年
「Get Chance」
Opened Mobile SNS
2010年
「Growing」
Fundraised series A $12M
2011年
「To global」
■ Tie-up campaign
Fuji TV
Yomiuri-
Giants
# of member
3
7
60
100
ガラケー向けソーシャルゲーム開発が中心
webエンジニアが多かった

先人達の教えに共感した
Webが最終的には勝つだろう!

ポケラボ運営アプリの月別UUと売り上げコイン数
会社全体が危うかったので方針転換

ネイティブでのアニメーションが作れなかった

結果としてSwiffyを選択し
現在はCreateJSをメインに使用
変換変換

1.PHPエンジニアが多かった。
2.先人達の教えに納得させられた。
3.ガラケーの横展開が目的だった。
4.スマホアプリ上でのリッチな演出制作に困難。
なぜ、ハイブリッドアプリを採用したのか？

実際、ハイブリッドアプリってどうなの？

iPhone + Android™ 両対応可能

WebViewって遅いんじゃないの？

FlashでBoneAnime AS⇒JSにめっちゃ動く！
HTML5でのアバターシステム開発
問題1
CreateJSはBoneが使えない

問題2
増え続けるスキル演出
現在110個 NEXT＋70個以上

ポケラボエンジニアが
Android™で目指すこと

より速く・より快適に・動作すること
ユーザ様に楽しんでもらいたい！！

３つのアプローチ
iOSとの
UUID連携
ハイブリッド
固定メニュー
ハイブリッド
高速
アニメーション

ハイブリッド固定メニュー
アプリに重要なヘッダーフッターの固定メニュー
・overflow: scroll; と position:fixed;で実装
・・・でも端末によっては動かない。
・iScrollを使う。
・・・でも端末によっては遅い。
ならいっそWebViewでの
表示をやめてしまおう！

ヘッダーフッター用のコマンドを用意する。
例）
heder://json=[{“type”:”badge”}・・・]
Android™ネイティブで上記コマンドのJSONを
解析し、全てAndroid™のViewに変換してあげる。
→重要：ハイブリッドを目指しているので
Webとの連携が必須！

コマンドをWebから指定するだけで、
ヘッダーフッターを安定的に表示させる事に成功
！

ハイブリッド高速アニメーション
ハイブリッド
高速
アニメーション

もっとスピーディーなアプリリリース、
もっとスピーディーなアニメーション描画をしたい
！
…でもそんな完璧な
ライブラリはない。
なら自分たちで
作ってしまおう！

『実現したいこと』
・基本はハイブリッド(Web)！
・今あるリソースをそのまま使いたい！
・快速アニメーション！

２段階「変換」を行い、
Android™ネイティブでアニメーションを描画！
変換変換
FLASH JavaScript Android™

androidnative.setBackColor("000000");
androidnative.setFPS(30);
androidnative.loadGraphic("images/touch_screen.png", 1, 1, false);
独自コマンドをAndroidの
Canvasに変換し描画する。
canvas.drawBitmap(testbmp0, 220, 10, null);

従来のCreateJSより高速アニメーションを実現！
FPS 10 〜 20 FPS 30 〜 45
約３倍のフレームレートに！

iOSとの
UUID連携
IOSとのUUID連携

IOSとのUUID連携
iOS端末やポケラボアプリ内でコラボ連携し、
多くのユーザ様にアプリを遊んでもらいたい！
…でもAndroid™のUUIDは使えない。
こっちでUUIDを
発行してあげよう！

IOSとのUUID連携
UUIDとは重複しない一意な値です。
UUIDを作成する方法は簡単。
String uuid = UUID.randomUUID().toString();
ただし、アプリをアンインストールしてしまうと
UUIDも同時に削除されてしまい、
別UUIDが生成されてしまう。

IOSとのUUID連携
ポケラボネットワークシステム（通称pokenet）
利用して必ず１端末１UUIDを実現。
pokenetで
端末認識
UUID発行
問い合わせ

IOSとのUUID連携
端末、アプリ、関係なくコラボ連携可能に！

IOSとのUUID連携
さらにこの仕組みを利用して、同じデータが
外でAndroid™端末、家でiPadとして遊べる！
完全ハイブリッドアプリとしての動作を実現！

Android™が課題

Thank You!
いつも仕掛け人であること

ハイブリットソーシャルゲームの現場

More Related Content

What's hot

Viewers also liked

Similar to ハイブリットソーシャルゲームの現場

More from Shota Suzuki

ハイブリットソーシャルゲームの現場

Editor's Notes