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

by gree_tech

Slide 1

Slide 1 text

携帯電話時代から続くモバイルゲームとアプリの関係グリー株式会社リードエンジニア和田孝尚

Slide 2

Slide 2 text

• 2011年グリー株式会社入社 • 2013年釣り★スタチーム所属自己紹介 2 和田孝尚リードエンジニアアプリチーム所属主にアプリ側を全般的に担当

Slide 3

Slide 3 text

つかみのコーナー 3 運動不足の季節

Slide 4

Slide 4 text

楽したい無理しても続かないし 4

Slide 5

Slide 5 text

できるかな 5 コ

Slide 6

Slide 6 text

6 ⓘ Start presenting to display the poll results on this slide. 手がコの字に曲がる？

Slide 7

Slide 7 text

毎日コツコツ 7 負荷３０

Slide 8

Slide 8 text

この数字の意味するものは？ 8 １３

Slide 9

Slide 9 text

今年で13周年 9

Slide 10

Slide 10 text

楽したい今回のキーワード 10

Slide 11

Slide 11 text

まずは 11

Slide 12

Slide 12 text

だいたいの流れ 12 1.サービスの説明 1.アプリ開発と今までの流れ 1.アプリ開発と現在の状況

Slide 13

Slide 13 text

• 2007年5月サービス開始 • 世界初のモバイルソーシャルゲーム • アプリは2011年から提供釣り★スタとは 13

Slide 14

Slide 14 text

画面サンプル 14

Slide 15

Slide 15 text

ブラウザゲームどうみても 15

Slide 16

Slide 16 text

なんですけど 16

Slide 17

Slide 17 text

アクションゲーム魚釣り部分は 17

Slide 18

Slide 18 text

ふむふむ歴史コーナー 18 2007年〜 FlashLite みなさんよくご存知の 2011年〜 JavaScript 職人によるCanvas操作 2013年〜 LWF* SWFをHTML5処理に変換 2015年〜 XXXXXXX ここが今回のお話魚釣りのアクション部分実装の歴史 *LWF(LightWeightSWF)GREE開発のフレームワーク

Slide 19

Slide 19 text

シンプルなWebViewアプリリリース当初は 19

Slide 20

Slide 20 text

現在は 20

Slide 21

Slide 21 text

きっかけは 21

Slide 22

Slide 22 text

• 一部機種でタップ遅延が発生 • アニメーション類もモッサリ何が起きた 22

Slide 23

Slide 23 text

アクションゲーム釣り★スタはあくまでも 23

Slide 24

Slide 24 text

すべてのユーザに等しい体験を掲げられた目標 24

Slide 25

Slide 25 text

ネイティブ化というわけで提案 25

Slide 26

Slide 26 text

ネイティブ処理部分でトラブルを起こさない条件がある 26

Slide 27

Slide 27 text

ユーザの離脱が怖いからいつでも元に戻せるさらにいうと 27

Slide 28

Slide 28 text

Webアプリなのでは？それって 28

Slide 29

Slide 29 text

楽できなそう提案したものの 29

Slide 30

Slide 30 text

アプリの審査最大のネックは 30

Slide 31

Slide 31 text

• 審査期間の待ちでサービスを止めない • いつでも以前の状態に切り替え可能 • サービス運用に影響しない仕組み要求をまとめると 31

Slide 32

Slide 32 text

可能なのか？そもそも 32

Slide 33

Slide 33 text

開発のおはなしというわけで 33 2014年頃

Slide 34

Slide 34 text

2013年当時の状況おさらい 34 環境言語処理内容 Android Java GREE-SDK（WebView） iOS Objective-C GREE-SDK（WebView）普通だ

Slide 35

Slide 35 text

• あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したいアプリの基本 35

Slide 36

Slide 36 text

cocos2dやってた流れで 36

Slide 37

Slide 37 text

Cocos2d-JS 突然の 37

Slide 38

Slide 38 text

• JavaScriptでcocos2dxの処理を記述 • Webでも動く？（PC以外は厳しそう • iOS/Android同時に開発できそうざっくり紹介 38

Slide 39

Slide 39 text

ビルドアプリなので 39 伏線

