1. Developers
Summit
グリーにおけるスマホ
アプリ開発∼ネイティブ編
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. Developers
Summit
ネイティブアプリのバックエンド
アセット ウェブサーバ データベース
サーバ
CDN
インターネット
…
…
クライアントアプリ Developers Summit 2013
Action !

5. Developers
Summit
アジェンダ
1. サーバサイドの開発
• ウェブとネイティブの違い
• 注意した点、設計のポイント
2. クライアントサイドの開発
• グリーにおけるウェブアプリとの違い
• 開発スタイルについて
• ちょっとした工夫点
Developers Summit 2013
Action !

6. Developers
Summit
アジェンダ
1. サーバサイドの開発
• ウェブとネイティブの違い
• 注意した点、設計のポイント
2.
クライアントサイドの開発
• グリーにおけるウェブアプリとの違い
• 開発スタイルについて
• ちょっとした工夫点
Developers Summit 2013
Action !

7. Developers
Summit
ウェブアプリの例
-­‐
ガーデニング
①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了
vb
Developers Summit 2013
Action !

8. Developers
Summit
ネイティブアプリの例
-­‐
ガーデニング
①メニューを選ぶ ②タネを選ぶ
③場所を選ぶ ④タネまき完了
Developers Summit 2013
Action !

9. Developers
Summit
何がちがう？
見た目(UI)はもちろん違うのですが…
サーバサイドから見ると…
Developers Summit 2013
Action !

10. Developers
Summit
何がちがう？
通信のタイミング
表示データの在処
Developers Summit 2013
Action !

11. Developers
Summit
何がちがう？
通信のタイミング
表示データの在処
Developers Summit 2013
Action !

12. Developers
Summit
通信のタイミング
ウェブ
• 画面ベース
• 1ページで1通信
ネイティブ
• フローベース
• UI、画面遷移に応じて必要なタイミングで
Developers Summit 2013
Action !

13. Developers
Summit
何がちがう？
通信のタイミング
表示データの在処
Developers Summit 2013
Action !

14. Developers
Summit
表示データの在処
ウェブ
• 通信の度にすべてサーバからデータ配信
• 表示はWebブラウザ
ネイティブ
• 更新頻度の低いデータはローカルに置ける
• 表示はクライアント側
Developers Summit 2013
Action !

15. Developers
Summit
サーバサイドを考える
• 通信のタイミングを考える
• データの管理方法を考える
• APIを考える
Developers Summit 2013
Action !

16. Developers
Summit
サーバサイドを考える
• 通信のタイミングを考える
• データの管理方法を考える
• 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. Developers
Summit
通信タイミングを考える
都度
非同期
適宜
ユーザ体験
△
◎
○
安全性 / トレー
サビリティ
◎
△
○
• UIフローや画面の要件に合ったタイミング
での通信を
Developers Summit 2013
Action !

24. Developers
Summit
通信していないときのログ
• サーバと同期するまでの間のクライアント
側での動作ログが重要に
• クライアントサイドの分析ログ
• クライアント内部エラー
• クライアントからサーバへ送る仕組み
•
サーバ側でトレースできるように
Developers Summit 2013
Action !

25. Developers
Summit
サーバサイドを考える
• 通信のタイミングを考える
• データの管理方法を考える
• APIを考える
Developers Summit 2013
Action !

26. Developers
Summit
データ管理
ウェブサーバ データベース
アセット
サーバ
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. Developers
Summit
データ管理
• 更新頻度の少ないマスタデータ、アセッ
トデータは初回で取得しローカルに
• 変更があった場合のみダウンロード
• 更新頻度の高いユーザデータはサーバと
適宜同期
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. Developers
Summit
アセット管理
• 更新頻度が少ないため、初回起動時にア
セットサーバからダウンロード
• 容量が大きいため、ユーザプレイ進 に
よって初回ダウンロード量はコントロール
できるように
• アセット単位でバージョン管理
• 通信のタイミングでバージョンチェックし、
更新があれば都度アップデートする方式
Developers Summit 2013
Action !

30. Developers
Summit
アセット管理
ウェブサーバ データベース
アセット
サーバ
master_asset
master_asset_bundle id
: version
3120833dd2d084c08 app_version
d21a2305c0e155c…
master_plant:
path
b94d81425961a11d7 …
a88d507245cf67b
クライアントアプリ
Developers Summit 2013
Action !

