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

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

【第4回】HTML5+CSS3+JS勉強会 #techbuzz に行って来ました

event html5 css3 javascript

早くに追い出されたし近かったので遅れてないよ!
以下、メモ。

CreateJSで簡単なゲームを作ってみる

資料 → http://www.slideshare.net/kaboccha/createjs
ソースコードCreatejsで簡単なゲームを作ってみる - jsdo.it - Share JavaScript, HTML5 and CSS

  • CreateJSって?
    • HTML5 canvas用のJSライブラリを集めたものです。
      • EaselJS … Canvas用のライブラリ
      • TweenJS … トゥイーンライブラリ
      • SoundJS … 音関係のライブラリ
      • PreloadJS … 外部リソースを事前に読み込むためのライブラリ
    • Adobeがスポンサーになってる
    • FlashからHTML5変換のCS6用extensionでも使われている
      • ActionScript部分は変換されないので、CreateJSでゴリゴリ書く必要がある
  • ゲームを作る
    • Stageを作る
    • manifestを作る。リソースを定義してpreloadする。
      • 読み込み終わったら実行されるイベントハンドラを設定
      • 全部読み込み終わったら次のステップへ進む
    • TickerにFPSとStageを設定する
      • Tickerにオブジェクト(今回はwindowオブジェクトを設定してグローバルに定義したfunctionを呼び出せるようにする)
      • windowのtick()関数が定期的に呼び出されるようになる
      • tick関数の中で各オブジェクトの動きなどを実装する
    • TweenJS
      • get関数で対象のオブジェクトを指定する
      • to関数でどこに何秒で移動するかを指定する
      • TimelineオブジェクトにTweenを設定する
  • まとめ
    • Toolkit for CreateJSを使う場合にはCreateJS知らないとダメだよ
    • canvasをかなり楽ちんに使える。でも、どんなふうにcanvasを操作してるかは確認しておくこと

ローカルストレージで表示速度を改善しよう!

  • 早くするのは?
    • リクエスト数を減らす
      • リソースをまとめたりする
      • リクエストしなくても良いものはしない
      • ローカルで保持しておけばいいよね
  • LocalStorage
    • いろんなブラウザで使える(IE8〜はおk、Opera Miniはダメぽ)
    • 2.5MB〜5MB〜∞のサイズ
    • cookieなら4KBまで
    • indexedDBはAPIが複雑
  • 何をLocalStorageに入れるの?
    • 同一ドメイン内のJavaScriptCSSBase64した画像
    • 初回アクセスとそれ以外で処理を分ける必要がある
    • 初回
      • リソースを文字列として取得して実行する
    • 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はわかんなかったけどどうにかなるだろうと
  • マルチプラットフォーム
    • Android 2億5千万くらい
    • iOS 1億5千万台くらい
    • Windows7 5億台くらい
    • 合計9億台
  • こんな風に作った
  • 作ってみて
    • Androidネイティブの開発環境よりデザインしやすい
    • なんとなくわかるので、なんとなく作れる
    • JavaScriptは動かしてみるまでバグに気が付かない
    • 2進数の丸め誤差 → 10兆倍して計算した
    • 遅い onClickとか。onClick詐欺。
    • CSSの描画が遅い
      • border-radiusとか。classで一括指定するより、id直撃をたくさん書いたほうが早い
  • まとめ
    • ネイティブと比較するのではなくやりたいことで決めよう
    • グラフィカル系は遅いですよ
    • デザイナーがもっと口出せって論調もあるけど、デザイナーが作ったらもっと面白いことになるんじゃないかな

アプリを作ろう!  HTML5入門 (アプリを作ろう! シリーズ)

アプリを作ろう! HTML5入門 (アプリを作ろう! シリーズ)