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

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

1/124 自己紹介：芳賀洋行どうぶつフレンズ CTO室エンジニアリーダー 2012 イマココどうぶつフレンズプロダクトマネジャー 2012 グリー 2012 オートデスク 2011 ロンドンスタジオエンジニアマネジャー 2006 2010 2003 エイリアスグロービス経営大学院 2003 会津大学コンピュータサイエンス #greetech01

2/124 アジェンダ 1. 今日までのクライアント技術のまとめ 2. グリーのクライアント技術戦略 3. クライアント技術におけるLWFの役割 4. グリーのオープンソース活動質問、コメントなどございましたら #greetech01までつぶやきお願いします #greetech01

3/124 ゲームシステムにおける本日の話の位置づけインターネット計算データ分析コード U コード E 企画マーケットアプリ画像 D プレースアプリ SWF A #greetech01

4/124 本セッションでお伝えすること • 将来、手詰まりにならないために、幅広い範囲をカバーできる技術選択も１手！ • LWFは幅広い技術範囲をカバーできます！ • グリーはエンジニアのオープンソース貢献を応援しています！ #greetech01

5/124 アジェンダ 1. 今日までのクライアント技術のまとめ 2. グリーのクライアント技術戦略 3. クライアント技術におけるLWFの役割 4. グリーのオープンソース活動 #greetech01

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

7/124 ここまでクライアント技術要諦 • １つの分け方として「ブラウザを中核とするクライアント技術」と「ブラウザを中核としないクライアント技術」 • ブラウザ中核技術の肝は「標準化」/ 非ブラウザ技術の肝は「差別化」 • 「標準化」と「差別化」の両方を満たす「HTML5ブラウザ」は未だ安定していない技術 #greetech01

8/124 本日の枠組み制作工程制作物ロジック出力前処理出力ゲーム実行結果を制作物を制作物種類をロジックをハードウェア出力する前の作る増やす/絞る記述するで描画する処理場所と方法 #greetech01

順を追っていきましょう

5年前

2007 2008 2009 2010 2011 2012 2013 イマココ 2007年

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

13 ブラウザ中心/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理入出力ブラウザ CPU FLASH アート Player サーバー PHP #greetech01

14 ブラウザ中心/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

15 ブラウザ中心クライアント技術のまとめ/124 標準化による短い開発期間の実現制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画クライアント側はサーバーサイドの3Dデータ制作ロジック実装、 3Dデータネイティブブラウザ/Flash Playerにネイティブサウンドコンテンツ開発に全力を注ぐ！任せる #greetech01

4年前

17/1162007 2008 2009 2010 2011 2012 2013 イマココ 2008年

18/124 2008年 • はじめて国内のコンソールゲーム市場が縮小に転じる2008年国内ゲーム市場規模は約5826億1000万円（エンターブレイン調べ） #greetech01http://www.famitsu.com/game/news/1221045_1124.html

19 非ブラウザネイティブのクライアント技術/124 差別化(特殊化)による長い開発期間制作工程制作物ロジック出力前処理入出力独自 CPU 独自描画データエンジンアート独自ゲーム独自独自 GPU エンジンツールコンバータネイティブネイティブネイティブネイティブ C++ C++ C++ C++ #greetech01

20 非ブラウザコンソールの/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

21 非ブラウザコンソールの/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理出力 2D静止画ハードウェアの限界性能を引き出せるがマークアップ制作画像サーバーサイドサーバーサイドネットワーク広い技術領域、高い難易度、プラットテキストフォームごとに異なるデバイス特性にブラウザFLASH制作ブラウザあわせたエンジニアリングが必要になる CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

22/1162007 2008 2009 2010 2011 2012 2013 イマココ 2008年 7月 10日

23/124 2008年7月10日 • App Store開始http://en.wikipedia.org/wiki/App_Store_(iOS) #greetech01

24 ブラウザ中心/124 クライアント関連技術からの視点制作工程制作物ロジック出力前処理入出力 FLASH Playerの対応が参入の時期の決定要因ブラウザ CPU FLASH アート Player サーバー PHP #greetech01