31. Developers
Summit
サーバサイドを考える
• 通信のタイミングを考える
• データの管理方法を考える
• APIを考える
Developers Summit 2013
Action !

32. Developers
Summit
サーバサイド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. Developers
Summit
サーバサイドAPI
• 設計した通信タイミングでクライアント側
から呼ばれる
• データフォーマットはJSON
• クライアント側から見えやすいようにビュー
ワーを開発
• インターフェース、エラーコードはクライ
アントとの擦り合わせが重要
Developers Summit 2013
Action !

34. Developers
APIビューワー
Summit
APIを確認できるビューワーを用意
Developers Summit 2013
Action !

35. Developers
Summit
要素技術
• Webと変わらない技術で実現可能
• PHP
5.3,
Ethna
2.6
• Web
APIのサーバサイドロジック
• Mysql
5.5
• 永続データを保存、マスタ/スレーブ、Sharding
• Flare
• 永続データで参照/更新頻度の高いデータを保存
• Memcached
•
一時的なデータを保存
Developers Summit 2013
Action !

36. Developers
Summit
まとめ
• 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. Developers
Summit
クライアントのアジェンダ
■
グリーにおけるウェブアプリとの違い
■
開発スタイルについて
■
ちょっとした工夫点
Developers Summit 2013
Action !

41. Developers
Summit
クライアントのアジェンダ
■
グリーにおけるウェブアプリとの違い
■
開発スタイルについて
■
ちょっとした工夫点
Developers Summit 2013
Action !

42. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
・１ページ１通信
ネイティブアプリ
・フローベース
・場面に応じた通信
Developers Summit 2013
Action !

43. Developers
Summit
ウェブアプリとの違い
①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了
vb
通信 通信 通信
Developers Summit 2013
Action !

44. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
・１ページ１通信
ネイティブアプリ
・フローベース
・場面に応じた通信
Developers Summit 2013
Action !

45. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
通信と表示
・１ページ１通信
を主に１人で
ネイティブアプリ
・フローベース
・場面に応じた通信
Developers Summit 2013
Action !

46. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
・１ページ１通信
ネイティブアプリ
・フローベース
・場面に応じた通信
Developers Summit 2013
Action !

47. Developers
Summit
ウェブアプリとの違い
①メニューを選ぶ ②タネを選ぶ
③場所を選ぶ ④タネをまく
通信
Developers Summit 2013
Action !

48. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
・１ページ１通信
ネイティブアプリ
・フローベース
・場面に応じた通信
Developers Summit 2013
Action !

49. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
・１ページ１通信
ネイティブアプリ
・フローベース
通信と表示
・場面に応じた通信
で役割分担
Developers Summit 2013
Action !

50. Developers
Summit
ウェブアプリとの違い
ウェブアプリ
・画面ベース
通信と表示
・１ページ１通信
を主に１人で
ネイティブアプリ
・フローベース
通信と表示
・場面に応じた通信
で役割分担
Developers Summit 2013
Action !

51. Developers
Summit
ウェブアプリとの違い
開発環境の違い
■
クライアントの開発にはUnityを利用
・GREE
Unity
PlaXorm
・Lightweight
SWF（LWF）
Developers Summit 2013
Action !

52. Developers
Summit
クライアントのアジェンダ
■
グリーにおけるウェブアプリとの違い
■
開発スタイルについて
■
ちょっとした工夫点
Developers Summit 2013
Action !

53. Developers
Summit
クライアントのアジェンダ
■
グリーにおけるウェブアプリとの違い
■
開発スタイルについて
■
ちょっとした工夫点
Developers Summit 2013
Action !

54. Developers
Summit
開発スタイルについて
クライアントサイド
■
サーバとのやり取りを主に担当
→ バックエンド
■
ユーザインターフェース、遷移の管理
→ フロントエンド
Developers Summit 2013
Action !

55. Developers
Summit
開発スタイルについて
クライアントサイド
■
サーバとのやり取りを主に担当
→ バックエンド
■
ユーザインターフェース、遷移の管理
→ フロントエンド
Developers Summit 2013
Action !

56. Developers
Summit
開発スタイルについて
クライアントサイド
■
サーバとのやり取りを主に担当
→ バックエンド
■
インターフェース、遷移の管理
→ フロントエンド
Developers Summit 2013
Action !

