126
グリーのクライアント技術戦略 グリー株式会社 開発本部 CTO室 芳賀 洋行

GREE TechTalk グリーのクライアント技術戦略

Embed Size (px)

Citation preview

Page 1: GREE TechTalk グリーのクライアント技術戦略

グリーのクライアント技術戦略

グリー株式会社 開発本部 CTO室

芳賀 洋行

Page 2: GREE TechTalk グリーのクライアント技術戦略

#greetech01

自己紹介:芳賀洋行

2003

2006

2011

2012

2012

2012

エイリアス

オートデスク

グリー

イマココ

CTO室

どうぶつフレンズ プロダクトマネジャー

どうぶつフレンズ エンジニアリーダー

2003

会津大学コンピュータサイエンス

2010

グロービス経営大学院

ロンドンスタジオ エンジニアマネジャー

1 /124

Page 3: GREE TechTalk グリーのクライアント技術戦略

#greetech01

1. 今日までのクライアント技術のまとめ

2. グリーのクライアント技術戦略

3. クライアント技術におけるLWFの役割

4. グリーのオープンソース活動

アジェンダ

質問、コメントなどございましたら #greetech01までつぶやきお願いします

2 /124

Page 4: GREE TechTalk グリーのクライアント技術戦略

#greetech01

インターネット

計算 データ

E

分析

コード

U

D

A

企画

画像

SWF

マーケット プレース

コード

アプリ

アプリ

ゲームシステムにおける本日の話の位置づけ 3 /124

Page 5: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 将来、手詰まりにならないために、 幅広い範囲をカバーできる技術選択も1手!

• LWFは幅広い技術範囲をカバーできます!

• グリーはエンジニアの オープンソース貢献を応援しています!

本セッションでお伝えすること 4 /124

Page 6: GREE TechTalk グリーのクライアント技術戦略

#greetech01

1. 今日までのクライアント技術のまとめ

2. グリーのクライアント技術戦略

3. クライアント技術におけるLWFの役割

4. グリーのオープンソース活動

アジェンダ 5 /124

Page 7: GREE TechTalk グリーのクライアント技術戦略

①これまでのクライアント 経緯とまとめ

Page 8: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 1つの分け方として 「ブラウザを中核とするクライアント技術」と 「ブラウザを中核としないクライアント技術」

• ブラウザ中核技術の肝は「標準化」/ 非ブラウザ技術の肝は「差別化」

• 「標準化」と「差別化」の両方を満たす 「HTML5ブラウザ」は未だ安定していない技術

ここまでクライアント技術要諦 7 /124

Page 9: GREE TechTalk グリーのクライアント技術戦略

#greetech01

本日の枠組み

出力 出力前処理 ロジック 制作物 制作工程

ハードウェアで描画する

実行結果を 出力する前の

処理

ゲーム ロジックを 記述する 場所と方法

制作物種類を 増やす/絞る

制作物を 作る

8 /124

Page 10: GREE TechTalk グリーのクライアント技術戦略

順を追っていきましょう

Page 11: GREE TechTalk グリーのクライアント技術戦略

5年前

Page 12: GREE TechTalk グリーのクライアント技術戦略

2007年

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 13: GREE TechTalk グリーのクライアント技術戦略

#greetech01

2007年釣りスタサービス開始! 12 /124

Page 14: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

ブラウザ中心 クライアント関連技術のまとめ

出力前処理 ロジック 制作物 制作工程

アート

ブラウザ

FLASH Player

CPU

サーバー

PHP

13 /124

Page 15: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心 クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

14 /124

Page 16: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心クライアント技術のまとめ 標準化による短い開発期間の実現

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

クライアント側は ブラウザ/Flash Playerに

任せる

サーバーサイドの ロジック実装、

コンテンツ開発に全力を注ぐ!

15 /124

Page 17: GREE TechTalk グリーのクライアント技術戦略

4年前

Page 18: GREE TechTalk グリーのクライアント技術戦略

2008年

17 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 19: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• はじめて国内のコンソールゲーム市場が 縮小に転じる

2008年

2008年国内ゲーム市場規模は約5826億1000万円(エンターブレイン調べ) http://www.famitsu.com/game/news/1221045_1124.html

18 /124

Page 20: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

非ブラウザネイティブのクライアント技術 差別化(特殊化)による長い開発期間