25 非ブラウザコンソールの/124 クライアント関連技術の視点制作工程制作物ロジック出力前処理入出力巨大な開発コストを賄えるかどうかが参入の決定要因独自 CPU 独自描画データエンジンアート独自ゲーム独自独自 GPU エンジンツールコンバータネイティブネイティブネイティブネイティブ C++ C++ C++ C++ #greetech01

約2年後

27/1162007 2008 2009 2010 2011 2012 2013 イマココ 2010年 4月

アップル声明文

29/124 Apple FLASHプレイヤーに • Apple FLASHプレイヤーに対応しないことを正式に表明http://www.apple.com/hotnews/thoughts-on-flash #greetech01

( ；ﾟД ﾟ)

31 ブラウザ中心/124 クライアント関連技術からの視点制作工程制作物ロジック出力前処理入出力 FLASH Playerの対応が参入の時期の決定要因ブラウザ CPU FLASH アート Player サーバー PHP #greetech01

32 (ゲームに関連する)/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理入出力ブラウザ CPU FLASH アート Player サーバー PHP #greetech01

33 ブラウザ中心/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画クライアント側はサーバーサイドの3Dデータ制作ロジック実装、 3Dデータネイティブブラウザ/Flash Playerにネイティブサウンドコンテンツ開発に全力を注ぐ！任せる #greetech01

34 ブラウザ中心/124 クライアント関連技術の視点制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア Playerの FLASH 動画 2Dアニメーションデータ(swf) 代替となる高いをブラウザで表示するための変換3Dデータ制作 3Dデータネイティブパフォーマンスのネイティブサウンド方法の模索プレイヤーの模索 #greetech01

２か月後

36/1162007 2008 2009 2010 2011 2012 2013 イマココ 2010年 6月 24日

37/124 iPhone4 リリース #greetech01

６か月後

39/1162007 2008 2009 2010 2011 2012 2013 イマココ 2010年 12月 9日

41 非ブラウザ・ネイティブ系/124 クライアント関連技術の視点制作工程制作物ロジック出力前処理入出力独自 CPU 独自描画データエンジンアート独自ゲーム独自独自 GPU エンジンツールコンバータネイティブネイティブネイティブネイティブ C++ C++ C++ C++ #greetech01

42 非ブラウザ・ミドルウェア/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理入出力汎用 CPU 3D データミドルウェアアートスクリプト言語 GPU #greetech01

43 非ブラウザ・ミドルウェア/124 クライアント関連技術のまとめクライアント側の制作工程制作物出力まわりの処理はロジック出力前処理出力ミドルウェアにまかせる 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキストクライアントサイドのブラウザ FLASH制作ブラウザロジック実装、 CPU 配置情報ブラウザコンテンツ開発に全力を注ぐ！ブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

その3か月後

45/1162007 2008 2009 2010 2011 2012 2013 イマココ 2011年 3月1日

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

47 非ブラウザ・ミドルウェア/124 クライアント関連技術のまとめ制作工程制作物クライアント側のロジック出力前処理出力出力まわりの処理は 2D静止画画像ミドルウェアにまかせるサーバーサイドサーバーサイドネットワークマークアップ制作テキストクライアントサイドのブラウザ FLASH制作ブラウザロジック実装、 CPU 配置情報ブラウザコンテンツ開発に全力を注ぐ！ブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

48 非ブラウザ・ミドルウェア/124 どうぶつフレンズまとめ制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

その7か月後

50/1162007 2008 2009 2010 2011 2012 2013 イマココ 2011年10月12日

世界同時

52/124 iOS5.0配布開始 • Safari “Super fast HTML5 draw support.”http://en.wikipedia.org/wiki/IOS_version_history #greetech01

ヾ(*ﾟ∀ﾟ*)ﾉ♪

さらに2か月後

55/1162007 2008 2009 2010 2011 2012 2013 イマココ 2011年 12月16日

56/124 Android 4.0 • CanvasのGPU対応がもりこまれる #greetech01

58 ブラウザ中心/124 クライアント関連技術の視点制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画 2Dアニメーションデータ(swf) HTML5でをブラウザで再生できる高いパフォーマンス3Dデータ制作 3Dデータネイティブネイティブサウンドデータへの変換方法の模索が期待できる！ #greetech01

１年前

