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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    技術で同時開発・リリースします!

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide