速度が求められる部分に Function#bind を導入するのはまだやめましょう - latest log
Function#bind は、ECMAScript-262 5th で導入された Prototype.js 由来のメソッドです。 uupaa.js では Function#bind の互換実装も提供していますが、現在はコメントアウトした状態でリリースしています Function#bind と 自分でbind相当の処理を書いた場合のベンチマークを http://jsdo.it/uupaa/FunctionBind に載せました(引数を束縛する使い方についてのベンチマークです)。 Browser ratio Function#bind 自分でbind loops Chrome 9 dev 335% 171 51 *100 Firefox 4 beta 9 93% 298 320 *100 Firefox 3.6 ---- ---- 764 *100 IE 8 824% 1590 193 *1
イベントハンドリングなら handleEvent を使えば、Function#bind や $.proxy はたぶん要らない - latest log
タイトル変えました uupaa.js の個々の機能をちょっとずつ紹介しています。 h2ham さんの記事を拝見して http://h2ham.seesaa.net/article/142734325.html uupaa.js では、 クラスオブジェクトの handleEvent にイベントを束縛できるため、 jQuery の、この(↓)ようなコードは $(function() { var obj01 = { somevar : 'jQuery', doSomething : function() { alert(this.somevar); // alert( "jQuery" ) } }; $('button#test02').click($.proxy(obj01.doSomething, obj01)); // ココ!! }); uupaa.js だと、この(↓)ように記述できます
100行ちょっとで CSS3Selectors の tokenizer を書いてみた - latest log
CSSセレクタの話題って1年半ぶりぐらい。 知らない間に CSS3 Selectors Level 3が出てたので、tokenizer を書いてみました。 (function() { window.tokenizer = tokenizer; var _A_TAG = 1, // E _A_COMBINATOR = 2, // E > F _A_ID = 3, // #ID _A_CLASS = 4, // .CLASS _A_ATTR = 5, // [ATTR] _A_ATTR_VALUE = 6, // [ATTR="VALUE"] _A_PSEUDO = 7, // :target _A_PSEUDO_FUNC = 8, // :lang(...) :nth-child(...) _A_PSEUDO_NOT = 9, // :not(...) _A_COMMA = 10, // E
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
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 画像が表示されない場合は何度かリロードしてください(当時はこういうのでも
JavaScriptとプリプロセッサ - latest log
uupaa.js にはビルドツール(minify/upa.php)が同梱されています。 upa.php は C/C++ のように #include src.js を自動的に展開します。 クライアントサイド JavaScriptでは include は予約語ではありませんが、(他のライブラリと衝突する可能性があるので)通常はコメントアウトした状態で使います。 // === uu.msgpack / window.msgpack === //#include uupaa.js ← こことか //#include misc/utf8.js ← ここ // MessagePack -> http://msgpack.sourceforge.net/ (this.uu || this).msgpack || (function(namespace) { : : ドット演算子を含む定数をリテラル値に置
JavaScript で MessagePack を実装してみた - latest log
140文字を超えちゃうので、こちらで。 id:viver さんの MessagePack を JavaScript で実装してみました。 HOT TO USE <script src="misc/msgpack.js"></script> <script src="misc/utf8.js"></script> <script> var pack = msgpack.pack("こんにちはこんにちは"); alert(msgpack.unpack(pack)); // こんにちはこんにちは </script> 現時点の仕様 / 制限事項 仕様 msgpack.pack(data:Mix):ByteArray で、data に指定されたオブジェクトをエンコードし、ByteArray( [数値, ...] ) を返します。 文字列は UTF8 な raw data として数値化します。 エンコ
ライブラリの一部でありながら単体利用も可能にする工夫 - latest log
140文字を超えちゃうので、こちらで。 JavaScriptなコードを書いてると「このへんの処理はどこにも依存してないから、特定のライブラリの一部ではなく、単体でロードしても使えるような部品としてまとめられたらなぁ」とか「でも、ライブラリの一部として利用する場合にグローバルネームスペースを汚染するのはダメだよなぁ」と、考えたことはありませんか? window.uu 以下をライブラリのネームスペースとして利用している uupaa.js では、このような工夫をしています。 // === uu.base64 / window.base64 === (function(namespace) { namespace.base64 = { encode: base64encode, // base64.encode(data:String/ByteArray, // toURLSafe64:Boole
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
IE8とIE9pp の非互換性(event) - latest log
IE9正式版ではなく IE9pp(IE9 Platform Preview) や IE9pp2 の現状について記載しています。 IE9ppがDOMの仕様に合わせたため、IE8までとは互換性がなくなっている部分をちょこちょこ書いていきます。 IE9pp の event イベントハンドラが受け取る event オブジェクトは DOM Level3 Event の仕様に従うようになりました。 IE9pp では event.button の値が変化 event.button の値が 0(left click), 1(mid click), 2(right click) になりました。 IE8 までは各ボタンの同時押しを判定できたため、どのボタンが押されているかはビットアンドで比較する必要がありました。 event.button & 0x1 が true なら left click event.bu
event.offsetX と offsetY の互換性について - latest log
IE9正式版ではなく IE9pp(IE9 Platform Preview) の現状について記載しています。 event.offsetX/Y や event.layerX/Y から相対座標を取得できますが、DOM Lv0 のため仕様が無く、互換性もありません。今日はそれらの非互換性について調べてみました。 event.offsetX/Y は、IE, Opera, WebKit で定義されており、event.layerX/Y は、Gecko と WebKit で定義されています(WebKitのlayerX/YはGeckoと別物です)。 event.offsetX/Y は、現在標準化にむけて策定中です http://www.w3.org/TR/cssom-view/#extensions-to-the-mouseevent-interface 策定中の仕様では event.offsetX/Y
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
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
Google Chrome 3 をサポートブラウザからはずします。 - latest log
以下の理由から、JavaScriptライブラリで、Google Chrome3 をサポートする必要はなくなったと考えます。 Google Chrome2 や3用のインストーラーを使うと、Chrome3 がインストールされます。 Chrome3 を起動していると、裏で Chrome4.1 がダウンロードされてます。 再起動すると Chrome 4.1 が自動的にインストールされちゃいます。 Google Chrome は古いバージョンがいつまでも居座らないように、ちゃんと考えてますね。 XP + IE9 最近では、WebKit や Firefox3.7 にも D2D でレンダリングするモードがあります。 「IE9 が Windows XP をサポートしないのは D2D を叩いているからだ」と言う説明がありました。 また、Aero を ON にできない PC 向けに、IE9 には D2D を
IE の window.resize イベントの問題を回避する - latest log
IE の window.resize イベントは、いくつかの問題を抱えています。 function onresize() { (何か) } window.attachEvent("onresize", onresize); うっかり無限ループする(無限に再描画が走る) 重い(特にIE6) 解決していきましょう。 無限ループ/無限リドロー問題 resize イベントハンドラの中で、document.body.innerWidht, innerHeight が変化するような操作を行うと、再度 resize イベントが発生し無限ループする現象が発生します(無限リロリロ)。 無限リロリロを回避するために、resize イベントハンドラ内でイベントをデタッチし、再アタッチを繰り返す方法があります(リアタッチ作戦) function onresize() { window.detachEvent("o
IE9 で - latest log
IE9 を含む様々なブラウザで <audio> や window.Audio の機能の一部を利用できるようにしてみました。 Silverlight3+ がインストールされている、Firefox3.0, Firefox3.5+, IE8, IE9, Google Chrome3+, Safari4+ で動いてます。 # そのうち、Flash でも動作するようになります(Flash バックエンドは実装中です) # Opera は Silverlight でコケてて、動かないようです http://pigs.sourceforge.jp/blog/20100323/demo/AudioTag.htm → <audio> デモ http://pigs.sourceforge.jp/blog/20100323/demo/Audio.htm → new Audio(src) デモ http://pig
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
canvasをより速く(Flashもサポート) - latest log
追記 2010-02-13: Flash モードを最新に差し替えました。boostも出来ます。 Flash 優先 Flash → Silverlight → VML 順にバックエンドを探索 本文 uupaa.js には uuCanvas.js のコードが入ってましたが、色々と書き直して、またちょっと速くなりました。 また、レンダリングバックエンドに Flash を追加しました。 マルチバックエンドっす これで、<canvas> + SVG, VML, Silverlight, Flash をドライブするコードが入りました。 具沢山ね。 デモ 以下のデモページを IE6〜IE8 で開くと、様々なバックエンドでレンダリングするようにしてあります。 # Firefox, Safari, iPhone, Google Chrome, Opera で開くと <canvas> でレンダリングします。
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.パッケージ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
