正規表現を明記せず、RegExp#exec を String#split にするとちょっとハッピーに - latest log
JavaScript の小ネタです。 UserAgent 文字列(window.navigator.userAgent) "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.814.0 Safari/535.1"から、Windowsのバージョン(6.1)を取り出すようなコードをよく見かけますね。 ちょっと前の私は RegExp#exec + parseFloat で、こんな(↓)感じにしていたり、 function getWindowsVersion() { var m = /Windows NT (\d+(\.\d+)?)/.exec(navigator.userAgent); if (m) { return parseFloat(m[1]); } return 0;
HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
$("div").append("<section>section</section>") できないらしいので色々調べてみた - latest log
追記: jQ的には解決していませんが、素の JavaScript を使った回避方法がわかりました。IE8以下では、オンザフライで作成した要素に対して innerHTML すると謎要素が作成されてしまうといった現象がでるため、一度要素片を、DOMツリー( body とかね ) にぶらさげてから innerHTML すると回避できました。 つまり、オンザフライな↓ではだめで… var div = document.createElement("div"); // 作る div.innerHTML = "<section>ほげー</section>"; // 突っ込む → ι(´Д｀υ) ↓のようにすると謎の挙動を回避できます。 var div = document.createElement("div"); // 作る document.body.appendChild(div); // あて
uupaa.js の これまでと これから - latest log
uupaa の中の人は28ヶ月前にペットショップからウーパールーパーを2匹連れ帰りました。 同じ日に、「作れども作れども UI 速くならず、じっとコード見る」な感じから脱却するため、中の人は、"uupaa" という固有名詞がWeb上に存在しないことを確認し uupaa.js というオレオレライブラリを作りはじめました。 なぜ当時、百花繚乱な他のjsライブラリを使うことを考えなかったか… 飲みながらじゃないと言えないっ JavaScript勉強前(2年ぐらいまえ)は… JavaScriptを真面目に勉強するまえだと、これで精一杯でした CoverFlow - http://pigs.sourceforge.jp/old_uupaa/uupaa.js.0.3.18/demo/coverflow/coverflow.htm 画像が表示されない場合は何度かリロードしてください(当時はこういうのでも
カプセル化 + メッセージハンドラ としてクラスを使う - latest log
クラスには、継承とカプセル化の役割があります。 JavaScript は、クラスベースの継承をサポートしませんが、カプセル化は JavaScript でも自然に扱えます。 # 継承は委譲などで代用できますし、ダックタイピングという手もあります。 以下は、 [1] クラス A1 のインスタンスを作成しメッセージ("meat or fish") をパラメタ("fish")付きで送信, 結果を rv に保存する [2] クラス B1 をインスタンスを生成しメッセージ("selected") を送信。rv をパラメタで渡す といったクラスインスタンス間のメッセージングを、ライブラリが提供する機能を利用してコード化したものです。 サンプル http://pigs.sourceforge.jp/blog/20090926/uu.msg.htm # IE で動かない場合は http://pigs.sou
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
ECMAScript5でargumentsがArgumentsオブジェクトになる(らしい) - latest log
@taku_eof さんのご指摘を受けて、タイトルを「ECMAScript5でargumentsが配列になる」から「ECMAScript5でargumentsがArgumentsオブジェクトになる(らしい)」に変更。 (らしい) としているのは、また変化するかもしれないから。 ECMAScript5 で arguments が配列そのものになるらしい。この話そのものはずっと前から出てたけど、arguments.callee の扱いがハッキリしてなくて、arguments.callee 使えなくなるのかな? とかちょっとドキドキしてた(時もある)。 ECMAScript5 で arguments が Arguments オブジェクトになるらしい。ただ、arguments.callee の扱いがハッキリしてなくて、arguments.callee 使えなくなるのかな? とかちょっとドキドキして
いま HTML5::Canvas って使えるの? (HTML::Canvas のサポート状況) - latest log
Opera の getContext("opera-2dgame") について追記しました。 fillText(strokeText) + pattern, + linerGrad, radialGrag について追記しました。 uupaa-excanvas.js ver 0.3 リリース版に基づき表を更新しました。 uupaa-excanvas.js ver 0.31で、drawImage(canvas, ...) をサポートしました。 先ほど Windows XP 上で調べました。Mac や Linux だとちょっと違うかもしれません。 # レンダリングの実例はhttp://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/DEMO.htmで見れます。 凡例 5: 実装されており他のブラウザの描画結果と互換性がある(
JavaScriptでsprintfとかprintfとか - latest log
CoverFlow作ってる最中ですが、Firefox以外のブラウザでうまく動かせていない(canvasの互換性が…)ので、気晴らしに30分ほどでsprintfを作ってみました。 ここまで読んで、「はいはい、JavaScriptでsprintfが使えるとたぶん便利だけど、車輪の再開発だよねぇ」と思うのが普通の技術者の反応でしょうね。 ここで公開するsprintfの実装は、国際化(i18n)時に必要となる「プログラム(引数の順番)を変えずにフォーマット文字列だけを差し替える機能」を持ってるので、そういうケースでは特に活躍するかもしれません。 引数の番号付けと交換機能については、PHPのsprintf()関数の仕様を参考にしています。 一応速度のことも気にしているので、あまり重要ではない機能(0や空白のパディング,align)は削りました。 あとは…、"JavaScript sprintf"でグ
正規表現のベンチマーク(String.match と RegExp.exec のざっくりとした違い) - latest log
2009-01-12追記 タイトル修正しました。 2009-01-14追記 String.indexOf と RegExp.test のスコアが逆に書かれてていたのを修正しました。 String.match ばかりで、RegExp.exec を使ったことがありませんでした。 ちょっと気になったので色々とベンチマークを取ってみました。 TEST TIMES IE6 Fx3.0 Fx3.1 (JIT) Safari3 Chrome1 (JIT) A. match(/\s*/) vs match(/ */) "aaaaaaaaaaaa".match(/\s*aa\s*/) 1000000 7203 1714 327 2375 2128 "aaaaaaaaaaaa".match(/ *aa */) 1000000 7156 1638 297 2328 2148 B. RegExp.exec vs
CSSセレクタにテコ入れした - latest log
# 昨日の日記の続きです。 Browser Test kQuery uupaa.js + テコ入れ peppy (cache on) peppy (cache off) sizzle-0.9 jQuery 1.2.6 IE6 A0 248 153 287 294 338 369 A1 611 604 1447 1507 1420 1100 IE7(別PC) A0 144 116 - - 266 306 Firefox2 A0 294 237 138 386 515 398 A1 647 541 408 356 1464 841 Firefox3 A0 142 115 38 102 193 176 A1 259 207 157 176 489 360 Test A0: SlickSpeed のデフォルトのテスト項目(利用頻度が高い項目をテスト) Test A1: ofk さんのテスト項目(利
ベンチマークを完走させる - latest log
ベンチマーク中に「なんかビジー。スクリプト止めとく?」なダイアログで、台無しになってしまうことがあります。 今日はそれを回避する設定をご紹介。 IE: レジストリに新しい値を追加することで可能 KEY: HKEY_CURRENT_USER/Software/Microsoft/InternetExplorer/Styles/MaxScriptStatements(DWORD) VALUE: デフォルトが 5000000 なのでそれ以上の値を指定する Firefox: about:configで設定可能 KEY: dom.max_chrome_script_run_time VALUE: デフォルトが 20 なのでそれ以上の値を指定するか、0 を指定する。0 でタイムアウトしなくなる。 Safari: 開発メニューで設定可能 [メニュー] - [開発メニュー] - [Runway JavaS
UnitTest もどきを書いてみた - uupaaの開発日記
uupaa.js にはテスト用のフレームワークがありませんでした。 uupaa.js 0.7 は例により、フルスクラッチ(スクラップ?) & ビルド なので、いよいよテスティングフレームワークが必要に。 JsUnitなどの導入も検討したのですが、好みと違ったので uupaa.js の機能の一部として用意することに。 ステップ1 (HTMLファイルを用意する) HTMLファイルを作ります。ファイル名の制限はありませんが、テストで使用する js ファイルと同じ名前 (例: uu.size.htm ) が分かりやすいと思われます。 <html><head><title>uu.size test</title> <script src="../uupaa.debug.js"></script> </head><body></body></html>このとき、タイトル部分を「機能名 + " " +
Mutation Event は、薬にも毒にもなるから気をつけて - latest log
jQuery1.3β みた(jQueryのコードをまじめに見たのは、これが初めてかも) 比較演算子(==)が厳密比較演算子(===)に jQuery の CSSセレクタが、Sizzle 0.9 になった。 以前の Sizzle に存在した“Firefox,Operaでクエリ結果をキャッシュする機能”が、Sizzle 0.9 からはカットされてる。 Sizzle 0.9 から キャッシュ機能 が消えたわけを想像してみる CSSセレクタの結果をキャッシュする方法の一つに、Mutation Event がある。 document.addEventListener("DOMSubtreeModified") ってやると、DOMツリーの全ての改変をフックしてくれる。 ちょっと前の Sizzle は、"DOMNodeInserted", "DOMNodeRemoved", "DOMAttrModifi
excanvas.js にさようなら。 - uupaaの開発日記
リリースしました。 uupaa-selector.js Version 2.0 (ChangeLog) uupaa-mutationevent.js Version 0.1 (ChangeLog) uupaa-excanvas.js Version 0.1 (ChangeLog) uupaa-detect.js Version 1.0 (ChangeLog) uupaa-color.js Version 3.0 (ChangeLog) 内訳は世界初が1つ。世界最速が1つ。おまけが3つ。 以前は「各ライブラリが単体で動けばいいや」的な実装でしたが、今回は「組み合わせることを前提に」書き直しています。 順番に意味があるので、順番間違えると動きません。 uupaa-excanvas.js は dual license(MIT + Apache)にしました。他とは違うのでお気をつけて。 もはや素の
uupaa-selector.js version 1.2 をリリースしました。 - latest log
Ver 1.1との違い XMLDocument, HTMLDocumentを区別し動作する HTMLDocument(content-type: text/html) なら タグ名の大文字/小文字を無視して要素を検索するが、XMLDocument(content-type: application/xml or application/xhtml+xml or text/xml)なら区別する。 精度の向上 W3Cの公式テストのうち、テスト可能な約100項目のほぼ全てをパスするようになった。 テストできない項目は、擬似クラス系(:active, :hover, :focus), 動的擬似要素系(::after, ::before, ::selection, ::first-letter, ::fitst-line), @namespace系 と :not系 uupaa-selector.js
IE5〜IE7でも、RFC2397(Dataスキーム, DataURI)を使えるようにした! - latest log
IE5,IE5.5,IE6,IE7 とおよそ10年に渡り、実装されなかった機能の一つに、Dataスキーム(DataURI) が あります。 uupaa.js version 0.6(近日中にリリース予定)では、DataURI をデコードする機能をエミュレートします。 DataURIって何 ラリーさんがRFC2397で提唱したデータスキームのこと。 ラリーさんってのはこの人。スパタさんにも見えるけどたぶん違う。 平たくいえば、 HTMLファイルに小さなアイコンや 1x1ドット のスペーサーを文字列化して埋め込める。 サーバとネットワークにやさしい仕様。 テキスト + アイコン数個で構成されるページなら、HTMLファイル1個だけで完結することもできるのが魅力。 # 小さな画像をチョコチョコ取得するのって、コスト高 # 負荷軽減の別解としては、小さな画像を1ファイルに敷き詰めて、CSS + cl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
