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

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

Transcript

1. またブラウザアプリの時代が来る！？ ORATTAが考えるこれからのゲーム開発戦略とは 株式会社ORATTA 2017/10/27(⾦) 株式会社リンクさん主催セミナー 「アプリからブラウザへ スマホゲームに起きている地殻変動とは！？」 エンジニアリーダー 渡辺 淳
2. Copyright (C) ORATTA.INC. All Rights Reserved. 会社概要 2
3. Copyright (C) ORATTA.INC. All Rights Reserved. 会社概要 3 みんなでORATTA(おらった)と 呼び合える世界を作りたい ソーシャルゲーム黎明期に創業 今年で8期⽬、現在70名程度 完全独⽴系で毎年成⻑を続ける ⾃社開発ゲームベンチャー
4. Copyright (C) ORATTA.INC. All Rights Reserved. 会社概要 4
5. Copyright (C) ORATTA.INC. All Rights Reserved. メンバー構成 5 エンジニアが約半数
6. Copyright (C) ORATTA.INC. All Rights Reserved. スピーカー 株式会社ORATTA エンジニアリーダー 渡辺 淳 Jun Watanabe 90年⽣まれ, 北海道出⾝, 専⾨学校東京ネットウエイブ卒 創業年度(2010年)新卒⼊社で、3年⽬よりエンジニアリーダーを務める。 業務領域 : 開発/運⽤、技術選定、社内インフラ, メンバー育成 技術興味 : DevOps, ChatBot, IoT, トイレ 6
7. Copyright (C) ORATTA.INC. All Rights Reserved. まとめ 7 また ブラウザアプリの時代が 来ます!
8. Copyright (C) ORATTA.INC. All Rights Reserved. 今回の講演内容 8
9. Copyright (C) ORATTA.INC. All Rights Reserved. ソーシャルゲーム市場予測(2014年データ) 9 @seeソーシャルゲーム市場の変遷から⾒る。今、求められるクリエイターとは？ https://career.levtech.jp/hikalab/report/detail/26/ 2014年予測ではネイティブ増、ブラウザ減
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/ 実際はそこまでブラウザが死ななかった
11. Copyright (C) ORATTA.INC. All Rights Reserved. ゲームに関するアンケート(2015年) 11 @see gloops、ブラウザゲーム市場に関する調査を発表 ブラウザゲーム市場はこのまま後退していくのか？ http://gamebiz.jp/?p=155871 ユーザーはネイティブ・ブラウザのこだわりはない?
12. Copyright (C) ORATTA.INC. All Rights Reserved. ネイティブは開発期間・費⽤の⾼騰 12 ネイティブ市場は競争過多 • 開発期間・費⽤の⾼騰 • 初動はAppランキングが命 • ⾼額なプロモーション費⽤が必要 • クオリティを担保しないと埋もれる ブラウザ市場は競争相⼿が少なく • ネイティブと⽐べて演出等が劣る • Appランキングに相当するものがない
13. Copyright (C) ORATTA.INC. All Rights Reserved. ネイティブは開発期間・費⽤の⾼騰 13 ネイティブ市場は競争過多 • 開発期間・費⽤の⾼騰 • 初動はAppランキングが命 • ⾼額なプロモーション費⽤が必要 • クオリティを担保しないと埋もれる ブラウザ市場は競争相⼿が少なく • ネイティブと⽐べて演出等が劣る • →PWAで解決 • Appランキングに相当するものがない • →新規プラットフォームが次々にリリース
14. Copyright (C) ORATTA.INC. All Rights Reserved. PWAとは? 14 Progressive Web App
15. Copyright (C) ORATTA.INC. All Rights Reserved. PWAとは? 15 先進的 ウェブ アプリケーション Progressive Web App
16. Copyright (C) ORATTA.INC. All Rights Reserved. “先進的“の定義 16 先進的 ウェブ アプリケーション Progressive Web App
17. Copyright (C) ORATTA.INC. All Rights Reserved. “先進的“の定義 17 モバイルWebサイトで ネイティブアプリと 相違ないユーザー体験 を実現すること =先進的 ウェブ アプリケーション
18. Copyright (C) ORATTA.INC. All Rights Reserved. PWAの特徴 18 • ネイティブアプリ⾵のUIを実現 • ブラウザバー等を⾮表⽰に • ホーム画⾯に追加 →アプリインストール⾵ • アプリアイコンの設定 • 起動スプラッシュ画⾯の設定 • ページの読み込み、表⽰速度の向上 • オフラインでも動作する • PUSH通知の利⽤ • GPSの利⽤ • アプリに⽐べて更新が容易 • Webページなのでいつでも更新できる • ストア審査不要 • Apple, Googleがボトルネックにならない • R-18コンテンツ等もリリースできる • インストール不要 • 最初のインストールというハードルがない • アンインストールされない(当たり前ですが)
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)
20. Copyright (C) ORATTA.INC. All Rights Reserved. なぜ今まで普及しなかったのか? 20 話を聞く限り むっちゃよさそう! なぜ今まで 普及しなかったのか?
21. Copyright (C) ORATTA.INC. All Rights Reserved. なぜ今まで普及しなかったのか? 21 Appleが なかなか対応して くれなかった
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通知
23. Copyright (C) ORATTA.INC. All Rights Reserved. 今回の講演内容 23
24. Copyright (C) ORATTA.INC. All Rights Reserved. Twitter Liteの成功でPWA元年と⾔われている 24 2017年はPWA元年と⾔われている ・Twitter Liteの成功
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/
26. Copyright (C) ORATTA.INC. All Rights Reserved. なんと今年8⽉... 26 @see iOS がプログレッシブ ウェブ アプリをサポートする可能性が浮上 https://www.suzukikenichi.com/blog/ios-is-likely-to-support-service-worker/
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
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
29. Copyright (C) ORATTA.INC. All Rights Reserved. 市場は既に準備に⼊っている 29
30. Copyright (C) ORATTA.INC. All Rights Reserved. ORATTAも参画表明しています 30 @see 「Yahoo!ゲーム ゲームプラス」発表会からタイトル紹介をピックアップ https://game.watch.impress.co.jp/docs/news/1071172.html
31. Copyright (C) ORATTA.INC. All Rights Reserved. じゃあORATTAはどうするのか? 31 ORATTAの今後 ブラウザゲームは? ネイティブゲームは?
32. Copyright (C) ORATTA.INC. All Rights Reserved. じゃあORATTAはどうするのか? 32 ORATTAの今後 ブラウザゲームは? ネイティブゲームは? ↓ 技術で同時開発・リリースします!
33. Copyright (C) ORATTA.INC. All Rights Reserved. アスカZERO Web版鋭意開発中! 33
34. Copyright (C) ORATTA.INC. All Rights Reserved. 公開NGがでてしまいましたが.... 34 PCブラウザアプリを 既に1本リリース済み SPブラウザでも動きます! (正式リリースはまだ)
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
36. Copyright (C) ORATTA.INC. All Rights Reserved. 開発のポイント 36 Webサービスのツールがそのまま使える • Googleアナリティクス - アクセス解析ツール • 継続率や同時接続数など多彩なデータが取れる ネイティブにしかないツールも開発元と協⼒して導⼊ • SmartBeat -スマホアプリのクラッシュ解析ツール • OPTPiX SpriteStudio - 2Dスプライトアニメーション作成ツール
37. Copyright (C) ORATTA.INC. All Rights Reserved. まとめ 37 • 市場はこれから⼤きくなると予測 • Yahoo, バンナム, 楽天, DMM... • 競争過多なネイティブからの脱出 • 開発期間・費⽤を押さえられる • 競合が(まだ)少ないので⼀歩先に⾏けるかも • スタートダッシュを切るために先⾏投資 • Cocos2d-x(JS)を活⽤ • 他社とも協⼒して体制構築 • 多彩な導線を確保 • PC Web, SP Web, iOS, Androidを同時開発
38. Copyright (C) ORATTA.INC. All Rights Reserved. まとめ 38 また ブラウザアプリの時代が 来ます!
39. Copyright (C) ORATTA.INC. All Rights Reserved. 弊社でのリンクベアメタルクラウド導⼊事例 39
40. Copyright (C) ORATTA.INC. All Rights Reserved. 安定運⽤タイトルなので予算が組みやすいのはメリット 40 • 転送量が⽉間平均100Mbpsまで無料 • ⽉初やアプリ更新時だけ転送量が多い • 平均100MbpsならスパイクもOK • 物理サーバーのリソース内ならVM起動⾃由 • 構成を変えても物理の台数を変えなければOK
41. Copyright (C) ORATTA.INC. All Rights Reserved. ありがとうございました 41 https://recruit.oratta.net/