supported;})();メディアクエリが機能するか実際に試してその結果から判定。StyleSheetオブジェクトがinsertRuleメソッドを持たない場合(IE8以下)は、もうそこで非対応とみなしています。処理の都合上、DOM構築完了以後に記述する必要があります。window.matchMediaJavaScriptからメディアクエリを扱うための機能としてwindow.matchMediaというものがありますが、これの判定に関しては下記のような簡易なもので十分でないかと思います。!!window.matchMedia;matchMediaという名前のグローバル変数がどこかの何かによって定義されるのを想定する場合とか、もっとちゃんと判定したいなら実際に動かして機能をテストします。この判定によって最初のメディアクエリも対応していると見なして良いんじゃないかって気がしますが、実際はメディアクエリに対応しているけどwindow.matchMediaは対応していないブラウザが存在するので難しいところです。window.matchMediaが返すMediaQueryListオブジェクトが実装によってaddListenerメソッドを持ってたり持ってなかったりもします。4)とかのレアケースではありますが、ブレークポイントをトリガーに処理をハンドリングしたいとかの場合は気に留めておくと良いかもしれません。簡易な実装の判定は下記のようになるでしょうか。).addListener);なおwindow.matchMediaをPolyfillする下記のようなライブラリもあり、MediaQueryList.addListenerのサポートも拡張で可能にしてくれています。JavaScriptからメディアクエリの実装を判定にコメントCanvas事始め色々と思うところがあり、Canvasコンテンツ制作についての勉強を始めました。言っても時間的なコストはなるべく抑えたいので、CanvasをFlashライクに扱えるらしいライブラリEaselJSを使うことにしました。環境面ではMicrosoft製JavaScriptコンパイル言語TypeScriptを導入しました。アロー関数式おいしいです。(古くないPCとブラウザ専用)想像していたよりずっと動きが重い、というのが作ってみての率直な感想ですが、ただこれは自分が理解してないってだけで、もしかしたら同じ表現をするのでももっと早い書き方とかがあるのかも。前に買ったFlash用の数学・物理学表現の本を引っ張り出してきてそれを参考にしながら作ってみましたが、やっぱり数値演算は難しいです...。継続することが大事なので、自分自身が楽しみながらやれるよう工夫しながら身に付けていき、今後の案件に備えようと思います。Flipbook.jsをアップデート以前に書いた記事で作ったパラパラマンガ用JSライブラリ「Flipbook.js」。する部分はimgのvisibilityを切り替える仕様だったのだけど、やっぱ早いは正義なのかなと思ったのでスプライトシートを背景画像に使ってbackground-positionをずらす仕様に作り変えてみた。仕様が変わったことで以前のバージョンと同じ取り回しでは動かなくなっちゃったけどまあ別にいいよね。ついでと言ってはなんだけど1枚のスプライトシートで複数パターンのアニメーションをさせるための機能(setPos())などを追加してみた。Safariでは制限に引っかかって画像が一切表示されなくなること。いう意味では以前の仕様のままでも良かったのかなーと作り変えた後に思ったり。デモや使い方は以下より。DOMの構築待ちについて先日、社内のWebデザイナーに標題についての解説をしました。自分の説明が悪くイマイチ理解してもらえなかった感がありましたが、JS(jQuery)を扱う上で重要かつ基礎的な知識の一つだと思いますし、改めて内容を整理しつつ記事にしてみました。HTMLをほぼほぼ理解しているJS/jQuery初級者で、細かい用語などは自力で調べられる方が対象となります。カーソル進入位置に合わせて変わるアニメーションというロールオーバー演出が使われているFlashサイトを以前どこかで見かけました。残念ながらURLとかは忘れましたが、触ってて気持ち良かったことだけは覚えていたので、いつかどこかでパクらせて頂こうと思いJSで作ってみました。デモ最初は斜めも含めた8方向で作ってましたが、それだとカーソルを乗せたり離したりを繰り返した時の動きがフワフワと不安定な印象で、あんまり気持ちよくなかったため4方向にしました。要素のサイズがある程度以上大きい場合は8方向の方がしっくりくると思います。);});僕に算数の知識とやわらかい頭脳があれば、もうちょいなんとかなるんだけど。【Photoshop】ライアンのプロモーションビデオを作る。