ここから ON / OFF を切り替えることができます。

引数で渡したオブジェクトを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…

おもしろエンジニア塾 http://omojyuku.tumblr.com/omojyuku.tumblr.com ほぼ第10回 ヒャッカソン 100-a-thon.doorkeeper.jp GUGENコンテスト2015 http://gugen.jp/contest2015 歩行者移動支援アイデアソン・ハッカソン＠本郷 歩行者移動支援アイデアソン・…

tokyodesignweek.jp先週末より 東京デザインウィーク の ASIA AWARDS ヤングクリエイター展 にひっそりと 出展 させていただいております。 そうぞうの遊び from そうぞうの遊び on Vimeo. お近くにお立ち寄りの際にご来場いただけたりするとうれしいです。…

Arduino Playground - Metro僕は Metoro というライブラリを使っています。JavaScriptにおける、 setInterval(function() { console.log("DO!"); }, 100); 的な処理を、 #include <Metro.h> Metro metro1 = Metro(100); void setup() { Serial.begin(9600); } void lo</metro.h>…

SVGをアニメーションさせてみました。 DEMO See the Pen HELLO WORLD. by kimmy (@kimmy) on CodePen. HTML

いまさらながらQUnitでテストを書いてます。 テストの書き方はまた別の機会にまとめるとして、取り急ぎ非同期の処理をテストする方法がまとめておきます。 JavaScript QUnit.test("API - TEST", function(assert) { stop(); $.get("#{URL}").done(function(e…

Macをサイネージ的に使いたい場合などにとても便利です。 自動起動 システム環境設定 > 省エネルギー > スケジュール から起動時間を設定これだけでOKです。 終了時間を設定する際は「スリープ」「再起動」「システム終了」を選択できます。 自動ログイン シ…

tell application "QuickTime Player" open "/Users/#{ユーザー名}/Desktop/movie.mp4" tell front document present set looping to true play end tell end tellAppleScriptをつかってデスクトップにおいたmovie.mp4をフルスクリーンでループ再生するスク…

よくある演出をつくってみました。 （よく考えたらCSSアニメーションじゃなかったです） DEMO See the Pen HELLO WORLD. by kimmy (@kimmy) on CodePen.

Cursorcerer: Hide Your Cursor at Will - Doomlaserこちらのアプリで実現できます。アイコンが若干不気味な気がしますが、マウスが動いていない時は非表示になります。 画面キャプチャや画面収録の際に便利です。

新宝島 豪華初回限定盤 新宝島 豪華初回限定盤(映画「バクマン。」BOX)アーティスト:サカナクションビクターエンタテインメントAmazon新宝島サカナクションロック¥255provided courtesy of iTunesひさしぶりに買ったCDです。 バクマンの映画を観に行った際に…

はじめてなので、workerを別ファイルに分けるという最もシンプルな方法でWeb Workerをつかってみました。 これだけであればすこぶるシンプルです。 JavaScript main.js (function(win, doc) { "use strict"; var worker = new Worker("http://jsrun.it/kimmy…

www.macupdate.comこちらのアプリで実現できます。インストール後に「Disable Lid Sleep」と「Disable Idle Sleep」にチェックを入れればOKです。 これでクラムシェルモードでもiTunesの音楽を聴くことができたりするようになります。

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 が便利…

最近ガレージバンドでのBGMづくりに夢中です。 だいたいおんなじような曲になってしまうところに己の限界を感じています。 soundcloud.comsoundcloud.comsoundcloud.comsoundcloud.com

僕はマリーンズファンなので、ゴールデンイヤーの日本一を夢見ながらクライマックスシリーズを見守っています。 しかし昨今、プロ野球中継が地上波で中継しなくなってしまったので、いつも生放送でプレーを確認するのに手間取ります。 5年前はBSのはいる漫画…

いつもは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 では動きました） 用意するも…

https://twitter.com/ki_230/status/651331561338441729昨日突然思いつきました。我ながら名言だと思うんですがいかがでしょう。 api.jquery.com api.jquery.com

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…