革新的ブラウザゲームを支えるプラットフォーム技術

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
Web の進化は止まらない
革新的ブラウザゲームを支え
るプラットフォーム技術
DeNAxgloops 合同セミナー
最先端ブラウザゲームへの挑戦
~ブラウザゲームの表現がここまで進化した~
October 29, 2015
Toru Yamaguchi
Senior Architect, Sub Business Unit Head
Open Platform Business Unit
DeNA Co., Ltd.

Web の進化は止まらない
2

3

プロモーションサイトへの WebGL の採用
 商業サイトのプロモーションのテクノロジーとして
WebGL の採用が増えてきています
4
https://sharetheforce.target.com/galaxies

EXP3D – GWT + WebGL + HTML5 Audio
 breaking byte という indie game 制作ショップが作成した
シューティングゲーム
⁃ Google Play で提供しているゲームの WebGL 版
⁃ 実際にデモを見てみましょう
5

EXP3D の JavaScript/WebGL 対応
 実は OSS になっています
⁃ https://github.com/acourreges/exp3d
 上記のページ中の Details に分かりやすい説明があります
6

Foggy Shore - Unity5 x WebGL
 @alexanderocias さんが作った Unity で出来たミニゲ
ーム (WebGL 版)
⁃ 実際にデモを見てみましょう
7

Unity5 の JavaScript/WebGL 対応
 Unity5 はランタイムとユーザーコードを幾つかのステ
ップを経て JavaScript (asm.js) に変換する
⁃ 実際の動作は asm.js が各ブラウザでどれくらい速度が出
るかという問題になる
8
Unity
Runtime
User Code
C/C++ LLVM-IR
JavaScript
(asm.js)
C#/Unity Script
CIL
(Common
Intermediate
Language)
C++ LLVM-IR
clang emscripten
emscriptenclangIL2CPPmcs

WebGL の対応状況
 ほぼ全てのブラウザで使えるテクノロジーとなった
⁃ 実装レベルや互換性、速度についてはまだ難はある
9

WebAssembly
 Webブラウザで実行可能なポータブルなコンパイル済み
のバイナリフォーマットのこと
⁃ asm.js を置き換える概念と言われている
 WebAssembly の利点
⁃ バイナリフォーマットのためデータサイズが小さくなる
⁃ 実装速度向上のためのオプティマイズがしやすくなる
 今後
⁃ Microsoft, Mozilla, Google がプロジェクトに参加
⁃ LLVM も対応を検討中
• つまり、C/C++ などで書かれたソースコードが WebAssembly
としてコンパイル出来る
⁃ Unity も対応予定
10

何故 Native なのか
11
プログラムや表現の
高速な動作
オフライン動作
リテンション
エコシステム
• 静的型付け言語なので高速にプログラムが動作
• Native UI や OpenGL などにより、滑らかな UI
• 大容量のオフラインデータを持つ事が可能
• GCM/APNS といった Remote Notification
• インストールと同時にホームスクリーンアイコンが作
成される
• Google Play/App Store

(モバイル)ブラウザでは駄目なのか？
12
高速な動作
リテンション
エコシステム
• JavaScript は遅い
• CSS3 や Canvas は遅い
• オフラインデータを大容量持つ事が出来ない
• Remote Notification のような枠組みが無い
• ホームスクリーンアイコンの作成は一般的ではない
• 強いプレイヤーが居ない

13
高速な動作
リテンション
エコシステム
• WebAssembly で Native 並の実行速度に
• WebGL で高速な描画へ
• オフラインデータを大容量持つ事が出来ない

Service Worker とオフラインキャッシュ
 Service Worker はページのバックグラウンドで動作する Worker
⁃ オフラインでも動作し、Fetch/Cache といった低レベル API を呼び出す事
が出来る
⁃ ページのネットワークアクセスを横取り出来る
 つまり
⁃ ローカル Proxy のような動作をさせる事が出来る
14
Service Worker
Cache
Resource
Server
Browser
Cache API
Fetch API

Service Worker の対応状況
 Chrome や Android Browser が先行している状況
⁃ Firefox では nightly で対応
⁃ Edge では Under Consideration
15

16
高速な動作
リテンション
エコシステム
• Service Worker/Fetch/Cache でローカル Proxy

Push API – Google Chrome
 Google Chrome で GCM をバックエンドとした Push
API が実装されました
⁃ 説明するよりデモを見ましょう
⁃ これも Service Worker の恩恵です
17
https://developers.google.com/web/updates/2015/03/push-notificatons-on-the-open-web

Add to home screen
 Chrome for Android, Mobile Safari などでホームスク
