Pokelabo android web

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™ で目指す事

※ セガとセガロゴは株式会社セガの登録商標です。
会社紹介
◆ 会社名
株式会社ポケラボ
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 が最終的には勝つだろう !Web が最終的には勝つだろう !

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

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

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

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

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

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

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

Android™ が課題

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

Pokelabo android web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Pokelabo android web

Similar to Pokelabo android web (20)

More from Shumpei Shiraishi

More from Shumpei Shiraishi (20)

Pokelabo android web