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

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

Transcript

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

   View Slide

2. Copyright (C) ORATTA.INC. All Rights Reserved.
   会社概要
   2
   

   View Slide

3. Copyright (C) ORATTA.INC. All Rights Reserved.
   会社概要
   3
   みんなでORATTA(おらった)と
   呼び合える世界を作りたい
   ソーシャルゲーム黎明期に創業
   今年で8期⽬、現在70名程度
   完全独⽴系で毎年成⻑を続ける
   ⾃社開発ゲームベンチャー
   

   View Slide

4. Copyright (C) ORATTA.INC. All Rights Reserved.
   会社概要
   4
   

   View Slide

5. Copyright (C) ORATTA.INC. All Rights Reserved.
   メンバー構成
   5
   エンジニアが約半数
   

   View Slide

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

   View Slide

7. Copyright (C) ORATTA.INC. All Rights Reserved.
   まとめ
   7
   また
   ブラウザアプリの時代が
   来ます!
   

   View Slide

8. Copyright (C) ORATTA.INC. All Rights Reserved.
   今回の講演内容
   8
   

   View Slide

9. Copyright (C) ORATTA.INC. All Rights Reserved.
   ソーシャルゲーム市場予測(2014年データ)
   9
   @seeソーシャルゲーム市場の変遷から⾒る。今、求められるクリエイターとは？
   https://career.levtech.jp/hikalab/report/detail/26/
   2014年予測ではネイティブ増、ブラウザ減
   

   View Slide

10. 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/
    実際はそこまでブラウザが死ななかった
    

    View Slide

11. Copyright (C) ORATTA.INC. All Rights Reserved.
    ゲームに関するアンケート(2015年)
    11
    @see gloops、ブラウザゲーム市場に関する調査を発表 ブラウザゲーム市場はこのまま後退していくのか？
    http://gamebiz.jp/?p=155871
    ユーザーはネイティブ・ブラウザのこだわりはない?
    

    View Slide

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

    View Slide

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

    View Slide

14. Copyright (C) ORATTA.INC. All Rights Reserved.
    PWAとは?
    14
    Progressive
    Web
    App
    

    View Slide

15. Copyright (C) ORATTA.INC. All Rights Reserved.
    PWAとは?
    15
    先進的
    ウェブ
    アプリケーション
    Progressive
    Web
    App
    

    View Slide

16. Copyright (C) ORATTA.INC. All Rights Reserved.
    “先進的“の定義
    16
    先進的
    ウェブ
    アプリケーション
    Progressive
    Web
    App
    

    View Slide

17. Copyright (C) ORATTA.INC. All Rights Reserved.
    “先進的“の定義
    17
    モバイルWebサイトで
    ネイティブアプリと
    相違ないユーザー体験
    を実現すること
    =先進的
    ウェブ
    アプリケーション
    

    View Slide

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

    View Slide

19. 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)
    

    View Slide

20. Copyright (C) ORATTA.INC. All Rights Reserved.
    なぜ今まで普及しなかったのか?
    20
    話を聞く限り
    むっちゃよさそう!
    なぜ今まで
    普及しなかったのか?
    

    View Slide

21. Copyright (C) ORATTA.INC. All Rights Reserved.
    なぜ今まで普及しなかったのか?
    21
    Appleが
    なかなか対応して
    くれなかった
    

    View Slide

22. 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通知
    

    View Slide

23. Copyright (C) ORATTA.INC. All Rights Reserved.
    今回の講演内容
    23
    

    View Slide

24. Copyright (C) ORATTA.INC. All Rights Reserved.
    Twitter Liteの成功でPWA元年と⾔われている
    24
    2017年はPWA元年と⾔われている
    ・Twitter Liteの成功
    

    View Slide

25. 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/
    

    View Slide

26. Copyright (C) ORATTA.INC. All Rights Reserved.
    なんと今年8⽉...
    26
    @see iOS がプログレッシブ ウェブ アプリをサポートする可能性が浮上
    https://www.suzukikenichi.com/blog/ios-is-likely-to-support-service-worker/
    

    View Slide

27. 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
    

    View Slide

28. 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
    

    View Slide

29. Copyright (C) ORATTA.INC. All Rights Reserved.
    市場は既に準備に⼊っている
    29
    

    View Slide

30. Copyright (C) ORATTA.INC. All Rights Reserved.
    ORATTAも参画表明しています
    30
    @see 「Yahoo!ゲーム ゲームプラス」発表会からタイトル紹介をピックアップ
    https://game.watch.impress.co.jp/docs/news/1071172.html
    

    View Slide

31. Copyright (C) ORATTA.INC. All Rights Reserved.
    じゃあORATTAはどうするのか?
    31
    ORATTAの今後
    ブラウザゲームは?
    ネイティブゲームは?
    

    View Slide

32. Copyright (C) ORATTA.INC. All Rights Reserved.
    じゃあORATTAはどうするのか?
    32
    ORATTAの今後
    ブラウザゲームは?
    ネイティブゲームは?
    ↓
    技術で同時開発・リリースします!
    

    View Slide

33. Copyright (C) ORATTA.INC. All Rights Reserved.
    アスカZERO Web版鋭意開発中!
    33
    

    View Slide

34. Copyright (C) ORATTA.INC. All Rights Reserved.
    公開NGがでてしまいましたが....
    34
    PCブラウザアプリを
    既に1本リリース済み
    SPブラウザでも動きます!
    (正式リリースはまだ)
    

    View Slide

35. 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
    

    View Slide

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

    View Slide

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

    View Slide

38. Copyright (C) ORATTA.INC. All Rights Reserved.
    まとめ
    38
    また
    ブラウザアプリの時代が
    来ます!
    

    View Slide

39. Copyright (C) ORATTA.INC. All Rights Reserved.
    弊社でのリンクベアメタルクラウド導⼊事例
    39
    

    View Slide

40. Copyright (C) ORATTA.INC. All Rights Reserved.
    安定運⽤タイトルなので予算が組みやすいのはメリット
    40
    • 転送量が⽉間平均100Mbpsまで無料
    • ⽉初やアプリ更新時だけ転送量が多い
    • 平均100MbpsならスパイクもOK
    • 物理サーバーのリソース内ならVM起動⾃由
    • 構成を変えても物理の台数を変えなければOK
    

    View Slide

41. Copyright (C) ORATTA.INC. All Rights Reserved.
    ありがとうございました
    41
    https://recruit.oratta.net/
    

    View Slide