こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima

マウスに追従するようなツールチップなどを作るときにマウスの座標ってどう取得するかをメモ。 動作結果（スクリプトはブラウザのソースコードから参照） 関数にイベントハンドラを引数に渡してイベントからclientX・clientYで取得 いつもは普通に「function(){}」と記述していたけどイベントオブジェクトを取得したいときやイベントオブジェクトを操作した時などは「function(e){}」といった感じで引数にイベントを指定 //通常は下記のような記述 jQueryオブジェクト.mousemove(function(){}); //イベントターゲットや操作したいとき jQueryオブジェクト.mousemove(function(e){ alert(e.target); //イベントターゲットとなるdomElement名が表示される }); clientXとclientYでマウス座標を

今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。 このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイ

プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を

大前提 ウェブサイトを作っていて、スクロールを起点に演出を行い場合が多々あります（ページがスライドしたりなど）。 しかし、通常のマウスと違い、MacBookとかのトラックパッドだと慣性スクロールが働いて、ユーザーがトラックパッドから指を離した後も一定時間スクロールし続けます（onWheelイベントやonScrollイベントが発火し続けます）。 これを制御したいというのが今回のテーマです。 失敗ケース とりあえず以下に試してみたけどダメだったやつを。 ググる 先人の方々がとっくに解決策を見つけてくれてるだろうと期待しましたが、ベストな策は見つかりませんでした。 同じ悩みの方はたくさん見つかったのですが……。 http://stackoverflow.com/questions/12486141/check-if-user-is-scrolling-with-trackpad 慣性スクロールを

2017/06/22 JavaScriptでランダムでメッセージや画像を表示したい場合に役立つ「乱数の作り方」を説明します。Mathオブジェクトのrandom()、floor()というメソッドを利用しましょう。 サンプルコード5〜10の間でランダムな整数を作る例です。 var min = 5 ; var max = 10 ; var a = Math.floor( Math.random() * (max + 1 - min) ) + min ;デモMath.random(n)で、0〜nまでのランダム数を取得できます。取得できる値は少数を含むので、整数を得たい場合はMath.floor()などで切り捨てましょう。 最大値を指定0〜10の間で得たい場合は11、0〜100で得たい場合は101を指定します。

いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v