出力前処理 ロジック 制作物 制作工程

アート

独自 データ

ネイティブ

C++

独自ゲーム エンジン

独自描画 エンジン

ネイティブ

C++

CPU

GPU 独自 ツール

独自 コンバータ

ネイティブ

C++

ネイティブ

C++

19 /124

Page 21: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

非ブラウザコンソールの クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

20 /124

Page 22: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

非ブラウザコンソールの クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク ハードウェアの限界性能を引き出せるが 広い技術領域、高い難易度、プラットフォームごとに異なるデバイス特性に あわせたエンジニアリングが必要になる

21 /124

Page 23: GREE TechTalk グリーのクライアント技術戦略

2008年 7月 10日

22 /116

22 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 24: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• App Store開始

2008年7月10日

http://en.wikipedia.org/wiki/App_Store_(iOS)

23 /124

Page 25: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

ブラウザ中心 クライアント関連技術からの視点

出力前処理 ロジック 制作物 制作工程

アート

ブラウザ

FLASH Player

CPU

サーバー

PHP

FLASH Playerの対応が 参入の時期の決定要因

24 /124

Page 26: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

非ブラウザコンソールの クライアント関連技術の視点

出力前処理 ロジック 制作物 制作工程

アート

独自 データ

ネイティブ

C++

独自ゲーム エンジン

独自描画 エンジン

ネイティブ

C++

CPU

GPU 独自 ツール

独自 コンバータ

ネイティブ

C++

ネイティブ

C++

巨大な開発コストを賄えるか どうかが参入の決定要因

25 /124

Page 27: GREE TechTalk グリーのクライアント技術戦略

約2年後

Page 28: GREE TechTalk グリーのクライアント技術戦略

2010年 4月

27 /116

27 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 29: GREE TechTalk グリーのクライアント技術戦略

アップル声明文

Page 31: GREE TechTalk グリーのクライアント技術戦略

( ;゚Д ゚)

Page 32: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

ブラウザ中心 クライアント関連技術からの視点

出力前処理 ロジック 制作物 制作工程

アート

ブラウザ

FLASH Player

CPU

サーバー

PHP

FLASH Playerの対応が 参入の時期の決定要因

31 /124

Page 33: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

(ゲームに関連する) クライアント関連技術のまとめ

出力前処理 ロジック 制作物 制作工程

アート

ブラウザ

FLASH Player

CPU

サーバー

PHP

32 /124

Page 34: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心 クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

クライアント側は ブラウザ/Flash Playerに

任せる

サーバーサイドの ロジック実装、

コンテンツ開発に全力を注ぐ!

33 /124

Page 35: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心 クライアント関連技術の視点

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

FLASH Playerの 代替となる高い パフォーマンスの プレイヤーの模索

2Dアニメーションデータ(swf) をブラウザで表示するための変換

方法の模索

34 /124

Page 36: GREE TechTalk グリーのクライアント技術戦略

2か月後

Page 37: GREE TechTalk グリーのクライアント技術戦略

2010年 6月 24日

36 /116

36 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 38: GREE TechTalk グリーのクライアント技術戦略

#greetech01

iPhone4 リリース 37 /124

Page 39: GREE TechTalk グリーのクライアント技術戦略

6か月後

Page 40: GREE TechTalk グリーのクライアント技術戦略

2010年 12月 9日

39 /116

39 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 41: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• インフィニティブレードがリリースされる

2010年 12月 9日

Infinity Blade © 2011-2012 Chair Entertainment Group, LLC

http://en.wikipedia.org/wiki/Infinity_Blade

40 /124

Page 42: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

非ブラウザ・ネイティブ系 クライアント関連技術の視点

出力前処理 ロジック 制作物 制作工程

アート

独自 データ

ネイティブ

C++

独自ゲーム エンジン

独自描画 エンジン

ネイティブ

C++

CPU

GPU 独自 ツール

独自 コンバータ

ネイティブ

C++

ネイティブ

C++

41 /124

Page 43: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

非ブラウザ・ミドルウェア クライアント関連技術のまとめ

出力前処理 ロジック 制作物 制作工程

アート

汎用 3D

データ ミドルウェア

CPU

GPU

スクリプト 言語

42 /124

Page 44: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

