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

Copyright (C) DeNA Co.,Ltd. All Rights Reserved.

Web の進化は止まらない

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

DeNAxgloops 合同セミナー

最先端ブラウザゲームへの挑戦

~ ブラウザゲームの表現がここまで進化した ~

October 29, 2015

Toru YamaguchiSenior Architect, Sub Business Unit HeadOpen Platform Business UnitDeNA 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

http://www.breakingbyte.com/

http://www.breakingbyte.com/exp3d/demo/


EXP3D の JavaScript/WebGL 対応

実は OSS になっています⁃ https://github.com/acourreges/exp3d

上記のページ中の Details に分かりやすい説明があります

6

https://github.com/acourreges/exp3d


Foggy Shore - Unity5 x WebGL

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

7

https://twitter.com/alexanderocias

https://twitter.com/alexanderocias

https://ocias.com/games/foggy-shore/


Unity5 の JavaScript/WebGL 対応

Unity5 はランタイムとユーザーコードを幾つかのステップを経て JavaScript (asm.js) に変換する⁃ 実際の動作は asm.js が各ブラウザでどれくらい速度が出

るかという問題になる

8

UnityRuntime

User Code

C/C++ LLVM-IR

JavaScript(asm.js)

C#/Unity ScriptCIL

(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

ResourceServer

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

https://simple-push-demo.appspot.com/

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

http://www.famitsu.com/news/201506/12080664.html


何故 PC なのか – 海外市場

世界的に見ても PC ゲームはまだ伸びると見られている⁃ e-Sports やアジア圏での PC ゲームのブームが牽引すると言われています

38

http://www.gamespark.jp/article/2015/03/04/55302.html

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

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

Technology

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