sortの引数にランダムで正か負の値が返ってくれば良いので、Math.randomの値から0.5を引いて実装しています。 JavaScript function shuffleArray(arr) { if (typeof arr.sort === "function") { arr.sort(function() { return Math.random() - 0.5; }); } re…

Windows10がリリースされたので早速アップグレードして、EdgeのUA（User Agent）を調べてみました。 Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240僕の環境ではこう…

Googleフォームをiframeで埋め込むとこんな感じです。でもこれではいまいち美味しんぼ感がでませんね。そこで、CSSを。あーして。こーして。そいや！ほんのり美味しんぼ感がでてきましたね。 カスタム手順 iframeのURLにアクセス ソースをまるっとコピー コ…

JavaScript (function(win, doc) { "use strict"; var ua = navigator.userAgent.toLowerCase(), deviceData = { isIOS : false, isAndroid : false, isTablet : false, device : "", verString : "", version : 0 }; if (/iphone|ipod|ipad/.test(ua)) { ns…

属性セレクタには完全一致以外の選択方法が用意されています。 [attr] attr という名前の属性を持つ要素を表します。[attr=value] attr という名前の、値が正確に "value" である属性を持つ要素を表します。[attr~=value] attr という名前の、値がスペースで…

「すべてにチェック」を入れるにチェックを入れるとすべてのチェックボックスにチェックが入ります。 「すべてにチェック」を入れるのチェックを外してもなにもおこりません。 「すべてにチェックを入れる」以外のすべてのチャックボックスにチャックが入っ…

以前はフォームの操作をさわりだけ体験しました が、今回はチェックボックスの操作に特化します。kimizuka.hatenablog.com <input type="checkbox" id="checkbox" /> という要素があるとしてもろもろ操作してみましょう。 選択したチェックボックスにチェックを入れる JavaScript おさらいになります…

dlete演算子でまるっと削除することができます。developer.mozilla.org オブジェクトの場合 keyとvalueがまるっとなくなります。 var obj = { a : 0, b : 1, c : 2 }; delete obj.a; console.dir(obj); // => {b : 1, c : 2} 配列の場合 配列の要素を削除す…

api.jquery.com !"#$%&'()*+,./:;<=>?@[\]^`{|}~ こちらの31文字です。（30文字のように見えますが、先頭に半角スペースがはいってます） これらの文字は \\ と バックスラッシュ × 2 でエスケープできます。例えば、 <p id="[hey]">HEY!</p> といった感じのイカしたIDを持った…

iPhoneでもテキストボックス内で改行ボタンを押すとsubmitできるようです。（iOS8.4 iphone6にて確認） DEMO http://jsrun.it/kimmy/q4Ll※ iPhoneでご観覧ください。

以前、 iPhone の Mobile Safari で Audio を再生したときの挙動を調査 してまとめましたが、今回はVideoを再生した際のコントロールセンターの挙動を観察しました。（iOS8.4 iPhone6で確認）kimizuka.hatenablog.com 結論としてはVideoタグを再生した時点で…

kimizuka.hatenablog.com前回つくった buildQueryString 関数 をつかってもOKなんですが、jQueryを導入している場合は、 $.param(obj); で簡単にストリングに変換できます。 DEMO https://twitter.com/ki_230/status/651331561338441729ツイッターやってます…

?hoi=1&hohoi=2みたいなクエリストリングを、 { hoi: "1", hohoi: "2" } 的なオブジェクトに変換するスクリプトです。 逆に、 { hoi: "1", hohoi: "2" } 的なオブジェクトを、 hoi=1&hohoi=2に変換することもできます。（あえて先頭に?はつけていません） Ja…

セレクトボックス、チェックボックス、ラジオボタンをJavaScriptの力をつかって選択状態にしてみました。 セレクトボックス セレクトタグのvalueに選択状態にしたいオプションタグのvalueをいれます。 JavaScript doc.getElementById("select1").value = "ka…

いま一番必要な音楽と出会えるサービスこと オンガクスリ 。 最近作業用BGMにつかわせていただいている悩みを紹介します。 休みをとろうと思います。お休みの時に聴いたらさらにリラックスできそうな音楽を教えて下さい。 http://ongakusuri.com/topic/3105o…

Mobile Safari で Audioを再生する方法は大きく、Audioタグ をつかう方法と Web Audio API をつかう方法があります。 2つの方法には微妙な違いがあって、いままでもちょいちょい検証してきたんですが、ここらで1つの記事にまとめておこうと思います。※ 検証…

audioタグをつかってAudioを再生した場合、別タブを開いたりSafariを閉じたりしてもAudioはバックグラウンドで再生し続けてしまいます。今回はこの対策を3つ考えました。 DEMO（未対策なAudioタグ） ※ iPhoneでご観覧ください 対策A: blurイベントでaudioをp…

HTML <p>僕は<strong>こんにちは</strong>と言いました。</p> みたいな感じで書き出したいときは、 Jade p 僕は strong こんにちは | といいました。と書けばOKです。 個人的には、 p | 僕は strong こんにちは | といいました。の方が見やすくて好きです。

昨日の記事 にて、 -1が入っている場合は方向がとれておらず、それ以外の場合は誤差範囲ということなので小さな値が入っているほど正確なようです。 という文章がありましたが、元来はてなブログでは「-」から文章をはじめると箇条書きになるというはてな記…

ウィンドウのデバイスオリエンテーションイベントに渡されるオブジェクトのwebkitCompassHeadingにデバイスの向きが 0 ~ 360 ではいっています。0が北、90が東、180が南、270が西のようです。また、webkitCompassAccuracyで精度も確認できます。-1が入ってい…

SCSSのmixinにしてみました。 DEMO ※ スマートフォンでしか動作しません HTML <div data-carousel="0"> <ol class="photos"> <li class="photo"></li> <li class="photo"></li> <li class="photo"></li> <li class="photo"></li> </ol> <ol class="btns"> <li class="btn"></li> <li class="btn"></li> <li class="btn"></li> <li class="btn"></li> …</ol></div>

Drone Football | Pepsi Max | Genius. #LiveForNow ドローンフットボールというタイトルは良くないと思いますし、細かいところで気になるところはありますが、かっこいい映像だと思います。 Nike Football: The Last Game ft. Ronaldo, Neymar Jr., Rooney,…

inputタグ の accept属性に capture=camera をつけておくとAndroidでは即カメラを起動してくれます。（iPhoneではカメラロールから選択するかカメラを起動するか選択させるUIが表示されます） HTML <form class="inner"> <input type="file" accept="image/*;capture=camera" /> </form> DEMO

プレイヤーを生成するときの引数でプレーヤーの色を選択できることを知りました。theme に light を渡すことでUIをグレイに。 color に white を渡すことでシークバーを白に変更できます。YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFr…

なんだか本末転倒のような気もしますが、覚えておくと既存サイトをリニューアルする際などに便利です。 HTML → Pug（Jade） html2jade.org JavaScript → Coffee js2.coffee CSS → SCSS css2sass.herokuapp.com

DEMO JavaScript window.devicePixelRatio; で画面のピクセル密度を取得できます。が。Androidでは嘘の値が返ってくることがあるので、あんまり信用していません。 あと、ブログにDEMOを貼り付けてみてわかったんですが、jsdo.itのブログパーツ内だと変な値…

Android標準ブラウザで動かない場合があるようです。同じ機種でもChromeでは動きました。 DEMO CSS .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, .25…

結論からいえば、animation-fill-modeプロパティを forwards にすればOKです。developer.mozilla.org DEMO CSS .box { position: absolute; top: 0; margin: 10px; width: 0; height: 0; background: #3e3e3e; box-shadow: 0 0 10px rgba(0, 0, 0, .25); } .…

DEMO See the Pen RAINBOW BUTTON by kimmy (@kimmy) on CodePen. レインボーなグラデーションがさり気なくぐるぐるまわるボタンをつくりました。 html <div class="btn"> <canvas id="canvas" class="canvas"></canvas> </div> >SCSS @import "compass/reset"; body { background: #6e6e6e; } .btn { position: absolute; top: 0…

developers.facebook.comいつできたのかわかりませんが、 Send Dialog たるAPIをみつけました。Facebookメッセージを送るAPIだようです。 LINEで送るボタン のような使われ方を想定しているのかもしれないですね。こちらのAPIでGIFアニメのURLをシェアしよう…