iOS や Android では 擬似的な clickイベント が用意されており、DOMに振ることができます。 clickイベントが発火する条件はもろもろあるのですが、指を動かしながら画面をタップすると、短めのフリックもclickと判定してくれることがわかります。 しかし、…

DEMOをごらんください。 DEMO JavaScript var index = 0; setInterval(function() { index = (index + 1) % 3; $("#box").attr("data-index", index); }, 200); HTML <div id="box" data-index="0"> <div class="face">٩( 'ω' )و</div> </div> SCSS $length: 3; #box { position: relative; width: 100px; height: 100px;…

おどろくべきことに Android には touchmove が発火した後に touchend が発火しない機種があります。touchstart → touchend（発火） touchstart → touchmove → touchend（発火しない）という具合です。信じられませんが、こういうケースがあるのです。恐ろし…

1回だけ誤操作でiPhoneアプリを消してしまったことがあって、なにを消したのかすらわからない状態になってしまったのですが、その対策を教えてもらいました。 設定手順 設定 > 機能制限 を ON にする 設定 > 機能制限 > Appの削除 を OFF にする これで機能…

見栄えの問題なので本来ならばCSSで解決したい問題なのですが、data-aspect属性で縦横比を指定してJSで対応していみました。 HTML <div class="box" data-aspect="1"></div> <div class="box" data-aspect="0.5"></div> <div class="box" data-aspect="0.25"></div> JavaScript (function(win, doc, $) { "use strict"; var $aspectBoxes = $("[data-aspect]"); $(function() {…

こちらのフォーム にURL を入力するだけでGoogleさんに評価していただけることを教えてもらいました。お手軽ですね。PageSpeed Insights こういった評価サービスを見つけたとき、紺屋の白袴になっていないか 自分自身を評価させてみる のがライフワークにな…

DEMO mobile Safari はキーボードが表示されているときしかkeypressイベントが発火しないということを知りました。 あたりまえといえばあたりまえなんですが、BluetoothキーボードをつなげばUIのキーボードを出さなくてもOKだと思っていたので、ちょっとショ…

個人的に background-attachment: fixed をぜんぜんつかわないので気づかなかったのですが、iOS8でもつかえないんですね。昔つくったコード をiPhoneで確認して気づきました。 CSS html { height: 100%; } body { height: 400%; background: #e3e3e3 url(htt…

main.cpp.o: In function `main': /Applications/Arduino.app/Contents/Java/hardware/arduino/avr/cores/arduino/main.cpp:40: undefined reference to `setup' /Applications/Arduino.app/Contents/Java/hardware/arduino/avr/cores/arduino/main.cpp:43: …

Arduino > Preferences... の Display line numbers のチェックボックスをONにすればOKです。

親要素からの縦位置と、（改行している際は）要素同士の横の間隔に関係してきます。 SCSS @import "compass/reset"; .btns { width: 100%; height: 30px; background: #6e6e6e; text-align: center; &:nth-child(odd) { background: #3e3e3e; } &:nth-child(…

JavaScriptでNaNはNaNと比較してもfalseが返ってくるので、値がNaNかどうか評価するのが難しい時があります。 console.log(NaN == NaN); // => false console.log(NaN === NaN); // => false そんなときに役に立つのが isNaN と Number.isNaN です。 isNaN …

developer.mozilla.orgNumber.prototype.toLocaleString() をつかえばOKです。 ただしIEは11から。Safariは現在未サポートです。 JavaScript document.write((1000).toLocaleString()); // => 1,000 DEMO

ツイートボタンは こちらのツール で簡単につくることができるのですが、いつの間にか吹き出しの位置を変えるオプションがなくなっているような気がします。（昔はチェックボックスがあったような気が。。。気のせいかもしれませんが）Twitter Publish 一応…

こちら のツールをつかうとiTunesでカスタムのコレクションを作成することができます。Chromeでみると調子が悪い気がするので、僕はSafariからアクセスしています。Apple Services Performance Partners ただし、事前申請制なので、 こちら から申請しましょ…

kimizuka.hatenablog.comaudioタグでは実現できませんが、Web Audio API をつかえば実装できます。まず、以前つくった Web Audio API のサンプルをiOS用に書きかえます。kimizuka.hatenablog.com JavaScript (function(win, doc) { "use strict"; try { (fun…

JavaScript (function(win, doc) { "use strict"; var audio = doc.getElementById("audio"); audio.volume = 0; // Mobile Safari で効かない doc.addEventListener("click", function() { audio.play(); }, false); })(this, document); DEMO PCのSafariで…

ＮＨＫクリエイティブ・ライブラリー www.nhk.or.jp ニコニ･コモンズ commons.nicovideo.jp jsdo.it Assets http://jsdo.it/assetsjsdo.it 大急ぎでモックをつくるときなどに活用させて頂いております。

konashiをつかった開発のときにいつも実装している機能を実装したテンプレート的につかえるコードを書いてみました。Fボタン で konashi の find。 Dボタンで 接続している konashi を disconnect。 Bボタンで konashi のバッテリー確認。 Sボランで konashi…

昨日のjQueryの挙動 ですが、getElementsByTagNameをつかってDOMをセレクトするか、querySelectorAllをつかってセレクトするかで近い現象を生み出すことができました。kimizuka.hatenablog.com getElementsByTagName DEMO getElementsByTagNameで取得したDOM…

言語化が難しいのでコードで見てみてください。 HTML <ol id="order"> <li>清田</li> <li>中村</li> <li>角中</li> <li>今江</li> <li>クルーズ</li> <li>根元</li> <li>井口</li> <li>鈴木</li> <li>吉田</li> </ol> JavaScript $(function(win, doc) { "use strict"; var $order = $("#order"), $li = $("li"); $order.html(""); $order.append($li); }); DEMO 挙動…

Chromeでお試しください。マイク入力をFFTでビジュアライズします。【追記】 ※ ChromeではgetUserMediaがhttpsじゃないと動作しなくなりました。それに伴いjsdo.it上では動作しなくなりました。 ※ Firefoxで こちらのコード をお試しください。（ http://jsd…

つかってみました。 音声を解析してテキストにしてくれます。Chromeでお試しください。 HTML <div id="msg"></div> JavaScript (function(win, doc) { "use strict"; var recognition = new webkitSpeechRecognition(), msg = doc.getElementById("msg"); recognition.lang = "ja…

location.href を書き換えるときは良いのですが、読み込むとき、すなわち、 var url = location.href; 的なことをするときには注意が必要です。 なぜなら、クエリ、すなわちlocation.searchで取得できる部分はユーザーが任意に入力することができるからです…

JavaScript $("[href^='#']"); document.querySelector("[href^='#']"); こちらで#からはじまるhref属性を持つ要素を取得できます。 JavaScript $("a[href^='#']"); document.querySelector("a[href^='#']"); aタグだけに限定することもできます。 CSS [href…

Jade p | へへい。 br | へへへい。 br | へい。へへい。 HTML <p>へへい。<br />へへへい。<br />へい。へへい。</p> これで見やすいJadeのできあがりです。

とても日本語にしにくいのですがつくってみました。 DEMO JavaScript (function(win, doc, $) { "use strict"; var script = doc.createElement("script"); script.onload = main; script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/…

kimizuka.hatenablog.com 前回ログインなしの動画検索 を実装しましたが、今回はログインありバージョンで実装してみます。 var OAUTH2_CLIENT_ID; // https://console.developers.google.com にて クライアントIDを作成する必要があります。 var OAUTH2_SCO…

JavaScript (function(win, doc, $) { "use strict"; // KEY は https://console.developers.google.com にて公開APIキーを作成する必要があります // ID はYouTubeのVideoIDを使用 $.ajax({ type : "get", dataType : "jsonp", url : "https://www.googleap…

ついに YouTube Data API v2 が 停止してしまったので仕様を調べて v3 に乗り換えました。基本的には こちら を信じて実装すれば問題なく実装できます。実装方針としては、ユーザーにログインを求めるパターンと、ログイン不要のパターンがあるのですが、今…