非ブラウザ・ミドルウェア クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

クライアント側の 出力まわりの処理は

ミドルウェアにまかせる

クライアントサイドの ロジック実装、

コンテンツ開発に全力を注ぐ!

43 /124

Page 45: GREE TechTalk グリーのクライアント技術戦略

その3か月後

Page 46: GREE TechTalk グリーのクライアント技術戦略

2011年 3月1日

45 /116

45 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 47: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• グリー、マルチOS開発を支援する3Dゲーム開発ツール「Unity」を提供するUnity Technologiesと技術提携

46 /124

Page 48: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

非ブラウザ・ミドルウェア クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

クライアント側の 出力まわりの処理は

ミドルウェアにまかせる

クライアントサイドの ロジック実装、

コンテンツ開発に全力を注ぐ!

47 /124

Page 49: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

非ブラウザ・ミドルウェア どうぶつフレンズまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

48 /124

Page 50: GREE TechTalk グリーのクライアント技術戦略

その7か月後

Page 51: GREE TechTalk グリーのクライアント技術戦略

2011年10月12日

50 /116

50 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 52: GREE TechTalk グリーのクライアント技術戦略

世界同時

Page 53: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• Safari

“Super fast HTML5 draw support.”

iOS5.0配布開始

http://en.wikipedia.org/wiki/IOS_version_history

52 /124

Page 54: GREE TechTalk グリーのクライアント技術戦略

ヾ(*゚∀゚*)ノ♪

Page 55: GREE TechTalk グリーのクライアント技術戦略

さらに2か月後

Page 56: GREE TechTalk グリーのクライアント技術戦略

2011年 12月16日

55 /116

55 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 57: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• CanvasのGPU対応がもりこまれる

Android 4.0 56 /124

Page 58: GREE TechTalk グリーのクライアント技術戦略

ヾ(*゚∀゚*)ノ♪

Page 59: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心 クライアント関連技術の視点

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

HTML5で 高いパフォーマンスが期待できる!

2Dアニメーションデータ(swf) をブラウザで再生できる データへの変換方法の模索

58 /124

Page 60: GREE TechTalk グリーのクライアント技術戦略

1年前

Page 61: GREE TechTalk グリーのクライアント技術戦略

2011年のスマートフォン市場

60 /116

60 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 62: GREE TechTalk グリーのクライアント技術戦略

#greetech01

61 /124

Page 63: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 2011年スマートフォンの国内普及率は9.5%、20歳代が市場を牽引

日経BPコンサルティング

http://consult.nikkeibp.co.jp/consult/news/2011/0801mobile/

62 /124

Page 64: GREE TechTalk グリーのクライアント技術戦略

