sacrifsコメントするTweet動画をCanvasに描画したい。やり方を考えてみたんですが、現状としてはPCは当然できるiOSではなんとかごまかせるAndroidは再生に何かしらユーザの動作が必要という理解になりました。iOSのやり方は、他のサイトなどでも紹介されていますが、videoのcurrentTimeを動的に変更しつつ、Canvasに描画すれば、再生できます。tick();});サンプル(※Safari/iOSSafari以外はおそらくバグります。)これで行ければよいのですが、残念ながらAndroidでは描画されません。PCでもSafari以外はこの方法が使えないようです。(IE11/Chrome/Firefoxでうまく動作せず)普通に、videoをplayしている状態であれば、currentTimeを変更できるんですが、再生を開始せずに、currentTimeを操作する良い方法が見つかりませんでした。Androidではタップなどユーザアクションなしで再生させることはできないはずなので、無理やりtouchstart等のイベントを使うか、開始ボタンなどを使う必要がでてきます。本当は、動画再生の方法を調べていたのではなく、タイマーを一元管理するためのライブラリを作ってその検証のために動画を操作していたんですが...。スマホで動画を自動で再生させるスマートな方法が現状なさそうなので、別のサンプルにしようと思います。昔動画は厳しそう、ということで動画をスプライトシートに変換して表示させたのですが、その時の判断はおそらく正しかったんだと思います。これはこれでデメリットもあるんですが...そちらについてはおいおい記事にしてみようと思います。sacrifsコメントするTweetしばらくの間、SublimeText2を使っていたのだけど、ずっと試用だし、何かに乗り換えるかー、ということで、GithubのAtomを使ってみることにしました。https://atom.io/以前は遅い遅いと言われていた気もするけれど、それほど不快な遅さはなく、使い勝手もほとんど変わらない感じでした。使っててSublimeTextとくらべていいと思ったのは以下の機能。画像のプレビューができる日本語の検索がスムーズパッケージを入れなくてもShiftJISなどが使える補完がAtomのほうが気が利いている気がする。間違ってCmd+Shift+Cとか押してもエンコードが変更されない(ConvertToUTF8のせいらしい。設定で変更すれば良いだけなのだけど...。)逆に困ったのは以下の機能ビルドをどうやって使うのかわからない。パスが通らないショートカットキーが動かないビルドについてはパッケージをインストールすればできます。gulpのタスクの実行がキーボードのみで実行できれば、と思っていたので、いろいろ試した結果、buildbuild-gulpを入れて、Cmd+Alt+Bでgulpの標準タスクが実行できるようにしました。最初はこの時にパスが通っておらず、困りました。起動時にターミナルから起動すればOKみたいな記事もありましたが、ちょっと面倒だな、と思って更に調べたら、起動時に実行されるinit.coffeeに記述を追加すればできるようです。].join(":")nodebrewなどを使っているので、ここにUsers/***/.nodebrew/current/binを追加したら、ビルドできるようになりました。その他、以下のパッケージを入れてみています。term3ともうまく行かなかったので...。)ビルドの設定で困りましたが、その点以外では快適に使えています。検索などで重くなる、ということもあるのでしょうが、SublimeTextの代替として十分使えそうです。こっちで制作してみようと思います。sacrifsコメントするTweet家で開発する用にGulpを使った基本プロジェクトを作ってみました。https://github.com/sacrifs/BaseProject_Gulp内容としては、JadeSCSSuglifycssminimagemin等を自動でやってくれるようになっています。仕事で使っていた機能を実現できてないところもあるので、もう少し改良して行こうと思います。昔だったらHaxeも入れてたと思いますしGruntではHaxeも入れていたんですが、gulp-haxeが見当たらなかったのと、最近はHaxeあまり使ってないので、ベースプロジェクトには入れていません...。言語としては好きなんですけどね。以前にHaxeを使ったクイズコンテンツを公開していたんですが、こちらはGruntでHaxeもコンパイルしていました。→IIDX問題NOTEまた何かこういうの作りたいなぁ。Bitbucketに置いてあったので、問題部分だけ抜いてGithubで公開しようかちょっと考えています。(問題の制作は私ではないので...。sacrifsコメントするTweetHTMLで演出っぽいものを作れるか、というのと、jQueryのプラグインを作ってみる練習。Haxeを最近は使ってますが、これは生JSです。jQueryプラグインですしね。RayEffectです。JSn0wriさんがwonderflで作られていたFlashエフェクトを元ネタにしています。(どこかの何かのキャンペーンサイトで同じようなエフェクトがあったような気がします。...が果たして何だったか。sacrifsコメントするTweetFlashを使っていた方にはわかりやすいと評判のJavaScriptライブラリ、CreateJSを使ってみています。→CreateJS(公式)ゲームらしいものを作りたいのですが、とりあえずはそこに至るまでいろいろやる必要があるかな~ということでテストしてみました。簡単にデジタル時計でも...ということでこんなのを作ってみました。1時計の背景の色は毎秒ColorMatrixFilterで変えています。ソースはメイン部分を抜粋すると以下の様な感じです。2016/04/21Ansibleを触ってみた。