More Related Content
Similar to グリーにおけるスマホアプリ開発~HTML5編 (20)
グリーにおけるスマホアプリ開発~HTML5編
- 1. グリーにおけるスマホアプリ開発
〜~HTML5編
15-C-2
#devsumiC 反田 光洋
Copyright © GREE, Inc. All Rights Reserved.
- 2. ⾃自⼰己紹介
• 開発本部 Japan Studio第5統括部
• 2011年年1⽉月⼊入社
• 携帯ブラウザ開発の会社からGREEへ
• 釣り★スタ → 聖戦ケルベロス → 現プロジェクト
• Twitter: @mtanda
Copyright © GREE, Inc. All Rights Reserved.
- 3. アジェンダ
• 開発スタイルの変化
• チーム構成の変化とその課題
• フロントエンド実装
• サウンド組み込み
• LWFを使った開発事例例
• 機能紹介
• 組み込み例例
• 注意した点など
• その他の取り組み
• バックエンド
• フロントエンド
• アプリ
Copyright © GREE, Inc. All Rights Reserved.
- 4. アジェンダ
• 開発スタイルの変化
• チーム構成の変化とその課題
• フロントエンド実装
• サウンド組み込み
• LWFを使った開発事例例
• 機能紹介
• 組み込み例例
• 注意した点など
• その他の取り組み
• バックエンド
• フロントエンド
• アプリ
Copyright © GREE, Inc. All Rights Reserved.
- 6. 開発スタイルの変化
チーム構成
• ディレクター
• 企画⽴立立案、画⾯面遷移図を作成
• UIデザイン
• 企画、画⾯面遷移図をベースにワイヤフレームを作成
• 演出
• 企画をベースに演出画⾯面をHTML5などで作成
• サウンド
• 演出画⾯面などに合わせてBGM/SEを作成、組み込み
• フロントエンド
• ワイヤフレームから対応する画⾯面をマークアップ
• バックエンド
• バックエンドの実装、マークアップされた画⾯面/演出を組み込み
Copyright © GREE, Inc. All Rights Reserved.
- 7. 開発スタイルの変化
開発環境
フロントエンド
バックエンド
• LWF
• Underscore.js
• その他いろいろ
• PHP 5.3
• Ethna 2.6
• Smarty 3
アプリ
• GREE SDK
Copyright © GREE, Inc. All Rights Reserved.
- 8. 開発スタイルの変化
既存プロダクトの開発スタイル
メリット: 仕様のぶれが少ない
デメリット: 負荷が集中
企画
デザイン 演出
兼務
もしくは数名
フロント バック
アプリ
エンド エンド
Copyright © GREE, Inc. All Rights Reserved.
- 9. 開発スタイルの変化
開発の⼤大規模化
• よりリッチなUIの実現
• バックエンドエンジニアが兼務するのは難しい
• フロントエンドの専⾨門チームとの分業体制
• 演出、サウンド、アプリなどの連携
• サウンドは専⾨門チームでなければ対応不不可
• 演出やアプリなど、多数のチームが関わることに
Copyright © GREE, Inc. All Rights Reserved.
- 10. 開発スタイルの変化
新プロダクトの開発スタイル
メリット: 負荷が分散、専⾨門化
デメリット: 仕様のぶれ、⼿手戻り発⽣生
企画
デザイン 演出 サウンド
分担して
対応
フロント バック
アプリ
エンド エンド
Copyright © GREE, Inc. All Rights Reserved.
- 11. 開発スタイルの変化
⼤大規模化によって発⽣生する課題
• チーム/メンバー間のコミュニケーションコスト増加
• タスクが依存することにより開発効率率率が低下
• 仕様/インターフェースの不不整合による不不具合発⽣生
• 仕様/実装変更更による影響範囲⼤大、⼿手戻りの発⽣生
Copyright © GREE, Inc. All Rights Reserved.
- 12. 開発スタイルの変化
課題解決のために
• タスク間の依存度度を下げる
• モジュール間の結合度度も下げる
• 仕様の不不整合を早く解消する
• 各チームで課題解決できる体制作り
Copyright © GREE, Inc. All Rights Reserved.
- 13. 開発スタイルの変化
フロントエンド実装の課題
• テンプレート化を考慮しない実装
• CSS/JavaScriptにハードコーディングされたパラメーター
• 例例: ステージごとに切切り替わる背景画像
• テンプレート化作業のブロッキング、⼿手戻り
• HTMLが完成するまで、テンプレート化できない
• デザインの変更更=>HTMLの変更更で、再度度埋め込みが必要
• テンプレートタグの組み込み漏漏れ
• マークアップの意図を理理解しないと、置き換えが必要か気づけない
• 例例1: HPゲージを表⽰示する箇所でstyle=“width: 80%”
• 例例2: カード属性に応じてclass=“rare”
フロント バック
デザイン
エンド エンド
Copyright © GREE, Inc. All Rights Reserved.
- 15. 開発スタイルの変化
テンプレートの共有化①
• Smarty互換のJavaScript テンプレートエンジン「jSmart」を導⼊入
• http://code.google.com/p/jsmart/
• HTMLではなくテンプレートを直接マークアップ
• クライアント/サーバ間でテンプレートを共有化
• フロントエンド開発時は、モックデータを使って動作確認
<script type="text/javascript" src="smart.js"></script>
<script type="text/javascript">
var tAppData = {
'app': {
’foo': ‘bar’
}
};
</script>
<script type="text/x-jsmart-tmpl">
<p>{$app.foo}</p>
</script>
Copyright © GREE, Inc. All Rights Reserved.
- 17. 開発スタイルの変化
フロントエンド実装の改善
• バックエンドの開発が並⾏行行に進められるようになった
• デザイン変更更などフロントエンド実装の変更更に影響されなくなった
• 再度度テンプレート化といった⼿手戻りがなくなった
• 結合部のインターフェースが明確になった
• バックエンド側で⽤用意すべきデータが明確になった
• テンプレートタグの組み込み漏漏れがなくなった
• テンプレート化することで、より効率率率的に実装できるようになった
• 共通部はincludeで対応
• 画像URLはSmartyプラグインで⽣生成
フロント バック
デザイン
エンド エンド
Copyright © GREE, Inc. All Rights Reserved.
- 18. 開発スタイルの変化
サウンド組み込みの課題
• 前提
• <audio>タグにより同時再⽣生可能な⾳音源数に制限がある
• 複数のSEを組み合わせて再⽣生できない
• BGMとSEを同時に再⽣生することができない
• アプリ側で実装することで回避
• アプリ側のサウンド再⽣生機能をWebViewから呼び出す
• ⾳音声ファイルは、アプリ組み込み
• 課題
• アプリがないとサウンドの検証ができない
アプリ サウンド 演出
Copyright © GREE, Inc. All Rights Reserved.
- 21. アジェンダ
• 開発スタイルの変化
• チーム構成の変化とその課題
• フロントエンド実装
• サウンド組み込み
• LWFを使った開発事例例
• 機能紹介
• 組み込み例例
• 注意した点など
• その他の取り組み
• バックエンド
• フロントエンド
• アプリ
Copyright © GREE, Inc. All Rights Reserved.
- 22. LWFを使った開発事例例
LWFの機能紹介①
• GREE内製アニメーションエンジン
• SWFをHTML5のCSS/Canvasアニメーションに変換し、再⽣生する
• (Lightweight SWFの略略)
• OSSで公開されています
• 詳細は、こちら
• https://github.com/gree/lwf
• http://gree.github.com/lwf/
Copyright © GREE, Inc. All Rights Reserved.
- 27. LWFを使った開発事例例
全体の流流れ
privateData
演出パラメーター
(プレイヤーのHP
などの数値)
Event handler
各種イベント発⽣生時
のcallback
(演出終了了時の
ページ遷移など)
imageMap
演出内での画像置換
(カードやアイテム
画像など)
Copyright © GREE, Inc. All Rights Reserved.
- 28. LWFを使った開発事例例
パラメーターの渡し⽅方
cache.loadLWF({
lwf: “foo.lwf”, // 再⽣生するLWF
stage: stage, // 描画先となるdiv/canvas
onload: onloadFunction, // LWF読み込み完了了時に呼び出される再⽣生処理理
privateData: privateData, // 演出パラメーター
prefix: “”, // LWF読み込み先のprefix
imageMap: imageMap, // 画像の置き換えマップ
imagePrefix: “”, // 画像読み込み先のprefix
imageSuffix: “@2x”, // 画像ファイル名のsuffix
});
Copyright © GREE, Inc. All Rights Reserved.
- 29. LWFを使った開発事例例
パラメーターによる置き換え
privateData
{
“p1”: {
“AT”: 17638
},
“p2”: {
“AT”: 9710
} imageMap
}
{
“p1_1.jpg”:
“/img/card/8.jpg”
“p1_2.jpg”:
event handler “/img/card/7.jpg”
lwf.setButtonEventHandler(”ok”, }
{
press: function(button) {
document.location.href = …
}
});
Copyright © GREE, Inc. All Rights Reserved.
- 30. LWFを使った開発事例例
新プロダクトでの組み込み例例
• 再⽣生処理理、エラー処理理を共通化
• ページ読み込み時に⾃自動で再⽣生
• HTMLのdata属性でパラメーターを設定
• (smartyプラグインでより簡単に設定できるように)
• SE再⽣生は、fscommandのイベントハンドラ内で処理理
<div class=‘lwf’ data-lwf-name=‘foo.lwf’
data-lwf-private_data=‘{ “p1”: { “AT”: 17638, …}}’
data-lwf-image_map=‘{ “p1_1.jpg”: “/img/card/8.jpg”, …}}’
…>
</div>
Copyright © GREE, Inc. All Rights Reserved.
- 31. LWFを使った開発事例例
LWFSについて
• LWFSとは
• LWFへの変換/再⽣生を⾏行行うアプリ
• http://labs.gree.jp/blog/2012/11/6422/
• 複雑なセットアップをせずに、LWFが制作できるようになる
• エンジニアのサポートが不不要
• 演出の確認、改善というイテレーションを回しやすい
Copyright © GREE, Inc. All Rights Reserved.
- 32. LWFを使った開発事例例
LWFSを導⼊入した制作フロー
実環境
モックの
private
private
Data
Data
など
演出の確認や改善
SWF LWF
LWFS サーバ
サウンド 実データで
組み込み
Copyright © GREE, Inc. All Rights Reserved.
- 33. LWFを使った開発事例例
注意した点
• 画像の読み込みに⼀一つでも失敗すると、LWFは再⽣生されない
• 適切切にエラー処理理をして、エラーページなどに遷移させる必要がある
• 演出パラメーターは、オブジェクトとして渡される
• サーバで演出パラメーターを出⼒力力する際に、余分なパラメーターを含めない
• サーバ側でのみ使⽤用するマスターデータなどの流流出を防ぐ
• LWFのバージョンに気をつける
• 再⽣生確認に使⽤用するLWFSのLWFとバージョンが合っていることを確認する
• 制作時には、単独で動くようにする
• ページ遷移などの処理理をLWF内に直接埋め込まない
Copyright © GREE, Inc. All Rights Reserved.
- 34. アジェンダ
• 開発スタイルの変化
• チーム構成の変化とその課題
• フロントエンド実装
• サウンド組み込み
• LWFを使った開発事例例
• 機能紹介
• 組み込み例例
• 注意した点など
• その他の取り組み
• バックエンド
• フロントエンド
• アプリ
Copyright © GREE, Inc. All Rights Reserved.
- 36. その他の取り組み
JavaScript/CSSのビルド環境
• GruntJSを導⼊入
• http://gruntjs.com/
• ビルド作業を定型化
• 開発⽤用、リリース⽤用などのタスクを定義
• デバッグ⽤用のJavaScriptを開発⽤用に組み込み
• グローバルオブジェクトが⽣生成されないか定期チェック
• console.logの出⼒力力内容をログサーバにも送信
• https://github.com/imaya/birdwatcher.js/
Copyright © GREE, Inc. All Rights Reserved.
- 37. その他の取り組み
クライアント側のエラー検知
• JavaScriptのエラーは、サーバ側では検知できない
• エラーにより操作不不可となっている状況がありうる
• 適切切なエラーハンドリングをすると共に、原因箇所の情報をサーバに
通知
window.onerror = function (message, file, line) {
try {
var report = JSON.stringify({
'message': message,
'file': file,
'line': line
});
new Image().src = '/?action=report_error&src=' + uri + '&report=' + report;
} catch (e) {
// do nothing
}
};
Copyright © GREE, Inc. All Rights Reserved.
- 38. その他の取り組み
アプリ内キャッシュ
• 過去のプロダクトに⽐比べ、リソースサイズが増加
• カード画像は⼤大きいもので、100KB超
• 画像は数100MBのオーダー
• アプリ内に画像などのリソースをキャッシュ
• 同じリソースの繰り返しロードをさける
• キャッシュ容量量の上限を設ける
• 使わないものからLRUで削除
• 事前にロードすることで、読み込み時間短縮が可能に
Copyright © GREE, Inc. All Rights Reserved.
- 39. まとめ
• 開発スタイルの変化
• 依存をなくすことで、各チームがイテレーションを回せるようにする
• 仕様の不不整合がないように、早い段階で調整を
• LWFを使った開発事例例
• LWFにより、効率率率的にゲーム内演出が作成できる
• LWFSを使うことで、より効率率率的に演出の改善が可能に
• その他の取り組み
• エラー検知、キャッシュが重要
• JenkinsやGruntJSなどで、より効率率率的に開発を
Copyright © GREE, Inc. All Rights Reserved.