リーンアイコンが作成可能
⁃ 但しユーザー体験は一部改善の余地はある
18

19
高速な動作
リテンション
エコシステム
• W3C Push + Service Worker
• manifest.json などによるホームスクリーン作成
• Service Worker/Fetch/Cache でローカル Proxy

ブラウザの進化と現状
 ここまで Native に比べて弱点とされてきた部分はだい
ぶ遜色が無いレベルまで近づいて来た
⁃ 今度も Web のテクノロジーが進化していくのは、間違い
ない
 ビジネス観点で言えば、マーケットというエコシステム
の不在が大きい
⁃ ここさえなんとかなればビジネスとしても Web の進化が
加速するはず
⁃ Web のマーケットとして発展してきた Mobage だからこ
そ、この分野におけるイノベーションを起こす事が可能な
立場にいるはず
20

Mobage Open Platform での取り組み
 Mobage Open Platform では大きく分けると二つの取
り組みをしています
⁃ 多彩な表現力を可能にする取り組み
• CreateJS Lite
• 坊野を中心に開発
⁃ Web に強力なマーケットを作る取り組み
• Next Browser Platform (NBPF)
• 山口を Product Owner として開発
21

コンテンツの重要性
 多彩な表現を支えるライブラリや、Web にマーケット
を作る事が出来るプラットフォーム技術があってもコン
テンツの重要性は不変
⁃ ここで gloops さんという長いおつきあいの強力なパート
ナーを得た
⁃ タイトル開発をより具体的にバックアップするために
DeNA x gloops の緊密な連携を行っております
 次章からは NBPF の具体的な特徴について説明します
22

スマートフォンと Mobage Open Platform
23

2013年時点での Mobage Platform のゲームアーキテクチャ
 2013時点では Proxy/OpenSocial Gadget がメイン
24
Browser
Native
PC
Proxy
Smart Phone
OpenSocial Gadget
Native 系 SDK

2014年時点での Mobage Platform のゲームアーキテクチャ
 2014 年に新しいアーキテクチャとして NBPF を投入
⁃ Next Browser Platform
25
Browser
Native
PC
Proxy
Smart Phone
OpenSocial Gadget
Native 系 SDK
NBPF
ShellApp SDK for NBPF

What is NBPF
 Next Browser Platform
⁃ HTML5 ゲームに強力なマーケットを作る
 コンセプト
⁃ HTML5 ゲーム向けのマーケット & プラットフォーム & コミ
ュニティ
 マーケット
⁃ Mobage Platform のアーキテクチャに極力縛らず、様々な形
式の HTML5 ゲームが配信できる
 プラットフォーム
⁃ Mobage のユーザー基盤やコミュニティ、ゲーム向け機能(仮
想通貨など)とシームレスに連携
 コミュニティ
⁃ ゲーム向けコミュニティや、ゲーマー向けプロフィール、チャ
ット連携の強化
26

JS SDK
 Mobage との ID 連携及び認可を行う為のツールキット
⁃ Google+/Facebook の JavaScript SDK と似たインターフェ
ースになっています
⁃ NBPF 上でゲームを展開する際に利用する SDK です
 ゲームプラットフォームとしてゲームをサポートする機能と
の連携
⁃ アイテム決済機能
⁃ 友達招待機能
 ゲームコミュニティと連動する為の機能
⁃ チャット連携
 Web Apps の欠点を補う為の機能
⁃ 特にデバイスやOSへのアクセスが貧弱な点を補強
• ショートカットアイコン作成支援機能
• WebView で開かれた際のナビゲーション機能
27

独自ドメインで Mobage と ID 連携出来ます
1. 要ログインとなるまで、ログインを後回しに出来ます
1. (例) 購入ボタンでログインを求める
2. ユーザーによるログイン
3. アプリケーション利用同意
1. この時 ID 連携用の情報が返ってきます
2. ゲーム側のログインセッション発行をします
28
AP 回復薬
100モバコイン
購入
BP 回復薬
100モバコイン
購入
ショップ
mobageさん
AP 回復薬
100モバコイン
購入
BP 回復薬
100モバコイン
ショップ
ゲストさん
購入
mobageさんでログインしています
Battle Line
株式会社ディー・エヌ・エー
同意事項(必読)に同意してサービス利用を開始します。
マイゲームへの追加
友達へ知らせる
ゲーム開始
メールアドレス
パスワード
2389 別の画像を表示
ログイン
SNSアカウント使ってログイン or 登録
上記のSNSアカウントをお持ちで無い方やデータ引き
継ぎの方は次へをクリックして下さい。
パスワードを忘れた方 / ヘルプ / お問い
合わせ
(*) 上記SNSに勝手に投稿される事はありません
1 2
3

