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

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

ブログの方向性変えます。

ひさーしぶり(一年ぶり)の更新で突然ですが・・・ブログの方向性変えます。 今までただ技術系のトピックメモしてただけだったのだけど、Qiitaのアカウント作ったのでそういうのはそちらに↓↓ https://qiita.com/kokoyoshi/ こちらはもっと副次的なというか、フロ…

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(); // …

フロントエンドエンジニアになった

正確には今年の2月ぐらいからなってた。 いくつか受けて今の会社に拾ってもらってコードだけ書いてます。 実力不足なのは前々から感じてましたが、それをさらに痛感する日々。少しでもギャップを埋めるためにここ最近は結構仕事漬けになってしまってました…

Webkit(Chrome/Safari)でtable内のcontent-boxが効かない

CSS

めったにハマらない罠だとは思うんですが、Webkitではtable直下の要素にcontent-boxが効かないです。 みたところcontent-boxを明示的に指定してもborder-boxな状態になっているようです。 Firefoxではこのようなことは起こりませんでした。 デモ

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>…

ChromeとSafariでiframeにborder-radiusが効かない

CSS

解決策としては、外側をブロック要素で囲ってやって、それにborder-radiusとoverflow:hiddenをかけてあげ、position:relativeを指定すると角丸に切り抜くことができます。 <div> <iframe src="hogehoge" width="500" height="500"></iframe> </div> div { position:relative; overflow:hidden; border-radius: 50%; } デモ このバ…

CSSで東京オリンピック2020のロゴ

CSS

codepen.io このtogetterみてたら作りたくなったのでスケッチ。

マウス追尾で円のcos,sinを表示

codepen.io 最近よくお世話になっている東大生が教えるビジュアル数学というサイトの三角関数のページにおいてあるFlashを、一からCanvasで再現してみました。 円の上にマウスをホバーさせてやると、それに追尾してその位置のcos,sinを表示します。 アークタ…

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

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

Canvasでシンプルな正弦波

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

文字を順番にブラーインさせるSass

Sassを使うとほんと簡単にタイミング調整ができて楽ですね。 (ベンタープレフィックス対応にCompassも使用しています) codepen.io CSS自体はtext-shadowのぼかし幅を縮めていくのと同時に、 文字をフェードインさせて実装します。

MacのChromeとSafariでSelect要素に高さを指定しても効かない

-webkit-appearance: menulist-button;を指定すると効きます。 デモ ちなみに-webkit-appearance: none;ですべての見た目をリセットすることができますが、 矢印等もすべて消えてしまうようなので、高さだけなんとかしたい場合は個別に対策が良さそうです。 …

IE8のmin-heightはborder-boxを指定した要素でもcontent-boxとして計算されてしまう

CSS

バグなのか仕様なのかはわかりませんが、border-boxをかけていてもIE8ではmin-heightはborderやpaddingを含んで計算されてしまいます。 https://shanetomlinson.com/2012/box-sizing-border-box-padding-and-min-height-bug-in-firefox-and-ie/ 過去にはFire…

MacでChromeやSafariのホバーでマウスカーソルがポインターにならない

結論、Photoshopを閉じると治ります。おそらくYosemite以上で起こるようです。 Issue 357347 - chromium - Mouse cursor stopped turning into a pointer while hovering over links - Monorail 僕はCCではなくCS6ですが発生しました。 画像を作りながらコー…

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

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

モダンCSS設計での失敗メモ

CSS

現在担当しているサービスでSassを使ったBEMの設計を行いました。 当初これでモダンですばらしいコーディングがスタートすると思っていたのですが、 世の中そんなに甘くはなく、また、僕が未熟なこともあり設計上の失敗をいくつか犯してしまったので、今後の…

ご挨拶

はじめまして、これから勉強や日々の雑感を貯めていこうと思います。 自分はフロントエンドの技術を使って「インタラクティブな表現ができる人」 になるのが目標です。よろしくお願い致します。