秋元@サイボウズラボ・プログラマー・ブログ: Yahoo! UI Library はすごいね
via O’Reilley Radar Yahoo! UI Library で、Yahoo! が実際に使っている Javascript のライブラリ集が公開されている。 Yahoo! のどこでこんなユーザインタフェースが使われてるんだろう? と思うぐらい、サンプルで見せられる UI パーツは豊富だ。それぞれの “Example” を見てまわるだけでもおなかいっぱいだ。 コアユーティリティ アニメーション クロスブラウザ対応の XMLHttpRequest ラッパ DOM 操作 ドラッグアンドドロップ イベントハンドリング UI コントロール部品 カレンダー スライダー ツリー ドラッグアンドドロップなんかは、ファンタジースポーツで使われているのを見たことがあるので知っていた。複数のリスト間でアイテムの移動や並べ替えを行うときには使えるパーツだろう。 日本語カレンダーなんかも、いい感じで再利
我的春秋: 振る舞い分離 JavaScript ライブラリ一覧（編集途中）
我的春秋: 関連エントリー 2006-06-11: 振る舞い分離 JavaScript ライブラリ一覧（途中） 2006-06-10: 続 JavaScript ソースが HTML から消える日 2006-01-05: JavaScript ソースが HTML から消える日 lib. behaviour.js （v1.1） getElements BySelector cssQuery() jQuery prototype.js （v1.5+） 対応ブラウザ
Ajaxな有用コンポーネント集:phpspot開発日誌
TurboWidgets, presented by TurboAjax Group TurboWidgets are JavaScript client-side controls that provide a rich user-interface experience for AJAX-style web applications. 以前紹介した、AjaxなphpMyAdmin のページで、TurboWidgetsというAjax部品集がリリースされていたので紹介。 例えば、次のイメージはTurboGridというコンポーネント。かなりクオリティ高いです。 その他にも、次のようなプログレスバー(ぐんぐん伸びるイメージがカッコいい) 高品質なボタンコンポーネント集(一見デスクトップ風) ツリービュー(アイコン表示できる) タブコンポーネント(Appleのサイトっぽい) ドラッグアンドドロッ
llameradaの日記 - ユーザがページに滞在した時間をサーバに記録するJavaScript
Ajaxの普及に伴い、ページ当たりのユーザの滞在時間が注目されるようになっている。従来、サービスがユーザに与えるインプレッションの指標としてページ・ビューが広く用いられている。しかし、Ajaxを利用するとページの移動があまり発生しないため、ページ・ビューが低くなってしまう。そこで、インプレッションの指標として、滞在時間を使おうという動きがある。 今回、JavaScriptでユーザの滞在期間が記録できるかどうか調べてみた。取り組む前は難しいかなと思ったが、実際にはとても簡単であった。コードは下記。 (function(){ var start = new Date; window.onunload = function(){ var time = (new Date - start ); var image = new Image; image.src = "/dummy?t=" + tim
Trivial Tracks: Javascriptのクロスブラウザライブラリ
Javascriptを少しでも自分で書いたことある人は、各種ブラウザ間の共通性・互換性の弱さにため息や頭痛を感じた人も少なくないのではないでしょうか サイト上にスクリプトが記載されていて、それをコピペして借用する方法もあるが、経験上こういうコードは意外と完成度が低く、自サイトでは挙動がおかしいということが多々ある。 こう思った人がブラウザ間の差を吸収したライブラリを誰か提供してくれているに違いないと思い探してみるとまず最初に引っかかったのがPrototype.js。 残念ながらこれは間違いではないが、目的がAjaxに重点を置いているため古いブラウザは問題外となっている。 ちなみに正式対応なIEバージョンは6以降と書いてある。 そしてやっと探しあてたのが以下で紹介されている「X Library」 http://www.cross-browser.com/ これの完成度は本当に素晴らし
Prototype Dissected - snook.ca
In getting to know Prototype a little better, I decided to go through the latest version of the Prototype library (1.5.0_pre0) and detail every method and property that was available. In doing so, I got a much better understanding of how the code works. Here are the files in a 1280x960 and a widescreen 1440x900 version. 1280x960 1440x900 1280x960 on White 1440x900 on White And with WHITE backgroun
Ajax うきうき Watch 第11回 JSONがRFCになり、どんどんこなれるAjaxサービス
JSONがRFCの1つになったからというわけではないだろうが、Ajaxサービスがいよいよ使いやすくなってきた。フリッカーの写真を楽しく掲載できるツール、スティッキー型ブログ、その場で画像編集、本格的なテストができるツールなどが登場した（編集部） FlickrStorm flickrshow 投稿型の写真掲載サイトとして人気のあるフリッカーを活用する話題2点です。 FlickrStormは、上記リンクからサイトを訪問すると、真っ白な画面が見えるだけで何が面白いのかピンとこないでしょう。しかし、paris（別の単語かもしれません）と書かれた個所をクリックした瞬間に、後ろに“simply hit ENTER”と出て、ここでENTERキーを押せば検索が実行されることが分かります。 同時にその下の2つのアイコンに、your history、 your trayという名前と説明文が浮かび上がり、機能を
ブラウザ上でお絵かき: Days on the Moon
「Ajax を使った手書き文字認識」を見て。ここでは線を描くのに絶対配置の span 要素を大量生成しているけど、最近のブラウザってベクター描画エンジン付きのものが多いわけで。WinIE 5 以降の VML 、Opera 8 ・ Firefox 1.5 以降の SVG 、Safari 1.3 ・ Firefox 1.5 以降の canvas 要素といった具合に。 ということで各ブラウザでベクター描画エンジンが使えればそれを使い、なければ絶対配置の HTML 要素を大量生成することで、ブラウザ上でお絵かきできるというものを作ってみた。元に戻す / やり直すこともできる。線を描くだけで塗りつぶしはできないが。 その線を描くために作ったのが DrawingCanvas クラス。以下のようにすることで三角形が描ける。実際の描画部分には SVG Tiny 、HTML Canvas 、CSS Posi
JavaScriptとAJAXでページ上のマウスの動きを録画・再生するデモ
ページ上で動かしたマウスの軌跡を記録し、再生することが可能になるJavaScriptやAJAXなどの組み合わせデモが公開されています。実際に試してみればわかりますが、記録している際には、特に記録されていると気づくような要素は全くありません。 応用としては、広告バナーのクリックについてアイトラッキング（目の動きを追う）の代わりに、マウスの移動する軌跡を記録して「マウストラッキング」が可能になったり、あるいはAJAXをフルに駆使したサイトにおけるユーザービリティの記録による操作の改善、あるいは各種スパイ行動などにも使えます。 実際のデモは以下から。 Record mouse movement using Javascript and AJAX http://pure.rednoize.com/movelogger/ 上記ページで四角いキューブの辺の周囲をマウスでなんどかぐるぐると回転させてみた
AJAXアプリケーションのデバッグ、JavaScriptログ出力、Log4js - FAX
リンク Ajax非同期通信アプリケーションのデバッグを行う際に、以下ライブラリを利用し、ログ出力を行ないながら動作詳細を確認した。フランス製。 Log4js 前提クライアントとサーバーの通信をリアルタイムでログ出力を確認したい。Venkmanでステップ実行を行うと、タイムアウトが発生する。また正確なタイミングで振る舞いを確認できない。debug.jsは、まとめてフラッシュするため利用は難しい。 特徴ログを出力すると、リアルタイムに行が増えていく。ソートや、フィルタも存在する。debugや、infoなどのカテゴリ分けがある。ログと一緒に、オブジェクトインスペクタも表示できる。 利用手順ダウンロードし展開されたファイル全てを一つのディレクトリへ配置。HTMLヘッダに、以下を記述。 ログ出力したい部分に、以下を記述。debug、info、error、warnの4つのメソッドがある。フランス語、N
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」
TurboWidgets