フロントエンドエンジニアもどきの備忘録

デザイナーやらコーダーを経てフロントエンドに落ち着きました。

JS

FireFoxで2回目のCSSアニメーションが動かない

特定の条件下で、FireFoxでは2回目のアニメーションが実行されません。 発生条件は、「アニメーションの実行時にその要素の親要素のdisplayがnoneからblockに変更されるような処理」の場合です。 入れ子にせず、その要素だけでアニメーションする場合は大丈…

カーソルと傾きでパララックスするやつ作った

github.com 軽量なのが欲しかったので作りました。わりと軽いと思います。 スマホなどでの傾きでも動くんですが、実際さわってみると45度ぐらいを角度0でやったほうがいいのかもと思ったり。。。 デモ それぞれの.layerの要素にdata-depthを設定します。 0~1…

Pixi.jsでAndroid4.0系だけCROS時にSECURITY_ERR: DOM Exception 18 エラー

情報がなくて2日もはまってしまいました。。。 結論、Android4.0系の標準ブラウザでWebGLを使うとどうあがいてもこのエラーになる場合があります。なので、Canvasを使うようにしてあげるといいです。(4.1とかは大丈夫) PIXI.autoDetectRendererの第4引数…

forever-monitorでNode.jsスクリプトを簡単デーモン化

Node.jsを定常運用しようとするとデーモン化しなくてはとなりますが、forever-monitorを使うとコードでいろいろと制御できて便利です。 インストールは省略。 ./ ├── monitor.js // 監視用 └── something.js // これをデーモン化 monitor.js var forever = r…

spritesmith-texturepacker使用時にクエリストリングをつける

CSSだとgulp-cachebustにパイプかなと思いますが、jsonなのでそういうものは見当たらず、、。 あまりいい方法ではないですが、ファイルを解析して置き換えするのもコストが高いのでspritesmith-texturepackerのパラメータに細工してつけると楽です。 var _ =…

PIXI.js用にスプライトのテクスチャをGulpで生成する

gulp.spritesmithとspritesmith-texturepackerを使います。 インストールは省略。 var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); var spritesmith_texturepacker = require('spritesmith-texturepacker'); gulp.task('make_s…

Three.jsの初歩

Three.jsの勉強を始めようと思います。 まずは初歩。立方体をつくって、それぞれの面に画像を貼り付けて、適当に回転してみました。 (リビジョンは79です) https://yossiy.github.io/study_three/1.html // シーンを作成 var scene = new THREE.Scene(); // …

Chromeのデベロッパーツールでタッチイベントが効かない

JS

皆さんもう気づかれてると思いますが、3月にデベロッパーツールが新しくなってからタッチイベントをエミュレート設定できるチェックボックスが消えてますよね。 そして案の定タッチイベントが効きません。 JavaScriptでタッチイベント自体は存在するするのに…

iframe要素でclickなどのイベントが発火しない

iframeを含め以下の要素はマウスイベントとタッチイベントをサポートしていません。 <base> <bdo> <br> <head> <html> <iframe> <meta> <param> <script> <style> <title> 解決策としては、iframe要素のcontentDocumentプロパティからframe内の要素にアクセスできるので、以下のようにiframe内部</iframe></html></head></bdo></base>…

Canvasでシンプルなアナログ時計

codepen.io シンプルな時計の実装です。 三角関数で現在の時間の位置を求めて描画を繰り返します。 フレームレート的には1fpsで十分なのでrequestAnimationFrameを使わなくても良かったかもしれません。 針の描画 三角関数で現在の時間のそれぞれの針の位置…

Canvasでシンプルな正弦波

正弦波のお勉強メモ。 正弦波は 振幅 * sin( 角度速度 * 時間 ) で表すことができます。 角度速度は 角度速度 = 2π / 周期 で計算することができます。 処理の流れとしてはcanvasの左端から1pxづつの距離を時間としてループで描画しています。 codepen.io

gulp+browserifyでSassの@import風にrequireするレシピ

どこにも需要なさそうですが、browserifyでビルドされるJSファイル側からの指定だけで読み込みをしてみたかったのでメモです。 (いきなりルー語ですみません。。。タイトルつけるセンスが欲しいです) なぜSassの@import風かというと、読まれるだけのファイ…