Slide 40

Slide 40 text

• 書くものがC++からJavaScriptに • JavaScriptのエンジン分処理が追加 • デバッグが手間ざっくりな印象 40 伏線

Slide 41

Slide 41 text

ブラウザ上の動作 41

Slide 42

Slide 42 text

• 実機固有の処理は不可能 • 完全に同じ処理は動かない • いざとなったらWebアプリにできる？当時の感想です 42

Slide 43

Slide 43 text

運用絶賛稼働中 43

Slide 44

Slide 44 text

現状の運用範囲内に収まるのか？現実的な問題 44 画像等の素材は極力、既存の物を利用アプリ用の素材は必要最低限に抑える伏線

Slide 45

Slide 45 text

• サーバ側の処理は基本そのまま • HTMLをjson等に変更するイメージ稼働中の処理を考慮 45

Slide 46

Slide 46 text

アプリは受け皿方向性として 46

Slide 47

Slide 47 text

• あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい要求のふりかえり 47

Slide 48

Slide 48 text

• アプリ側はあくまでWebベース • 命令は基本的にサーバ側主導 • 変更する可能性の表示物を排除要求に対しての 48

Slide 49

Slide 49 text

• あくまで基本はWebViewベース • Webの処理をネイティブに移行 • iOS/Android同時に開発したい要求のふりかえり 49 問題解決

Slide 50

Slide 50 text

というわけで 50

Slide 51

Slide 51 text

アンケートタイム運命の選択 51

Slide 52

Slide 52 text

• リソース管理で楽をする • JavaScript開発で楽をする • 開発環境で楽をするおしながき 52

Slide 53

Slide 53 text

53 ⓘ Start presenting to display the poll results on this slide. どのはなしにしよう

Slide 54

Slide 54 text

• 1:リソース管理で楽をする • 2:JavaScript開発で楽をする • 3:開発環境で楽をするおしながき 54

Slide 55

Slide 55 text

リソース管理で楽をする膨大な画像量とリソース管理 55 2014年〜現在

Slide 56

Slide 56 text

ユーザの各所持アイテム 56

Slide 57

Slide 57 text

開発時点で7年分来年で14周年 57 2014年

Slide 58

Slide 58 text

都度ダウンロードする方針さすがに 58

Slide 59

Slide 59 text

無理そもそもできるんだっけ？ 59

Slide 60

Slide 60 text

• 通信処理XMLHttpRequestのみ • 内部的に文字列に強制変換 • 今は違います（開発時の問題できること自体は限られている 60

Slide 61

Slide 61 text

ないなら作れの精神欲しいもの 61

Slide 62

Slide 62 text

• JSで存在するものしか実装できない • 必要な処理はC++で実装 • C++の実装をJavaScriptから呼ぶ結局書くんだC++ 62

Slide 63

Slide 63 text

JavaScript-Binding 略してJSB 63

Slide 64

Slide 64 text

コード実装 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 };

Slide 65

Slide 65 text

楽できない痒いとこに手が届かない 65

Slide 66

Slide 66 text

現在へ楽チンポイント 66 50楽チン

Slide 67

Slide 67 text

言語ひとつで 67 JavaScript開発で楽をする 2014年頃

Slide 68

Slide 68 text

多分無理ここは素直に 68

Slide 69

Slide 69 text

関連ライブラリへの対応ですよね 69

Slide 70

Slide 70 text

• 既に動いているライブラリ等 • 既に稼働中のアプリ内の認証 • 新規開発のようで違うそもそも 70

Slide 71

Slide 71 text

• iOS固有処理はObj-C • Android固有処理はjava • C++とObj-C（Obj-C++) • C++とJava(JNI) 結局js以外も書くんだ 71

Slide 72

Slide 72 text

結局のところ 72 iOSのプロジェクト Androidのプロジェクト Cocos2dx Cocos2d-js Objective-C JAVA 増えた部分

Slide 73

Slide 73 text

安定してしまえば書くのはJavaScriptのみとはいえ 73

Slide 74

Slide 74 text

Web系の部署なので JavaScriptなら人員確保しやすい？技術的な難易度は問題なし 74 母体となる原型の処理への理解も必要そもそも言語的な経験者少数

