JavaScript
一昔前はページスクロール中はJSが止まってしまうことがあたりまえだったiOSのブラウザ。 なのでスクロール連動のサイトとかを実装するときはいろいろ大変でした。（自前でスクロールを実装したりしてました） しかし、最近のSafariはスクロール中にもJSが動…
きっかけは この記事 を読んだことにあります。 （もう1年以上前の記事なんですね）gigazine.netいろいろと参考になることが書いてあるのですが、なかでも一番気になったポイントは右手でスマートフォンを操作する人の指の届く範囲を表したこの図でした。 ht…
最近、ひさしぶりタスクランナーなしでコーディングをしました。タスクランナーなしで作業するときは、JSHint, a JavaScript Code Quality Tool や The W3C Markup Validation Service でバリデートをかけたり、jshint.comvalidator.w3.org/packer/ 、 CSS M…
同一ドメインのとき parent.location.href で親のURLを取得できます。iframeが入れ子になっている場合も親のURLになります。 入れ子になったiframeの大本の親のURLが知りたい場合は、 top.location.href で取得できますが、すべてのiframeが同一ドメインであ…
See the Pen Form for Email by kimmy (@kimmy) on CodePen.タイトルのとおりです。 ＠以下の一文字をタイプしたときに、 @gmail.com, @yahoo.co.jp, @hotmail.co.jp, @docomo.ne.jp, @ezweb.ne.jp, @softbank.ne.jp をサジェストします。 ソースコード HTML <div class="input-box"></div>…
kimizuka.hatenablog.com window.addEventListener("resize", _handleResize, false); function _handleResize() { // ... } でリサイズイベントを張って、 window.dispatchEvent(new Event("resize")); と、初期化のタイミングでイベントを発火させていたの…
qiita.comこの記事は 作業用BGM(個人or社内) Advent Calendar 2015 の18日目の記事です。 今回は作業用BGMから人生の悩みを解決するような音楽まで見つかるかもしれない、オンガクスリ というウェブサービスについて紹介したいと思います。 オンガクスリとは…
最近フォームをコーディングすることがとても多いのでまとめておこうと思います。 スマートフォンでデフォルトにあたっているスタイルをリセットする webkit系のブラウザはフォームにいい感じのスタイルを当ててくれています。 いい感じではあるんですが、自…
kimizuka.hatenablog.com数値（Number）を真偽値（Boolean）にすることはよくあるのですが、逆を考えたときに一瞬むむむと思ったのでメモしておきます。 JavaScript Number(true); // => 1 Number(false); // => 0 true - 0; // => 1 false - 0; // => 0 tru…
そろそろ、飛び込み営業からフロントエンジニアに転職してから5年が経ちます。つい最近、2年前ぐらいに書いたコードを読み返し、そのごちゃごちゃしていてびっくりしました。 0からのスタートだったので、毎年毎年コードの書き方が微妙に変化していることも…
必要だったのでつくりました。2度と使う機会は無いかもしれません。 JavaScript function goToTailEnd(array, val) { var index = array.indexOf(val), target; if (index > -1) { target = array.splice(index, 1); array.push(target[0]); } return array;…
最近Switchでnullをチェックする機会があって、他のfalsyな値もチェックできるかを確かめたのですがNaNだけが失敗しました。 checkFalsyValue(false); checkFalsyValue(null); checkFalsyValue(({}).val); checkFalsyValue("hoge" - 0); // MISS!! checkFals…
ワンライナーだとこんな感じでしょうか。（Chromeでしか動作を確認していません） JavaScript ([].slice.call(document.querySelectorAll("img"))).forEach(function(elm) {elm.style.display = "none"});
developer.mozilla.orgJavaScriptで継承を行う際に、 function SubKlass() { SuperKlass.apply(this, arguments); } SubKlass.prototype = Object.create(SuperKlass.prototype); SubKlass.prototype.constructor = SubKlass; を、 function SubKlass() { th…
引数で渡したオブジェクトをprototpeに持ったobjectを生成してくれるObject.create。 便利なのですが、IE8以下ではつかうことができません。 そういう場合は自分で作ってしまいましょう。 JavaScript if (!window.Object.create) { window.Object.create = f…
DEMO SCSS @import "compass/reset"; body { background: #311B92; } .circles { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 300px; height: 300px; -x-animation: rotate 10s linear infinite; .circle { float: lef…
いまさらながらQUnitでテストを書いてます。 テストの書き方はまた別の機会にまとめるとして、取り急ぎ非同期の処理をテストする方法がまとめておきます。 JavaScript QUnit.test("API - TEST", function(assert) { stop(); $.get("#{URL}").done(function(e…
はじめてなので、workerを別ファイルに分けるという最もシンプルな方法でWeb Workerをつかってみました。 これだけであればすこぶるシンプルです。 JavaScript main.js (function(win, doc) { "use strict"; var worker = new Worker("http://jsrun.it/kimmy…
kimizuka.hatenablog.com 前回 からの改修点 実装をクラス風に改良しました。 imageDataのコピーを取りました。（以前のものは右下ほどぼけてました） JavaScript (function(win, doc) { "use Strict"; function Blur(elm) { var that = this; _init(); func…
職場の先輩に言われて考えてみました。もうちょっとシンプルにできそうです。 "1000000".replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // => "1,000,000"
kimizuka.hatenablog.com前回 までのコードでは、 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24とピクセルがあったとき、自分の周りのピクセルの平均をとっていました。 例えば12番の値を出す際は 06 07 08 11 12 13 16 17 …
kimizuka.hatenablog.com前回canvasで画像をぼかす習作をつくりました が、今回はDOMを渡すとbackground-imageに設定されている画像をぼかしてbackground-imageを差し替えるという習作をつくってみました。background-position とか background-size が便利…
いつもはCSSのfilterをつかってぼかすのですが、 Android4.3以前も対応させようとするとそうもいきません 。developer.mozilla.org Can I use... Support tables for HTML5, CSS3, etcというわけでCanvasをつかって画像をぼかす習作をつくってみました。 自…
http://jsdo.it/jsdo.itコードの検証を行う際、jsdo.it をつかうことが多いのですが、そのURLをスマートフォンに渡す際はいつも手打ちしていました。 流石にめんどうなので、URLをQRコードに変換しようと思ったのですが、 jsdo.it には、 コード編集は jsdo.…
iPhoneでvideoタグのplayを叩くと、ビデオプレイヤーが立ち上がってしまいますがそのままブラウザ内で見たいというケースもあると思います。 そんなときにつかえるようなつかえないような技を紹介します。（iOS9.0.2 の iPhone6 では動きました） 用意するも…
developer.mozilla.orgWindow.screen を初めて知りました。 windowのサイズではなく画面サイズを返してくれるAPIだそうです。こちら で中身を確認できます。jsrun.it DEMO
kimizuka.hatenablog.com前回の記事 でいろいろ考えましたが、もっと単純な話でした。 jQueryをつかえば、 parseFloat($("#box").css("transition-duration")); で #box の transition-duration を知ることができます。 DEMO https://twitter.com/ki_230/sta…
kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com 最近、CSSアニメーションの終了をJSに伝える手法をもろもろ試し、これからは transitionend をつかおうと心に決めたのですが、これまでは transitionend のことを信頼してなかったの…
developer.mozilla.orgこのページ を参考にrequestAnimationFrameがつかえないブラウザ用に同じような機能を提供すべくコードを書いてみました。 JavaScript var requestAnimationFrame = win.requestAnimationFrame || win.mozRequestAnimationFrame || win…
kimizuka.hatenablog.com以前の記事 でちらっと紹介しましたが、ブラウザによってはtransitionend、animationendにプレフィックスが必要になる場合があります。 CSS .box { position: absolute; top: 20px; border-radius: 12px; width: 120px; height: 120p…
