2010-01-01から1年間の記事一覧

クリスマスツリーを iPhone でも見れるようにしたよ

ジェバンニ仕事で、http://koebu.com/event/xmas/2010/ を iPhone / iPad に対応させました*1。 目からビーム出して頑張ってる最中のツイートまとめ iOS では、ユーザアクションを伴わない、audio.play() やaudio.load() は機能しない。さらにpreloadとautop…

動的に生成したノードに対する currentStyle と getComputedStyle はいつから利用できるか?

IE6, IE7, IE8 では node.currentStyle を使うことで計算済みのスタイル情報にアクセスできます。また、IE9を含むその他のブラウザでは、window.getComputedStyle(node, "") を使うことでアクセスできます。getComputedStyle では、単位系が px に統一されて…

msgpack.js を改善しました

version 1.05 を github と、Google Code においてあります。ベンチマーク もGoogle Code に置きました。10万要素のJSONデータの読み込みに時間かかることがありますが、気長にお待ちください。 # IE9用はこっちです http://uupaa-js-spinoff.googlecode.com…

msgpack.js を改善しました

https://github.com/uupaa/msgpack.js 速度を改善 JITの最適化を促進する方法をピコーンしたので、IEEE754周りの速度を改善しました。Opera(右上)で特に効果が見られます。 IEEE754ベンチ: https://github.com/uupaa/msgpack.js/blob/master/test/IEEE754.be…

msgpack.js をさらに速く

昨日に比べて2倍速ぐらいになりました。 https://github.com/uupaa/msgpack.js/blob/master/msgpack.js Data = 10000 Opera 10.63 Firefox 4.0β7 Chrome 9 dev IE9pp7 JSON.stringify 53 24 67 38 JSON.parse 11 34 29 16 stringify + parse 64 58 97 54 msg…

最適化前後のコードを一緒に配布し技術共有を促進する(BaseCode)

数ヶ月前までは、Google Chrome に実装されている JSON よりも、お手製の msgpack.js のほうが速かったりした事もありました。でも気がついたら、いつの間にか Google Chrome 9 dev にぶっちぎられていました。で、速度差を挽回すべくコードをいじりだして、…

msgpack.js improvement

msgpack.pack will return "Maximum call stack size exceeded" when passing big data 数日前に、「msgpack.pack が文字列を返してないよ」という issue が付いたので、第二引数が true なら、String.fromCharCode.apply を行いバイナリ文字列を返すように…

2010-11-21〜22日 JavaScript関連つぶやきまとめ

js

やっぱり、IE6 と IE7 はサポート対象外にするのが合理的か。 IE8 以上をターゲットにすると、getter / setter が使えるから、それを主軸にライブラリのI/Fを考え直したほうが良いものができそうだ http://twitter.com/#!/uupaa/status/6403080144822272 IE6…

Google Chrome 9 + WebGL

js

Google Chrome 9(dev) から WebGL が実装されており、 http://learningwebgl.com/blog/?p=1949 にあるデモの幾つかが実際に動作します。 JavaScript + 3D の夜明けですね。

IE9pp6 で section, nav, aside, header, footer 等をサポート

IE9pp6 では、 -ms-transform 以外にも、以下の HTML5 新要素をサポートしています。 <nav /> <article /> <aside /> <hgroup /> <header /> <footer /></footer></header></hgroup></aside></article></nav>

IE9pp6 で -ms-transform が実装されたようなので

-ms-transform を使ったデモをどうぞ http://uupaa-js.googlecode.com/svn/trunk/0.8/test/ui/gesture_drag.htmPC, iPhone, iPad で動作します。PCなら、ホイールで拡大縮小, ホイールクリックで回転(または SHIFT + ホイールで回転), iOS なら タッチドラッ…

WEB+DB PRESS Vol.59 Extreme JavaScript CordingStyle

js

WEB+DB PRESS Vol.59 デバッグ効率と高速性を両立する、Extreme で High Performance な JavaScript コーディングスタイルについて、WEB+DB PRESS Vol.59 に記事を書きました。 以下のスライドも参考になると思います http://handsout.jp/slide/1909 http://…

イベントハンドリングなら handleEvent を使えば、Function#bind や $.proxy はたぶん要らない

タイトル変えました uupaa.js の個々の機能をちょっとずつ紹介しています。h2ham さんの記事を拝見して http://h2ham.seesaa.net/article/142734325.htmluupaa.js では、 クラスオブジェクトの handleEvent にイベントを束縛できるため、 jQuery の、この(↓)…

uu.ajax(), uu.jsonp()

uupaa.js の個々の機能をちょっとずつ紹介しています。uu.ajax(url, option, callback) は Ajax, uu.jsonp(url, option, callback) は JSONP の機能です。 // uu.ajax - Async request function uuajax(url, // @param String: url option, // @param Hash: …

uu.image() で画像の読み込み管理

ちょっとI/F修正uupaa.js の個々の機能をちょっとずつ紹介しています。 uu.image(url:URLString/URLStringArray, callback:Function) // [1][load image] uu.image(url, function(response) { ... }) // [2][load images] uu.image([url, ...], function(res…

シークバーを搭載したAudioプレイヤーのデモ

