Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

携帯電話時代から続くモバイルゲームとアプリの関係

Download to read offline

GREE Tech Conference 2020 で発表された資料です。
https://techcon.gree.jp/2020/session/Session-5

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

携帯電話時代から続くモバイルゲームとアプリの関係

  1. 1. 携帯電話時代から続く モバイルゲームと アプリの関係 グリー株式会社 リードエンジニア 和田孝尚
  2. 2. • 2011年 グリー株式会社 入社 • 2013年 釣り★スタ チーム 所属 自己紹介 2 和田孝尚 リードエンジニア アプリチーム所属 主にアプリ側を全般的に担当
  3. 3. つかみのコーナー 3 運動不足の季節
  4. 4. 楽したい 無理しても続かないし 4
  5. 5. できるかな 5 コ
  6. 6. 6 ⓘ Start presenting to display the poll results on this slide. 手がコの字に曲がる?
  7. 7. 毎日コツコツ 7 負荷 30
  8. 8. この数字の意味するものは? 8 13
  9. 9. 今年で13周年 9
  10. 10. 楽したい 今回のキーワード 10
  11. 11. まずは 11
  12. 12. だいたいの流れ 12 1.サービスの説明 1.アプリ開発 と 今までの流れ 1.アプリ開発 と 現在の状況
  13. 13. • 2007年5月サービス開始 • 世界初のモバイルソーシャルゲーム • アプリは2011年から提供 釣り★スタとは 13
  14. 14. 画面サンプル 14
  15. 15. ブラウザゲー ム どうみても 15
  16. 16. なんですけど 16
  17. 17. アクションゲーム 魚釣り部分は 17
  18. 18. ふむふむ歴史コーナー 18 2007年〜 FlashLite みなさんよくご存知の 2011年〜 JavaScript 職人によるCanvas操作 2013年〜 LWF* SWFをHTML5処理に変換 2015年〜 XXXXXXX ここが今回のお話 魚釣りのアクション部分実装の歴史 *LWF(LightWeightSWF)GREE開発のフレームワーク
  19. 19. シンプルなWebViewアプリ リリース当初は 19
  20. 20. 現在は 20
  21. 21. きっかけは 21
  22. 22. • 一部機種でタップ遅延が発生 • アニメーション類もモッサリ 何が起きた 22
  23. 23. アクションゲーム 釣り★スタはあくまでも 23
  24. 24. すべてのユーザに 等しい体験を 掲げられた目標 24
  25. 25. ネイティブ化 というわけで提案 25
  26. 26. ネイティブ処理部分で トラブルを起こさない 条件がある 26
  27. 27. ユーザの離脱が怖いから いつでも元に戻せる さらにいうと 27
  28. 28. Webアプリ なのでは? それって 28
  29. 29. 楽できなそ う 提案したものの 29
  30. 30. アプリの審査 最大のネックは 30
  31. 31. • 審査期間の待ちでサービスを止めな い • いつでも以前の状態に切り替え可能 • サービス運用に影響しない仕組み 要求をまとめると 31
  32. 32. 可能なのか? そもそも 32
  33. 33. 開発のおはなし というわけで 33 2014年頃
  34. 34. 2013年当時の状況おさらい 34 環境 言語 処理内容 Android Java GREE-SDK(WebView) iOS Objective-C GREE-SDK(WebView) 普通だ
  35. 35. • あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい アプリの基本 35
  36. 36. cocos2dやってた流れで 36
  37. 37. Cocos2d-JS 突然の 37
  38. 38. • JavaScriptでcocos2dxの処理を記述 • Webでも動く?(PC以外は厳しそう • iOS/Android同時に開発できそう ざっくり紹介 38
  39. 39. ビルド アプリなので 39 伏線
  40. 40. • 書くものがC++からJavaScriptに • JavaScriptのエンジン分処理が追加 • デバッグが手間 ざっくりな印象 40 伏線
  41. 41. ブラウザ上の動作 41
  42. 42. • 実機固有の処理は不可能 • 完全に同じ処理は動かない • いざとなったらWebアプリにでき る? 当時の感想です 42
  43. 43. 運用 絶賛稼働中 43
  44. 44. 現状の運用範囲内に収まるのか? 現実的な問題 44 画像等の素材は極力、既存の物を利用 アプリ用の素材は必要最低限に抑える 伏線
  45. 45. • サーバ側の処理は基本そのまま • HTMLをjson等に変更するイメージ 稼働中の処理を考慮 45
  46. 46. アプリは受け皿 方向性として 46
  47. 47. • あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい 要求のふりかえり 47
  48. 48. • アプリ側はあくまでWebベース • 命令は基本的にサーバ側主導 • 変更する可能性の表示物を排除 要求に対しての 48
  49. 49. • あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい 要求のふりかえり 49 問題解決
  50. 50. というわけで 50
  51. 51. アンケートタイム 運命の選択 51
  52. 52. • リソース管理で楽をする • JavaScript開発で楽をする • 開発環境で楽をする おしながき 52
  53. 53. 53 ⓘ Start presenting to display the poll results on this slide. どのはなしにしよう
  54. 54. • 1:リソース管理で楽をする • 2:JavaScript開発で楽をする • 3:開発環境で楽をする おしながき 54
  55. 55. リソース管理で楽をする 膨大な画像量とリソース管理 55 2014年〜現在
  56. 56. ユーザの各所持アイテム 56
  57. 57. 開発時点で7年分 来年で14周年 57 2014年
  58. 58. 都度ダウンロードする方針 さすがに 58
  59. 59. 無理 そもそもできるんだっけ? 59
  60. 60. • 通信処理XMLHttpRequestのみ • 内部的に文字列に強制変換 • 今は違います(開発時の問題 できること自体は限られている 60
  61. 61. ないなら作れの精神 欲しいもの 61
  62. 62. • JSで存在するものしか実装できない • 必要な処理はC++で実装 • C++の実装をJavaScriptから呼ぶ 結局書くんだC++ 62
  63. 63. JavaScript-Binding 略してJSB 63
  64. 64. コード実装 64 JSClass js_class = { "ImageLoader", JSCLASS_HAS_PRIVATE, JS_PropertyStub, JS_DeletePropertyStub, JS_PropertyStub, JS_StrictPropertyStub, JS_EnumerateStub, JS_ResolveStub, JS_ConvertStub, basic_object_finalize 〜中略〜 static JSFunctionSpec funcs[] = { JS_BINDED_FUNC_FOR_DEF(ImageLoader, loadURL), JS_FS_END };
  65. 65. 楽できない 痒いとこに手が届かない 65
  66. 66. 現在へ 楽チンポイント 66 50楽チン
  67. 67. 言語ひとつで 67 JavaScript開発で楽をする 2014年頃
  68. 68. 多分無理 ここは素直に 68
  69. 69. 関連ライブラリへの対応 ですよね 69
  70. 70. • 既に動いているライブラリ等 • 既に稼働中のアプリ内の認証 • 新規開発のようで違う そもそも 70
  71. 71. • iOS固有処理はObj-C • Android固有処理はjava • C++とObj-C(Obj-C++) • C++とJava(JNI) 結局js以外も書くんだ 71
  72. 72. 結局のところ 72 iOSのプロジェクト Androidのプロジェクト Cocos2dx Cocos2d-js Objective-C JAVA 増えた部分
  73. 73. 安定してしまえば 書くのはJavaScriptのみ とはいえ 73
  74. 74. Web系の部署なので JavaScriptなら人員確保しやすい? 技術的な難易度は問題なし 74 母体となる原型の処理への理解も必要 そもそも言語的な経験者少数
  75. 75. 楽できない 知識範囲がそこそこ必要 75
  76. 76. 現在へ 楽チンポイント 76 35楽チン
  77. 77. よろしくおねがいします 77 開発環境で楽をする 2014年頃
  78. 78. 古い画像しかないんですが 78
  79. 79. アレっぽい 79
  80. 80. 実は存在した運命の選択 80
  81. 81. 2014年当時の 81 • 当時のバージョン4 • サポート範囲 不一致 • 古い端末だと少し厳しい • 当時のバージョン2.2 • サポート範囲 一致 • 古い端末でもそこそこ動く
  82. 82. サポート範囲だけ見ると 82
  83. 83. 提供 終了 突然の 83
  84. 84. デバッグできて便利 84
  85. 85. 更新の度にビルドしたくない せっかく使うなら 85
  86. 86. そもそも 86 JS Xcodeのプロジェクト JS ビルドされたアプリ
  87. 87. 参照しているファイルはそもそも別物 そりゃそうじゃ 87
  88. 88. だったら 88 JS Xcodeのプロジェクト JS ビルドされたアプリ
  89. 89. コード実装 89 let project_path = "XXXX/Project/"; let develop_path = project_path+"DebugFiles/DevelopJS/"; let appFiles = [ developPath + "XXXXX.js", developPath + "YYYYY.js", developPath + "ZZZZZ.js" ]; for(let i=0; i<appFiles.length; i++) { require(appFiles[i]); }
  90. 90. 直接編集しても動作は変わらず もうひとこえ 90
  91. 91. もう一回requireすればいけるのでは? おそらく 91
  92. 92. コード実装 92 js_list.forEach((js_file)=>{ sys.cleanScript(js_file); }); cc.director.purgeCachedData(); sys.garbageCollect(); cc.game.run();
  93. 93. • cleanScriptでrequireした内容を消去 • メモリ上のキャッシュや値を初期化 • シミュレータのみ利用可能 動いた 93
  94. 94. 現在へ 楽チンポイント 94 -120楽チ ン
  95. 95. 最近のはなし 95 開発資産の活用 2018-2019年
  96. 96. 仕事の合間にコソコソ作成 96
  97. 97. • 実装時の表示物配置が一番時間かかる • 定型文はどの画面も共通とする • デザイン案から見えない部分のみ実装 新規開発時の問題に取り組む 97
  98. 98. こんな感じに 98
  99. 99. • ツール内でテンプレソース埋め込み • 問題解決したら特定の行を削除 • 全部消えたら、一通り開発完了 お手本をどう探すのかも対応 99
  100. 100. 楽チンポイント 100 117楽チン
  101. 101. Metal 順調そうに見えるけど 101
  102. 102. 新バージョンで消滅 102 jsのプロジェク ト生成できない 2019-2020年
  103. 103. どこかでお会いしたような 103
  104. 104. • CocosCreatorからCocos2d-JS • ベースはWeb、アプリも出力可能 • JavaScriptの記述周りけっこう別物 新世界 104
  105. 105. 大ピンチ 楽できない! 105
  106. 106. ほんとにこれ時間内に収まるの? 106
  107. 107. ARカメラ キーワードは 107
  108. 108. だいたいの流れ 108 1.サービスの説明 1.カメラ処理の提案 1.カメラ周りの開発
  109. 109. • 2007年7月サービス開始 • 育成シミュレーションゲーム • アプリは2011年から提供 踊り子クリノッペとは 109
  110. 110. こんな感じ 110
  111. 111. ブラウザゲー ム どうみても 111 2度目
  112. 112. シンプルなWebViewアプリ リリース当初から 112 2度目
  113. 113. ARカメラ つくりたい 113 2020年
  114. 114. やりたいこと 114 +
  115. 115. アプリ実装 したくない 正直なところ 115
  116. 116. Android 絶対めんどくさい 特に 116
  117. 117. 楽したい どうにかして 117
  118. 118. 考えるんだ 118 環境 言語 処理内容 Android Java GREE-SDK(WebView) iOS Objective-C GREE-SDK(WebView) 無理だ 2度目
  119. 119. Webで できる? それって 119
  120. 120. できそう 120 環境 バージョン Android Chrome 74.0.3729.157 iOS iOS11以上のSafari WebViewは動作せず iOSアプリが無理だけどブラウザなら?
  121. 121. すべてのユーザに 等しい体験を 掲げられた目標 121 2度目
  122. 122. なんとか2言語分 122 環境 利用する言語 ブラウザ Android JavaScriptiOS アプリ Android iOS Objective-C フラグ
  123. 123. • ブラウザで楽しよう • iOSアプリで楽しよう • Androidアプリで楽しよう おしながき 123
  124. 124. 124 ⓘ Start presenting to display the poll results on this slide. このはなしにする
  125. 125. • 1:ブラウザで楽しよう • 2:iOSアプリで楽しよう • 3:Androidアプリで楽しよう おしながき 125
  126. 126. 楽したい ブラウザで 126
  127. 127. • 簡単なサンプルは出てくる • スマホでのサンプル少なめ • 解像度の問題はいろいろ出てきそう 状況整理 127
  128. 128. <video id="player" controls autoplay></video> <script> var player = document.getElementById('player'); var handleSuccess = function(stream) { player.srcObject = stream; }; navigator.mediaDevices.getUserMedia({video: true}) .then(handleSuccess); </script> カメラへのアクセス 128
  129. 129. • タグでわかるけどビデオ • 写真ぽくするなら一時停止 • 加工するならcanvasで処理 把握した 129
  130. 130. 加工するとこんな 130
  131. 131. 画像投稿したい 撮影したら 131
  132. 132. 釣りスタでも やったことあるな それって 132
  133. 133. だいたいそんな感じ 133 使う部分 カメラ画像 リサイズ
  134. 134. あとは普通にHTML 134
  135. 135. • ブラウザの横向きは非対応に • カメラは縦長と限らない • フロントカメラは別途反転 悩んだ問題そんななかった 135
  136. 136. リリース 楽チンポイント 136 88楽チン
  137. 137. 楽したい iOSアプリで 137
  138. 138. • サンプルすぐ出てくる • カメラ+画像合成の例もたくさん • 解像度の対応辛そう 久々にiOSの画面書く 138
  139. 139. 解像度対応 したくない 正直なところ 139
  140. 140. 部分的にだけど 140
  141. 141. カメラの表示 崩れる 結合すると 141
  142. 142. よしなにしてもらうにも手続きが必要 142 表示箇所 アプリ画面 カメラ画像 サイズ不定
  143. 143. 釣りスタでも やったことあるな それって 143
  144. 144. リリース 楽チンポイント 144 36楽チン
  145. 145. 楽したい Androidアプリで 145
  146. 146. AndroidシステムのWebViewで Chromeと互換性があるだろう 状況整理 146
  147. 147. うごかすと黒い 147
  148. 148. • Chromeと互換性があるのは5から • アプリ自体のカメラの権限が必要 • バージョンにより対応が異なる 原因確認 148
  149. 149. • 権限周りのサンプルは多め • ユーザを設定画面に案内 • 再起動後に直前の画面を復元 わかってみると 149
  150. 150. 釣りスタでも やったことあるな それって 150
  151. 151. リリース 楽チンポイント 151 18楽チン
  152. 152. よろしく 152 リリース
  153. 153. 締めの挨拶 最後に 153
  154. 154. 楽あれば苦あ り ですよね 154
  155. 155. 155

GREE Tech Conference 2020 で発表された資料です。 https://techcon.gree.jp/2020/session/Session-5

Views

Total views

708

On Slideshare

0

From embeds

0

Number of embeds

639

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×