Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jun Watanabe
October 27, 2017

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

Presented on
アプリからブラウザへ スマホゲームに起きている地殻変動とは!?
https://baremetal.jp/seminar/20171027detail.html
2017/10/27

Jun Watanabe

October 27, 2017
Tweet

More Decks by Jun Watanabe

Other Decks in Technology

Transcript

  1. Copyright (C) ORATTA.INC. All Rights Reserved. 会社概要 3 みんなでORATTA(おらった)と 呼び合える世界を作りたい

    ソーシャルゲーム黎明期に創業 今年で8期⽬、現在70名程度 完全独⽴系で毎年成⻑を続ける ⾃社開発ゲームベンチャー
  2. Copyright (C) ORATTA.INC. All Rights Reserved. スピーカー 株式会社ORATTA エンジニアリーダー 渡辺

    淳 Jun Watanabe 90年⽣まれ, 北海道出⾝, 専⾨学校東京ネットウエイブ卒 創業年度(2010年)新卒⼊社で、3年⽬よりエンジニアリーダーを務める。 業務領域 : 開発/運⽤、技術選定、社内インフラ, メンバー育成 技術興味 : DevOps, ChatBot, IoT, トイレ 6
  3. 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/ 実際はそこまでブラウザが死ななかった
  4. Copyright (C) ORATTA.INC. All Rights Reserved. ゲームに関するアンケート(2015年) 11 @see gloops、ブラウザゲーム市場に関する調査を発表

    ブラウザゲーム市場はこのまま後退していくのか? http://gamebiz.jp/?p=155871 ユーザーはネイティブ・ブラウザのこだわりはない?
  5. Copyright (C) ORATTA.INC. All Rights Reserved. ネイティブは開発期間・費⽤の⾼騰 12 ネイティブ市場は競争過多 •

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

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

    相違ないユーザー体験 を実現すること =先進的 ウェブ アプリケーション
  8. Copyright (C) ORATTA.INC. All Rights Reserved. PWAの特徴 18 • ネイティブアプリ⾵のUIを実現

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

    がプログレッシブ ウェブ アプリをサポートする可能性が浮上 https://www.suzukikenichi.com/blog/ios-is-likely-to-support-service-worker/
  13. 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
  14. 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
  15. Copyright (C) ORATTA.INC. All Rights Reserved. ORATTAも参画表明しています 30 @see 「Yahoo!ゲーム

    ゲームプラス」発表会からタイトル紹介をピックアップ https://game.watch.impress.co.jp/docs/news/1071172.html
  16. 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
  17. Copyright (C) ORATTA.INC. All Rights Reserved. 開発のポイント 36 Webサービスのツールがそのまま使える •

    Googleアナリティクス - アクセス解析ツール • 継続率や同時接続数など多彩なデータが取れる ネイティブにしかないツールも開発元と協⼒して導⼊ • SmartBeat -スマホアプリのクラッシュ解析ツール • OPTPiX SpriteStudio - 2Dスプライトアニメーション作成ツール
  18. Copyright (C) ORATTA.INC. All Rights Reserved. まとめ 37 • 市場はこれから⼤きくなると予測

    • Yahoo, バンナム, 楽天, DMM... • 競争過多なネイティブからの脱出 • 開発期間・費⽤を押さえられる • 競合が(まだ)少ないので⼀歩先に⾏けるかも • スタートダッシュを切るために先⾏投資 • Cocos2d-x(JS)を活⽤ • 他社とも協⼒して体制構築 • 多彩な導線を確保 • PC Web, SP Web, iOS, Androidを同時開発
  19. Copyright (C) ORATTA.INC. All Rights Reserved. 安定運⽤タイトルなので予算が組みやすいのはメリット 40 • 転送量が⽉間平均100Mbpsまで無料

    • ⽉初やアプリ更新時だけ転送量が多い • 平均100MbpsならスパイクもOK • 物理サーバーのリソース内ならVM起動⾃由 • 構成を変えても物理の台数を変えなければOK