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