続き書きました http://d.hatena.ne.jp/uupaa/20100629 MultiTouch の習作として、Microsoft Surface ( youtube: http://bit.ly/1wTzk ) に似たインターフェースを js で実装してみました。 ピンチで拡大。回転。トリプルタップで元のサイズに戻ります。 demo http://bit.ly/b3BZdr ( http://uupaa-js.googlecode.com/svn/trunk/0.8/test/ui/gesture_drag.htm ) jsdo.it にも置きました http://jsdo.it/uupaa/MultiTouchDragAndGesture jsdo.it では、コンテンツがiframeの中でロードされ実行されていますが、iframeの外側(jsdo.itの実行環境)で、各
シングルマウスな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
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(); >
追記 @os0X さんと @edvakf さんからアドバイスをいただいたので、本文とコードを修正しました。 postMessageが文字列に限定されているのは旧仕様で、Firefoxや最近のWebKit(Chrome5とか)はオブジェクトをやり取りできると思います via @os0X http://twitter.com/edvakf/statuses/15644433920 自分でも試してみました。 http://javascript.g.hatena.ne.jp/edvakf/20100607/1275931930 via @edvakf http://twitter.com/os0x/statuses/15621293442 本文 昨日の日記の続きです。 IE9 と Opera で動くようになり、ちょっと速くなり、WebWorkers でデコードするモードを追加しました。 http:
140文字を超えちゃうので、こちらで。 JavaScriptなコードを書いてると「このへんの処理はどこにも依存してないから、特定のライブラリの一部ではなく、単体でロードしても使えるような部品としてまとめられたらなぁ」とか「でも、ライブラリの一部として利用する場合にグローバルネームスペースを汚染するのはダメだよなぁ」と、考えたことはありませんか? window.uu 以下をライブラリのネームスペースとして利用している uupaa.js では、このような工夫をしています。 // === uu.base64 / window.base64 === (function(namespace) { namespace.base64 = { encode: base64encode, // base64.encode(data:String/ByteArray, // toURLSafe64:Boole
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 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
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] で検索してたどり着く方が多いようなので、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
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: 実装されており他のブラウザの描画結果と互換性がある(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く