setTimeoutの代替関数?requestAnimationFrameを試してみた

アニメーションを実装するときに、setTimeoutやsetIntervalを利用してDOMやCSSをいじってアニメーションを実装していましたが、今更ながらrequestAnimationFrameというものの存在を知りました。 調べてみると完全に代替出来るものではなさそうなので、自分なりに使い方とどんな時に利用できるのかを残しておこうと思います。 requestAnimationFrameとは setTimeoutは指定したミリ秒間隔で渡した関数を実行しますが、requestAnimationFrameは**「再描画を実行する前に実行」**します。 そのため、PCのスペックや同じタイミングで動作している処理の内容によって実行される間隔が変化します。(MDNによると毎秒60回程度実行されるとのこと) 利用するメリット 毎回描画出来るタイミングで実行されるため、描画できないタイミングでDOMやCSSを書き換えても実際には動いていない、というような無駄な処理が発生しません。 また、タブが非アクティブな状態になると処理が軽減される、そうなのですが、実はsetTimeoutでも同じような処理がなされているそうです。 利用するデメリット 処理が実行されるタイミングがブラウザ側に依存されるため、狙ったタイミングで実行することができません。 また、実行されるタイミングも必ずしも一定とは限らないため、...

Backbone.localStorage.jsを使ってオフラインWebアプリケーションを作ってみた

ネイティブアプリとして作るにしてはコストや、制限がかかりすぎてしまう件を考慮して、Webアプリをの方が良いと判断し、Backbone.localStorage.jsを使ってオフラインWebアプリケーションを構築した時のメモを残しておきます。 Backbone.localStorage.js Backbone.jsのModel、CollectionのSave、CreateのメソッドをOverrideし、HTML5のlocalStorage機能を利用してクライアント側に保存するライブラリです。 DLはこちらから:jeromegn/Backbone.localStorage 通常であればAjaxで通信する所をlocalStorageに保存する流れになりますので、通信したい場合はjQueryやZeptoを利用して手動で行う必要があります。 例えばCollectionでBackbone.localStorage.jsを利用する場合はこんな感じに記述します。 ( function( $ ) { /** * FugaModel */ FugaModel...

CreateJSを使って簡単なゲームを作ったのでメモ

とある案件でCreateJSを利用してスマホ用のWebゲームを作ったので、その時に調べた内容をメモメモ。 Canvasを利用すること自体あんまり無かったのですが、結構簡単に実装することが出来ました。 CreteJS そもそもCreateJSとは、HTMLの要素であるCanvas要素の描画をFlashの様に操作出来るライブラリで、実際に自分もFlashを利用することもあったことから、比較的とっつきやすい内容でした。 また、実際には Canvasへの描画を制御する「EaselJS」 アニメーションの動きを制御する「TweenJS」 外部ファイルの読み込みを制御する「PreloadJS」 今回利用していなかったのでご紹介は省かせて頂きますが音声データを制御する「SoundJS」 の4つをパッケージ化したものが「CreateJS」となります。 そのため、一部の機能だけ必要という事であれば、バラバラに利用することも可能です。 Canvasを用意...

「Raphaël」を使ってSVGによる図を描いてみた

やけに解像度の高いRetinaディスプレイが登場したり、手持ちのタブレット端末が流行ったりと、固定の画像で対応するには大変になってきそうな気がしたので、SVG等のベクタ画像をサイトに表示させる必要性があるのではないかと感じています。 そこで、実験的にJavaScriptを利用してベクタ画像を描画するRaphaëlを使って自サイトに線を引いてみました。 その他、矩形や円を描画したり、色を塗ったり出来るみたいなので、その辺りも含めて残しておきます。 Raphaëlを使う準備 .entry-content svg{border:1px solid #999;} 何だか最近フレームワークばかり触っていたので、色々読み込まないと行けないかと思ってましたが、ファイルは一つだけ。 また、描画するDOMを用意しておきます。 <div id="...