jQueryのanimateメソッドではJavaScriptオブジェクトも操作できるという話


jQueryのanimateメソッド、名前のとおりアニメーションを表現する際に利用することもあり、とても重宝しています。例えば、以下のようなコード。

上記のコードは、animate_divというIDのついた要素のwidthを1秒掛けて500pxにするアニメーションを実現するコードです。

ところで、このanimateメソッド、jQuery最高の教科書という本を読んで知ったのですが、JavaScriptオブジェクトの操作もできるみたいなのです。これだけだとちょっと意味が分からないと思うので、下記にカウントダウンのような動きをするサンプルコードを記してみます。

こうすることで、{‘count’:10}というJavaScriptオブジェクトを操作して、10秒(10000ミリ秒)で{‘count’:0}という状態にまで変化させます。progressというオプションはアニメーションのステップごとに実行する関数です(参考:.animate() | jQuery 1.9 日本語リファレンス | js STUDIO)。

というわけで、以下実行結果。

ちなみに、console.timeとconsole.timeEndはそれぞれの引数に指定した文字列が同じ組の間の時間をコンソールに表示するメソッドです。試してみると、10秒より少し大きい数値がコンソールに表示されると思います。

JavaScriptの数値化を『N-0』とする際の注意


JavaScriptで文字列を数値化する方法というのはいろいろありますが、それぞれ微妙な違いや予想外の動作をすることがあります。個人的によく使うのは『N-0』という方法なのですが、先日予想外な動きになって困りました。

ということで、今回はJavaScriptでの数値化方法について。ありがちなエントリーなので、検索したら他のブログでも書いてる人がいました(参考:JavaScriptにおける数値⇔文字列の型変換あれこれ – console.lealog();たまにメモる。: JavaScriptにおける数値と文字列の相互変換)。

そんなこと気にしてたらブログなんて書けないので、とりあえず書きます。まずは下記のような関数を作ることに。

引数で得た値を数値化したものをコンソールに出力するという処理となっています。とりあえず、7種類用意してみました。ついでに上記関数を実行するテキストボックスとボタンもおいておきます。

例えば、上記のテキストボックスに”100″と入れて実行ボタンを押した結果は以下。

うまくいったようです。

では、他にもいろいろ試してみましょう。例えば、小数点。『outputDigitizing(‘3.14’)』とした結果は以下。

parseIntとN|0、~~Nは整数になってしまいました(そりゃそうだろと突っ込まれそうですが)。

つづいて、『outputDigitizing(‘100px’)』

parseIntとparseFloat以外はうまくいってません(N|0と~~Nは0となっていますが、全くもって数値ではない文字列をいれても0となります)。ちなみにNaNというのは『Not a Number』(数値じゃない)の略です。

つづいて、自分がはまった『outputDigitizing(”)』、つまり空文字です。

予想はNaNとなるだろうと思ってました。しかし実際にはparseIntとparseFloat以外は0となってしまっています。さらにいえば、isNaN(”)はfalseを返し、isFinine(”)はtrueを返してしまうのです。この動きは困りました。テキストボックスの判定で、絶対に数値が入っていなきゃいけないという判定処理をしようとしたら、空文字は通っちゃったんですから・・・。

ただ、そこでふと思ったわけです。nullとかundefinedとかtrueとかfalseとかの特別な値だとどうなるのだろうと。というわけで、以下それぞれを試してみた結果です。

結果としては、parseIntとparseFloatはすべてNaNとなりましたが、それ以外の方法では、nullとfalseが0、trueが1、undefinedがNaNとなりました。

ここでふと、もしかして比較演算子の==でtrueとなる組み合わせということなんじゃないかと思い、コンソールで試してみました。

falseとtrueに関しては予想通りでしたが、予想に反して0==nullはtrueではなく、falseでした・・・。

JavaScriptは奥が深いです。

CSSとJSで要素の背景にcanvas画像を設定する方法


WebKit系とFirefox限定です(IEでは利用できない)。

CSSのbackgroundプロパティにおいて、WebKit系のブラウザにはcanvas()関数、Firefoxではelement()関数という値が指定できます。canvas()関数は、canvasに描画したものを背景に設定できる関数で、element()関数は指定の要素を画像として扱い背景にすることができます(残念ながら、背景にしかできない)。

で、これに関連してWebKit系のブラウザのJavaScriptにはgetCSSCanvasContextメソッド、FirefoxにはmozSetImageElementメソッドというものが用意されています。これは、どちらもブラウザ上でcanvasを作成し、ブラウザ上にcanvasを描画せずにcanvas画像を背景に設定できる機能です(参考:[CSS3] (Webkit専用) CSSを用いて要素の背景にCanvasを指定する – YoheiM .NETCSSのelement()関数 – Weblog – Hail2u.net)。

関数が違うので、どちらも共通の指定でcanvasの背景画像を作成できるように関数を作ってみました。

この関数からえたコンテキストを利用すると、WebKit系でもFirefoxでも同じ処理で背景用canvasを取得できます。
利用例は以下のような感じ。

CSSは下記のように書きます。

というわけで、以下実行サンプルです。

正直、そこまで実用性があるわけではなさそうですが、こういうことができるという紹介。IEにも対応したい場合は、canvasのtoDataURLでBase64の画像データを取得して、それをJavaScriptを用いて要素の背景に設定するという方法でできそうです(というより、それでcanvasに対応している全てのブラウザに対応できる)。

jQueryのセレクタ指定においてnth-childは1始まりだが、eqは0始まり


もしかしたら、jQueryの基本中の基本なのかもしれませんが、最近知ったので、一応メモ。

jQueryのセレクタ指定において、:nth-child(n)は要素を1始まりで取得しますが、:eq(n)は0始まりなようです。

例えば以下のようなHTMLソースがある場合、

以下のようなコードを書くと、

“liタグ1つ目”と書かれたliタグの背景は赤くなり、”liタグ2つ目”と書かれたliタグの背景は青くなります。

憶え方としては、CSSの擬似クラスにもある指定方法は1始まりで、jQueryオリジナルの指定は0始まりとのこと。例えば、CSSにもある:nth-of-typeも1始まり。

上記のようなコードの場合は、”pタグ1つ目”と書かれたpタグの背景は赤くなり、”pタグ2つ目”と書かれたpタグの背景は青くなる。なお、nth-of-typeは子要素のうち擬似クラスがついたタグのみで考えるのにたいし、nth-childは子要素すべてを数えるので、”pタグ1つ目”と書かれたpタグの背景は緑色にならない(もし、h3タグがなければ緑色になる)。

なお、これは偶数を指定するeven(奇数ならodd)でも同様。

例えば上記のようなコードがある場合、”liタグ1つ目”,”liタグ3つ目”,”liタグ5つ目”と書かれたliタグの背景は青くなり、”liタグ2つ目”,”liタグ4つ目”,”liタグ6つ目”と書かれたliタグの背景は赤くなる。

実行サンプル:jQueryのnth-childは1始まりで、eqは0始まり

HTML5のcanvasで描画する文字の後ろに白地をつける方法


本題に入る前に一つ問題です。Canvasで文字を描画(fillTextメソッドを利用)する時、文字の縦基準位置を指定しない、つまりデフォルトの場合、文字は指定座標にたいしてどの位置に描画されるでしょう。次の3つの中からお選びください(点は指定座標の位置)

drawTxt1 drawTxt2 drawTxt3
文字より上の位置 文字の縦中央の位置 文字より下の位置

続きを読む