Google Code Archive - Long-term storage for Google Code Project Hosting.Code Archive Skip to content Google About Google Privacy Terms
uupaaさんのCoffeeScript利用時の注意点
えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa CoffeeScriptやる人に一言。jsはシングルスレッドだけど匿名関数でラップすると関数の出口でスレッドコンテキストする可能性あるから、並列処理にスレッドもってかれないように気をつけて。最近某アレで「朝までにページ表示が不安定なのを直して」と泣き付かれた奴はまさにそれだったよ えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa CoffeeScriptはうっかり匿名関数でラップするから、「タイミングに依存する作りで、状態遷移をしっかりせず、手抜きしてると先にxhrが終わってしまい、そこで処理もってかれて、準備できてないのにページ表示処理が走って、全体が不安定になる」って奴だった
uu.snippetで「やりましょう」、Widgetの作り方入門 - latest log
続き書きました uu.snippet 入門(2) 複数の部品を一つのsnippet に - latest log Widget(Web ブラウザ上で動作する UI 部品)を作るには、構造を HTML で、見栄えを CSS で、アクションを JavaScript で記述することになります。 Widget を作る際の問題は大きく3つ。 標準的な JavaScript には DOM 構造やスタイルをヒアドキュメント化し埋め込む仕組みが無い(頑張ればなんとかなるけど、サクっとやれない) CSS には定数や外部参照可能な変数の概念が欠如している 画像数、画像サイズ、レイアウト変更に耐えるだけの構造を持たせることが非常に難しく、○○CSSなどの外部ツールに頼るか、妥協するか、実数(マジックワード)として埋め込むかを選択することになる(変数が使えないために発生するトライ&エラーや悩む時間が無駄すぎる)
uu.image() で画像の読み込み管理 - latest log
ちょっと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(response) { ... })uu.image は画像をまとめてプリロードし、終わったらお知らせしてくれる機能です。 uu.image は、第一引数 url で指定された画像の読み込みが完了すると、第二引数 callback で指定された関数を callback(images, ok) の形で呼び出します。response.rv には NodeArray が、 respo
シークバーを搭載したAudioプレイヤーのデモ - latest log
ここ一週間でコツコツ改良を進めていた HTML5 Forms の <input type="range"> 風味なスライダーコントロールと、 <audio> のラッパーがいい感じになったので簡単なデモを作りました。 http://uupaa-js.googlecode.com/svn/trunk/0.8/test/core/audio/player.htm IE6+ / Firefox / Safari / Chrome / Opera / iPhone(iOS4) で動きます。Android は持っていないので試していませんが、動きそうです。 ブラウザによっては、データのキャッシュが完了していないと上手くシークできないことがあります。 # mp3 や m4aファイルを http://uupaa-js.googlecode.com/svn/trunk/ からダウンロードし、ローカルで動かす
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 また
Flashのように滑らかなアニメーションを実装するには(uupaa.js vs jQueryデモ) - latest log
JavaScript で Flash のような滑らかなアニメーションを行うためには、クロスブラウザな知識の他に、GC(ガベージコレクション)や「どうすれば安定した品質がだせるのか」といったスキルが求められます。 # GC の話は WEB+DB PRESS 57 でちょっと書いてます。 派手目なアニメーションが目的で jQuery を採用している方もいるとは思いますが、実は uupaa.js でも アニメーションや easing が利用できるんです。あらびっくり。 ただ「機能がありますよ〜」だと、さみしいので みんな大好き jQuery と uupaa.js のアニメーションの品質の違いが分かるようなデモを作成してみました。 iPhone/iPad や、IE6〜IE8で opacity を切り替えて見ると、ハッキリと違いが分かると思います。 http://jsdo.it/uupaa/uufx
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 })
ライブラリの一部でありながら単体利用も可能にする工夫 - 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
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.パッケージ
HTML5 Web Storage-- な機能を uupaa.js に実装してみた - latest log
Cookieよりも大容量のデータをクライアントサイドに保存する仕様。それが HTML5 の Web Storage です。 Web Storage はまだ策定中です。 Firefox3.5+, IE8+, Safari4+, Opera10.50+ など最新のブラウザでは既に利用可能ですが、「何年も待ってられない、今すぐ使いたい」ですよね? そこで、クロスブラウザな Web Storage 相当の機能を uupaa.js に実装してみました。 # sessionStorage は実装していませんよ デモ http://pigs.sourceforge.jp/blog/20100104/20100104_uu.storage.htm Firefox2+, Safari3.1+, IE6+, Google Chrome3+, Opera9.2+ で動作確認してます。 ストレージバックエンド 以
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
== はやればできる子(でも95%のシーンではいらない子) - latest log
var ary1 = [1, 2]; var ary2 = [1, 2]; プリミティブな値(文字列とか数値)だけが格納されている2つの配列(ary1 と ary2)の内容が、同じかどうかを確認したい場合に… function like(ary1, ary2) { if (ary1.length !== ary2.length) { return false; } var v, i = 0, iz = ary1.length; for (; i < iz; ++i) { if (ary1[i] !== ary2[i]) { return false; } } return true; } alert(like(ary1, ary2)); // true とか書いてませんか? もっと短く… alert(ary1.join(",") === ary2.join(",")); // true も
Ajax リクエストの順番を直感的に記述可能な uu.ajax.queue を追加 - latest log
uu.ajax.queue は順番や待ち合わせなどの規則を指定した Ajax リクエストを可能にします。 uu.ajax.queue(cmd, [url, ...], [option, ...], [fn, ...], lastfn, ngfn) cmd には "0+1+2" や "a>b+c>d" などのような規則を文字列で記述します a+b なら a と b を同時に読み込みます。 ブラウザ毎に、同時にリクエスト可能な数に制限があるので、同時にならないこともあります。 a>b なら a をロード後に b をロードします。 a や b の部分には一文字の英数字(0-9,a-z,A-Z)を指定できます。 ここで指定した ID は lastfn や ngfn の第一引数(hash.id)に設定され、リクエストの追跡に利用できます。 option オプションを Hash で指定します。省略可能
ストレスの無い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
速くてコンパクトな 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
window.xconfig の修正 - latest log
uupaa.js 0.7 の修正履歴です。興味がない方は読み飛ばしてください。 window.xconfig を定義すると大まかな挙動を設定できる window.xconfig を uupaa.js ロード前に定義すると、大まかな挙動を設定できます。 現在のところ、以下の設定項目があります(変更適用後のものです) <script> window.xconfig = { aria: 0, // @param Number(= 0): 1 is enable WAI-ARIA debug: 0, // @param Number(= 0): 1 is debug mode, 0 is normal mode light: 1, // @param Number(= 1): 1 is light weight mode altcss: 0, // @param Number/Function(=
uupaaさんのマイページ :: handsOut.jp
09-06-17 2009/06/17(水)のメンテナンス作業は終了いたしました。ご迷惑をお掛けしました。 09-06-12 急で申し訳ございませんが、2009/06/17(水)は メンテナンス作業のため、一時的にアクセスが 出来ない状態となります。予めご了承下さい。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Code Archive - Long-term storage for Google Code Project Hosting.
Google Code Archive - Long-term storage for Google Code Project Hosting.