JavaScriptエンジニア向け！

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

自己紹介

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

目次

ワークフロー 編

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

一応ベースは「アジャイルな見積もりと計画づくり」

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

突然ですが

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

理由

つまり

具体的な流れ

ワークフロー

ワークフロー

各項目に関して解説します

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

作業者全員で見積もり

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

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

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

QA

QA

ワークフロー編 完

実装詳細 編

実装詳細 編 目次

フレームワーク

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

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

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

実装詳細 編

開発ツール

実装詳細 編

単体テスト

実装詳細 編

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

  • 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」

「今こそ見直すべきhtml4」

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

実装詳細 編 完

ちなみに

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

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

お蔵入りとなったので

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

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