ここ一週間でコツコツ改良を進めていた HTML5 Forms の <input type="range"> 風味なスライダーコントロールと、 <audio> のラッパーがいい感じになったので簡単なデモを作りました。http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/audio/player.htm IE6+ / Firefox / Safari </audio>…

msgpack.js bench mark

MessagePack の JavaScript 実装を GitHub に上げました。 テストは一通り終わっています(test/codec.htm)。ライセンスはまだ決めていませんがご利用はご自由にどうぞ。 HOW TO USE var mix = { any: "type" }; // MessagePackフォーマットの ByteArray にエ…

uupaa.js と jQuery を機能を中心にざっくりと比較

Classの継承についてサンプルを追記しました。 jQuery の特徴的な構文を uupaa.js で表現する方法を追記しました。 デバッグ支援機能について追記しました。 特徴 uupaa.js jQuery 初版 version 0.1 (2008-06-07) version 1.0 (2006-10-27) 最新版 version 0…

IE8の開発者ツールのデバッグできなくなるバグをyoutubeに上げました

http://www.youtube.com/watch?v=OXzqRacGR18 # 残念ながら画質は iPhone → youtube 画質です # 野外で取っているので、音声ぼそぼそでごめんなさい IE8の開発者ツールが抱えたままの困ったバグ(古いjsが読み込まれ続ける, 同じファイルが多重ロードされブレ…

HTML5 Forms Slider Control (input type="range")

デスクトップアプリケーションで利用されているフォームコントロールの多くがブラウザでは利用できません。 これを改善すべく HTML5 Forms で フォーム部品が追加されましたが、例によりブラウザの実装が追いついていないため満足に利用できる状況にありませ…

HTML5 Forms の UI をどう実装したらよいか悩んでいます

HTML5 で新しく定義された <input type="range"> 等を JavaScript で実装しようとしたときに、元の input 要素と UI 要素を関連付けする方法で悩んでいます。 <input type="range" id="hogeid" class="hogeclass" value="50" min="0" max="100" onchcange="onchange(this)" /> といった要素があったときに、 div要素 と input type="hidden" に置換して、元の input type="range" 要素から引き継…

return で セミコロンが補完されてしまうのを防ぐ

uupaa.js のビルドツールは、必要な機能のみをビルドすることができます。 //{@mb if (uu.ie) { alert("IE用の特別な処理だよ"); } else { //}@mb alert("IE以外の処理だよ"); //{@mb } //}@mb このコードを、MobileWebKitモード( {@mb から }@mb までを削除…

WEB+DB PRESS Vol. 58 に記事を書きました

連載2回目です。前回に引き続き クロスブラウザな JavaScript のお話を中心に10ページほど書きました。 関数呼び出しのコスト(どこに関数を置くべきか) eval と Function コンストラクタ try〜catch を控える 動かないコード(Liveな配列, FakeArray) FizzBuz…

ごはんとフラッシュ with JS に行ってきたよ!

js

「ごはんが出ます」の一言で見事に一本釣りされ(?)、voice というタイトルでお話をさせていただきました。https://docs.google.com/present/edit?id=0AW0pLkJy7nkuZGp2eHBwa18zZDU5ZGhzZ3M&hl=enスライドの中身は、「音声合成でほっこり」 デモを試すには、 …

IEで作りたてのノードにフィルターを設定する

js IE

parentNode が null の状態で、node.filters に触れるとエラーになるため、 var node = document.createElement("div"); node.style.filter = "progid:DXImageTransform.Microsoft.Alpha()"; var filter = node.filters.item("DXImageTransform.Microsoft.Al…

uu.snippet 入門(2) 複数の部品を一つのsnippet に

uu.snippetで「やりましょう」、Widgetの作り方入門 - latest log の続きです。uu.snippet は、複数の部品(コードブロックや関数)を一つのファイルにまとめ上げることが可能です。 実行環境によってスタイルを微調整する MediaQuery を古いブラウザで実現す…

Array に Hash を被せる(AOH)

配列を返す関数は、素の配列を返すよりも、first や last などの付加情報も一緒に返すといいんじゃないかな。 というお話です。 たとえば FakeArray → Array NodeList や arguments は FakeArray(Array Like Object) と呼ばれる擬似配列です。FakeArray には…

uu.snippetで「やりましょう」、Widgetの作り方入門

続き書きました uu.snippet 入門(2) 複数の部品を一つのsnippet に - latest log Widget(Web ブラウザ上で動作する UI 部品)を作るには、構造を HTML で、見栄えを CSS で、アクションを JavaScript で記述することになります。Widget を作る際の問題は大き…

Flashのように滑らかなアニメーションを実装するには(uupaa.js vs jQueryデモ)

JavaScript で Flash のような滑らかなアニメーションを行うためには、クロスブラウザな知識の他に、GC(ガベージコレクション)や「どうすれば安定した品質がだせるのか」といったスキルが求められます。 # GC の話は WEB+DB PRESS 57 でちょっと書いてます。…

JavaScript minified code word counter

JavaScriptのコード量とか気になりますよね? モバイルだと特に。通常は、プログラマーがソースコードの無駄を削り、Minifier Tools で更に難読化 + 圧縮を行いますが、そこから更に削りを入れるには、頻出するワードを変数に格納するなどします。 そんな時に…