( ´_ゝ`)フーン

Page 65: GREE TechTalk グリーのクライアント技術戦略

4か月前

Page 66: GREE TechTalk グリーのクライアント技術戦略

2012年 7月25日

65 /116

65 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 67: GREE TechTalk グリーのクライアント技術戦略

#greetech01

66 /124

Page 68: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• スマートフォンの国内普及率は18.0%、1年でほぼ倍増

日経BPコンサルティング

http://consult.nikkeibp.co.jp/consult/news/2011/0801mobile/

67 /124

Page 69: GREE TechTalk グリーのクライアント技術戦略

( ;゚Д ゚)

Page 70: GREE TechTalk グリーのクライアント技術戦略

#greetech01

入出力

非ブラウザコンソールの クライアント関連技術の視点

出力前処理 ロジック 制作物 制作工程

アート

独自 データ

ネイティブ

C++

独自ゲーム エンジン

独自描画 エンジン

ネイティブ

C++

CPU

GPU 独自 ツール

独自 コンバータ

ネイティブ

C++

ネイティブ

C++

巨大な開発コストを賄えるか どうかが参入の決定要因

69 /124

Page 71: GREE TechTalk グリーのクライアント技術戦略

ヾ(*゚∀゚*)ノ♪

Page 72: GREE TechTalk グリーのクライアント技術戦略

3か月前

Page 73: GREE TechTalk グリーのクライアント技術戦略

2012年 8月 15日

72 /116

72 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 74: GREE TechTalk グリーのクライアント技術戦略

世界同時

Page 75: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• Adobe Flash Player exits Android Google Play store • Android ブラウザのFlashプレイヤーの配布終了

2012/8/15

http://www.bbc.co.uk/news/technology-19267140

74 /124

Page 76: GREE TechTalk グリーのクライアント技術戦略

( ;゚Д ゚)

Page 77: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心 クライアント関連技術の視点

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

乗り換え必須

76 /124

Page 78: GREE TechTalk グリーのクライアント技術戦略

2か月半前

Page 79: GREE TechTalk グリーのクライアント技術戦略

2012年 8月 29日

78 /116

78 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 80: GREE TechTalk グリーのクライアント技術戦略

東京 六本木

Page 81: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 第3回テックヒルズ 「2012..Flashの終焉!? ~Flashの今後を見抜く~」実施レポート

• 「Flashテクノロジーの今後とあなたの人生とのかかわりについて」

Flashテクノロジーの今後とあなたの人生とのかかわりについて

http://gihyo.jp/news/report/2012/09/0301

http://www.slideshare.net/otachan/flash-14113527

80 /124

Page 82: GREE TechTalk グリーのクライアント技術戦略

( ;゚Д ゚)

Page 83: GREE TechTalk グリーのクライアント技術戦略

2か月前

Page 84: GREE TechTalk グリーのクライアント技術戦略

2012年9月12日

83 /116

83 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 85: GREE TechTalk グリーのクライアント技術戦略

サンフランシスコ

Page 86: GREE TechTalk グリーのクライアント技術戦略

#greetech01

85 /124

Page 87: GREE TechTalk グリーのクライアント技術戦略

( ;゚Д ゚)

Page 88: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

ブラウザ中心 クライアント関連技術の視点

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ プラグイン

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

! 87 /124

Page 89: GREE TechTalk グリーのクライアント技術戦略

(((( ;゚Д ゚)))

Page 90: GREE TechTalk グリーのクライアント技術戦略

先月までのまとめ

89 /116

89 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 91: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• ブラウザ系クライアント技術の視点

• GPUに対応したHTML5ブラウザを搭載した デバイスがどのくらいの速度で普及するか デバイス間の互換性はどのくらいか

• 非ブラウザ系クライアント技術の視点

• ミドルウェアを導入すべきなのかどうか

• 参入してよい市場なのかどうか

先月までのクライアント技術のまとめ 90 /124

Page 92: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

(ゲームに関連する) クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

91 /124

Page 93: GREE TechTalk グリーのクライアント技術戦略

1か月前

Page 94: GREE TechTalk グリーのクライアント技術戦略

2012年10月18日

93 /116

93 /116

2013 2012 2011 2010 2009 2008 2007

イマココ

Page 95: GREE TechTalk グリーのクライアント技術戦略

東京

Page 96: GREE TechTalk グリーのクライアント技術戦略

グリー坂本一樹

Page 97: GREE TechTalk グリーのクライアント技術戦略

LWF公開

Page 98: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

(ゲームに関連する) クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

1,HTML5は本当に 大丈夫か? 2,HTML5に

どうやって出力するのか?

3,ミドルウェア に移行できるのか?

97 /124

Page 99: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

(ゲームに関連する) クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

LWFを利用するとFLASHコンテンツを ブラウザ/非ブラウザの両方に出力できる!

98 /124

Page 100: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 1つの分け方として 「ブラウザを中核とするクライアント技術」と 「ブラウザを中核としないクライアント技術」

• ブラウザ中核技術の肝は「標準化」/ 非ブラウザ技術の肝は「差別化」

• 「標準化」と「差別化」の両方を満たす 「HTML5ブラウザ」は未だ安定していない技術

クライアント技術要諦 99 /124

Page 101: GREE TechTalk グリーのクライアント技術戦略

#greetech01

1. 今日までのクライアント技術のまとめ

2. グリーのクライアント技術戦略

3. クライアント技術におけるLWFの役割

4. グリーのオープンソース活動

アジェンダ 100 /124

Page 102: GREE TechTalk グリーのクライアント技術戦略

②グリーのクライアント 技術戦略

Page 103: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

グリーのクライアント技術戦略

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワークn

どこの技術領域をやるの?

102 /124

Page 104: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

グリーのクライアント技術戦略= フルラインナップ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワークn

全部!

103 /124

Page 105: GREE TechTalk グリーのクライアント技術戦略

#greetech01

1. 今日までのクライアント技術のまとめ

2. グリーのクライアント技術戦略

3. LWFを選ぶ理由

4. グリーのオープンソース活動

アジェンダ 104 /124

Page 106: GREE TechTalk グリーのクライアント技術戦略

③LWFを選ぶ理由

Page 107: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

(ゲームに関連する) クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

LWFを利用するとFLASHコンテンツを ブラウザ/非ブラウザの両方に出力できる!

106 /124

Page 108: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• たくさん踏みましたw ほんとたくさんw

地雷踏み済みです! 107 /124

Page 109: GREE TechTalk グリーのクライアント技術戦略

#greetech01

失敗のサイクル

安定しない 技術基盤

予期しない 問題の発生

スケジュール の遅延

焦りながらの 実装、技術基盤への限定的な投資

108 /124

Page 110: GREE TechTalk グリーのクライアント技術戦略

#greetech01

1. 今日までのクライアント技術のまとめ

2. グリーのクライアント技術戦略

3. LWFを選ぶ理由

4. グリーのオープンソース活動

アジェンダ 109 /124

Page 111: GREE TechTalk グリーのクライアント技術戦略

④グリーのオープンソース活動

Page 112: GREE TechTalk グリーのクライアント技術戦略

( ´_ゝ`)オープン?