60/1162007 2008 2009 2010 2011 2012 2013 イマココ2011年のスマートフォン市場

61/124 #greetech01

62/124 日経BPコンサルティング • 2011年スマートフォンの国内普及率は9.5％、 20歳代が市場を牽引http://consult.nikkeibp.co.jp/consult/news/2011/0801mobile/ #greetech01

( ´_ゝ`)ﾌｰﾝ

4か月前

65/1162007 2008 2009 2010 2011 2012 2013 イマココ 2012年 7月25日

66/124 #greetech01

67/124 日経BPコンサルティング • スマートフォンの国内普及率は18.0％、1年でほぼ倍増http://consult.nikkeibp.co.jp/consult/news/2011/0801mobile/ #greetech01

( ；ﾟД ﾟ)

69 非ブラウザコンソールの/124 クライアント関連技術の視点制作工程制作物ロジック出力前処理入出力巨大な開発コストを賄えるかどうかが参入の決定要因独自 CPU 独自描画データエンジンアート独自ゲーム独自独自 GPU エンジンツールコンバータネイティブネイティブネイティブネイティブ C++ C++ C++ C++ #greetech01

3か月前

72/1162007 2008 2009 2010 2011 2012 2013 イマココ 2012年 8月 15日

世界同時

74/124 2012/8/15 • Adobe Flash Player exits Android Google Play store • Android ブラウザのFlashプレイヤーの配布終了http://www.bbc.co.uk/news/technology-19267140 #greetech01

( ；ﾟД ﾟ)

76 ブラウザ中心/124 クライアント関連技術の視点制作工程制作物ロジック出力前処理出力乗り換え必須 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

2か月半前

78/1162007 2008 2009 2010 2011 2012 2013 イマココ 2012年 8月 29日

東京六本木

80 Flashテクノロジーの今後とあなたの人生との/124 かかわりについて • 第3回テックヒルズ「2012..Flashの終焉!? ～Flashの今後を見抜く～」実施レポート • 「Flashテクノロジーの今後とあなたの人生とのかかわりについて」http://gihyo.jp/news/report/2012/09/0301http://www.slideshare.net/otachan/flash-14113527 #greetech01

( ；ﾟД ﾟ)

2か月前

83/1162007 2008 2009 2010 2011 2012 2013 イマココ 2012年9月12日

サンフランシスコ

85/124 #greetech01

( ；ﾟД ﾟ)

87 ブラウザ中心クライアント関連技術の視点！/124 制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ2D動画制作 2Dアニメプラグインプラグインデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

(((( ；ﾟД ﾟ)))

89/1162007 2008 2009 2010 2011 2012 2013 イマココ先月までのまとめ

90/124 先月までのクライアント技術のまとめ • ブラウザ系クライアント技術の視点 • GPUに対応したHTML5ブラウザを搭載したデバイスがどのくらいの速度で普及するかデバイス間の互換性はどのくらいか • 非ブラウザ系クライアント技術の視点 • ミドルウェアを導入すべきなのかどうか • 参入してよい市場なのかどうか #greetech01

91 (ゲームに関連する)/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

1か月前

93/1162007 2008 2009 2010 2011 2012 2013 イマココ 2012年10月18日

東京

グリー坂本一樹

LWF公開

97 (ゲームに関連する)/124 クライアント関連技術のまとめ制作工程制作物ロジック出力前処理出力 1,HTML5は本当に 2D静止画 2,HTML5に大丈夫か？画像サーバーサイドサーバーサイドネットワークマークアップ制作どうやって出力するのか？テキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3,ミドルウェア 3Dデータネイティブネイティブサウンドに移行できるのか？ #greetech01

98 (ゲームに関連する)/124 クライアント関連技術のまとめ LWFを利用するとFLASHコンテンツを制作工程制作物ロジック出力前処理出力ブラウザ/非ブラウザの両方に出力できる！ 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

99/124 クライアント技術要諦 • １つの分け方として「ブラウザを中核とするクライアント技術」と「ブラウザを中核としないクライアント技術」 • ブラウザ中核技術の肝は「標準化」/ 非ブラウザ技術の肝は「差別化」 • 「標準化」と「差別化」の両方を満たす「HTML5ブラウザ」は未だ安定していない技術 #greetech01

100/124 アジェンダ 1. 今日までのクライアント技術のまとめ 2. グリーのクライアント技術戦略 3. クライアント技術におけるLWFの役割 4. グリーのオープンソース活動 #greetech01

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

102/124 グリーのクライアント技術戦略制作工程制作物ロジック出力前処理出力 2D静止画ネットワークマークアップ制作画像サーバーサイドサーバーサイドｎテキスト FLASH制作ブラウザブラウザ CPU どこの技術領域をやるの？配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

103 グリーのクライアント技術戦略=/124 フルラインナップ制作工程制作物ロジック出力前処理出力 2D静止画ネットワークマークアップ制作画像サーバーサイドサーバーサイドｎ全部！テキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

104/124 アジェンダ 1. 今日までのクライアント技術のまとめ 2. グリーのクライアント技術戦略 3. LWFを選ぶ理由 4. グリーのオープンソース活動 #greetech01

③LWFを選ぶ理由

106 (ゲームに関連する)/124 クライアント関連技術のまとめ LWFを利用するとFLASHコンテンツを制作工程制作物ロジック出力前処理出力ブラウザ/非ブラウザの両方に出力できる！ 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

107/124 地雷踏み済みです！ • たくさん踏みましたｗほんとたくさんｗ #greetech01

108/124 失敗のサイクル安定しない技術基盤焦りながらの予期しない実装、技術基盤へ問題の発生の限定的な投資スケジュールの遅延 #greetech01

109/124 アジェンダ 1. 今日までのクライアント技術のまとめ 2. グリーのクライアント技術戦略 3. LWFを選ぶ理由 4. グリーのオープンソース活動 #greetech01

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

( ´_ゝ`)ｵｰﾌﾟﾝ?

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

