今週は、HTML5系セミナーに行ってきました。
「集え、HTML5な開発者、クリエイター！ HTML5+CSS3+JSとCANVASでゲーム、PhoneGapでハイブリッドアプリ、開発効率アップ（Sass・Jasmine)等勉強会」（2012.8.29）
場所は渋谷、前回と同じ。
人数は前回より少なかったけど、それにしても狭いなぁ。暑いなぁ。（ ´⌒｀）ゞ
HTML5 Canvasでシューティングゲーム ~ 作り方、パフォーマンス、ツール ~
宗定洋平氏（サイバーエージェント）
Slide: http://www.slideshare.net/yoheimunesada/html-canvas-shootingandperformanceup
ライブラリを一切使わないHTML5ゲームの作り方を紹介。
- 初期化処理で、ゲーム開始前に画像をpreloadしておく。
- gameMainLoopで、50msecごとに描画。
- ゲーム終了時に、clearTimeoutでgameMainLoopを止める。
次に、高速化の手法について。
- requestAnimationFrameを使うと、ブラウザが最適なFPSで描画してくれる。
- ただし、スマホは全滅。
- プレレンダリング
- mainLoopの前にフレーム外のCanvasを用意しておいて、画像を後で流し込む。
- 複数Canvasを使う
- コンテンツと背景で描画のタイミングが違う場合など。
- クリア→描画の範囲を最小に
- ステートの変更は最小に
- 効果は少ない？？
- 浮動小数より整数値を使う
- 丸み、ドロップシャドウも。Safariではかなりの差が出る。
最後にツール。
- Scss, Sass
- qUnit
- grunt.js
- Jenkinsのフロント側みたいなツール。
- jsLint, jsHint
- 静的なコード解析ができるので、無駄なエラーを回避可能。
- HTML5 Boilerplate
- ベストプラクティス集のサイト
- Chrome Developer Tool
- JavaScriptコンソールが使える。PageSpeedというプラグインもオススメ。
- jsperf
- 登録不要でJavaScriptのパフォーマンステストができるサイト。きれいなグラフも出せるよ。
- Where can I use...
- JS要素等のサポート状況がチェックできるまとめサイト
enchant.jsなどのライブラリなしでゲームを作ることで、ライブラリの都合に依存せず、仕組みを理解しながらと作れるいうことでしたが、やっぱり自分にはフレームワークを使った方が合ってるかもなー（笑）。
- 作者: phi
- 出版社/メーカー: 秀和システム
- 発売日: 2012/08
- メディア: 単行本
- クリック: 147回
- この商品を含むブログ (1件) を見る
ということで、最近出たばかりの enchant.js本を買ってみました。
アプリ開発を効率化する方法あれこれ
溝上篤司氏（面白法人カヤック）
Slide: http://www.slideshare.net/atsushimizoue/ss-14105933
アプリ開発の効率化についての発表です。
- JavaScriptこそ、テストを書くべき。「シンプルだからいいや」は死亡フラグ。
- 「このメソッドがどういう動きをするのか？」がすぐに分かる。
- リファクタリングしやすくなる。
- テストツールのオススメは、Jasmine。
- 読みやすい。お手軽。必要なものが揃ってる。
- 自動化できるところは徹底的に自動化すべし！
- ファイル保存時にgjsLintでエラー出したり、ファイル作成時にJavaScriptの雛形作ったり。
- vim中心にGithubで自作ツールを公開中。
最初の宗定氏もそうでしたが、みなさん jsLint 使ってるんですねー。JavaScript ではデファクトなのかな？？
ちょうど今仕事で python 使ってますが、静的ツール使ってないですね。なるほどここから改善か。
http://asionm.hatenablog.com/entry/2012/08/30/000156
で晒しているvimプラグインを参考に、自分のvim環境を見直してみよっと。
PhoneGap開発における事始めとハイブリッドアプリ開発について
新井裕氏（株式会社ニーロク）
Blog: http://html5dev.jp/
PhoneGapについてのあれこれです。
- PhoneGapデベロッパーセンターがつい先日オープン。
- 7つのデバイスに対応。
- WebGL（3D系）が使えない。
- enchant.jsと組み合わせることも可能。
個人的にも気になっていた、Titanium Mobileとの比較。
- Titaniumよりも対応デバイスが多い。
- canvasを使うのであれば、PhoneGapの方が相性がいい。意識せずに使える。
- デザイナと分業したい場合には PhoneGapが○
- 会員登録などサーバと連携したい場合は、Titaniumが○。実装しなくても。
- HTML5, CSSが嫌いなら、Titanium（笑）。
続いてデバッグの話。
- deviceReadyが普通のブラウザだと発火しない。
- weinre - WEb INspector REmote？でシミュレートできる。知らないと結構大変。
- 構文エラーが見つけづらい。
- gjsLintを使うといいよ。vimに入れて使ってる。
たまに話題に上がる、アニメーション問題について。
- jQuery.animate() メソッドを使うとカクカクしてしまう。
- setInterval() を使うと、複数要素を動かすときの同期が難しかったりする。
- CSSを使うとよい。keyframeとかtransition。
その他。
- PhoneGapは進化が早い。1ヶ月に1回くらいのペースでバージョンアップ。
- ドキュメントが少ない。
- http://html5dev.jp/ の半分くらいは PhoneGap について書いてる。
質問タイムで、「App Storeへの申請の際、ネイティブコードが少ないという理由でリジェクトされるということを聞いたが？」という質問には、「実際にリジェクトされたというのは聞かない。WikiPediaのiPhoneアプリもPhoneGap製だし」とのことでした。へー、そういう話もあったんですね。
今回も質問してみました。
Q.「Arctic.jsとかBackbone.jsとかのようなフレームワークとの相性は？」
A.「すごくいいと思います。普通のWebアプリの延長のようなものなので」
とのことでした。
ますます enchant.js な感じですねー。
