IE10 で attachEvent が廃止された場合に備えましょう - latest log
Windows 8 には IE10 が標準搭載されます。これらは早ければ2012年の秋ごろまでにリリースされる予定です。 IE10 ではレガシーな(古い)機能やメソッドが切り捨てられると予告されています → 非推奨の DOM イベント IE10 で attachEvent が廃止されると attachEventで IE かどうかを判別する(↓)のコードなどが魔女化するでしょう(バグになるでしょう)。 // オレオレライブラリによく見かけるコード片 var isIE = (window.attachEvent && !window.opera); この場合は ↓↓ これで良さげ var isIE = !!document.uniqueID; アドネットワークからの広告を埋め込んでいるサイトでは、同様のコードが広告生成用の JavaScript の中にも埋まっているかもしれません。そちらに対す
コードを削る - latest log
Twitter だとちょっと厳しいので、こっちでまとめ。 MobileWebKit に対応しようと思ったら、コードをなんとかして削る必要があります。 AND 演算子 で 4byte 削る(10byte → 6byte) if (a) { b(); } ↓ a && b(); OR 演算子 で 5byte 削る(11byte → 6byte) if (!a) { b(); } ↓ a || b(); ドット演算子以降を自力で Minify する JavaScriptは動的な言語なので、ドット演算子以降は基本的に minify しても圧縮されません。 document.createElement("div"); document.createElement("a"); document.createElement("p"); ↓ このままだと、minify しても縮まらない document.
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
jsのオレオレ演算子 - latest log
jsのオレオレ演算子といえば、 Boolean値に変換する !!arg 0又は1に変換する +!!arg 小数点を切り落とす arg|0 や arg >> 0 などがありますが、若干分かりづらいので、初心者の方にはおすすめできません。 http://jsdo.it/uupaa/9YFT で実行できます。 uu.ready(function(uu, doc) { var arg = 1.23; uu.log(" !!arg = @", !!arg); uu.log("+!!arg = @", +!!arg); uu.log(" arg|0 = @", arg|0); uu.log("arg>>0 = @", arg>>0); });
地獄のJavaScript2 - latest log
(ε・◇・)з 戦いはこれからだ! http://jsdo.it/uupaa/hellsjs2 で動かせるよ // forked from uupaa's // "地獄のJavaScript (Symbolic JavaScript)" // http://jsdo.it/uupaa/hellsjs uu.ready("window", function(uu, doc) { uu.mix(window, uu); uu.config.log.rollup = 1000; // logロールアップ回避 // use: $=_-+~[]{}()*/<!\;" $ = -~[]; // 1 $$ = $+$; // 2 $$$ = $$+$; // 3 $$$$ = $$$+$; // 4 $$$$$ = $$$$+$; // 5 $$$$$$ = $$$<<$; // 6 $$$$$$$ =
msgpack.js bench mark - latest log
MessagePack の JavaScript 実装を GitHub に上げました。 テストは一通り終わっています(test/codec.htm)。ライセンスはまだ決めていませんがご利用はご自由にどうぞ。 HOW TO USE var mix = { any: "type" }; // MessagePackフォーマットの ByteArray にエンコード var ary = msgpack.pack(mix); // null, Boolean, Number, String, Array, Hash を受け取り ByteArray に変換 // MessagePackフォーマットの ByteArray をデコード var jsobj = msgpack.unpack(ary); // ByteArray を受け取り元の形に復元 // JavaScript オブジェクトを Messag
IE8の開発者ツールのデバッグできなくなるバグをyoutubeに上げました - latest log
http://www.youtube.com/watch?v=OXzqRacGR18 # 残念ながら画質は iPhone → youtube 画質です # 野外で取っているので、音声ぼそぼそでごめんなさい IE8の開発者ツールが抱えたままの困ったバグ(古いjsが読み込まれ続ける, 同じファイルが多重ロードされブレークポイントが貼れない, 通常実行とステップ実行で結果が異なる)は、IE9pp4でも改善されてないみたいなんですよ。中の人が気づいてないとかありえないんだけど via http://twitter.com/uupaa/status/23043362479 IE8 や IE9pp4 をインストールしたマシンで、 ローカルでファイルを修正する デバッグのON/OFF を何度か行う ページをリロードする と発現します。 対処方法は、ブラウザの再起動です。 私の環境ではほぼ毎回この現象が発
WEB+DB PRESS Vol. 58 に記事を書きました - latest log
連載2回目です。前回に引き続き クロスブラウザな JavaScript のお話を中心に10ページほど書きました。 関数呼び出しのコスト(どこに関数を置くべきか) eval と Function コンストラクタ try〜catch を控える 動かないコード(Liveな配列, FakeArray) FizzBuzzコードを例にループ内の最適化ポイントの説明 型の判別(isArray と Arrayを含めたオブジェクトの判別) 前回ほど濃ゆいことは書いてないつもりなので、サラッと読めると思います。 型の判別について補足 IE の window, document, Node などは DOM の仕様とも ECMAScript の仕様とも異なる実装になっています。 IE8までは、typeof window.setTimeout が "object" になりますが、Web標準的には "function
uu.snippetで「やりましょう」、Widgetの作り方入門 - latest log
続き書きました uu.snippet 入門(2) 複数の部品を一つのsnippet に - latest log Widget(Web ブラウザ上で動作する UI 部品)を作るには、構造を HTML で、見栄えを CSS で、アクションを JavaScript で記述することになります。 Widget を作る際の問題は大きく3つ。 標準的な JavaScript には DOM 構造やスタイルをヒアドキュメント化し埋め込む仕組みが無い(頑張ればなんとかなるけど、サクっとやれない) CSS には定数や外部参照可能な変数の概念が欠如している 画像数、画像サイズ、レイアウト変更に耐えるだけの構造を持たせることが非常に難しく、○○CSSなどの外部ツールに頼るか、妥協するか、実数(マジックワード)として埋め込むかを選択することになる(変数が使えないために発生するトライ&エラーや悩む時間が無駄すぎる)
IEで透過pngにopacity - latest log
@nksm さんのつぶやき IE7+で透過pngに対してopacityを指定した時の汚さはなんとかならんかな。IE6はキレイなんだが・・・。 via http://twitter.com/nksm/status/16611637369 を見つけたので、VMLを使って透過pngにopacityを適用する方法を jsdo.it にあげました。 http://jsdo.it/uupaa/IEAlphaPng_x_Opacity 解説 知識として IE6〜IE8では、filter: AlphaImageLoader(src="**.png") で透過png画像を利用できる IE6〜IE8では、filter: alpha(opacity=0〜100)で 画像の不透明度(opacity)を指定できる filter: は一度にひとつではなく、複数指定できる があり、これを踏まえて filter: alp
IE の cloneNode は似て非なるもの - latest log
IE における cloneNode の困った挙動について調べてました。 cloneNodeの仕様 IEでオレオレ属性を追加しcloneNodeすると、参照が作成されてしまいます。 <div id="AAA">NodeA</div> var AAA = document.getElementById("AAA"); AAA.oreoreAttr = { key: 1 }; var BBB = AAA.cloneNode(); // BBB を作成 AAA.oreoreAttr.key = 2; // AAA に 2 を設定すると… alert(BBB.oreoreAttr.key); // BBB も 2 になってしまう このような挙動が問題になるのは、以下のように、不可視な属性を設定していた場合に、cloneNodeで参照が作成されてしまい、あっちを変えるとこっちも変わってしまうケースです
JavaScriptでヒアドキュメントや簡易テンプレート - latest log
JavaScriptでもヒアドキュメントやテンプレートが使えれば便利だし、それらを組み合わせてコードの塊(スニペット)にできれば便利だよね。 ってことで、既に同様のアイデアはゴロゴロしてそうなんですが、自分用にざざっと叩き台を書いてみました。 DEMO http://pigs.sourceforge.jp/blog/20100505/test/demo.snippet/uu.snippet.htm <!doctype html><html><head><meta charset="utf-8" /> <title></title> <script src="src/uupaa.js"></script> <script src="src/uu.snippet.js"></script> <script> function xboot(uu) { var arg = { PHPStyleAr
140文字以内で DOMContentLoaded - latest log
DOM構築完了またはそれ相当のタイミングで (どこかで定義されている)関数A をコールバックします。 function Z(){try{(new Image).doScroll();A()}catch(e){setTimeout(Z,0)}} +[1,]?document.addEventListener("DOMContentLoaded",A,!1):Z() 130byteで驚きの読み辛さ。 ヒューマンリーダブル版 (function() { function IEDOMContentLoaded(){ try { (new Image()).doScroll(); // [!] throws A(); } catch(err) { setTimeout(IEDOMContentLoaded, 64); // delay after 64ms } } // IE6〜IE8を判定(IE8
HTML5 Audio デモ - latest log
HTML5 で、ブラウザの機能として「音」を再生する仕様が追加されました 音を再生するには、<audio src="..." autoplay> を HTML に埋め込むか、new Audio(src).play() とします。 仕様 ⇒ http://www.w3.org/TR/html5/video.html クロスブラウザ化する上での問題は2つ 1. 古いブラウザ向けに Silverlight(XAML) や Flash を使い、それらの違いも吸収しなければならない。 2. サポートしているコーデックの違いを吸収する仕掛けも必要。 Browser uu("Audio") HTML5Audio SilverlightAudio FlashAudio Firefox3.0 mp3 - mp3 mp3 Firefox3.5+ mp3,ogg,wav ogg wav mp3 mp3 Safa
ECMAScript-262 5th Edition(ES5) 予約語一覧 と その仲間達 - latest log
ES5 の予約語は以下の4種類 Keyword FutureReservedWord NullLiteral null BooleanLiteral false true Keyword 以下のトークンは、Identifiers には使用できません。 debugger は ES5 で FutureReservedWord から Keyword に昇格しました。 break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw delete in try debugger はステートメントになりました。 // DebuggerStatement : See 12.15 debu
IE9 preview - JavaScript Side - latest log
野薔薇を守るトゲのような表現を改め、春のたおやかな小川のように、夏の涼しい木漏れ日のようにやわらかくしてみました。 IE9 preview 版でましたね → http://ietestdrive.com/ 動作させるには、Windows VISTA SP2 + IE8 または Windows 7 が必要です。快適に動作させるには、GPUを積んだデスクトップPCが必要。ネトゲをプレイできないようなノートPCで動かそうとすると、強烈なガクガク感が春の陽気に誘われて、こくっこくっと今にも居眠りしそうな小学生のごときレスポンスが。 「GPUを使うから速い」のだそうですが、IE9は、OS限定、動作環境限定で、低レベルレイヤー(DirectX)を直叩きもできる恵まれた環境にあります。さまざまなOSや環境をサポートする他のブラウザのように、オーバーヘッドを支払う必要がないので、そのへんの事に触れずにIE
uupaa.js 基礎知識なんちゃってマスター - latest log
uupaa.js 0.7 の概要を、1分でざざーっと分かるように書きました。 これ自体10分で書いてるので、ノープラン・ノーチェックでお届けします。 uupaa.js のビルド uupaa.js というファイルはありません。 必要な機能を組み合わせ、ユーザがビルドして作ります。 ビルドコマンド ビルド方法を説明したスライド: http://handsout.jp/slide/1909 b.php がビルドコマンドになります(要PHP)。パッケージ名のほかに、-m -y -g -j などのオプションを指定できます。 build/b.php パッケージ名 -m -m, -y, -g は MS, Yahoo, Google 製のコンパイラで Minify します。 -j はコメントの削除とファイルの結合だけを行います。 ビルドに成功すると、 uupaa.js と build/mini.パッケージ
とある最短のIE判定コード - latest log
ちょっと前まで、IEかどうかを判別する世界最短のコードは、「IEは垂直タブ(\\v)を理解しない」バグを利用した以下のコードでしたが、 '\v'=='v' // 9byte via Ajaxian その後 7byte 版が登場し、去年まではこれが世界最短とされていました。 !+"\v1" // 7byte via webreflection.blogspot.com そこで IEでは、var ary = [1,2,]; ary.length == 3; が成立するため、これを利用したより短い判別コードを考えてみました。 [,]!=0 // 6byte(IEでtrue, IE以外でfalse) +[1,] // 5byte(IE以外で1, IEでNaN) 6byte版で、世界最短かなぁ〜とか思ったのですが、念のため調べてみたら、 webreflection.blogspot.com の 20
Safari4 で switch〜case を速くする - latest log
Safari4 の switch 〜 case 文は、型を統一することで実行速度が大きく変化します。 これを switch (a) { case "a": case 1: } こうしましょう。 switch (a) { case "a": case "1": // 1 → "1": } これだけで、2倍速です。 http://pigs.sourceforge.jp/blog/20100111/20100111.htm Browser switch switch2 ratio Firefox3.0.17 548ms 516ms 110% Firefox3.6RC1(jit) 78ms 78ms 100% IE6 1640ms 1640ms 100% IE8 1234ms 1235ms 100% Chrome4.0.266(dev)(jit) 200ms 198ms 100% Safari4.
HTML5 Web Storage-- な機能を uupaa.js に実装してみた - latest log
Cookieよりも大容量のデータをクライアントサイドに保存する仕様。それが HTML5 の Web Storage です。 Web Storage はまだ策定中です。 Firefox3.5+, IE8+, Safari4+, Opera10.50+ など最新のブラウザでは既に利用可能ですが、「何年も待ってられない、今すぐ使いたい」ですよね? そこで、クロスブラウザな Web Storage 相当の機能を uupaa.js に実装してみました。 # sessionStorage は実装していませんよ デモ http://pigs.sourceforge.jp/blog/20100104/20100104_uu.storage.htm Firefox2+, Safari3.1+, IE6+, Google Chrome3+, Opera9.2+ で動作確認してます。 ストレージバックエンド 以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
