devsumi2013 14

Summit Developers

Developers Summit 2013 Action !

グリーにおけるスマホアプリ開発～ネイティブ編

堀田敏史, 白倉悠祐グリー株式会社

開発本部 Japan Studio統括部

14-A-4 #devsumiX

Summit Developers


自己紹介

toshifumi .ho+a @Toshiponnu

1987 2011

2012

女性向けモバイルウェブアプリの開発

女性向けスマホネイティブアプリの開発

Summit Developers


In Development…

Summit Developers


ネイティブアプリのバックエンド

…

…

CDN

インターネット

クライアントアプリ

アセットサーバ

ウェブサーバデータベース

Summit Developers


アジェンダ

1.  サーバサイドの開発 •  ウェブとネイティブの違い •  注意した点、設計のポイント

2.  クライアントサイドの開発 •  グリーにおけるウェブアプリとの違い •  開発スタイルについて •  ちょっとした工夫点

Summit Developers


アジェンダ

1.  サーバサイドの開発 •  ウェブとネイティブの違い •  注意した点、設計のポイント

2. クライアントサイドの開発 •  グリーにおけるウェブアプリとの違い •  開発スタイルについて •  ちょっとした工夫点

Summit Developers


ウェブアプリの例 -‐ ガーデニング

vb

①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了

Summit Developers


ネイティブアプリの例 -‐ ガーデニング

①メニューを選ぶ ②タネを選ぶ

③場所を選ぶ ④タネまき完了

Summit Developers


何がちがう？

見た目(UI)はもちろん違うのですが…

サーバサイドから見ると…

Summit Developers


何がちがう？

通信のタイミング

表示データの在処

Summit Developers



• 画面ベース • 1ページで1通信

• フローベース • UI、画面遷移に応じて必要なタイミングで

ウェブ

ネイティブ

Summit Developers


何がちがう？



Summit Developers



• 通信の度にすべてサーバからデータ配信 • 表示はWebブラウザ

• 更新頻度の低いデータはローカルに置ける • 表示はクライアント側

ウェブ

ネイティブ

Summit Developers


サーバサイドを考える

• 通信のタイミングを考える

• データの管理方法を考える

• APIを考える

Summit Developers


1. 通信タイミングを考える



通信

都度通信するタイプ

通信

通信

Summit Developers



• メリット • サーバ側と常に同期しているためデータ不整合の懸念が少ない

• デメリット • 通信のタイミングでユーザのアクションがブロックされる

都度通信するタイプ

Summit Developers





非同期

すべて非同期で通信するタイプ

Summit Developers



• メリット • ユーザのアクションがブロックがないためユーザ体験向上に寄与

• デメリット • サーバ側と常に同期しているわけではないため、注意が必要

• クライアント側でユーザのアクションログ、管理する必要がある

すべて非同期で通信するタイプ

Summit Developers





通信

更新タイミングなどで適宜同期するタイプ

Summit Developers



• メリット • ユーザデータの更新タイミングでサーバ側と同期しているためデータ不整合の懸念は少ない

• デメリット • 都度通信よりは軽微だが通信のタイミングでユーザのアクションがブロックされる

更新タイミングなどで適宜同期するタイプ

Summit Developers


通信タイミングを考える

• UIフローや画面の要件に合ったタイミングでの通信を

都度非同期適宜

ユーザ体験 △ ◎ ○

安全性 / トレーサビリティ ◎ △ ○

Summit Developers


通信していないときのログ

• サーバと同期するまでの間のクライアント側での動作ログが重要に

• クライアントサイドの分析ログ • クライアント内部エラー

• クライアントからサーバへ送る仕組み

•  サーバ側でトレースできるように

Summit Developers






Summit Developers


データ管理

CDN





master_id aquire_exp aquire_point collection_id …

master_deco…

master_id category aquire_point aquire_exp …

master_plant

Summit Developers


データ管理

• 更新頻度の少ないマスタデータ、アセットデータは初回で取得しローカルに

• 変更があった場合のみダウンロード

• 更新頻度の高いユーザデータはサーバと適宜同期

Summit Developers


マスタデータ管理



master_id aquire_exp aquire_point collection_id …

master_deco…

master_id category aquire_point aquire_exp …

master_plant master_plant: b94d81425961a11d7a88d507245cf67b master_decoration: b94d81425961a11d7a88d507245cf67b …

初回起動: 　　一括ダウンロード 2回目以降: 　　変更なし

ダウンロードなし　　変更あり

変更されたマスタのみダウンロード

Summit Developers


アセット管理

• 更新頻度が少ないため、初回起動時にアセットサーバからダウンロード

• 容量が大きいため、ユーザプレイ進捗によって初回ダウンロード量はコントロールできるように

• アセット単位でバージョン管理 • 通信のタイミングでバージョンチェックし、更新があれば都度アップデートする方式

Summit Developers


アセット管理




id version app_version path …

master_asset

master_asset_bundle:3120833dd2d084c08d21a2305c0e155c… master_plant: b94d81425961a11d7a88d507245cf67b

Summit Developers






Summit Developers


サーバサイドAPI




id Instance_id master_id aquire_exp …

user_plant

user_id Level Level_max friend_max …

user

