携帯電話時代から続くモバイルゲームとアプリの関係
•
0 gefällt mir•1,437 views
GREE Tech Conference 2020 で発表された資料です。 https://techcon.gree.jp/2020/session/Session-5
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Ähnlich wie 携帯電話時代から続くモバイルゲームとアプリの関係
Ähnlich wie 携帯電話時代から続くモバイルゲームとアプリの関係 (20)
Mehr von gree_tech
Mehr von gree_tech (20)
携帯電話時代から続くモバイルゲームとアプリの関係
- 2. • 2011年 グリー株式会社 入社 • 2013年 釣り★スタ チーム 所属 自己紹介 2 和田孝尚 リードエンジニア アプリチーム所属 主にアプリ側を全般的に担当
- 5. できるかな 5 コ
- 6. 6 ⓘ Start presenting to display the poll results on this slide. 手がコの字に曲がる？
- 9. 今年で13周年 9
- 10. 楽したい 今回のキーワード 10
- 11. まずは 11
- 12. だいたいの流れ 12 1.サービスの説明 1.アプリ開発 と 今までの流れ 1.アプリ開発 と 現在の状況
- 13. • 2007年5月サービス開始 • 世界初のモバイルソーシャルゲーム • アプリは2011年から提供 釣り★スタとは 13
- 14. 画面サンプル 14
- 16. なんですけど 16
- 18. ふむふむ歴史コーナー 18 2007年〜 FlashLite みなさんよくご存知の 2011年〜 JavaScript 職人によるCanvas操作 2013年〜 LWF* SWFをHTML5処理に変換 2015年〜 XXXXXXX ここが今回のお話 魚釣りのアクション部分実装の歴史 *LWF(LightWeightSWF)GREE開発のフレームワーク
- 20. 現在は 20
- 21. きっかけは 21
- 31. • 審査期間の待ちでサービスを止めな い • いつでも以前の状態に切り替え可能 • サービス運用に影響しない仕組み 要求をまとめると 31
- 32. 可能なのか？ そもそも 32
- 34. 2013年当時の状況おさらい 34 環境 言語 処理内容 Android Java GREE-SDK（WebView） iOS Objective-C GREE-SDK（WebView） 普通だ
- 35. • あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい アプリの基本 35
- 38. • JavaScriptでcocos2dxの処理を記述 • Webでも動く？（PC以外は厳しそう • iOS/Android同時に開発できそう ざっくり紹介 38
- 39. ビルド アプリなので 39 伏線
- 40. • 書くものがC++からJavaScriptに • JavaScriptのエンジン分処理が追加 • デバッグが手間 ざっくりな印象 40 伏線
- 41. ブラウザ上の動作 41
- 42. • 実機固有の処理は不可能 • 完全に同じ処理は動かない • いざとなったらWebアプリにでき る？ 当時の感想です 42
- 43. 運用 絶賛稼働中 43
- 47. • あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい 要求のふりかえり 47
- 48. • アプリ側はあくまでWebベース • 命令は基本的にサーバ側主導 • 変更する可能性の表示物を排除 要求に対しての 48
- 49. • あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい 要求のふりかえり 49 問題解決
- 50. というわけで 50
- 52. • リソース管理で楽をする • JavaScript開発で楽をする • 開発環境で楽をする おしながき 52
- 53. 53 ⓘ Start presenting to display the poll results on this slide. どのはなしにしよう
- 54. • 1:リソース管理で楽をする • 2:JavaScript開発で楽をする • 3:開発環境で楽をする おしながき 54
- 56. ユーザの各所持アイテム 56
- 60. • 通信処理XMLHttpRequestのみ • 内部的に文字列に強制変換 • 今は違います（開発時の問題 できること自体は限られている 60
- 62. • JSで存在するものしか実装できない • 必要な処理はC++で実装 • C++の実装をJavaScriptから呼ぶ 結局書くんだC++ 62
- 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 };
- 68. 多分無理 ここは素直に 68
- 70. • 既に動いているライブラリ等 • 既に稼働中のアプリ内の認証 • 新規開発のようで違う そもそも 70
- 71. • iOS固有処理はObj-C • Android固有処理はjava • C++とObj-C（Obj-C++) • C++とJava(JNI) 結局js以外も書くんだ 71
- 78. 古い画像しかないんですが 78
- 79. アレっぽい 79
- 80. 実は存在した運命の選択 80
- 81. ２０１４年当時の 81 • 当時のバージョン4 • サポート範囲 不一致 • 古い端末だと少し厳しい • 当時のバージョン2.2 • サポート範囲 一致 • 古い端末でもそこそこ動く
- 82. サポート範囲だけ見ると 82
- 83. 提供 終了 突然の 83
- 84. デバッグできて便利 84
- 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]); }
- 93. • cleanScriptでrequireした内容を消去 • メモリ上のキャッシュや値を初期化 • シミュレータのみ利用可能 動いた 93
- 96. 仕事の合間にコソコソ作成 96
- 97. • 実装時の表示物配置が一番時間かかる • 定型文はどの画面も共通とする • デザイン案から見えない部分のみ実装 新規開発時の問題に取り組む 97
- 98. こんな感じに 98
- 99. • ツール内でテンプレソース埋め込み • 問題解決したら特定の行を削除 • 全部消えたら、一通り開発完了 お手本をどう探すのかも対応 99
- 100. 楽チンポイント 100 117楽チン
- 101. Metal 順調そうに見えるけど 101
- 103. どこかでお会いしたような 103
- 104. • CocosCreatorからCocos2d-JS • ベースはWeb、アプリも出力可能 • JavaScriptの記述周りけっこう別物 新世界 104
- 105. 大ピンチ 楽できない！ 105
- 106. ほんとにこれ時間内に収まるの？ 106
- 107. ARカメラ キーワードは 107
- 109. • 2007年7月サービス開始 • 育成シミュレーションゲーム • アプリは2011年から提供 踊り子クリノッペとは 109
- 110. こんな感じ 110
- 114. やりたいこと 114 ＋
- 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アプリが無理だけどブラウザなら？
- 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
- 134. あとは普通にHTML 134
- 135. • ブラウザの横向きは非対応に • カメラは縦長と限らない • フロントカメラは別途反転 悩んだ問題そんななかった 135
- 137. 楽したい iOSアプリで 137
- 138. • サンプルすぐ出てくる • カメラ＋画像合成の例もたくさん • 解像度の対応辛そう 久々にiOSの画面書く 138
- 140. 部分的にだけど 140
- 141. カメラの表示 崩れる 結合すると 141
- 145. 楽したい Androidアプリで 145
- 147. うごかすと黒い 147
- 148. • Chromeと互換性があるのは5から • アプリ自体のカメラの権限が必要 • バージョンにより対応が異なる 原因確認 148
- 149. • 権限周りのサンプルは多め • ユーザを設定画面に案内 • 再起動後に直前の画面を復元 わかってみると 149
- 152. よろしく 152 リリース
- 153. 締めの挨拶 最後に 153
- 154. 楽あれば苦あ り ですよね 154
- 155. 155