Devsumi2013 14

1,600
-1

Published on

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

No Downloads
Views
Total Views
1,600
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

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.

×