Slide 75

Slide 75 text

楽できない知識範囲がそこそこ必要 75

Slide 76

Slide 76 text

現在へ楽チンポイント 76 35楽チン

Slide 77

Slide 77 text

よろしくおねがいします 77 開発環境で楽をする 2014年頃

Slide 78

Slide 78 text

古い画像しかないんですが 78

Slide 79

Slide 79 text

アレっぽい 79

Slide 80

Slide 80 text

実は存在した運命の選択 80

Slide 81

Slide 81 text

２０１４年当時の 81 • 当時のバージョン4 • サポート範囲不一致 • 古い端末だと少し厳しい • 当時のバージョン2.2 • サポート範囲一致 • 古い端末でもそこそこ動く

Slide 82

Slide 82 text

サポート範囲だけ見ると 82

Slide 83

Slide 83 text

提供終了突然の 83

Slide 84

Slide 84 text

デバッグできて便利 84

Slide 85

Slide 85 text

更新の度にビルドしたくないせっかく使うなら 85

Slide 86

Slide 86 text

そもそも 86 JS Xcodeのプロジェクト JS ビルドされたアプリ

Slide 87

Slide 87 text

参照しているファイルはそもそも別物そりゃそうじゃ 87

Slide 88

Slide 88 text

だったら 88 JS Xcodeのプロジェクト JS ビルドされたアプリ

Slide 89

Slide 89 text

コード実装 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

Slide 90

Slide 90 text

直接編集しても動作は変わらずもうひとこえ 90

Slide 91

Slide 91 text

もう一回requireすればいけるのでは？おそらく 91

Slide 92

Slide 92 text

コード実装 92 js_list.forEach((js_file)=>{ sys.cleanScript(js_file); }); cc.director.purgeCachedData(); sys.garbageCollect(); cc.game.run();

Slide 93

Slide 93 text

• cleanScriptでrequireした内容を消去 • メモリ上のキャッシュや値を初期化 • シミュレータのみ利用可能動いた 93

Slide 94

Slide 94 text

現在へ楽チンポイント 94 -120楽チン

Slide 95

Slide 95 text

最近のはなし 95 開発資産の活用 2018-2019年

Slide 96

Slide 96 text

仕事の合間にコソコソ作成 96

Slide 97

Slide 97 text

• 実装時の表示物配置が一番時間かかる • 定型文はどの画面も共通とする • デザイン案から見えない部分のみ実装新規開発時の問題に取り組む 97

Slide 98

Slide 98 text

こんな感じに 98

Slide 99

Slide 99 text

• ツール内でテンプレソース埋め込み • 問題解決したら特定の行を削除 • 全部消えたら、一通り開発完了お手本をどう探すのかも対応 99

Slide 100

Slide 100 text

楽チンポイント 100 117楽チン

Slide 101

Slide 101 text

Metal 順調そうに見えるけど 101

Slide 102

Slide 102 text

新バージョンで消滅 102 jsのプロジェクト生成できない 2019-2020年

Slide 103

Slide 103 text

どこかでお会いしたような 103

Slide 104

Slide 104 text

• CocosCreatorからCocos2d-JS • ベースはWeb、アプリも出力可能 • JavaScriptの記述周りけっこう別物新世界 104

Slide 105

Slide 105 text

大ピンチ楽できない！ 105

Slide 106

Slide 106 text

ほんとにこれ時間内に収まるの？ 106

Slide 107

Slide 107 text

ARカメラキーワードは 107

Slide 108

Slide 108 text

だいたいの流れ 108 1.サービスの説明 1.カメラ処理の提案 1.カメラ周りの開発

Slide 109

Slide 109 text

• 2007年7月サービス開始 • 育成シミュレーションゲーム • アプリは2011年から提供踊り子クリノッペとは 109

Slide 110

Slide 110 text

こんな感じ 110

Slide 111

Slide 111 text

ブラウザゲームどうみても 111 2度目

Slide 112

Slide 112 text

シンプルなWebViewアプリリリース当初から 112 2度目

Slide 113

Slide 113 text

