早くに追い出されたし近かったので遅れてないよ！
以下、メモ。
CreateJSで簡単なゲームを作ってみる
資料 → http://www.slideshare.net/kaboccha/createjs
ソースコード → Createjsで簡単なゲームを作ってみる - jsdo.it - Share JavaScript, HTML5 and CSS
- CreateJSって？
- ゲームを作る
- Stageを作る
- manifestを作る。リソースを定義してpreloadする。
- 読み込み終わったら実行されるイベントハンドラを設定
- 全部読み込み終わったら次のステップへ進む
- TickerにFPSとStageを設定する
- Tickerにオブジェクト（今回はwindowオブジェクトを設定してグローバルに定義したfunctionを呼び出せるようにする）
- windowのtick()関数が定期的に呼び出されるようになる
- tick関数の中で各オブジェクトの動きなどを実装する
- TweenJS
- get関数で対象のオブジェクトを指定する
- to関数でどこに何秒で移動するかを指定する
- TimelineオブジェクトにTweenを設定する
- まとめ
ローカルストレージで表示速度を改善しよう！
- 早くするのは？
- リクエスト数を減らす
- リソースをまとめたりする
- リクエストしなくても良いものはしない
- ローカルで保持しておけばいいよね
- リクエスト数を減らす
- LocalStorage
- いろんなブラウザで使える（IE8〜はおｋ、Opera Miniはダメぽ）
- 2.5MB〜5MB〜∞のサイズ
- cookieなら4KBまで
- indexedDBはAPIが複雑
- 何をLocalStorageに入れるの？
- 同一ドメイン内のJavaScript、CSS、Base64した画像
- 初回アクセスとそれ以外で処理を分ける必要がある
- 初回
- リソースを文字列として取得して実行する
- 2回目以降
- localStorageに設定された文字列を実行する
- JavaScript
- 初回
- scriptタグを作って、script.textに取得した文字列を設定する。
- bodyにscriptタグを差し込む ← この時点で実行される
- 不要なスクリプトタグは消します。理論上すでに実行されているはずだから不要。
- bodyからremoveしてnullを突っ込みます
- setTimeoutで少し待ってから消します。Scriptの実行を待つために安全を期しています
- 2回目以降
- localStorageから取得して、後は同じです。
- 初回
- CSS
- JavaScriptと少し異なります
- styleタグを作る
- IE8の場合はstyle.styleSheet.textに文字列を設定
- IE8以外の場合はstyle.innerHTMLに文字列を設定
- CSSの場合には、DOMから削除してはいけません
- 画像
- リクエストして、DATA URIを作る
- overrideMimeTypeをするとresponseTextにバイナリが入ります
- window.btoa()で変換します
- 保存するファイルのリストについて
- JSに書いておく方法
- data-srcとかHTML5のdata属性を利用する方法 … 画像とかは都合が良い。widithとかの指定が活かせる
- scriptのinnerHTMLに書く
- scriptタグはsrcに指定があればinnerHTMLは実行されないから
- 課題
- リソースに変更があった場合にどうやって更新するか
- 定期的に差分をチェックする仕組みを作る … 読み込み終わって数秒後にバックグラウンドで更新とか
- バージョン番号を持たせて確認する … ファイルそれぞれにバージョン番号を持たせてストレージに突っ込む
- リソースに変更があった場合にどうやって更新するか
39歳で開発者になった僕 - 開発者純情物語 -
- 紆余曲折あって会社やめて、未経験のこの業界にきた
- PCはそれなりに知識があった
- Androidアプリを作ろうと思った
- HTML、JavaScriptはなんとなくわかってた
- CSSはわかんなかったけどどうにかなるだろうと
- HTML、JavaScriptはなんとなくわかってた
- マルチプラットフォーム
- こんな風に作った
- 頭のアイデアをノートに書いてみた
- Monaca - Accelerate Your App Development with HTML5 Hybrid Apps で作った
- Web上でビルド出来る
- PhoneGapでアプリ化した
- フォントはWeb Font
- 作ってみて
- Androidネイティブの開発環境よりデザインしやすい
- なんとなくわかるので、なんとなく作れる
- JavaScriptは動かしてみるまでバグに気が付かない
- 2進数の丸め誤差 → 10兆倍して計算した
- 遅い onClickとか。onClick詐欺。
- CSSの描画が遅い
- border-radiusとか。classで一括指定するより、id直撃をたくさん書いたほうが早い
- まとめ
- ネイティブと比較するのではなくやりたいことで決めよう
- グラフィカル系は遅いですよ
- デザイナーがもっと口出せって論調もあるけど、デザイナーが作ったらもっと面白いことになるんじゃないかな
アプリを作ろう! HTML5入門 (アプリを作ろう! シリーズ)
- 作者: 山田祥寛
- 出版社/メーカー: 日経BP社
- 発売日: 2012/06/07
- メディア: 単行本
- 購入: 7人 クリック: 63回
- この商品を含むブログ (5件) を見る
