またブラウザアプリの時代が来る！？ORATTAが考えるこれからのゲーム開発戦略とは / oratta_webapp_pwa

Slide 1

Slide 1 text

またブラウザアプリの時代が来る！？ ORATTAが考えるこれからのゲーム開発戦略とは株式会社ORATTA 2017/10/27(⾦) 株式会社リンクさん主催セミナー「アプリからブラウザへスマホゲームに起きている地殻変動とは！？」エンジニアリーダー渡辺淳

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Copyright (C) ORATTA.INC. All Rights Reserved. スピーカー株式会社ORATTA エンジニアリーダー渡辺淳 Jun Watanabe 90年⽣まれ, 北海道出⾝, 専⾨学校東京ネットウエイブ卒創業年度(2010年)新卒⼊社で、3年⽬よりエンジニアリーダーを務める。業務領域 : 開発/運⽤、技術選定、社内インフラ, メンバー育成技術興味 : DevOps, ChatBot, IoT, トイレ 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright (C) ORATTA.INC. All Rights Reserved. DMM GAMES 消費内訳(2017年9⽉) 10 @see ［TGS 2017］DMM GAMESの“いま”から，⽇本の「PCゲーム市場のいま」が垣間⾒える？その売上から海外戦略が語られた講演をレポート http://www.4gamer.net/games/999/G999905/20170921088/ 実際はそこまでブラウザが死ななかった

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright (C) ORATTA.INC. All Rights Reserved. ネイティブは開発期間・費⽤の⾼騰 13 ネイティブ市場は競争過多 • 開発期間・費⽤の⾼騰 • 初動はAppランキングが命 • ⾼額なプロモーション費⽤が必要 • クオリティを担保しないと埋もれるブラウザ市場は競争相⼿が少なく • ネイティブと⽐べて演出等が劣る • →PWAで解決 • Appランキングに相当するものがない • →新規プラットフォームが次々にリリース

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Copyright (C) ORATTA.INC. All Rights Reserved. PWAの特徴 18 • ネイティブアプリ⾵のUIを実現 • ブラウザバー等を⾮表⽰に • ホーム画⾯に追加 →アプリインストール⾵ • アプリアイコンの設定 • 起動スプラッシュ画⾯の設定 • ページの読み込み、表⽰速度の向上 • オフラインでも動作する • PUSH通知の利⽤ • GPSの利⽤ • アプリに⽐べて更新が容易 • Webページなのでいつでも更新できる • ストア審査不要 • Apple, Googleがボトルネックにならない • R-18コンテンツ等もリリースできる • インストール不要 • 最初のインストールというハードルがない • アンインストールされない(当たり前ですが)

Slide 19

Slide 19 text

Copyright (C) ORATTA.INC. All Rights Reserved. PWAとは? 19 GoogleのAlex Russell⽒が提唱具体的には以下のような技術を組み合わせる • Service Worker(最重要) Webページを開いていなくてもJavaScriptを実⾏出来る + 強⼒なキャッシュ管理でローカル動作を可能にする • Background Sync 裏でデータ取得など • Web Push Notifications PUSH通知 • IndexedDB • ブラウザ保存のデータベース • History API • ブラウザの戻る、進むの挙動を差し替え • Geolocation API • 現在地取得など(GPS)

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Copyright (C) ORATTA.INC. All Rights Reserved. なぜ今まで普及しなかったのか? 22 SafariがPWAで⼀番重要なService Workerに⾮対応だった Safari⾮対応 = iOS⾮対応 Androidしかリリース出来ない... • Service Worker(最重要) Webページを開いていなくてもJavaScriptを実⾏出来る + 強⼒なキャッシュ管理でローカル動作を可能にする • Background Sync 裏でデータ取得など • Web Push Notifications PUSH通知

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Copyright (C) ORATTA.INC. All Rights Reserved. WebページのKPIが⼤幅上昇 25 更に... @see PWA対応したTwitterは毎⽇100万のユーザーがホーム画⾯アイコン経由 #IO17JP https://www.suzukikenichi.com/blog/twitter-lite-gets-1m-users-via-homescreen-icon-everyday/

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright (C) ORATTA.INC. All Rights Reserved. iOS12でとうとう実装される? 27 2017/08/03 ステータスが開発中に 2017/08/24 Safari Technology Preview 38 (Mac版) Service Worker仮実装(未公表) iOS12で実装されるのではないかと期待 @see Safari Technology Preview 38⽀持Service Worker，需⼿动开启 https://zhuanlan.zhihu.com/p/28780851

Slide 28

Slide 28 text

Copyright (C) ORATTA.INC. All Rights Reserved. PWAの今後 28 Android / Google Chromeだけならもっと先の実装まで⼊っている • Google One tap sign-up and automatic sign-in • Webページ上でOSのGoogleログイン画⾯を出す • Fullscreen API • フルスクリーン表⽰ • Web Share API • OS側のSNSシェア画⾯を出す • Media Session API • Webページ上で再⽣中の⾳楽をOS側で制御(次へで違う曲を流す等) • Web Bluetooth API • Web USB API • Webページ上でUSBやBluetoothを利⽤する • Performance API • Navigation Timing API • Network Information API • HTTP Client Hints • 通信速度やメモリ使⽤量等に応じて処理を切り替えるなど • WebVR • Webページ上でVR演出(ハコスコ等利⽤) @see What's Next for the Web (GDD Europe '17) https://www.youtube.com/watch?v=qnI2S_9TN-8

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Copyright (C) ORATTA.INC. All Rights Reserved. 開発のポイント 35 開発期間の短縮! エンジンにCocos2d-x(JS)を採⽤ • Webページなのでビルドの必要がない • 直してすぐ動作確認できる! • ⾊々な施策をすぐ試せる! • 1つのコードでiOS, Android, PC Web, SP Webが実現 • ネイティブアプリとしてもリリース出来る • ⽇本での実績はあまりない @see スマホゲーム開発をCocos2d-x(JS)で⾏うべき最⼤の理由 http://tks2.net/memo/?p=453

Slide 36

Slide 36 text

Copyright (C) ORATTA.INC. All Rights Reserved. 開発のポイント 36 Webサービスのツールがそのまま使える • Googleアナリティクス - アクセス解析ツール • 継続率や同時接続数など多彩なデータが取れるネイティブにしかないツールも開発元と協⼒して導⼊ • SmartBeat -スマホアプリのクラッシュ解析ツール • OPTPiX SpriteStudio - 2Dスプライトアニメーション作成ツール

Slide 37

Slide 37 text

Copyright (C) ORATTA.INC. All Rights Reserved. まとめ 37 • 市場はこれから⼤きくなると予測 • Yahoo, バンナム, 楽天, DMM... • 競争過多なネイティブからの脱出 • 開発期間・費⽤を押さえられる • 競合が(まだ)少ないので⼀歩先に⾏けるかも • スタートダッシュを切るために先⾏投資 • Cocos2d-x(JS)を活⽤ • 他社とも協⼒して体制構築 • 多彩な導線を確保 • PC Web, SP Web, iOS, Androidを同時開発