113 (ゲームに関連する)/124 クライアント関連技術のまとめ制作工程制作物 HTML5にロジック HTML5は本当に出力前処理出力 2D静止画どうやって出力大丈夫か？画像サーバーサイドサーバーサイドネットワークマークアップ制作するのか？テキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作ミドルウェア 3Dデータネイティブネイティブサウンドに移行できるのか？ #greetech01

114 制作途中はFLASH制作/出力を/124 なんども繰り返す制作工程制作物ロジック出力前処理出力 2D静止画マークアップ制作画像サーバーサイドサーバーサイドネットワークテキスト FLASH制作ブラウザブラウザ CPU 配置情報ブラウザブラウザ上の2D動画制作 2Dアニメプラグインプレイヤーデータ GPU3D動画制作ミドルウェアミドルウェア動画3Dデータ制作 3Dデータネイティブネイティブサウンド #greetech01

( ；ﾟД ﾟ)メンドイ

116/124 LWFS • グリー内製チームで利用している LWFプレビューシステム • エンジニアリングなしに、アーティストが LWFの調整を行える環境が整う #greetech01

公開！

もちろん

オープンソース

120/124 自己紹介 • 中丸幸治 • グリー株式会社開発本部インフラストラクチャ統括部アプリケーション基盤開発部クライアント基盤チーム • 2012/7からグリー • 前職まではいろいろ • モバイル系3DエンジンとかUIとか立体視とか • 大昔、ファ○タジーゾー○(ファミコン版)のドット打ちして、コインの動きを6502で組みました • CGの研究とか #greetech01

121/124 さらに拡充される LWFテクノロジー http://github.com/gree #greetech01

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

まとめ

124/124 本セッションでお伝えしたこと • 将来、手詰まりにならないために、幅広い範囲をカバーできる技術選択も１手！ • LWFは幅広い技術範囲をカバーできます！ • グリーはエンジニアのオープンソース貢献を応援しています！ #greetech01

一緒に働く仲間を募集しております！ gree.co.jp/recruit

http://labs.gree.jp	9357
https://twitter.com	47
http://localhost	13
http://webcache.googleusercontent.com	12
http://twitter.com	3
http://www.newsblur.com	2
http://sc.dotbranch.com	1
http://translate.googleusercontent.com	1
http://www.hanrss.com	1

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

by Hiroyuki Haga on Nov 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 9,437

Statistics

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