(ε・◇・)з CoffeeScript と mofmof.js - latest log
(ε・◇・)з CoffeeScript は Ruby や Python っぽく書けて JavaScript にコンパイルできるプリティな言語だとか! (ε・◇・)з 噂では CoffeeScript で書くとコードが短くなるとか!! 物は試しに http://jashkenas.github.com/coffee-script/ にある幾つかのコード片と、mofmof.js 混じりで書いた場合のコードを比べてみました。 (ε・◇・)з mofmof.js はここだよ → http://code.google.com/p/mofmof-js/w/list Syntax // coffee # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square =
Screen Transition Traversal Pattern - latest log
とある開発環境で iPhone/Android アプリを書いてます。開発言語は js ですが Titanium ではありません。 今回の開発で実現したい事の１つに「可能なら UI を自動でテストしたい」というのがあります。 ぼーっとしていたら、以下のようなロジック(パターン)を ピコーン しました (恐らくボクが知らないだけで車輪の再発明なんだろうけどさ!) 画面をディレクトリと見立てる。ディレクトリ=画面。ファイルに該当するものは無し / はルートディレクトリ(ルート画面)。常に存在する /A はルート直下のAディレクトリ(画面A)。親画面の上に表示される子画面達は /A/B/C のように表現する 画面の状態をディレクトリパスにパラメタとして与えるだけで、ネストした画面を再現できる /A(key1=value2;key2=value)/B/C といったパスは、画面Aを構築する際に key
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 の中にも埋まっているかもしれません。そちらに対す
NO TEST, NO LIFE. NO DOC, NO LIFE - latest log
uupaa.js や mofmof.js には {@hoge 〜 }@hoge のようなコードブロックを切り落として Minify する機能があるので、「ソースコードにテストもドキュメントも全部埋め込むことが可能だな〜」って3年程前から考えてました。 そこで、Function.prototype.spec というメソッドを追加し、これにスペックを書き貯めたらどうだろうか(?)とか考えました。 たとえば Array.range(1,7) で [1..7] 的な連続した数値の配列を生成する Array.range 関数があったとすると // Array.range - range generator function Array_range(begin, // @param Number: begin end, // @param Number: end filter) { // @param
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 として数値化します。 エンコ
IE9RC で document が const になり再定義が不可能になった - latest log
IE9RC の挙動を調べています。 IE9RC では @amachang さんの /*@cc_on var doc = document; eval('var document = doc'); @*/ が封印されてる http://twitter.com/#!/uupaa/status/35942322231320576 残念ながら、 @amachang さんの発案した方法がIE9で封印されてしまったようです。 IE9RC Release note http://msdn.microsoft.com/en-US/ie/ff468705.aspx window.document が const になったため、再代入するとエラーになります。 http://jsdo.it/uupaa/Wq0w で試せます。 回避案 (function(document) { // ローカルスコープ doc.c
$("div").append("<section>section</section>") できないらしいので色々調べてみた - latest log
追記: jQ的には解決していませんが、素の JavaScript を使った回避方法がわかりました。IE8以下では、オンザフライで作成した要素に対して innerHTML すると謎要素が作成されてしまうといった現象がでるため、一度要素片を、DOMツリー( body とかね ) にぶらさげてから innerHTML すると回避できました。 つまり、オンザフライな↓ではだめで… var div = document.createElement("div"); // 作る div.innerHTML = "<section>ほげー</section>"; // 突っ込む → ι(´Д｀υ) ↓のようにすると謎の挙動を回避できます。 var div = document.createElement("div"); // 作る document.body.appendChild(div); // あて
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
uu.snippetで「やりましょう」、Widgetの作り方入門 - latest log
続き書きました uu.snippet 入門(2) 複数の部品を一つのsnippet に - latest log Widget(Web ブラウザ上で動作する UI 部品)を作るには、構造を HTML で、見栄えを CSS で、アクションを JavaScript で記述することになります。 Widget を作る際の問題は大きく3つ。 標準的な JavaScript には DOM 構造やスタイルをヒアドキュメント化し埋め込む仕組みが無い(頑張ればなんとかなるけど、サクっとやれない) CSS には定数や外部参照可能な変数の概念が欠如している 画像数、画像サイズ、レイアウト変更に耐えるだけの構造を持たせることが非常に難しく、○○CSSなどの外部ツールに頼るか、妥協するか、実数(マジックワード)として埋め込むかを選択することになる(変数が使えないために発生するトライ&エラーや悩む時間が無駄すぎる)
イベントハンドリングなら 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 だと、この(↓)ように記述できます
uupaa.js と jQuery を機能を中心にざっくりと比較 - latest log
Classの継承についてサンプルを追記しました。 jQuery の特徴的な構文を uupaa.js で表現する方法を追記しました。 デバッグ支援機能について追記しました。 特徴 uupaa.js jQuery 初版 version 0.1 (2008-06-07) version 1.0 (2006-10-27) 最新版 version 0.8 (2010年末を予定) version 1.4.2 (2010-02-19) ライブラリの目標 WebOSのフロントエンド 不明 本来の用途 WebOS / WebApp DOMの操作とサイトの装飾 使われ方 導入実績なし 小〜中規模サイト / ポータルサイト等 想定されるコアユーザ層 エンジニア デザイナー / コーダー / エンジニア 名前空間 uu (1つ) jQuery と $ (2つ) ライブラリによる識別子プリフィクスの予約 uu また
Array に Hash を被せる(AOH) - latest log
配列を返す関数は、素の配列を返すよりも、first や last などの付加情報も一緒に返すといいんじゃないかな。 というお話です。 たとえば FakeArray → Array NodeList や arguments は FakeArray(Array Like Object) と呼ばれる擬似配列です。 FakeArray には join() や push() などの便利なメソッドがないため、FakeArray を一旦 Array に変換する(↓)toArray のような関数が、どうしても必要になります。 # Array.prototype.slice.apply(fakeArray) を使うケースは説明しないよ 素の Arrayを返す toArray 関数 function toArray(fakeArray) { // @param Array/FakeArray: // @ret
速くてコンパクトな 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
コードを削る - 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.
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(
textContent を使うと Opera10.60 がどんどん重くなる - latest log
追記 http://jsdo.it/uupaa/u0QX に最小化したコードを載せました 今回のケースでは、条件(1)と(2)を満たす場合に、どんどん重くなっていくようです。 function bench() { // (1) nodeList を関数内部で毎回取得している var nodeList = document.getElementsByTagName("li"); i = 0, iz = nodeList.length; for (; i < iz; ++i) { // (2) textContent に代入している nodeList[i].textContent = i; } } 本文 原稿書きの資料用に、最新のブラウザでベンチマークを取得していたところ、Opera10.60 のスコアだけがどんどん悪くなる(遅くなる)ケースがあることに事に気が付きました。 条件を絞り込んでい
MultiTouch +SVG + DragAndDrop + Gesture - latest log
MultiTouch と SVG で遊んでみました。 PCならマウスホイールで拡大/縮小, シフトキーを押しながらホイールで回転。 iPhoneならピンチで拡大/縮小と回転。 トリプルタップやトリプルクリックで元のサイズに戻ります。 jsdo.it http://jsdo.it/uupaa/MultiTouchSVGDragDrop SVG DOM I/F 今のところ、こんな感じで考えてます uu.svg(x, y, width, height, { attr }, { css }) uu.svg.g(translateX, translateY, { attr }, { css }) uu.svg.rect(x, y, width, height, rx, ry, { attr }, { css }) uu.svg.circle(cx, cy, r, { attr }, { css })
MultiTouch DragAndDrop + Gesture で Microsoft Surface 的な - latest log
続き書きました 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 をマルチタッチ対応に - 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MultiTouch DnD + Gesture で Microsoft Surface 的な(2) - latest log
