読者です 読者をやめる 読者になる 読者になる

akiyoko blog

akiyoko の IT技術系ブログです

集え、HTML5な開発者、クリエイター! HTML5+CSS3+JSとCANVASでゲーム、PhoneGapでハイブリッドアプリ、開発効率アップ(Sass・Jasmine)等勉強会

勉強会 スマホ HTML5

今週は、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
  • jsperf
    • 登録不要でJavaScriptのパフォーマンステストができるサイト。きれいなグラフも出せるよ。
  • Where can I use...
    • JS要素等のサポート状況がチェックできるまとめサイト


enchant.jsなどのライブラリなしでゲームを作ることで、ライブラリの都合に依存せず、仕組みを理解しながらと作れるいうことでしたが、やっぱり自分にはフレームワークを使った方が合ってるかもなー(笑)。

enchant.js開発のレシピ

enchant.js開発のレシピ

ということで、最近出たばかりの 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についてのあれこれです。

個人的にも気になっていた、Titanium Mobileとの比較。

  • Titaniumよりも対応デバイスが多い。
  • canvasを使うのであれば、PhoneGapの方が相性がいい。意識せずに使える。
  • デザイナと分業したい場合には PhoneGapが○
  • 会員登録などサーバと連携したい場合は、Titaniumが○。実装しなくても。
  • HTML5, CSSが嫌いなら、Titanium(笑)。

続いてデバッグの話。

  • deviceReadyが普通のブラウザだと発火しない。
  • 構文エラーが見つけづらい。
    • gjsLintを使うといいよ。vimに入れて使ってる。

たまに話題に上がる、アニメーション問題について。

  • jQuery.animate() メソッドを使うとカクカクしてしまう。
  • setInterval() を使うと、複数要素を動かすときの同期が難しかったりする。
  • CSSを使うとよい。keyframeとかtransition。

その他。

  • PhoneGapは進化が早い。1ヶ月に1回くらいのペースでバージョンアップ。
  • ドキュメントが少ない。


質問タイムで、「App Storeへの申請の際、ネイティブコードが少ないという理由でリジェクトされるということを聞いたが?」という質問には、「実際にリジェクトされたというのは聞かない。WikiPediaiPhoneアプリもPhoneGap製だし」とのことでした。へー、そういう話もあったんですね。

今回も質問してみました。
Q.「Arctic.jsとかBackbone.jsとかのようなフレームワークとの相性は?」
A.「すごくいいと思います。普通のWebアプリの延長のようなものなので」
とのことでした。

ますます enchant.js な感じですねー。