自由なクリエイティブ
 共通メニューの挿入がなくなりました
⁃ 全画面自由にデザインする事が出来ます
⁃ Mobage プラットフォームへの導線はメニューなどに入れて頂けば問題ありません
29

多様なマーケティング手法が使えます
 ログインレスだから出来る多用なマーケティング手法
⁃ SEO も独自に行う事が出来ます
⁃ Web 広告、ソーシャルメディア連携も
 ダウンロードレス・ログインレスでチュートリアルやゲームプレイも
⁃ ログイン/インストール CVR の向上が期待出来ます
30
MobageやDeNAのオウ
ンドメディアから
検索エンジン
Web 広告
ソーシャルメディア
LP チュートリアル
ダウンロードレス、
ログインレスで一気
にゲームの世界観に
引き込める！

世界観や操作感を阻害しないプラットフォーム連携
 アイテム購入画面などのページデザインを自由に選択出来ます
(*1)
 また購入画面などはオーバーレイでの表示で購入フローが進みますの
で、プレイ中などにシームレスにアイテム購入フローを差し込む事が
出来ます。
31
旧形式新形式

2015年の Mobage Platform のゲームアーキテクチャ
 2015 年は PC 領域に力を入れる事により、プラットフ
ォーム全体を盛り上げて行きます
32
Browser
Native
PC
Proxy
Smart Phone
OpenSocial Gadget
Native 系 SDK
NBPF
ShellApp SDK for iOS/Android

今後の Mobage Open Platform
33

直近の施策サマリ
 NBPF for PC の展開
⁃ NBPF で作られたタイトルを PC 上でも展開出来るよう開
発を進めています
 Shell App SDK for Chrome Apps
⁃ 先行するグランブルーファンタジーや神撃のバハムートの
ように Chrome Web Store で配信可能な SDK を
Proxy/NBPF 両方に対応する形で展開していきます
34

2015年の Mobage Platform のゲームアーキテクチャ
 Chrome Apps を加える事で Proxy/NBPF タイトルの両方が低コ
ストで PC 向けに配信可能になります
 また NBPF を正式に PC で展開出来るようになり、リーチ出来る
ユーザーが増えることが期待できます
35
Browser
Native
PC
Proxy
Smart Phone
OpenSocial Gadget
Native 系 SDK
NBPF
ShellApp SDK for iOS/Android ShellApp SDK for Chrome Apps

新しい市場の必要性
 SP Web
⁃ 旧来型のゲームが多く SP App に比べると表現力が低いと
思われがち
⁃ スマートフォンからの入り口であるブラウザがほとんど使
われていない
 SP App
⁃ 完全なるレッドオーシャン化
 何かの打ち手が必要
⁃ Mobage では PC に注力する事で新たな価値を創出出来る
のではないかと考えています
36

何故 PC なのか – 国内市場
 日本のゲームユーザー規模で言うと PC ゲームユーザー
はアプリゲームユーザーの約半数のユーザー数
37
http://www.famitsu.com/news/201506/12080664.html

何故 PC なのか – 海外市場
 世界的に見ても PC ゲームはまだ伸びると見られている
⁃ e-Sports やアジア圏での PC ゲームのブームが牽引すると言われてい
ます
38
http://www.gamespark.jp/article/2015/03/04/55302.html

今後のロードマップ
 2015年秋
⁃ NBPF for PC Browser を段階的に展開していきます
⁃ Shell App SDK for Chrome Apps のタイトルが順次ロー
ンチされていきます
 2015年春以降
⁃ PC App 向け SDK の展開予定
 これ以外にも様々な施策を展開予定です
39

PC App 向け SDK の狙い
 非 Mobage 系ゲームの取り込み
⁃ App Store/Google Play 等のスマートフォン向けマーケッ
トで出ている豊富なゲームがターゲット
⁃ 但しデバイスは PC という形で低コストで売上や認知に貢
献するような Platform を目指していきます
 続報は Developer Site や Developers Blog などで順次
展開していきます
40

ご清聴ありがとうございます
 ご質問等は事務局または担当営業経由でご相談下さい
 今後とも Mobage Open Platform をよろしくお願い致
します
41

革新的ブラウザゲームを支えるプラットフォーム技術

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a 革新的ブラウザゲームを支えるプラットフォーム技術

Semelhante a 革新的ブラウザゲームを支えるプラットフォーム技術 (20)

Mais de Toru Yamaguchi

Mais de Toru Yamaguchi (18)

Último

Último (8)

革新的ブラウザゲームを支えるプラットフォーム技術