GREE Tech Conference 2020 で発表されたセッションの模様です。
https://techcon.gree.jp/2020/session/Session-5
Summarize this content in Japanese さあそれでは続いてのセッションにまいりましょう 続けのセッションはグリー株式会社エンジニアはた高橋さんによる携帯電話時代から 続く モバイルゲームとアプリの関係です います [音楽] みなさんこんにちはグリー株式会社の和田高久です今回は携帯電話時代から続く モバイルゲームとアプリの関係というお題でお話ししたいと思います 簡単に今までの経歴を説明すると2011年グリー株式会社入社 2013年から釣りスターチームに所属で主にアプリがはを担当しています まだ掴みのコーナー暑い日も続いて最近はなかなか外にも出る運動不足になりがちなん ですが 自分もあの在宅勤務が始まったあたりで運動しないとなぁと 思ってもリングフィットアドベンチャーをちょっと購入しましてその中のストレッチで 指がそんなにマガンねーよって言われたのをまぁちょっとこっちか アンティ8でちょっとかっこいいこっち買っ 確認したんですけれども a まぁちょっと自分の興味本位でアンケートの方にこのこんな感じ 逆の子のこの子の逆方に曲げる人はどのくらいいるのかのまぁ見てる人限定なんで偏る 気はすると思いますが はい てがこんな風にくにっ 曲がるか 意外と曲がる一人ます 自分も上がるのでも上がるに回答していくん ちなみに小指だけ指を曲げるとかそういうのもまできたりとか全然関係ない話ですが ずっ はいというわけでまあ曲がらない人んまぁ中根ている中 まあ運動不足の解消の意味も込めてまぁ負荷30っていうまあゲームやってる方は 分かると思うけど一応ゲーム内の最大の負荷数でプレーしているんですがこの30と いう単語の中にあのもう一つ並び替えるでもう一つの数字が現れるという暗号が実は 隠されているんですね はいあーおちラフすぎましたね813という数字が現れてきました でもこの13という数字何を表しているのかというとはい今回の題材にしようと思った 祭りスタートクリノッペがことしで13周年を迎えています拍手 はいっ というはて腕 まあ何を話そうかなっていうところでまぁ関わっているものがまあ長年運営されている ゲームっていうことでまぁそのアプリの話をまあどうすれば 阿蘇のアプリまあなんでそういう風に作ろうかと思ったかっていう内容であればまあ楽 に話せるんじゃないかなということでまだ2子さんの話から始めたいと思いますと流れ 大体こんな感じでええと数年前からのことではあるんですがアプリ開発時の経緯から まあごく最近の話題についてまでお話できれば良いかなと まず振りスター2007年からサービス開始で今年でなんと13週にさっき言いました ねはい 実は世界初のモバイルソーシャルゲームで同アプリ自体を2011年から提供されてい ますとどんな内容だっけっていうところでまぁ魚を釣った時のこれ画面なんですけど まあどうしてもブラウザゲームじゃないかと でまぁちょっと動くところを見せすると ぷっ 動かなかったです ちょっと多くところを見せするとこんな感じにえっとまぁ釣り場に入って左往を 投げ入れてウキが沈んだタイミング右上の方ですね タイミング良くタップすると魚を中心に来たタイミングでタップすることによって魚を
ゲットできる いう形でものなんですがまぁ すませへっ魚釣りの部分はアクションゲームになっています まああらかじめ決まったアニメーションが流れるっていうのと違ってユーザーの操作や タイミングが重要なものになっていますと 何で作られているんだというとまあサービス開始当初姫チャー今の時代は説明不要だと 思うんですがフラッシュライトその後スマートフォンの時代処理を html 5に 変換するとかで対応ましていたんですが 2015年から大きく処理が変わっていますと リリース当初シンプルな web ビューで動作するアプリとして提供されていました そして今実はここ疎通 dx を利用して動いています なぜてブラウザゲームゆうたやんっていう話ではあるんですがなんでネイティブの アプリとして使っているのかというとまあこういった形で ユーザーの操作する画面でタップした反応がチーンするという問題が発生して アニメーションでにも全般的に重たいのでどうにか対応してくれないかという話が来て 祭サーバーアクションゲームであるとプレーの中心であるアクション部分にユーザーが 不満を持たないようにしたい 通り8提示された目標として全てのユーザーに等しい体験をというものでした まあアプリをネイティブ化すれば解決できるんじゃないかとまぁ気軽に考えて提案した のですが 頭で言われたこととして条件としてトラブルを起こすなと 今トラブルを起こしたくてを起こすきているわけないじゃんと思うんですが さらに言うとユーザーの反応に対してそこで対応が必要ということで 例えばユーザーの離脱とかを懸念するとまぁいつでも元に戻せる 変更できるっていうのが条件だと 要は今までと同じスタイルで運用を続けたいと まあもう正直この時点で楽はできなそうな雰囲気なんですが アプリに問題がた場合ま更新をするとなるともは審査が必要にまどうしてもなると で神様時間通しても待ち時間がどうしても生まれてしまうので プラブルが起きた場合ユーザーに与える影響が大きいということからまあ必要な対応に なりましたと まあそもそもそんなアプリが作れるのかという話なのですがここから開発の話で ネイティブ化するといってもまあ web ビューで動作しているので8 全部をいきなり移植するのは現実的ではなくて 段階的に移植していけばいいんじゃないかと 少しでも開発をラークするためには ios と android は同時に開発して いきたいなと考えてました方 いくつか検討する中で骨2 dx を触って見てたんですがその中にあの江湖2 djs っていう処理がありました
でまぁざっくりどんなものかというと書くものがシープラから javascript に変わっただけということで javascript の処理が増えた分重くなりそう だし何よりもこれデバッグしにくいとあまり楽な印象が最初はなかったんですが a 棟 結局アプリに動かす以上まあ越冬 明日付アプリ動くので結局ビルドしなきゃいけないのは変わらなくて各言語がは javascript に変わったところでまぁ楽はそんなにできなそうだと まぁちょっとどうしようかなーというところではあったんですが当時の開発時の画面 こんな感じにブラウザ上で動くってことからアプリの動作確認をはブラウザーでも できるんじゃないかなと考えてたんですがまぁ基本的に互換性のない部分も多くてまあ 完全に同じ処理は無理でも まあ何えーどうも例えば実機の性能その 状態がスマートフォン6の性能でそのままやると結構動かなかったんですけれども何 性能が追いつけば web の方にまだ移行し直すなんてのも可能じゃないかって考え て javascript ベースで作っていくのも悪くはないかなと考えました ここの一つ忘れてはいけないポイントとしてサービス自体は絶賛稼働中でまぁ既存の 運用範囲内に抑える必要とどうしてもありますと 例えばアプリのための表示が坊や処理を毎月作るみたいな運用を足すことは厳しいと いうことで サーバーのシェルは基本そのまま htmlメール度している内容をアプリが処理し やすい形式に変換するぐらいで今までブラウザーでやっていたことをアプリ上で表示 するっていうような形では受け皿のようなアプリを作ればいけるんじゃないかと考えて 要求された内容対して振り返ってみるとアプリは今までアクマル あくまでも今まで通りの web ベースのままいる画面内の表示項目や線に先なんか はサーバーからは+って形にして 基本的に全部サーバー主導で動くアプリにすることでまぁ細かいところを突っ込み出す とキリがないんですけど 要求された内容についてはおおよそ解決ができるということでここでちょっとまあ 休憩の日も含めて えっどう開発時のアルコールの話 選ばれた内容を発表します ということでお題は こんな感じで 8マージャー10秒くらいで決定できるでいいかなということではい この中で同話に進みたいか 聞いてみたいかというような形で回答をしてもらえればいいかなと これどこできればいいんだろう全員終わったみたいなタイムが じゃあ おしまい ってことで javascript 開発寺こうするということでこれちょっと実は リハジニーはなんか飛べてたんですけど今のこの関係だと食べないとなっちゃってる
らしいのでちょっとページ送りをします ちょっと中一瞬データぼれしたような感じもありますけどまぁ切りしないで javascript 開発を描こうすると本当に java スクリプトを書くだけ でアプリを作れるのか でまぁ無理っていう話で8まあ用意されている機能だけで作れるんだったら問題はない んですけど ない昨日を作ろうとした場合 javascript 単体ではまず実装ができません と では標準機能何がじゃあできるのって夕飯栄養まあシンプルにイメージするなら ブラウザーでさっきあの動かしているイメージがあったと思うけど ブラウザーで動かせる内容と同じようなレベルしか初期状態で用意されていないって いうな形でまぁ釣りスターの場合あのもともとのつくりが標準的なアプリということも あって利用するライブラリー類全部 ここ数リーク西洋のかつ javascript の対応が必要になるということに なりますと一部ライブラリーについてはアプリに合わせてまぁ個別に対応してもらう なんてことができたんですが そもそもココス2 dx のライブラリーがあったとしても js 用のライブラリー というの基本的にほぼ存在せず アプリのデータもそもそも互換性がいるよねって考えると今ある処理はまあそのまま 使って連携部分を全部自作するな 自作する必要があって 結局状況に応じて試合とを記述する範囲やも開発する範囲がどんどん広がっていって 気がつけば今の開発範囲開発範囲にプラスしてココス2 dx 後 js さらにそこ の連携部分を全部作るというような形で ただまぁ一度作ってしまえば単純に新しい画面を足すだけであれば javascript のみ出かけますよということで まあ単純な映像画面の開発ぐらいだったら必要な言語はまあ javascript のみ習得していれば良いということであったりしては学習コストも軽いんじゃないかな というふうに考えてたんですが やっぱり理解して各部にはどうしても母体えーっ母体の処理含みであるこれ知識が必要 でここ数 dgs の経験がある人っていうともそれ自体もやっぱり少ないっていう 問題もあってそこまでラグはできなかったかなということで開発が進めばあれこれお 手本が増えていくのでまぁ実際問題経験自体なくても参考にあのお手本ところ 見ていけばでどうにか出来るんですけどまぁここは35楽ちんぐらいの評価になります とまぁこの単位は特に何の説明もないので入っ次に そして今現在のも話っていうところで
まあなんだかんだで開発が進んでくると基本的に同じような処理が増えていきますと で開発城間 js は次回うちしていくって感じなんですが まあ画面の構成と挙動は似てくるので画面の基となるデータから直接画面をつくれれば いいんじゃないかと考えてまぁ画面のデザインの psd ファイルからもう直接名前 と動作を推測してええまあそうそう自動で生成するという処理をつくりました例えば あの名前にボタンってついててるはそこはもうボタンだってこと で処理を補完するという形になってますとポチポチっと押すことでまぁ画像を切り替え たり 画像9言われる3周をするとかそういったことができるようにこのツール上でなって ますと新規に開発に参加してもらう場合の問題点として同書記の学習コストがとても 重くって まあ どうすれば楽できるかなって考えるともそこを短縮するしかないかなと でそこまあ短縮できるように入ったことで先のツールを作って 少しちょっと見にくいんですがツールバーで設定ができなかったりした値とかまぁ情報 処理とかについてはまあこういった形で hulu とかフィックスミーティの画面の 下に達してそこをぜひ実装していて消していてここ0件にすると開発が終了って感じで 作業もまあわかりやすくっていうのは形で 自分自身で結局画面を作るときにも結局元の処理とか以前に参考にするものと結構持っ てきたりするのでそういった部分も自動的にソース内に埋め込むみたいな形で導入の 敷居を大きく下げれたんじゃないかなということでまぁ二枚で作ったツールなんです けど117楽ちんぐらいの評価があるんじゃないかなということで自画自賛していい ますと 運用まるでマーラー子はできるようになってきたんですけど現在 ios の環境 オープン時言える非推奨でメダルへの移行が行く8推奨されていますと ねぇまぁココス2 dx のバージョン4でメタルに対応しているということで気金を 考えないといけないなということで確認したんですがなんとジャガースクリプトの処理 が生成できなくなっていましたと ここ二クリエイターの処理の方でここ数 djs 自体は利用できるんですが 期日周り全部変わっていて今の資源はその間も利用できなそうと そもそもバージョンも違うプロジェクト本性も違う まあこれを書いている時点で先月また辞典これ書いてる前でやっぺピンチじゃんと 対応を考えないといけないなぁと思って先週くらいまでいろいろちょっと考えて 8今週ざっくりといろいろ今のものを使ってみてハローワールドするところまでは戻せ たのでまあ ここ数分イオンの対応みたいな話がもし話せる機会があれば次の機会ということで 釣りスタの発表は以上になりますと そして 直近の事例としてはクリノッペの開発の話をしたいかなということでえっクリノッペの アプリで ar カメラをやりたいということで話がきました でまぁ先ほどと同じような形で話を進めたいと思いますと
でへとカメラ処理の開発の話なんでまぁカメラアプリなんて何年前の話だよっていう ところではあるんですが まあクリノッペ遠いサービス自体は2007年からサービス開始で今年でなんと13 周年 さっきも言いましたねはい 内容は育成シミュレーションゲームアプリ自体も2011年から提供されていますと クリノッペを見たことない人のためにっていうことでまぁこんな感じなを磨い着物を 着替えさせたり押せばするゲームですとまぁこれもどう見てもブラウザー件ですよね っていうところでええまあリリース当初からシンプルな web ビューで動作する アプリとして提供されていますと 釣査 と違ってまぁ固有の機能を持たないアプリなんですが クリノッペと一緒に写真を撮りたいということで最初 ar っていう話から なんかマーカーで撮影をするのかなとか思ってたんですけど カメラの映像に自分の国 p を合成したいということで第一印象を素直な心境 カメラ処理 を作るってなると 絶対に android で固有の問題や特定機種の問題に引っかかりそうだなと でどうにか楽できて8まとめて開発できる方法はないのかと まあ開発言語別だような積んでるなぁという状況で まあ web からいけるんだったらあくりとして共通で開発できるしていけるんじゃないか と思って調べたんですが&上田 chrome の特定バージョン以降で ios は 11以上 淳一以上と12で微妙に違う話もあるんですけどここで一番の問題 web ビュー上 では動かないと栗のペアアプリでしかできない処理というのは 基本ないのでアプリを使っていくてもブラウザを案内すればいいんじゃないかなという ことで提案したんですがああいう os のアプリだけ動かないのはダメだという話で android に関してはクローンをでいけるんだったらまあアプリでいけるだろう で ios のアプリに関しは作るしかないけどまぁ android こと困らない だろうと考えてこっちも分岐してみたいと思いますってことで入っ
ブラウザーのお話 ios の話 android の話って形でどれかを選んで くださいということで ということでまぁだいたいそんなもんかなと思う じゃあブラウザーで楽をしようという話っていうことで 果たしてブラウザで楽ができるのかということでまぁブラウザーからカメラを使うって ことで検索するとまぁお手本の散布等結構あっさり見つかりますと ただ pc がメインです魔札と解像度周りの説明がちょっとまあ 薄いのかなーっていうな形で苦労するかなと 持ったんですがサンプル自体こんな形で結構簡単に google の公式サイト なんかからも拾えたりして カメラの映像を取得すること自体はま前で難しくない話で 多忙見たら分かる話なんですけどこれカメラっていうかビデオの映像を亀田として代用 するみたいな処理になっていて まあビデオ一時停止して canvas に描画させてカメラっぷく 処理するっていう形でそう言って取得した映像をまあフレームつけたりかスタンプに 加工をしたりというな形で最終的なそれを画像を投稿したいということで で解像度の問題に関しては全端末で同じ5を生成することで対応できるんじゃないかと 考えて フレパそれ3 star でも同じような狩猟をつくっているなとしかも解像度周りの 言語 さっきってのはココス djs なので javascript で同じ処理書いて いると いうことでまぁ簡単に考えるとカメラの財布時代は違うんですけど 一定のサイズに切り抜いてリサイズしてしまえばいいやと カメラの解像度自体とと思ってしまえばあとはまあ普通に html 回転ができあ がりっていう形で実際にカメラの解像度まるで苦しむと思ったんですけど意外と簡単に まとまってまぁ自分がびっくりっていうのは状態だったんですが いくつかその他にも問題はあったんですけど比較的対応で鯛納屋ものはなくてまぁ簡素 な対応で8十分対応で きましたか一つだけあったのは通常のカメラアプリと違ったのフロントカメラの映像を 撮った場合斑点が必要だったんですけどまぁ リリース直前まで誰も反転してるってことに気づいてませんでしたと まあブラウザーで亀が使って意外とブラウザゲームと相性がいいんじゃないかなと考え ていますと で唯一解像度もあるの対応だけシンプルにまとめれば88楽ちんぐらいの評価があるん じゃないかなということで そして何か話さないといったところもなんかボタンを知る前チラ見してしまうと言う
オフすぎはいということでクリノッペでパシャっていう機能がリリースされているので ずっとあの右したりなんだこの qr て写ってると思うんでそこを多分移すと クリノッペのサイトに飛べると思うので是非試してもらえればと思いますと はいっていうことでまぁ楽したいって考え方考えからまああれこれやってきた話をした んですが最後にこの言葉で締めたいと思います 楽あれば苦割そのまんまやんけって言うそこではあるんですけど 開発中にただ運用は楽をするぞと作り込んだ関係で実際系もと離れてからほぼ修正も 緊急対応もなしっていう形でまぁ苦しんだ分の価値はあったかなということで まあこれからも開発ができるだけ楽しながら全てのユーザーに等しい体験を提供できれ ば良いかなと考えていますとご静聴ありがとうございました [拍手] ありがとうございましたーーー が c 調 none しますわらさんに質問があるよと パパまたは化粧ちゃん出てきたコメントに扮する 太東沖するという方はスライド会場の左上のメニューのところたら合っ普段 パーシー 動画をお願いいたしますし 公演に関する質問 今はだけの会場験者終わっているという状況ですこれから c 会場が始まるといる ところです日誌 明日がスピーカーの会場にまあ登壇者のほかに古い散布がまずいよ
