スマートフォンで動くブラウザゲームの作り方

自己紹介

• ども。KAYACでJS書いてる@kyo_agoです
• 去年（2011年）はSVG Girl（SVG女子）とか、HTML5花火大会（のベースコード）とか、HTML5実力テスト（のJS問題）とか、www.kayac.comのJS書いたりとか、html5とか勉強会で話したりとかしてました。
• 最近はスマホ環境で色々JS書いてます

79枚なので、しらいしさんより早く終る予定です(^o^)／

目次

• ワークフロー
• エンジニア向けタスク管理方法の紹介
• 実装詳細
• フレームワーク、検証内容、はまりどころ等を紹介

ワークフロー 編

基本はSQUARE ENIXさんの「ゲーム開発 プロジェクトマネジメント講座」に近い

ただ、今回はJavaScriptエンジニア向けなので、JavaScriptエンジニア向けに話したいと思います

突然ですが

チケット管理はJSerがおすすめ

理由

• JSerはプロジェクトの最初より後半が忙しい
• チケットは大抵JSerへ一番最後に回ってくる
• サーバサイドとマークアップの繋ぎこみが多い

つまり

• JSerはプロジェクトの最初より後半が忙しい
• 最初にタスク管理の流れを作って後半別の人へ引き継ぐ
• チケットは大抵JSerへ一番最後に回ってくる
• チケットにどういう情報が必要か知ってる
• サーバサイドとマークアップの繋ぎこみが多い
• 両方見るので各職種毎に必要な情報をまとめやすい

具体的な流れ

ワークフロー

• ディレクタがタスクリストを作る
• 作業者全員で見積もり
• エンジニアがチケット化する
• 1日に一回タスクリストをアップデートする
• 2週間に一度これを繰り返す

ワークフロー

• ディレクタがタスクリストを作る
• 作業者全員で見積もり
• エンジニアがチケット化する
• 1日に一回タスクリストをアップデートする
• 2週間に一度これを繰り返す

ディレクタがタスクリストを作る

• ディレクタはSpreadsheetsを元にタスク（ユーザストーリー）リストを作る
• タスクには「大項目」、「中項目」、「詳細」、「重要度」を設定
• タスク1個は2日程度で終るもの
• 重要度は4～5段階くらい
• 重要度1段階にタスク10個くらい
• 2週間でどの重要度までを目標にするか決める

作業者全員で見積もり

• 2点式の「見積もりポーカー」で時間を出す
  （説明が容易なのでストーリーポイントは使っていません）
• 見積もり時間はすべて加算して計算
• 作業人数によって優先度を決める
  （関連する作業者が多い場合優先度が高い）
• チケット化に必要な簡単な設計も行う
  （チケットに含めて欲しい情報の洗い出し）

エンジニアがチケット化する

• 一番重要度の高いタスクのみチケットを切る
  （基本的には10個前後）
• 見積時に決めた優先度、実装に必要な情報を記述
  （画面仕様、URL、テンプレートファイル名等、必要な情報はすべてチケットに書く）
• チケット完了後の対応もチケットに書く
  （「チケットを終了してください」、「nnに関して追記してxxさんへ回してください」等）

1日に一回タスクリストをアップデートする

• Spreadsheetsの各項目に関して情報を更新
  （このへん自動化したい。。。）
• 一番高い重要度のタスクがはけてきたら次の重要度のタスクをチケット化する
• ディレクタがタスクリストを変更したい場合このタイミングで変更
  （あまり大きく変更しないようにしてます）

「エンジニアが主導できて」、「簡単に導入できること」を主眼にしています

QA

• 大変じゃないですか？
• 見積もり時間は正確ですか？
• どのくらい時間がかかりますか？
• 注意点は？

QA

• 大変じゃないですか？
• 大変なチケットが来ることよりは大変じゃないです
• 見積もり時間は正確ですか？
• 不正確ですが、毎回同じだけ不正確なので2,3回繰り返せば目安になります
• どのくらい時間がかかりますか？
• 見積もりが2,3時間、チケット化で2,3時間、更新が10分程度です
• 注意点は？
• クオリティの担保と、中長期的なスケジュールとの兼ね合いは別途対応が必要です

ワークフロー編 完

実装詳細 編

実装詳細 編 目次

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

フレームワーク

• jQuery+自作（内容は大体jQueryMobileと同じ）
• $('a').live('click')での画面遷移制御
• location.hashでのパーマネントリンク
• テンプレートエンジン、dispatcher