ARカメラつくりたい 113 2020年

Slide 114

Slide 114 text

やりたいこと 114 ＋

Slide 115

Slide 115 text

アプリ実装したくない正直なところ 115

Slide 116

Slide 116 text

Android 絶対めんどくさい特に 116

Slide 117

Slide 117 text

楽したいどうにかして 117

Slide 118

Slide 118 text

考えるんだ 118 環境言語処理内容 Android Java GREE-SDK（WebView） iOS Objective-C GREE-SDK（WebView）無理だ 2度目

Slide 119

Slide 119 text

Webでできる？それって 119

Slide 120

Slide 120 text

できそう 120 環境バージョン Android Chrome 74.0.3729.157 iOS iOS11以上のSafari WebViewは動作せず iOSアプリが無理だけどブラウザなら？

Slide 121

Slide 121 text

すべてのユーザに等しい体験を掲げられた目標 121 2度目

Slide 122

Slide 122 text

なんとか2言語分 122 環境利用する言語ブラウザ Android JavaScript iOS アプリ Android iOS Objective-C フラグ

Slide 123

Slide 123 text

• ブラウザで楽しよう • iOSアプリで楽しよう • Androidアプリで楽しようおしながき 123

Slide 124

Slide 124 text

124 ⓘ Start presenting to display the poll results on this slide. このはなしにする

Slide 125

Slide 125 text

• 1:ブラウザで楽しよう • 2:iOSアプリで楽しよう • 3:Androidアプリで楽しようおしながき 125

Slide 126

Slide 126 text

楽したいブラウザで 126

Slide 127

Slide 127 text

• 簡単なサンプルは出てくる • スマホでのサンプル少なめ • 解像度の問題はいろいろ出てきそう状況整理 127

Slide 128

Slide 128 text

var player = document.getElementById('player'); var handleSuccess = function(stream) { player.srcObject = stream; }; navigator.mediaDevices.getUserMedia({video: true}) .then(handleSuccess); カメラへのアクセス 128

Slide 129

Slide 129 text

• タグでわかるけどビデオ • 写真ぽくするなら一時停止 • 加工するならcanvasで処理把握した 129

Slide 130

Slide 130 text

加工するとこんな 130

Slide 131

Slide 131 text

画像投稿したい撮影したら 131

Slide 132

Slide 132 text

釣りスタでもやったことあるなそれって 132

Slide 133

Slide 133 text

だいたいそんな感じ 133 使う部分カメラ画像リサイズ

Slide 134

Slide 134 text

あとは普通にHTML 134

Slide 135

Slide 135 text

• ブラウザの横向きは非対応に • カメラは縦長と限らない • フロントカメラは別途反転悩んだ問題そんななかった 135

Slide 136

Slide 136 text

リリース楽チンポイント 136 88楽チン

Slide 137

Slide 137 text

楽したい iOSアプリで 137

Slide 138

Slide 138 text

• サンプルすぐ出てくる • カメラ＋画像合成の例もたくさん • 解像度の対応辛そう久々にiOSの画面書く 138

Slide 139

Slide 139 text

解像度対応したくない正直なところ 139

Slide 140

Slide 140 text

部分的にだけど 140

Slide 141

Slide 141 text

カメラの表示崩れる結合すると 141

Slide 142

Slide 142 text

よしなにしてもらうにも手続きが必要 142 表示箇所アプリ画面カメラ画像サイズ不定

Slide 143

Slide 143 text

釣りスタでもやったことあるなそれって 143

Slide 144

Slide 144 text

リリース楽チンポイント 144 36楽チン

Slide 145

Slide 145 text

楽したい Androidアプリで 145

Slide 146

Slide 146 text

AndroidシステムのWebViewで Chromeと互換性があるだろう状況整理 146

Slide 147

Slide 147 text

うごかすと黒い 147

Slide 148

Slide 148 text

• Chromeと互換性があるのは5から • アプリ自体のカメラの権限が必要 • バージョンにより対応が異なる原因確認 148

Slide 149

Slide 149 text

• 権限周りのサンプルは多め • ユーザを設定画面に案内 • 再起動後に直前の画面を復元わかってみると 149