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

More Related Content

Pokelabo android web