$('a').live('click')での画面遷移制御

• $(document).delegate('a', 'click')とか
  $(document).on('click', 'a')と同じ
• a[href]を$.getして、内容を
  $('#contener').html()する
• JSの初期化が不要になる
  （スマホでjQuery読み込むと+500ms。初期化だけでも+300ms）
• 画面遷移にエフェクトを付けられる
• ログアウト、サーバエラーには注意

location.hashでのパーマネントリンク

• pushStateはAndroidであまりサポートされないのと、サーバサイドのサポートが必要なのでlocation.hashに
• hashchange eventはAndroid2.1以下で動かないので注意
  （対応プラグインもありますが簡単なのでこちらで対応）
• パーマネントリンクはデバッグする上でも重要

テンプレートエンジン、dispatcher

• サーバサイドとクライアントサイドでテンプレートを分けたくなかったのでJSでテンプレート処理
• クライアントサイドでテンプレート使えるといろいろ便利
• 過去に3回くらい作ってたので流用
• dispatcherで、サーバレスポンス、ページ描画をイベント化
• Backbone.Routerのようなもの

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

開発ツール

• 開発ブラウザはChrome
• UAの変更はFiddlerかCharles、もしくはUser-Agent Switcher for Chromeを使用
• Local Proxyなら指定ドメインのみUA変更できる
  （ただし、JSのnavigator.userAgentは変更されないので注意）
• URL構成は末尾にテンプレートを指定する形式だとLocal Proxyと相性がいい
  （末尾がキャッシュ消すための乱数とかだとちょっと面倒）

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

使用、検証した外部ライブラリ

• jQuery
• iscroll.js
• jquery.flickable.js
• flipsnap.js
• jquery.mockjax.js
• underscore.js

一通りコードは読んで使用してますが、固定フッタ（擬似iframe）をうまくやるのは結構大変。。。

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

採用しなかったもの

• jQueryMobile
• Backborn.js
• Zepto.js
• CoffeeScript
• Require.js, LAB.js

採用しなかったもの

• jQueryMobile
• 開発当初はstableが出てなかった
• Backborn.js
• 自作で似たようなものがあったので
• Zepto.js
• 各種Pluginと相性が悪い
• CoffeeScript
• 複数人で開発してたので
• Require.js, LAB.js
• 実行順を自作dispatcherで制御したので

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

アニメーションツール

• Tumult Hype
• Adobe Edge
• Purple

Tumult Hype

Tumult Hype

• ツールとしてのUI的に制約が多い
• 要素のIDが変更できない
• IE対応されてるため、Android対応はそこそこ
• 独自JSな上に3000行くらいで解析はちょっと大変

Adobe Edge

Adobe Edge

• Androidで動きがおかしい
• UI的に制約が多い
• preview4でかなり改善された
  （社内的には一番期待されてる）

Purple

Purple

• Androidで動きがおかしい
• jQuery+1600行程度なので自分で解析可能
• 部分的にAndroid用パッチ書いたので本家に@した（けど反応ない。。。）
• UI的には一番いい

Flashいいね！

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

はまりどころ

• スクロール周り
• Android
• イベント周り

はまりどころ＞スクロール周り

• どう実装するか
• iScroll
• SenchaTouch
• Scrollability
• jQuery.flickable
• Dragdealer JS
• その他

どう実装するか

• 基本的に全部イベント止めて自分で再実装する
• touchstartでイベントを監視、touchmoveで要素を移動、touchend時に跳ね返りを実装
• touchstart cancelするとclickイベント効かなくなるので自分で実装
  form要素も効かなくなるので自分で実装
• touchmoveは高頻度で発生するので軽く
• 実装はいくつかあるけど、transform(3d)?系とその他系がある

iScroll

• 定番
• transform(3d)?系
• iOSで特に動きがいい
• コードは1000行くらい
• ズーム機能も実装してたり高機能
• select box使用不可
  （スクロールした状態で選択できなくなる）

SenchaTouch

• Sencha Incが開発しててしっかりしてる（気がする）
• transform(3d)?系
• iOSで特に動きがいいが、Androidでもまずまず
• 規模でかい（30000行くらい）
• select box使用可

Scrollability

• 開発中
• transform(3d)?系
• iScrollの方がいい気がする

jQuery.flickable

• jQuery Plugin
• メンテされておらず最新版のjQueryでは動作しない
  （→最新版への対応しました）
