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

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

Transcript

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