{code: ”200”, “response”: { “id”: 1 “user_id”: 12345 “master_id”: 2 “x”: 13 “y”: 14 “garden_id”: 1 }

REST CDN


Summit Developers


サーバサイドAPI

• 設計した通信タイミングでクライアント側から呼ばれる

• データフォーマットはJSON

• クライアント側から見えやすいようにビューワーを開発

• インターフェース、エラーコードはクライアントとの擦り合わせが重要

Summit Developers


APIビューワー APIを確認できるビューワーを用意

Summit Developers


要素技術

• Webと変わらない技術で実現可能 • PHP 5.3, Ethna 2.6

• Web APIのサーバサイドロジック

• Mysql 5.5 • 永続データを保存、マスタ/スレーブ、Sharding

• Flare • 永続データで参照/更新頻度の高いデータを保存

• Memcached •  一時的なデータを保存

Summit Developers


まとめ

• UIフローに応じた通信タイミングの設計が重要に

• データ管理方針、APIによるクライアント連携部分は設計の段階での認識合わせが肝

• 技術的にはウェブでのノウハウを使って実現可能

Summit Developers


アジェンダ

1. サーバサイドの開発 •  ウェブとネイティブの違い •  注意した点、設計のポイント


Summit Developers


自己紹介：白倉悠祐

Yusuke.shirakura @gree.net

2012年7月グリー株式会社入社クライアント・サーバ両方担当

2008年4月某ゲーム会社入社組み込み系の開発に携わる

Summit Developers


アジェンダ

1. サーバサイドの開発 •  ウェブとネイティブの違い •  注意した点、設計のポイント


Summit Developers


クライアントのアジェンダ

■ グリーにおけるウェブアプリとの違い ■ 開発スタイルについて ■ ちょっとした工夫点

Summit Developers


ウェブアプリとの違い

・フローベース・場面に応じた通信

ネイティブアプリ

・画面ベース・１ページ１通信

ウェブアプリ

Summit Developers



vb

①メニューを選ぶ ②タネを選ぶ ③場所を選ぶ ④タネまき完了

通信通信通信

Summit Developers






ウェブアプリ

Summit Developers






ウェブアプリ通信と表示を主に１人で

Summit Developers






ウェブアプリ

Summit Developers




③場所を選ぶ ④タネをまく

通信

Summit Developers






ウェブアプリ

Summit Developers






ウェブアプリ

通信と表示で役割分担

Summit Developers






ウェブアプリ

通信と表示で役割分担

通信と表示を主に１人で

Summit Developers



開発環境の違い

■ クライアントの開発にはUnityを利用　・GREE Unity PlaXorm 　・Lightweight SWF（LWF）

Summit Developers




Summit Developers


開発スタイルについて

クライアントサイド

■ サーバとのやり取りを主に担当　　→　バックエンド

■ ユーザインターフェース、遷移の管理　　→　フロントエンド

Summit Developers





■ インターフェース、遷移の管理　　→　フロントエンド

Summit Developers





■ インターフェース、遷移の管理　　プロトタイプでのレビュー等で

出た要望によって処理が複雑化

Summit Developers



複数人での開発

インターフェースや遷移、通信タイミング

運用での機能追加

プロジェクトメンバー追加、変更

Summit Developers



フローが把握し易ければ問題ない

複数人での開発

インターフェースや遷移、通信タイミング

運用での機能追加

プロジェクトメンバー追加、変更

Summit Developers




Summit Developers


ちょっとした工夫


Summit Developers




遷移図とコードを自動生成しました

Summit Developers



こんな感じです

Summit Developers



なぜ自動生成にしたか？

■ ドキュメントの管理が面倒くさい ■ ある程度コードが統一される ■ 新規メンバーへの教育が楽

Summit Developers


ちょとした工夫

自動生成のために考えた事

■ 共通項は何か？ ■ どこまで自動で生成するのか？ ■ どれくらいなら使い易いか？

Summit Developers



処理があって条件があってまた次の処理

処理１処理３処理２条件１条件２

基本的な構造は一緒

Summit Developers



処理と条件からコードと遷移図を生成

処理１処理３処理２条件１条件２

Summit Developers



フォーマットは YAML Start: 　　Main: Main: 　　Game: {when: "Press start button"} 　　Done: {when: "Finish" } Game 　　Main: {when: "Game Over"} Done:

Summit Developers



Start: 　　Main: {when: “Press start button”} Main: 　　Done: {when: ”Game over”} Done:

Start Done Main

Game over Press Start button

Summit Developers



h+p://www.graphviz.org/

AT&T研究所 DOTファイルを生成・編集するツール群

遷移図の表示は Graphviz

Summit Developers



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

遷移図の表示は Graphviz

Summit Developers



■ Ruby 1.8からYAML Libraryが標準添付 ■ ruby-‐graphvizも利用できる ■ C#のフォーマットを用意

コンバータは Ruby

Summit Developers


Summit Developers



Start: 　　Main: Main: 　　Game: {when: "Press start button"} 　　Done: {when: "Finish" } Game: 　　Main: {when: "Game Over"} Done:

Summit Developers



Start: 　　Main: Main: 　　Game: {when: "Press start button"} 　　Done: {when: "Finish" } Game: 　　Main: {when: "Game Over"} Done:

このYAMLをコンバータにかけてみると

Summit Developers



遷移図ができました

Summit Developers



C#のコードができました

Summit Developers



遷移図の管理が楽

コードがある程度統一

新規メンバーへの教育

Summit Developers


クライアントサイドまとめ

まとめ ■ 開発スタイル　・少人数から大人数へ　・役割分担

■ 自動生成　・導入までの障壁が高い　・その分得られるものが多い

Summit Developers


ご清聴ありがとうございました

devsumi2013 14

Documents