developer.mozilla.orgWindow.screen を初めて知りました。 windowのサイズではなく画面サイズを返してくれるAPIだそうです。こちら で中身を確認できます。jsrun.it DEMO

アニメのエンディングのようなトランジションを目指しました。 DEMO See the Pen Transition like the ending by kimmy (@kimmy) on CodePen. Jade .btn.adjust(data-color="black") .hole .inner GO #mask-wrapper #mask JavaScript (function(win) { "use …

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…

一時期流行っていたものをつくってみました。動きしかつくってません。（シェア機能はありません） DEMO

kimizuka.hatenablog.com遷移しようとした際にconfirmを出すことは簡単なのですが、キャンセルを押した際、どのような処理が適切なのかが思いつきませんでした。 本当は遷移をキャンセルしたかったのですが、それはできず。 次点として一旦遷移後にlocation.…

OK・キャンセルでよければ confirm をつかえばOKです。 JavaScript (function(win, doc) { "use strict"; var TXT = "テキスト"; if (confirm(TXT)) { alert("OKの処理"); } else { alert("キャンセルの処理"); } })(this, document); DEMO

api.jquery.comいままで、 btn.addEventListener("click", function _handleClick() { btn.removeEventListener("click", _handleClick); alert("wow!"); }, false); 的な感じで書いてましたが、最近jQueryをつかう場合はoneをつかうようになりました。 Java…

kimizuka.hatenablog.comこちらの記事 で紹介しましたが、Androidでは擬似要素にCSSアニメーションが効かない機種があり、その対策として.afterというクラスを持ったdivに置き換えていたのですが、置き換えても一部AndroidでのみCSSアニメーションが再生され…

本日遭遇しました。 displayをblockにしたあとにbackground-imageのurlのパスにタイムスタンプをつけることによって解決しました。 この方法では、レンダリングが2回走ることになり、サイズの大きなgifアニメだと一瞬消えてしまうので注意が必要です。 JavaS…

前回の記事 でDISQUSってなんぞや？と思ったので調査して導入してみました。 Disqusとは disqus.comDisqus（ディスカス）は、Webサイトやブログに中央集権型のコメント機能を提供するオンラインサービスである。2007年に設立され、Big Head Labs Inc. の名前…

iOS9で話題になっていたSafariのコンテンツブロック機能。その実力を簡単に調査してみました。 コンテンツブロックとは iOS9にアップデートすれば、それだけでコンテンツブロック機能がつかえるようになると思っていたのですが、実際はそうではありません。 …

kimizuka.hatenablog.com前回の記事 でちらっと紹介しましたが、CSSアニメーションの途中にdisplayをnoneにするとtransitionend、animationendが発火しなくなります。 DEMO transitionend animationend 発火しない際には疑ってみてもいいかもしれません。

基本的にはトランジションの際はtransitionend、キーフレームアニメーションの際はanimationendをつかえばOKです。 transitionend HTML <div class="box"></div> CSS .box { position: absolute; top: 20px; left: 20px; border-radius: 12px; width: 120px; height: 120px; backgro…

非同期の処理をうまく扱うためにDefferdをつくりました。 要件 内部状態は 初期状態 から 成功 / 失敗 に切り替わる 1度切り替わったら状態は変わらない 成功、失敗状態になった際に発火するコールバック関数を登録することができる コールバック関数は登録…

便利ですが、範囲の指定には気をつけましょうという話です。github.com // grunt-autoprefixer autoprefixer: { options: { browsers: ["last 2 version"] // 対象のバージョンが指定できる }, develop: { src: "build/data/css/*.css" }, distribution: { s…

(function(win, doc) { "use strict"; var obj = {}; obj.addEventListener = addEventListener; function addEventListener() { // ... } })(this, document); 的なコードを書いていたところ、JSHintで、 'addEventListener' is already defined.と怒られま…

連載中 ワールドトリガー ワールドトリガー 1 (ジャンプコミックスDIGITAL)作者:葦原大介集英社Amazonほんのり理屈っぽい漫画が好きなので、今いちばん好きな漫画と言っても過言ではありません。 侵略者から街を守る漫画はいままでもあったと思うのですが、…

よく考えたら、iframe内での画面遷移を取得できることに気づきました。 JavaScript (function() { "use strict"; var iframes = document.querySelectorAll("iframe"); iframes[0].onload = function() { alert(this.src); }; iframes[0].src = "http://kimi…

集中すると時間の流れをゆっくりに感じることがあるといいます。「ボールが止まって見えた」的な名言もそこから生まれたのでしょう。プログラマが集中するとどうなるのか考えてみたのですが。ウィンドウが開くのがゆっくり見えるのかもしれませんね。Macでは…

Skypeのプロフィール画像を変更する際、「最近の項目」に羅列される写真はMacのどこに保存されているのか調べました。 ~/Library/Containers/com.apple.ImageKit.RecentPictureService/Data/Library/Images/Recent\ Picturesに保存されてました。 ~/Library/…

まさに新体験ですね。 正しいオキュラスのつかいかたを垣間見たような気がしました。 VICTORSTAR 3Dペン (ブルー)/ ドライバー+3色ABSフィラメント＋電源アダプタ+紙パターン+日本語説明書VictorstarAmazon

Numberを継承したサブクラス（Num）をつくるぞ。 function Num() { Number.call(this, arguments); } Num.prototype = new Number(); Num.prototype.constructor = Num; できた。インスタンスをつくろう。 var num = new Num(10); 試しにNumber.ptototype.to…

kimizuka.hatenablog.com以前、 JavaScriptでテキストの選択範囲を抽出したこと がありましたが、今回は抽出した部分を読み上げるように改良してみました。 音声合成APIを使っていますが、長文を読み上げることができなかったため、句読点で区切って読み上げ…

夏のことは忘れてました。 ハコスコストア https://itunes.apple.com/jp/app/hakosukosutoa/id983958124?mt=8&uo=4&at=10l16903ハコスコで楽しめるコンテンツがてんこもりです。 ピーティックス Peatix(ピーティックス)Peatix Incエンターテインメント無料意…

developer.vimeo.comこちらのサイト にすべてがまとまってます。 再生時間が取得できるので動画のプログレスに合わせてページの背景色を変化させています。 JavaScript $(function() { var body = $(document.body); var iframe = $('#player1')[0]; var pla…

ハコスコ6（シックス）iPhone 6サイズ対応 ハコスコ6（シックス）iPhone 6サイズ対応Amazon右目・左目がセパレートされていないタイプなので、顔にiPhoneを固定することが主な機能なのですが、YouTubeがTHETAの全天球動画に対応した昨今。 なかなかのコスト…

いま一番必要な音楽と出会えるサービスこと オンガクスリ 。 最近作業用BGMにつかわせていただいている悩みを紹介します。 大自然に癒されに行きます。大自然にぴったりの曲を教えてください。 http://ongakusuri.com/topic/3223ongakusuri.com 就活が終わら…