0
DevelopersSummit       グリーにおけるスマホ	        アプリ開発∼ネイティブ編	  14-A-4          堀田 敏史, 白倉 悠祐#devsumiX                            ...
Developers  Summit                    自己紹介	  toshifumi	  .ho+a	          女性向けスマ                              ホネイティブ    	  ...
Developers             In	  Development…	  Summit                    Developers Summit 2013                               ...
DevelopersSummitネイティブアプリのバックエンド	               アセット                     ウェブサーバ データベース             サーバ               CDN	  ...
DevelopersSummit                  アジェンダ	  1.  サーバサイドの開発	    •          ウェブとネイティブの違い	    •          注意した点、設計のポイント	  2.  クライ...
DevelopersSummit                  アジェンダ	  1.  サーバサイドの開発	    •          ウェブとネイティブの違い	    •          注意した点、設計のポイント	  2.	  	 ...
Developers Summit     ウェブアプリの例	  -­‐	  ガーデニング	  ①メニューを選ぶ      ②タネを選ぶ            ③場所を選ぶ               ④タネまき完了              ...
DevelopersSummitネイティブアプリの例	  -­‐	  ガーデニング	               ①メニューを選ぶ                        ②タネを選ぶ              ③場所を選ぶ       ...
DevelopersSummit              何がちがう?	       	       見た目(UI)はもちろん違うのですが…	       	  サーバサイドから見ると…	                     Develo...
DevelopersSummit             何がちがう?	               通信のタイミング	             表示データの在処	               Developers Summit 2013   ...
DevelopersSummit             何がちがう?	               通信のタイミング	             表示データの在処	               Developers Summit 2013   ...
DevelopersSummit             通信のタイミング	      ウェブ   • 画面ベース	     • 1ページで1通信	      ネイティブ   • フローベース	     • UI、画面遷移に応じて必要なタイミン...
DevelopersSummit             何がちがう?	               通信のタイミング	             表示データの在処	               Developers Summit 2013   ...
DevelopersSummit             表示データの在処	      ウェブ   • 通信の度にすべてサーバからデータ配信	     • 表示はWebブラウザ	      ネイティブ   • 更新頻度の低いデータはローカルに置...
DevelopersSummit             サーバサイドを考える	  • 通信のタイミングを考える	    	  • データの管理方法を考える	  • APIを考える	                    Developers ...
DevelopersSummit             サーバサイドを考える	  • 通信のタイミングを考える	    	  • データの管理方法を考える	  • APIを考える	                    Developers ...
Developers Summit         1.	  通信タイミングを考える	  都度通信するタイプ	                ①メニューを選ぶ                        ②タネを選ぶ             ...
Developers Summit         1.	  通信タイミングを考える	  都度通信するタイプ	  • メリット	      • サーバ側と常に同期しているためデータ不整      合の懸念が少ない	  • デメリット	     ...
Developers Summit         2.	  通信タイミングを考える	  すべて非同期で通信するタイプ	                ①メニューを選ぶ                        ②タネを選ぶ        ...
Developers Summit         2.	  通信タイミングを考える	  すべて非同期で通信するタイプ	  • メリット	      • ユーザのアクションがブロックがないため      ユーザ体験向上に寄与	  • デメリット...
Developers Summit         3.	  通信タイミングを考える	  更新タイミングなどで適宜同期するタイプ	                ①メニューを選ぶ                        ②タネを選ぶ   ...
Developers Summit         3.	  通信タイミングを考える	  更新タイミングなどで適宜同期するタイプ	  • メリット	      • ユーザデータの更新タイミングでサーバ側と      同期しているためデータ不整合...
DevelopersSummit             通信タイミングを考える	                   都度	              非同期	             適宜	                         ...
Developers       Summit            通信していないときのログ	  • サーバと同期するまでの間のクライアント  側での動作ログが重要に	            • クライアントサイドの分析ログ	        ...
DevelopersSummit             サーバサイドを考える	  • 通信のタイミングを考える	    	  • データの管理方法を考える	  • APIを考える	                    Developers ...
DevelopersSummit                データ管理	                                          ウェブサーバ          データベース             アセット   ...
DevelopersSummit             データ管理	  • 更新頻度の少ないマスタデータ、アセッ  トデータは初回で取得しローカルに	  • 変更があった場合のみダウンロード	  • 更新頻度の高いユーザデータはサーバと  適...
Developers Summit              マスタデータ管理	                                        ウェブサーバ          データベース初回起動:   一括ダウンロード2回目以...
DevelopersSummit             アセット管理	  • 更新頻度が少ないため、初回起動時にア  セットサーバからダウンロード	  • 容量が大きいため、ユーザプレイ進 に  よって初回ダウンロード量はコントロール  でき...
DevelopersSummit              アセット管理	                                        ウェブサーバ         データベース             アセット       ...
DevelopersSummit             サーバサイドを考える	  • 通信のタイミングを考える	    	  • データの管理方法を考える	  • APIを考える	                    Developers ...
DevelopersSummit              サーバサイドAPI	                                           ウェブサーバ             データベース             ア...
DevelopersSummit             サーバサイドAPI	  • 設計した通信タイミングでクライアント側     から呼ばれる	  	  • データフォーマットはJSON	     • クライアント側から見えやすいようにビュ...
Developers             APIビューワー	  SummitAPIを確認できるビューワーを用意                Developers Summit 2013                           ...
DevelopersSummit                              要素技術	  • Webと変わらない技術で実現可能	     • PHP	  5.3,	  Ethna	  2.6	          • Web	  ...
DevelopersSummit             まとめ	  • UIフローに応じた通信タイミングの設計が  重要に	  • データ管理方針、APIによるクライアント  連携部分は設計の段階での認識合わせが肝	  • 技術的にはウェブで...
Developers Summit                   アジェンダ	  1.	  	  	  	  サーバサイドの開発	     •          ウェブとネイティブの違い	     •          注意した点、設計の...
Developers  Summit               自己紹介:白倉悠祐	                          2008年4月Yusuke.shirakura	      某ゲーム会社入社@gree.net	     ...
Developers Summit                   アジェンダ	  1.	  	  	  	  サーバサイドの開発	     •          ウェブとネイティブの違い	     •          注意した点、設計の...
DevelopersSummit             クライアントのアジェンダ	  ■	  	  グリーにおけるウェブアプリとの違い	  	  ■	  	  開発スタイルについて	  	  ■	  	  ちょっとした工夫点	        ...
DevelopersSummit             クライアントのアジェンダ	  ■	  	  グリーにおけるウェブアプリとの違い	  	  ■	  	  開発スタイルについて	  	  ■	  	  ちょっとした工夫点	        ...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ・画面ベース	  ・1ページ1通信	    ネイティブアプリ・フローベース	  ・場面に応じた通信	                   Dev...
Developers Summit              ウェブアプリとの違い	  ①メニューを選ぶ           ②タネを選ぶ            ③場所を選ぶ                ④タネまき完了            ...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ・画面ベース	  ・1ページ1通信	    ネイティブアプリ・フローベース	  ・場面に応じた通信	                   Dev...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ・画面ベース	                                     通信と表示	  ・1ページ1通信	           ...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ・画面ベース	  ・1ページ1通信	    ネイティブアプリ・フローベース	  ・場面に応じた通信	                   Dev...
DevelopersSummit               ウェブアプリとの違い	               ①メニューを選ぶ                        ②タネを選ぶ              ③場所を選ぶ       ...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ ・画面ベース	   ・1ページ1通信	    ネイティブアプリ ・フローベース	   ・場面に応じた通信	                  ...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ ・画面ベース	   ・1ページ1通信	    ネイティブアプリ ・フローベース	                               ...
DevelopersSummit             ウェブアプリとの違い	    ウェブアプリ ・画面ベース	                                    通信と表示	   ・1ページ1通信	          ...
DevelopersSummit             ウェブアプリとの違い	    開発環境の違い■	  クライアントの開発にはUnityを利用	   ・GREE	  Unity	  PlaXorm	   ・Lightweight	  SW...
DevelopersSummit             クライアントのアジェンダ	  ■	  	  グリーにおけるウェブアプリとの違い	  	  ■	  	  開発スタイルについて	  	  ■	  	  ちょっとした工夫点	        ...
DevelopersSummit             クライアントのアジェンダ	  ■	  	  グリーにおけるウェブアプリとの違い	  	  ■	  	  開発スタイルについて	  	  ■	  	  ちょっとした工夫点	        ...
DevelopersSummit             開発スタイルについて	    クライアントサイド■	  サーバとのやり取りを主に担当	    → バックエンド	  	  ■	  ユーザインターフェース、遷移の管理	    → フロント...
DevelopersSummit             開発スタイルについて	    クライアントサイド■	  サーバとのやり取りを主に担当	    → バックエンド	  	  ■	  ユーザインターフェース、遷移の管理	    → フロント...
DevelopersSummit             開発スタイルについて	    クライアントサイド■	  サーバとのやり取りを主に担当	    → バックエンド	  	  ■	  インターフェース、遷移の管理	    → フロントエンド...
DevelopersSummit             開発スタイルについて	    クライアントサイド■	  サーバとのやり取りを主に担当	    → バックエンド	  	  ■	  インターフェース、遷移の管理	    	   プロトタイ...
DevelopersSummit              開発スタイルについて	      インターフェースや遷移、通信タイミング	     複数人での開発                   運用での機能追加	             プロ...
DevelopersSummit              開発スタイルについて	      インターフェースや遷移、通信タイミング	     複数人での開発                   運用での機能追加	             プロ...
DevelopersSummit             クライアントのアジェンダ	  ■	  	  グリーにおけるウェブアプリとの違い	  	  ■	  	  開発スタイルについて	  	  ■	  	  ちょっとした工夫点	        ...
DevelopersSummit             クライアントのアジェンダ	  ■	  	  グリーにおけるウェブアプリとの違い	  	  ■	  	  開発スタイルについて	  	  ■	  	  ちょっとした工夫点	        ...
DevelopersSummit             ちょっとした工夫	               ちょっとした工夫	                  Developers Summit 2013                    ...
DevelopersSummit             ちょっとした工夫	            ちょっとした工夫	                	                	        遷移図とコードを自動生成しました	    ...
DevelopersSummit             ちょっとした工夫	                こんな感じです                Developers Summit 2013                       ...
DevelopersSummit             ちょっとした工夫	    なぜ自動生成にしたか?■	  ドキュメントの管理が面倒くさい	  	  ■	  ある程度コードが統一される	  	  ■	  新規メンバーへの教育が楽	    ...
DevelopersSummit             ちょとした工夫	    自動生成のために考えた事■	  共通項は何か?	  	  ■	  どこまで自動で生成するのか?	  	  ■	  どれくらいなら使い易いか?	          ...
DevelopersSummit               ちょっとした工夫	               条件1	                         条件2	処理1                    処理2	       ...
DevelopersSummit               ちょっとした工夫	               条件1	                         条件2	処理1                    処理2	       ...
DevelopersSummit                   ちょっとした工夫	      フォーマットは	                             YAML   Start:     Main:   Main:    ...
DevelopersSummit                    ちょっとした工夫	     Start:     Main: {when: “Press start button”}   Main:     Done: {when: ”...
DevelopersSummit             ちょっとした工夫	   遷移図の表示は	               Graphviz h+p://www.graphviz.org/	   	   AT&T研究所	   DOTファイル...
DevelopersSummit                                               ちょっとした工夫	   遷移図の表示は	                                       ...
DevelopersSummit             ちょっとした工夫	   コンバータは	                Ruby 	   ■	  Ruby	  1.8からYAML	  Libraryが標準添付	   ■	  ruby-­...
DevelopersSummit             Developers Summit 2013                            Action !
DevelopersSummit                   ちょっとした工夫	     Start:     Main:   Main:     Game: {when: "Press start button"}     Done:...
DevelopersSummit                   ちょっとした工夫	     Start:     Main:   Main:     Game: {when: "Press start button"}     Done:...
DevelopersSummit             ちょっとした工夫	  遷移図ができました                Developers Summit 2013                               Acti...
DevelopersSummit             ちょっとした工夫	  C#のコードができました	                  Developers Summit 2013                             ...
DevelopersSummit               ちょっとした工夫	               遷移図の管理が楽	             コードがある程度統一	         新規メンバーへの教育	              ...
DevelopersSummit             クライアントサイドまとめ	         まとめ■	  開発スタイル	   ・少人数から大人数へ	   ・役割分担	  	  ■	  自動生成	   ・導入までの障壁が高い	   ・そ...
DevelopersSummitご清聴ありがとうございました	               Developers Summit 2013                            Action !
Upcoming SlideShare
Loading in...5
×

Devsumi2013 14

1,455

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,455
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Devsumi2013 14"

  1. 1. DevelopersSummit グリーにおけるスマホ   アプリ開発∼ネイティブ編  14-A-4 堀田 敏史, 白倉 悠祐#devsumiX グリー株式会社 開発本部 Japan Studio統括部 Developers Summit 2013 Action !
  2. 2. Developers Summit 自己紹介  toshifumi  .ho+a   女性向けスマ ホネイティブ  @Toshiponnu   アプリの開発 2012 2011 女性向け 1987 モバイルウェブ アプリの開発 Developers Summit 2013 Action !
  3. 3. Developers In  Development…  Summit Developers Summit 2013 Action !
  4. 4. DevelopersSummitネイティブアプリのバックエンド   アセット ウェブサーバ データベース サーバ CDN インターネット … …クライアントアプリ Developers Summit 2013 Action !
  5. 5. DevelopersSummit アジェンダ  1.  サーバサイドの開発   •  ウェブとネイティブの違い   •  注意した点、設計のポイント  2.  クライアントサイドの開発   •  グリーにおけるウェブアプリとの違い   •  開発スタイルについて   •  ちょっとした工夫点   Developers Summit 2013 Action !
  6. 6. DevelopersSummit アジェンダ  1.  サーバサイドの開発   •  ウェブとネイティブの違い   •  注意した点、設計のポイント  2.        クライアントサイドの開発   •  グリーにおけるウェブアプリとの違い   •  開発スタイルについて   •  ちょっとした工夫点   Developers Summit 2013 Action !
  7. 7. Developers Summit ウェブアプリの例  -­‐  ガーデニング  ①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了 vb Developers Summit 2013 Action !
  8. 8. DevelopersSummitネイティブアプリの例  -­‐  ガーデニング   ①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了 Developers Summit 2013 Action !
  9. 9. DevelopersSummit 何がちがう?     見た目(UI)はもちろん違うのですが…    サーバサイドから見ると…   Developers Summit 2013 Action !
  10. 10. DevelopersSummit 何がちがう?   通信のタイミング 表示データの在処 Developers Summit 2013 Action !
  11. 11. DevelopersSummit 何がちがう?   通信のタイミング 表示データの在処 Developers Summit 2013 Action !
  12. 12. DevelopersSummit 通信のタイミング   ウェブ • 画面ベース   • 1ページで1通信   ネイティブ • フローベース   • UI、画面遷移に応じて必要なタイミングで   Developers Summit 2013 Action !
  13. 13. DevelopersSummit 何がちがう?   通信のタイミング 表示データの在処 Developers Summit 2013 Action !
  14. 14. DevelopersSummit 表示データの在処   ウェブ • 通信の度にすべてサーバからデータ配信   • 表示はWebブラウザ   ネイティブ • 更新頻度の低いデータはローカルに置ける   • 表示はクライアント側   Developers Summit 2013 Action !
  15. 15. DevelopersSummit サーバサイドを考える  • 通信のタイミングを考える    • データの管理方法を考える  • APIを考える   Developers Summit 2013 Action !
  16. 16. DevelopersSummit サーバサイドを考える  • 通信のタイミングを考える    • データの管理方法を考える  • APIを考える   Developers Summit 2013 Action !
  17. 17. Developers Summit 1.  通信タイミングを考える  都度通信するタイプ   ①メニューを選ぶ ②タネを選ぶ 通信 通信 ③場所を選ぶ ④タネまき完了 通信 Developers Summit 2013 Action !
  18. 18. Developers Summit 1.  通信タイミングを考える  都度通信するタイプ  • メリット   • サーバ側と常に同期しているためデータ不整 合の懸念が少ない  • デメリット   • 通信のタイミングでユーザのアクションがブ ロックされる   Developers Summit 2013 Action !
  19. 19. Developers Summit 2.  通信タイミングを考える  すべて非同期で通信するタイプ   ①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了 非同期 Developers Summit 2013 Action !
  20. 20. Developers Summit 2.  通信タイミングを考える  すべて非同期で通信するタイプ  • メリット   • ユーザのアクションがブロックがないため ユーザ体験向上に寄与  • デメリット   • サーバ側と常に同期しているわけではないた め、注意が必要   • クライアント側でユーザのアクションログ、管理 する必要がある   Developers Summit 2013 Action !
  21. 21. Developers Summit 3.  通信タイミングを考える  更新タイミングなどで適宜同期するタイプ   ①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了 通信 Developers Summit 2013 Action !
  22. 22. Developers Summit 3.  通信タイミングを考える  更新タイミングなどで適宜同期するタイプ  • メリット   • ユーザデータの更新タイミングでサーバ側と 同期しているためデータ不整合の懸念は少な い  • デメリット   • 都度通信よりは軽微だが通信のタイミングで ユーザのアクションがブロックされる   Developers Summit 2013 Action !
  23. 23. DevelopersSummit 通信タイミングを考える   都度 非同期 適宜 ユーザ体験 △ ◎ ○ 安全性 / トレー サビリティ ◎ △ ○ • UIフローや画面の要件に合ったタイミング での通信を   Developers Summit 2013 Action !
  24. 24. Developers Summit 通信していないときのログ  • サーバと同期するまでの間のクライアント 側での動作ログが重要に   • クライアントサイドの分析ログ   • クライアント内部エラー    • クライアントからサーバへ送る仕組み   •   サーバ側でトレースできるように     Developers Summit 2013 Action !
  25. 25. DevelopersSummit サーバサイドを考える  • 通信のタイミングを考える    • データの管理方法を考える  • APIを考える   Developers Summit 2013 Action !
  26. 26. DevelopersSummit データ管理   ウェブサーバ データベース アセット サーバ CDN master_deco… master_id master_plant aquire_exp インターネット aquire_point master_id collection_id category … aquire_point aquire_exp …クライアントアプリ Developers Summit 2013 Action !
  27. 27. DevelopersSummit データ管理  • 更新頻度の少ないマスタデータ、アセッ トデータは初回で取得しローカルに  • 変更があった場合のみダウンロード  • 更新頻度の高いユーザデータはサーバと 適宜同期   Developers Summit 2013 Action !
  28. 28. Developers Summit マスタデータ管理   ウェブサーバ データベース初回起動:   一括ダウンロード2回目以降:  変更なし ダウンロードなし  変更あり 変更されたマスタのみダウンロード master_deco… master_id master_plant: master_plant aquire_exp b94d81425961a11d 7a88d507245cf67b aquire_point master_id master_decoration: collection_id category b94d81425961a11d … aquire_point 7a88d507245cf67b aquire_exp … …クライアントアプリ Developers Summit 2013 Action !
  29. 29. DevelopersSummit アセット管理  • 更新頻度が少ないため、初回起動時にア セットサーバからダウンロード  • 容量が大きいため、ユーザプレイ進 に よって初回ダウンロード量はコントロール できるように  • アセット単位でバージョン管理  • 通信のタイミングでバージョンチェックし、 更新があれば都度アップデートする方式   Developers Summit 2013 Action !
  30. 30. DevelopersSummit アセット管理   ウェブサーバ データベース アセット サーバ master_asset master_asset_bundle id : version 3120833dd2d084c08 app_version d21a2305c0e155c… master_plant: path b94d81425961a11d7 … a88d507245cf67bクライアントアプリ Developers Summit 2013 Action !
  31. 31. DevelopersSummit サーバサイドを考える  • 通信のタイミングを考える    • データの管理方法を考える  • APIを考える   Developers Summit 2013 Action !
  32. 32. DevelopersSummit サーバサイドAPI   ウェブサーバ データベース アセット サーバ REST CDN user_plant {code: ”200”, “response”: { id “id”: 1 Instance_id インターネット “user_id”: 12345 “master_id”: 2 master_id user aquire_exp “x”: 13 “y”: 14 … user_id “garden_id”: 1 } Level Level_max friend_max …クライアントアプリ Developers Summit 2013 Action !
  33. 33. DevelopersSummit サーバサイドAPI  • 設計した通信タイミングでクライアント側 から呼ばれる    • データフォーマットはJSON   • クライアント側から見えやすいようにビュー ワーを開発  • インターフェース、エラーコードはクライ アントとの擦り合わせが重要   Developers Summit 2013 Action !
  34. 34. Developers APIビューワー  SummitAPIを確認できるビューワーを用意 Developers Summit 2013 Action !
  35. 35. DevelopersSummit 要素技術  • Webと変わらない技術で実現可能   • PHP  5.3,  Ethna  2.6   • Web  APIのサーバサイドロジック   • Mysql  5.5   • 永続データを保存、マスタ/スレーブ、Sharding   • Flare   • 永続データで参照/更新頻度の高いデータを保存   • Memcached   •   一時的なデータを保存   Developers Summit 2013 Action !
  36. 36. DevelopersSummit まとめ  • UIフローに応じた通信タイミングの設計が 重要に  • データ管理方針、APIによるクライアント 連携部分は設計の段階での認識合わせが肝  • 技術的にはウェブでのノウハウを使って実 現可能   Developers Summit 2013 Action !
  37. 37. Developers Summit アジェンダ  1.        サーバサイドの開発   •  ウェブとネイティブの違い   •  注意した点、設計のポイント  2.  クライアントサイドの開発   •  グリーにおけるウェブアプリとの違い   •  開発スタイルについて   •  ちょっとした工夫点   Developers Summit 2013 Action !
  38. 38. Developers Summit 自己紹介:白倉悠祐   2008年4月Yusuke.shirakura   某ゲーム会社入社@gree.net   組み込み系の開発に携わる 2012年7月 グリー株式会社入社 クライアント・サーバ両方担当 Developers Summit 2013 Action !
  39. 39. Developers Summit アジェンダ  1.        サーバサイドの開発   •  ウェブとネイティブの違い   •  注意した点、設計のポイント  2.  クライアントサイドの開発   •  グリーにおけるウェブアプリとの違い   •  開発スタイルについて   •  ちょっとした工夫点   Developers Summit 2013 Action !
  40. 40. DevelopersSummit クライアントのアジェンダ  ■    グリーにおけるウェブアプリとの違い    ■    開発スタイルについて    ■    ちょっとした工夫点   Developers Summit 2013 Action !
  41. 41. DevelopersSummit クライアントのアジェンダ  ■    グリーにおけるウェブアプリとの違い    ■    開発スタイルについて    ■    ちょっとした工夫点   Developers Summit 2013 Action !
  42. 42. DevelopersSummit ウェブアプリとの違い   ウェブアプリ・画面ベース  ・1ページ1通信   ネイティブアプリ・フローベース  ・場面に応じた通信   Developers Summit 2013 Action !
  43. 43. Developers Summit ウェブアプリとの違い  ①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了 vb 通信 通信 通信 Developers Summit 2013 Action !
  44. 44. DevelopersSummit ウェブアプリとの違い   ウェブアプリ・画面ベース  ・1ページ1通信   ネイティブアプリ・フローベース  ・場面に応じた通信   Developers Summit 2013 Action !
  45. 45. DevelopersSummit ウェブアプリとの違い   ウェブアプリ・画面ベース   通信と表示  ・1ページ1通信   を主に1人で   ネイティブアプリ・フローベース  ・場面に応じた通信   Developers Summit 2013 Action !
  46. 46. DevelopersSummit ウェブアプリとの違い   ウェブアプリ・画面ベース  ・1ページ1通信   ネイティブアプリ・フローベース  ・場面に応じた通信   Developers Summit 2013 Action !
  47. 47. DevelopersSummit ウェブアプリとの違い   ①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネをまく 通信 Developers Summit 2013 Action !
  48. 48. DevelopersSummit ウェブアプリとの違い   ウェブアプリ ・画面ベース   ・1ページ1通信   ネイティブアプリ ・フローベース   ・場面に応じた通信   Developers Summit 2013 Action !
  49. 49. DevelopersSummit ウェブアプリとの違い   ウェブアプリ ・画面ベース   ・1ページ1通信   ネイティブアプリ ・フローベース   通信と表示   ・場面に応じた通信   で役割分担   Developers Summit 2013 Action !
  50. 50. DevelopersSummit ウェブアプリとの違い   ウェブアプリ ・画面ベース   通信と表示   ・1ページ1通信   を主に1人で   ネイティブアプリ ・フローベース   通信と表示   ・場面に応じた通信   で役割分担   Developers Summit 2013 Action !
  51. 51. DevelopersSummit ウェブアプリとの違い   開発環境の違い■  クライアントの開発にはUnityを利用   ・GREE  Unity  PlaXorm   ・Lightweight  SWF(LWF)   Developers Summit 2013 Action !
  52. 52. DevelopersSummit クライアントのアジェンダ  ■    グリーにおけるウェブアプリとの違い    ■    開発スタイルについて    ■    ちょっとした工夫点   Developers Summit 2013 Action !
  53. 53. DevelopersSummit クライアントのアジェンダ  ■    グリーにおけるウェブアプリとの違い    ■    開発スタイルについて    ■    ちょっとした工夫点   Developers Summit 2013 Action !
  54. 54. DevelopersSummit 開発スタイルについて   クライアントサイド■  サーバとのやり取りを主に担当    → バックエンド    ■  ユーザインターフェース、遷移の管理    → フロントエンド   Developers Summit 2013 Action !
  55. 55. DevelopersSummit 開発スタイルについて   クライアントサイド■  サーバとのやり取りを主に担当    → バックエンド    ■  ユーザインターフェース、遷移の管理    → フロントエンド   Developers Summit 2013 Action !
  56. 56. DevelopersSummit 開発スタイルについて   クライアントサイド■  サーバとのやり取りを主に担当    → バックエンド    ■  インターフェース、遷移の管理    → フロントエンド   Developers Summit 2013 Action !
  57. 57. DevelopersSummit 開発スタイルについて   クライアントサイド■  サーバとのやり取りを主に担当    → バックエンド    ■  インターフェース、遷移の管理       プロトタイプでのレビュー等で   出た要望によって処理が複雑化   Developers Summit 2013 Action !
  58. 58. DevelopersSummit 開発スタイルについて   インターフェースや遷移、通信タイミング 複数人での開発 運用での機能追加 プロジェクトメンバー追加、変更 Developers Summit 2013 Action !
  59. 59. DevelopersSummit 開発スタイルについて   インターフェースや遷移、通信タイミング 複数人での開発 運用での機能追加 プロジェクトメンバー追加、変更 フローが把握し易ければ問題ない Developers Summit 2013 Action !
  60. 60. DevelopersSummit クライアントのアジェンダ  ■    グリーにおけるウェブアプリとの違い    ■    開発スタイルについて    ■    ちょっとした工夫点   Developers Summit 2013 Action !
  61. 61. DevelopersSummit クライアントのアジェンダ  ■    グリーにおけるウェブアプリとの違い    ■    開発スタイルについて    ■    ちょっとした工夫点   Developers Summit 2013 Action !
  62. 62. DevelopersSummit ちょっとした工夫   ちょっとした工夫   Developers Summit 2013 Action !
  63. 63. DevelopersSummit ちょっとした工夫   ちょっとした工夫       遷移図とコードを自動生成しました   Developers Summit 2013 Action !
  64. 64. DevelopersSummit ちょっとした工夫   こんな感じです Developers Summit 2013 Action !
  65. 65. DevelopersSummit ちょっとした工夫   なぜ自動生成にしたか?■  ドキュメントの管理が面倒くさい    ■  ある程度コードが統一される    ■  新規メンバーへの教育が楽   Developers Summit 2013 Action !
  66. 66. DevelopersSummit ちょとした工夫   自動生成のために考えた事■  共通項は何か?    ■  どこまで自動で生成するのか?    ■  どれくらいなら使い易いか?   Developers Summit 2013 Action !
  67. 67. DevelopersSummit ちょっとした工夫   条件1 条件2 処理1 処理2 処理3 処理があって条件があってまた次の処理   基本的な構造は一緒 Developers Summit 2013 Action !
  68. 68. DevelopersSummit ちょっとした工夫   条件1 条件2 処理1 処理2 処理3 処理と条件からコードと遷移図を生成   Developers Summit 2013 Action !
  69. 69. DevelopersSummit ちょっとした工夫   フォーマットは   YAML Start:   Main: Main:   Game: {when: "Press start button"}   Done: {when: "Finish" } Game   Main: {when: "Game Over"} Done: Developers Summit 2013 Action !
  70. 70. DevelopersSummit ちょっとした工夫   Start:   Main: {when: “Press start button”} Main:   Done: {when: ”Game over”} Done: Press Start button Game over Start Main Done Developers Summit 2013 Action !
  71. 71. DevelopersSummit ちょっとした工夫   遷移図の表示は   Graphviz h+p://www.graphviz.org/     AT&T研究所   DOTファイルを生成・編集するツール群       Developers Summit 2013 Action !
  72. 72. DevelopersSummit ちょっとした工夫   遷移図の表示は   Graphviz g  =  GraphViz::new(BASENAME)      nodes  =  {}      data.nodes.each  do  |  node  |          shape  =  "ellipse"          shape  =  "box"  if  node.rlink.empty?  ||  node.link.empty?          nodes[node.name]  =  g.add_nodes(node.name,  :shape  =>  shape,  :URL  =>  "../../")      end   Developers Summit 2013 Action !
  73. 73. DevelopersSummit ちょっとした工夫   コンバータは   Ruby   ■  Ruby  1.8からYAML  Libraryが標準添付   ■  ruby-­‐graphvizも利用できる   ■  C#のフォーマットを用意     Developers Summit 2013 Action !
  74. 74. DevelopersSummit Developers Summit 2013 Action !
  75. 75. DevelopersSummit ちょっとした工夫   Start:   Main: Main:   Game: {when: "Press start button"}   Done: {when: "Finish" } Game:   Main: {when: "Game Over"} Done: Developers Summit 2013 Action !
  76. 76. DevelopersSummit ちょっとした工夫   Start:   Main: Main:   Game: {when: "Press start button"}   Done: {when: "Finish" } Game:   Main: {when: "Game Over"} Done: このYAMLをコンバータにかけてみると Developers Summit 2013 Action !
  77. 77. DevelopersSummit ちょっとした工夫  遷移図ができました Developers Summit 2013 Action !
  78. 78. DevelopersSummit ちょっとした工夫  C#のコードができました   Developers Summit 2013 Action !
  79. 79. DevelopersSummit ちょっとした工夫   遷移図の管理が楽 コードがある程度統一 新規メンバーへの教育 Developers Summit 2013 Action !
  80. 80. DevelopersSummit クライアントサイドまとめ   まとめ■  開発スタイル   ・少人数から大人数へ   ・役割分担    ■  自動生成   ・導入までの障壁が高い   ・その分得られるものが多い   Developers Summit 2013 Action !
  81. 81. DevelopersSummitご清聴ありがとうございました   Developers Summit 2013 Action !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×