57. Developers
Summit
開発スタイルについて
クライアントサイド
■
サーバとのやり取りを主に担当
→ バックエンド
■
インターフェース、遷移の管理
プロトタイプでのレビュー等で
出た要望によって処理が複雑化
Developers Summit 2013
Action !

58. Developers
Summit
開発スタイルについて
インターフェースや遷移、通信タイミング
複数人での開発 運用での機能追加
プロジェクトメンバー追加、変更
Developers Summit 2013
Action !

59. Developers
Summit
開発スタイルについて
インターフェースや遷移、通信タイミング
複数人での開発 運用での機能追加
プロジェクトメンバー追加、変更
フローが把握し易ければ問題ない
Developers Summit 2013
Action !

60. Developers
Summit
クライアントのアジェンダ
■
グリーにおけるウェブアプリとの違い
■
開発スタイルについて
■
ちょっとした工夫点
Developers Summit 2013
Action !

61. Developers
Summit
クライアントのアジェンダ
■
グリーにおけるウェブアプリとの違い
■
開発スタイルについて
■
ちょっとした工夫点
Developers Summit 2013
Action !

62. Developers
Summit
ちょっとした工夫
ちょっとした工夫
Developers Summit 2013
Action !

63. Developers
Summit
ちょっとした工夫
ちょっとした工夫
遷移図とコードを自動生成しました
Developers Summit 2013
Action !

64. Developers
Summit
ちょっとした工夫
こんな感じです
Developers Summit 2013
Action !

65. Developers
Summit
ちょっとした工夫
なぜ自動生成にしたか？
■
ドキュメントの管理が面倒くさい
■
ある程度コードが統一される
■
新規メンバーへの教育が楽
Developers Summit 2013
Action !

66. Developers
Summit
ちょとした工夫
自動生成のために考えた事
■
共通項は何か？
■
どこまで自動で生成するのか？
■
どれくらいなら使い易いか？
Developers Summit 2013
Action !

67. Developers
Summit
ちょっとした工夫
条件１
条件２
処理１ 処理２
処理３
処理があって条件があってまた次の処理
基本的な構造は一緒
Developers Summit 2013
Action !

68. Developers
Summit
ちょっとした工夫
条件１
条件２
処理１ 処理２
処理３
処理と条件からコードと遷移図を生成
Developers Summit 2013
Action !

69. Developers
Summit
ちょっとした工夫
フォーマットは
YAML
Start:
Main:
Main:
Game: {when: "Press start button"}
Done: {when: "Finish" }
Game
Main: {when: "Game Over"}
Done:
Developers Summit 2013
Action !

70. Developers
Summit
ちょっとした工夫
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. Developers
Summit
ちょっとした工夫
遷移図の表示は
Graphviz
h+p://www.graphviz.org/
AT&T研究所
DOTファイルを生成・編集するツール群
Developers Summit 2013
Action !

72. Developers
Summit
ちょっとした工夫
遷移図の表示は
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. Developers
Summit
ちょっとした工夫
コンバータは
Ruby
■
Ruby
1.8からYAML
Libraryが標準添付
■
ruby-­‐graphvizも利用できる
■
C#のフォーマットを用意
Developers Summit 2013
Action !

74. Developers
Summit
Developers Summit 2013
Action !

75. Developers
Summit
ちょっとした工夫
Start:
Main:
Main:
Game: {when: "Press start button"}
Done: {when: "Finish" }
Game:
Main: {when: "Game Over"}
Done:
Developers Summit 2013
Action !

76. Developers
Summit
ちょっとした工夫
Start:
Main:
Main:
Game: {when: "Press start button"}
Done: {when: "Finish" }
Game:
Main: {when: "Game Over"}
Done:
このYAMLをコンバータにかけてみると
Developers Summit 2013
Action !

77. Developers
Summit
ちょっとした工夫
遷移図ができました
Developers Summit 2013
Action !

78. Developers
Summit
ちょっとした工夫
C#のコードができました
Developers Summit 2013
Action !

79. Developers
Summit
ちょっとした工夫
遷移図の管理が楽
コードがある程度統一
新規メンバーへの教育
Developers Summit 2013
Action !

80. Developers
Summit
クライアントサイドまとめ
まとめ
■
開発スタイル
・少人数から大人数へ
・役割分担
■
自動生成
・導入までの障壁が高い
・その分得られるものが多い
Developers Summit 2013
Action !

81. Developers
Summit
ご清聴ありがとうございました
Developers Summit 2013
Action !