Page 113: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• グリーはグリーエンジニアの オープンソース活動を通じた コミュニティへの貢献を応援しています!

グリーのオープンソースポリシー 112 /124

Page 114: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

(ゲームに関連する) クライアント関連技術のまとめ

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

HTML5は本当に 大丈夫か?

HTML5に どうやって出力するのか?

ミドルウェア に移行できるのか?

113 /124

Page 115: GREE TechTalk グリーのクライアント技術戦略

#greetech01

出力

制作途中はFLASH制作/出力を なんども繰り返す

2D静止画 マークアップ制作

2D動画制作

3D動画制作

FLASH制作 テキスト

配置情報

2Dアニメ データ

サーバーサイド

ブラウザ

サーバーサイド

ブラウザ

ブラウザ プラグイン

ブラウザ上の プレイヤー

画像

3Dデータ制作

CPU

ミドルウェア

ネイティブ

ミドルウェア

ネイティブ 3Dデータ

動画

出力前処理 ロジック 制作物 制作工程

GPU

サウンド

ネットワーク

114 /124

Page 116: GREE TechTalk グリーのクライアント技術戦略

( ;゚Д ゚)メンドイ

Page 117: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• グリー内製チームで利用している LWFプレビューシステム

• エンジニアリングなしに、アーティストが LWFの調整を行える環境が整う

LWFS 116 /124

Page 118: GREE TechTalk グリーのクライアント技術戦略

公開!

Page 119: GREE TechTalk グリーのクライアント技術戦略

もちろん

Page 120: GREE TechTalk グリーのクライアント技術戦略

オープンソース

Page 121: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 中丸 幸治

• グリー株式会社 開発本部 インフラストラクチャ統括部 アプリケーション基盤開発部 クライアント基盤チーム

• 2012/7からグリー

• 前職まではいろいろ

• モバイル系3DエンジンとかUIとか立体視とか

• 大昔、ファ○タジーゾー○(ファミコン版)のドット打ちして、コインの動きを6502で組みました

• CGの研究とか

自己紹介 120 /124

Page 122: GREE TechTalk グリーのクライアント技術戦略

#greetech01

さらに拡充される LWFテクノロジー

http://github.com/gree

121 /124

Page 123: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• グリーはグリーエンジニアの オープンソース活動を通じた コミュニティへの貢献を応援しています!

グリーのオープンソースポリシー 122 /124

Page 124: GREE TechTalk グリーのクライアント技術戦略

まとめ

Page 125: GREE TechTalk グリーのクライアント技術戦略

#greetech01

• 将来、手詰まりにならないために、 幅広い範囲をカバーできる技術選択も1手!

• LWFは幅広い技術範囲をカバーできます!

• グリーはエンジニアの オープンソース貢献を応援しています!

本セッションでお伝えしたこと 124 /124

Page 126: GREE TechTalk グリーのクライアント技術戦略

一緒に働く仲間を募集しております!

gree.co.jp/recruit