• Like
Devsumi2013 14
Upcoming SlideShare
Loading in...5
×

Devsumi2013 14

  • 1,277 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,277
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
29
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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