• 非transform(3d)?系
• 動作は軽いが、動きは荒い
• select box使用不可
  （一度選択するとflickが効かなくなる）

Dragdealer JS

• IE6以降で動作
• 非transform(3d)?系
• 動作は軽いが、動きは荒い
• link, form系動作不可
  （select box反応しない）

その他

• そもそもiOS5, Android2.1以上はposition:fixedサポート
  （ただし、Android2.1は動きが微妙なので要確認）
• 単純なフッタ、ヘッダ固定ならCSSのみで可能
  （ただ、フリックの細かい制御をした場合や、Carousel UI等にはJSが必要）
• AndroidやiOS4でiOS5と同じようにoverflow: scrollしたい場合もJSが必要

はまりどころ

• スクロール周り
• Android
• イベント周り

はまりどころ＞Android

• 機種依存
• 性能
• 動き
• CSS周り
• 画面サイズ周り

機種依存

• 機種によってOSのバージョンは一緒でもサポートしてるAPIが違ったり
• OSのバージョン上がると使えないAPIがあったり
• イベントの発生順が違ったり
• 取得できる画面サイズが違ったり
• 画面サイズが比率も含めて違ったり

性能

• 非常にまちまち
• 薄かったり小さかったりするとやばい
• 新しい機種だから速いわけではない
• OSのバージョンが高いから速いわけではない

動き

• 全体的になめらかに動かない（iOSに比べると）
• ただ、OS自体の動きが全体に直線的なのでそれ自体はそこまで違和感は無い
• 普段iOSに慣れてる人はAndroidの動きにも慣れたほうがいい
• 機種によって慣性スクロールの動きや跳ね返りの有無が違う

CSS周り

• form要素がz-index無視したり
• border-radiusがガビガビになったり
• -webkit-tap-highlight-colorがやばかったり
• :activeが効かなかったり
• 色々とやばい

画面サイズ周り

• iOSはある程度揃ってる
• Androidは比率もあってないので調整が必要
• 基本的に横幅は320pxにあわせて縦は自動
• アドレスバーを除いた画面サイズの取得とかも大変

はまりどころ

• スクロール周り
• Android
• イベント周り

はまりどころ＞イベント周り

• iOS, Android共に狙った要素でイベントを発生させるのは大変
• CSSの(-webkit-)pointer-event:noneを使えば対象要素のイベントを発生しないようにできる
• Androidでz-index無視される場合の回避策
• JSで細かいイベント制御するとかなり多用する
  （ダブルタップの無効化とか、イベントを簡単に解除したいときにも使える）

実装詳細 編

• フレームワーク
• 開発ツール
• 単体テスト
• 使用、検証した外部ライブラリ
• 採用しなかったもの
• アニメーションツール
• はまりどころ
• その他

その他

• HTML5とスマホってどうなの？
• 「iPhone4遅い問題」
• 「使ってはいけないhtml5 API」
• 「今こそ見直すべきhtml4」

HTML5とスマホってどうなの？

• 「「スマホ」にAndroidは含まれますか？」
• Androidは現代のIE
• ただ、JSの言語仕様上は問題ない
  イベント、CSS、DOM関連が大変
• 速度も遅い。特に機種ごとの速度差がきつい
• OSバージョンはそこまで問題にならなかった
  （そもそも使えない前提で開発してたので）
• Androidベースで作成し、後でiOS対応が楽

「iPhone4遅い問題」

• 基本的には3GSに比べて高速
• ただし、解像度が上がった分、解像度に依存する処理は重くなる
  （解像度ほどに性能は上がってない）
• 画面全体がCanvasだと3GSより遅かったり
  （Canvasは他にもいろいろありすぎておすすめできないです）

「使ってはいけないhtml5 API」

• Androidのサポート状況を見てあまり芳しくない場合は避けるほうが無難
• 後のバージョンでサポートされなくなったりするので
• 対象のAndroidバージョンとサポートAPIの関係はよく確認する
• そもそも使わなければ安全です＼(^o^)／

「今こそ見直すべきhtml4」

• iframe
• marquee
• animation gif
• table（display: table-cell）
• location.hash debug
• document.title debug

実装詳細 編 完

ちなみに

紹介した自作フレームワークは

プロジェクトの再編成に伴って

お蔵入りとなったので

公開される予定はありません

KAYACではフレームワークを作れる技術者も募集しています！