WebStorageで、ワンライナー IE8, IE9pp3 ブラクラ - latest log
localStorage.removeItem() 以外にも、localStorage.setItem(); や localStorage[key] = value; でも落ちるようです(コメント欄参照) <input id="A" type="text" value="" /><script>localStorage.removeItem(A.value)</script> 上記のコードをIE8で実行すると、タブクラッシュ → 復元 → タブクラッシュ → 復元機能停止 が発生します。 IE9pp3ではブラウザがクラッシュします。 回避するには テキストフィールドに値を入れるか、A.value を文字列型にキャストすることにより回避できます。 <input id="A" type="text" value="hoge" /><script>localStorage.removeItem(
Drag and Drop をマルチタッチ対応に - latest log
シングルマウスなDrag and Dropなコードを、マルチタッチ対応にしてみました。 http://jsdo.it/uupaa/MultiTouchDnD iPhoneでテストしています。 マルチタッチ初挑戦なので、色々と分かってません。 マルチタッチ対応の要点 今回は、シングルマウスのコードを流用し、マルチタッチ対応を行なっています。 Revision: r653 // 0.8/src/ui/drag.js // 初期化処理で、mousedown の代わりに touchstart をハンドリング uu.event(grip, uu.ver.touch ? "touchstart" : "mousedown", this) // 0.8/src/ui/drag.js function dragHandleEvent(evt) { uu.event.stop(evt); uu.ui.dra
JIT搭載ブラウザでは変数の再代入コストは無視できる - latest log
JIT搭載ブラウザでは a = a; など同じ変数に対する代入を繰り返しても遅くならず、JIT非搭載ブラウザだと a = a; で遅くなります。 JIT非搭載 Browser a=a nop Firefox3 1177 666 IE8 2036 1265 IE6 4291 3406 JIT搭載 Browser a=a nop Firefox3.6 236 234 Safari5 696 702 Opera10.60 970 1028 Google Chrome6 445 451 // a = a function _a_a(idx) { var a = idx; a = a; a = a; a = a; a = a; a = a; a = a; a = a; a = a; a = a; a = a; return idx + a; } // nop function _nop(idx) {
Web Workers用と通常のJavaScript用のコードを共存させる - latest log
Web Workers の調べ物してました。 Web Workers は、Google Chrome 4+, Firefox3.5+ , Safari4+ で既に利用可能です。 Google Chrome5 では、Web Workers 内で Web Socket を動かすこともできます。 js の基本であり鬼門といえば this オブジェクト 各ポイントで this.toString() や self.toString() を行い、this や self が何を指しているのか調べました。 <script> var globalScope = this.toString() </script> // WebWorkers.js var workersGlobalScope = this.toString(); var self1 = self.toString(); onmessage =
IEのクラッシュ画面を再現してみる - latest log
IEでどーぞ <script> [,]!=0&&((b=document.body).style.cssText="height:1px;overflow:hidden", b.innerHTML+='<p style="z-index:99;position:absolute;width:'+b.clientWidth+'px;height:'+b.parentNode.clientHeight+'px;background:url(ie.png) no-repeat 50%" oncontextmenu="return!1">') </script>IEのエラーダイアログをキャプチャーした画像を中央に表示し、右クリックを封印し、body に overflow:hidden を設定します。 たったこれだけで、IEが落ちたかのような錯覚に見舞われます。
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 として数値化します。 エンコ
msgpack.js RC - latest log
MessagePack 発案者様から「末席あいてますよ」とお言葉をいただいたので、uupaa.js に一切依存せず、ソースコード単体で利用可能なスピンオフ版を作成しました。 Many bugfix(especially - IEEE754) Test case was enhanced msgpack codec test msgpack download / upload demo benchmark msgpack vs json Download and Upload functions msgpack.download(url, option, callback) -> download binary data by GET method. msgpack.upload(url, option, callback) -> upload base64 data by PUT meth
ライブラリの一部でありながら単体利用も可能にする工夫 - 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
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
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
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
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
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
速くてコンパクトな JavaScript 用の sprintf の実装 - latest log
[javascript][sprintf] で検索してたどり着く方が多いようなので、uupaa-0.7.js から切り出して張ってみます。 /*!{id:"uupaa.js",ver:0.7,license:"MIT",author:"uupaa.js@gmail.com"}*/ window.sprintf || (function() { var _BITS = { i: 0x8011, d: 0x8011, u: 0x8021, o: 0x8161, x: 0x8261, X: 0x9261, f: 0x92, c: 0x2800, s: 0x84 }, _PARSE = /%(?:(\d+)\$)?(#|0)?(\d+)?(?:\.(\d+))?(l)?([%iduoxXfcs])/g; window.sprintf = _sprintf; function _sprintf(fo
document.matchesSelector 相当の機能を実装してみた - latest log
より効率的なコードに差し替えました http://dev.w3.org/2006/webapi/selectors-api2/#matchesselector と id:javascripter さんの記事 Selectors APIのmatchesSelectorと、動的なページでのイベント処理 via http://d.hatena.ne.jp/javascripter/20091018/1255889085 を参考に uu.match(expr, ctx, rtype = 0) な関数を書いてみました。 // uu.match - document.matchesSelector like function function uumatch(expr, // @param String: "css > expr" ctx, // @param NodeArray/Node: matc
jQuery.live っぽい実装 - latest log
submit, focus, blur, change をクロスブラウザにする方法を追記しました。 最新版のコードを追記しました。 デモを追加しました。 jQuery.live() は document.addEventListener(type, fn, capture) で、天辺までバブルアップしてくるイベントを拾う 拾ったイベントが CSS のセレクタ式(expr) に一致するか比較 一致していれば登録されている fn をコールバック という処理をやっているようです。 # 注意: jQuery のコードを見ずにしゃべってるよ そんな感じのを実装してみた var _livedb = {}; // { "expr\vnamespace.click": {...}, ... } uu = uumix(_uujamfactory, { // uu(expr, ctx) -> Instance
ストレスの無いCSSアニメーションを - latest log
今日は、CSSアニメーション機能を担当する uu.tween.js のリライトをしていました。 uu.tween.js を組み込むと、CSS の色, サイズ, 位置を利用したアニメーションが可能になります。これ自体はよくある機能なのですが、他のライブラリにない特徴として、CSSプロパティ個別に easing 関数を割り当てられます。 デモ http://pigs.sourceforge.jp/blog/20091216/ ノード3個 と 15個版があります。ノード数が違うだけで何身は一緒です。デモにある円弧軌道は、left, top に別々の easing 関数を割り当てて実現しています。 easing 関数 デフォルトの easing関数 は easeInOutQuad です。plug/easing/uup.easing.js を組み込むと他の関数を利用できます。 http://code
uupaa-0.7.alpha2.js - latest log
先ほど固めてみました。 zip: http://code.google.com/p/uupaa-js/downloads/list ブランチ: http://code.google.com/p/uupaa-js/source/browse/#svn/tags/0.7_alpha2 ザックリとした Change Log -uu-background: -uu-canvas(ident) を追加 uu.ajax.queue(), uu.jsonp.queue() を追加 uu.color() の戻り値を変更 ES5(ECMAScript-262 5th)で追加された、Array,Number,Boolean,String系の関数/メソッドをコアに組み込み uu.tween() の高速化 window.getComputedStyle() を IE6+ でサポート 詳細な Change Log
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript で 形態素解析ってこうですか? わかりません ＞＜ - latest log
