React.jsを試してみるか、ということで、ここ数日いろいろ見ながら真似しながら、ポモドーロタイマーを実装することにしてみた。
Reactも、ReduxもES2015で書いてみたのでそちらも、さらにはwebpackも初めて使ってみました。なんとか動くようにはなったみたいです。
「javascript」カテゴリーアーカイブ
アニメーションするときのタイマーやリサイズの関数をまとめて管理するJSライブラリ
仕事で、複数のスプライトシートをタイマーで回そうと思って仕組みを組んだら非常に重くなってしまったので、タイマーを一括で管理して requestAnimationFrameを使いつつ、FPSを維持する、というのをやっていたのですが、ライブラリ化しておけば後々便利だろう、ということで作ってみました。
https://github.com/sacrifs/spfdLib.trigger.js
単純にFPS30でsetTimeoutしたり、setIntervalしたりすると、10個も起動すれば重くなってしまいますが、こちらだと1つになります。
spfdLib.trigger.addTimer(function(){console.log("hoge")});
で、FPSにしたがった処理を実行できます。
また、スプライトシートをアニメーションさせる場合に、全体のフレーム数が必要だったので、オブジェクトとして引数を渡した場合、FPSに沿ったフレーム番号を取得できるようになっています。
var colNum = 15;
var fps = 30;
var w = 360;
var h = 203;
var ua = navigator.userAgent.toLowerCase();
var animation = function(target){
return function(fnum){
var x = fnum % colNum * w;
var y = (fnum / colNum | 0) * h;
target.style.backgroundPosition = -x + "px -"+y + "px";
};
}
$(".spriteAnim").each(function(){
spfdLib.trigger.addTimer({fps:30, frame:300, func:animation(this)});
});
処理が1つだけの場合も、普通にrequestAnimationFrameを使うと、指定のFPSで処理を実行、というのができないので、ライブラリを噛ませばちょっと便利になると思います。
FPS指定で動かす処理は下記サイトを参考にしました。
http://yomotsu.net/blog/2013/01/05/fps.html
(基本的にFPS30で使うものとしてイベントを間引いていますが、FPSが30以上の場合は間引かないほうが綺麗に見えると思います。)
リサイズについてはついでに同じようなものだろうと、一緒のライブラリに入れてしまいました。
リサイズのイベントは画面リサイズ時に送出されますが、リサイズ時に再描画したいものがあったとして、イベント送出時に毎回再描画されると、かなり重くなります。そこで、debounceや、throttleと呼ばれる処理をして間引いたりします。
アニメーションの方は、throttleでFPS分になるように間引いています。リサイズのほうはdebounceで間引いています。(どっちでもいいようですが)
動画をCanvasに描画したい
動画をCanvasに描画したい。なるべく自動再生したい。
いろいろやり方を考えてみたんですが、現状としては
- PCは当然できる
- iOSではなんとかごまかせる
- Androidは再生に何かしらユーザの動作が必要
という理解になりました。
iOSのやり方は、他のサイトなどでも紹介されていますが、videoのcurrentTimeを動的に変更しつつ、Canvasに描画すれば、再生できます。
var video = document.createElement("video");
var context = document.getElementById("canvas").getContext("2d");
var tickTime = 1000/60/1000;
video.src = "movie/sakura.mp4";
video.load();
function tick(){
video.currentTime += tickTime;
if(video.currentTime >= video.duration){
video.currentTime = 0;
}
context.drawImage(video, 0, 0, 360, 202);
requestAnimationFrame(tick);
}
video.addEventListener("canplay", function(){
tick();
});
サンプル(※Safari/iOSSafari以外はおそらくバグります。)
これで行ければよいのですが、残念ながらAndroidでは描画されません。また、PCでもSafari以外はこの方法が使えないようです。(IE11/Chrome/Firefoxでうまく動作せず)
普通に、videoをplayしている状態であれば、currentTimeを変更できるんですが、再生を開始せずに、currentTimeを操作する良い方法が見つかりませんでした。
当然、Androidではタップなどユーザアクションなしで再生させることはできないはずなので、無理やりtouchstart等のイベントを使うか、開始ボタンなどを使う必要がでてきます。
本当は、動画再生の方法を調べていたのではなく、タイマーを一元管理するためのライブラリを作ってその検証のために動画を操作していたんですが…。スマホで動画を自動で再生させるスマートな方法が現状なさそうなので、別のサンプルにしようと思います。。
昔動画は厳しそう、ということで動画をスプライトシートに変換して表示させたのですが、その時の判断はおそらく正しかったんだと思います。まあ、これはこれでデメリットもあるんですが…そちらについてはおいおい記事にしてみようと思います。
参考 :
Atomエディタを使う話
しばらくの間、SublimeText2を使っていたのだけど、ずっと試用だし、何かに乗り換えるかー、ということで、GithubのAtomを使ってみることにしました。
以前は遅い遅いと言われていた気もするけれど、それほど不快な遅さはなく、使い勝手もほとんど変わらない感じでした。
使っててSublimeTextとくらべていいと思ったのは以下の機能。
- 画像のプレビューができる
- 日本語の検索がスムーズ
- パッケージを入れなくてもShiftJISなどが使える
- 補完がAtomのほうが気が利いている気がする。
- 間違ってCmd+Shift+Cとか押してもエンコードが変更されない(ConvertToUTF8のせいらしい。設定で変更すれば良いだけなのだけど…。)
逆に困ったのは以下の機能
- ビルドをどうやって使うのかわからない。
- パスが通らない
- ショートカットキーが動かない
ビルドについてはパッケージをインストールすればできます。
とりあえずgulpのタスクの実行がキーボードのみで実行できれば、と思っていたので、いろいろ試した結果、
- build
- build-gulp
を入れて、Cmd+Alt+Bでgulpの標準タスクが実行できるようにしました。
最初はこの時にパスが通っておらず、困りました。
起動時にターミナルから起動すればOKみたいな記事もありましたが、ちょっと面倒だな、と思って更に調べたら、起動時に実行されるinit.coffeeに記述を追加すればできるようです。(SettingのOpenConfigFolderで開ける)
process.env.PATH = [ "必要なパス", process.env.PATH ].join(":")
nodebrewなどを使っているので、ここに
Users/***/.nodebrew/current/bin
を追加したら、ビルドできるようになりました。
その他、以下のパッケージを入れてみています。
- atom-jade(Jadeファイルを見やすく)
- emmet(HTMLを書く場合 / 計算などに使う)
- file-icons(ファイルのアイコンが見やすくなる)
- terminal-plus(term2, term3ともうまく行かなかったので…。)
ビルドの設定で困りましたが、その点以外では快適に使えています。
検索などで重くなる、ということもあるのでしょうが、SublimeTextの代替として十分使えそうです。しばらくこっちで制作してみようと思います。
参考 :
Atom（GitHub製エディタ）に乗り換えて最初にやっておきたいこと | mae’s blog
パッケージ[Script]でJS,CoffeeScriptを実行 – Qiita
Gulp用のBaseProjectを作ってみた
家で開発する用にGulpを使った基本プロジェクトを作ってみました。
https://github.com/sacrifs/BaseProject_Gulp
内容としては、
- Jade
- SCSS
- uglify
- cssmin
- imagemin
等を自動でやってくれるようになっています。まだ仕事で使っていた機能を実現できてないところもあるので、もう少し改良して行こうと思います。
昔だったらHaxeも入れてたと思いますしGruntではHaxeも入れていたんですが、gulp-haxeが見当たらなかったのと、最近はHaxeあまり使ってないので、ベースプロジェクトには入れていません…。言語としては好きなんですけどね。
以前にHaxeを使ったクイズコンテンツを公開していたんですが、こちらはGruntでHaxeもコンパイルしていました。
また何かこういうの作りたいなぁ。Bitbucketに置いてあったので、問題部分だけ抜いてGithubで公開しようかちょっと考えています。(問題の制作は私ではないので…。)