最速インターフェース研究会 :: 遅延評価を使ってSjaxをAjaxに変換する方法
継続を使ってSjaxをAjaxに簡単に変換する方法 http://d.hatena.ne.jp/llamerada/20070220/1171984586 を見て。こんなのはどうだろう。 ユーザーからの入力や、非同期のHTTPリクエストなんかを、具体化されてないオブジェクトとして捉えて、それらを受け取った関数側が遅延オブジェクトを具体化するためのリクエストを投げて再試行する。ネストが深くならないですむ、同期処理で書く場合との変更点が少ない、あるいは完全に差異を無くすことができる。 alert(args)のコメントを外せば、引数が具体化されていく様子が分かるはず。 Function.prototype.receive_lazy = function(){ var orig = this; return function(){ var thisObj = this; var me = argu
最速インターフェース研究会 :: Ajaxを使ったシンプルなチャット
を作ってみました。 http://la.ma.la/misc/ajaxchat/ サーバーサイドのソースは5行です。 http://la.ma.la/misc/ajaxchat/write.txt CGIを使うのは書き込みの時だけで、表示はXMLHttpRequestを使ってログファイルを直接読み込みます。更新は差分取得で転送量とサーバー負荷を減らしています。 IEとFirefoxでしか動きません。 Operaはリクエストヘッダのセットが使えないので無理。 仕組み -HEADリクエストでログファイルのサイズを取得 -ファイル末尾1KBを取得 -レスポンスヘッダから最終更新日と現在のファイルサイズを保存 -If-Modified-SinceとRangeヘッダをセットして定期リロード とりあえずこれだけです。参加者表示も何もつけてませんが、改造の雛形にでもどうぞ。 Range付きのリクエストは
最速インターフェース研究会 :: 全てのWeb開発者必見：fluxiom
fluxiomである。 http://www.fluxiom.com/ fluxiomはRuby on Railsで作られた、ソーシャルとタギングを備えたオンラインファイラーというようなものらしい。まだサービス開始していないが、デモムービーが公開されている。 fluxiomを開発している会社はscript.aculo.usの開発元ということであるので、 当然「Rails + prototype.js + script.aculo.us」で作られている、ということになるのだろう。 と思ってみたら、開発者のBlogに追記されていた。「Ruby on Railsで作られていて、Flashは一切使っていない」ということである。 http://mir.aculo.us/articles/2005/11/24/fluxiom script.aculo.usは「web2.0 JavaScript」だそう
最速インターフェース研究会 :: ページレンダリングを妨げないdocument.writeの実装
とてもシンプルに自分自身が属する script 要素を取得 http://d.hatena.ne.jp/amachang/20061201/1164986067 document.writeをDOM仕様にする http://nyarla.net/blog/javascript-tips1 あたりに着想を受けて、作ってみました。 http://la.ma.la/misc/js/lazy_writer/ 特定のscript src内のdocument.writeをピンポイントに置き換えることができます。 制限事項としては、document.writeを使ってscriptタグを生成するようなコードの場合、IEではinnerHTMLにscriptを書いても実行されないという仕様があるので実行されません。その点を除けば、IFRAMEをdocument.writeで挿入するような、良くある広告系のdo
最速インターフェース研究会 :: Firefoxの拡張MozLabの中に含まれるMozReplがヤバすぎる件について
MozLabという拡張を昨日知ったのですが http://dev.hyperstruct.net/trac/mozlab この中に含まれているMozReplというのがヤバい。Firefoxにtelnet接続できるようになる。 とりあえずRubyで書いた簡単なサンプル、今見ているページをリロードするだけ。 require 'net/telnet' telnet = Net::Telnet.new({ "Host" => "localhost", "Port" => 4242 }){|c| print c} telnet.puts("content.location.reload(true)") telnet.close ひたすら自分が見ているURLとページタイトルを記録する系とか簡単に作れそう。 今見ているページのURLとタイトルを取得するサンプル。 require 'net/telnet'
最速インターフェース研究会 :: Firefoxでテキストをクリップボードにコピーする方法
動作デモ http://la.ma.la/misc/js/setclipboard_for_firefox.html Firefox1.5 + FlashPlayer8.5で動作確認してます。Opera8.5では動いたがOpera9では動作せず。Safariは知らない。FlashPlayerのバージョンによっても何か違うのかもしれない。 元ネタ http://a-h.parfe.jp/einfach/archives/2005/0706043145.html IEではデフォルト設定でブラウザからクリップボードの読み書きができる、というのは割と有名な話ですが、Flashを使うとIE以外でもクリップボードにテキストをコピーすることができます。上書きのみで読み込みはできないようなので多少は安心です。(クリップボードが勝手に置き換わってしまう、という悪戯はできる) で、このFlashを使ったクリッ
del.icio.usに特定のタグを付けて一発ブックマークするブックマークレットを作る奴
これは何？ del.icio.usに特定のタグを付けて一発ブックマークするブックマークレットを作ります。 複数タグはスペース区切りでいけます。notesには選択文字列が入ります。 なんかウィンドウ開かなくてもimgタグでポストできちゃうみたいなんだけど…！
最速インターフェース研究会 :: [Ajax] JSAN構想とリモートデータの取得とUserJavaScript
通常、JavaScriptを使って動的にデータを読み込む際には、データソースが同一ドメイン上にある必要があります。 XMLHTTPRequestを使う場合でもIFRAMEを使う場合でも同様です。 ですが、scriptタグを使う場合に限り、ドメインの制約を受けずにデータを取得することが出来ます。 検索結果をページに貼り付けるJavaScriptなどでよく使われる方法ですが、これを応用して、外部ドメインに置いてあるライブラリやデータを動的に取得するというアプローチを考えています。 同じようなことを考える人はいるもので、CPANのJavaScript版、JSANという構想がuse Perlにポストされています。 http://blog.bulknews.net/mt/archives/001649.html で、先月からずっとライブラリばかり作ってたのですが、 一応、問題なく動くレベルまでは来て
最速インターフェース研究会 :: prototype.jsのObject汚染を回避する方法
かなりターゲットの狭いTips。役に立たない。 prototype.jsというRuby on Railsなんかのフレームワークで使われている有名なJavaScriptのライブラリがあって、これが色々と使えそうな処理を綺麗に詰め込んであり、デファクトスタンダート的な地位を確立しているのだけれど、ちょっと微妙だなーと思うところがあって、それはObject.prototypeを拡張してしまう点。 実際の弊害はこういう。 http://d.hatena.ne.jp/nazoking/20050425/1114374966 要は連想配列として使うときに困るって話。 多分prototype.jsはJavaScriptの側でロジックを組むことをあまり想定していないため、この辺の問題にあんまり配慮していないのではないかと思うのだけれど、とりあえず無理やり回避する方法を思いついたので書いてみる。 http:
最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
日本語テキストをテーブルで表示する：高速化バージョン
いやなブログ: 日本語テキストをテーブルで表示するの高速化バージョン。 DOMでのHTML組み立ては非常に遅くてJavaScriptの配列で組み立ててから 一気にinnerHTMLに代入したほうが速い。特にIEの場合は差が顕著、5倍ぐらいは速いはず。 DocumentFragmentを使うという手もあるが、2倍程度にしか速くならなかった。 innerHTMLを使ったほうが良い、というわけではなくて時と場合によりけり。 innerHTMLとappendChildを組み合わせて使うと大体の場合最速。 こういうやつ tmp = document.createElement("div"); tmp.innerHTML = 複雑なHTML; body.appendChild(tmp); body.innerHTML += tmp.innerHTML は絶対に避ける。innerHTMLの読み書きは、ど
最速インターフェース研究会 :: IEでXMLHttpRequestを使えるようにする
もうあんまり需要無いような気もするけど。 IEで「new XMLHttpRequest」と書けるようにするラッパを書いてみた。 XMLHttpRequest for IE http://la.ma.la/misc/js/ie_xmlhttp.html 結構前にIE7(JavaScriptの方)の人が似たようなのを作ってたのですが、 http://dean.edwards.name/weblog/2004/11/ie7-xml-extras/ ふつうに使う分にはこれでも問題はないです。 if(typeof ActiveXObject == "function" && typeof XMLHttpRequest == "undefined"){ XMLHttpRequest = function(){ return new ActiveXObject("Microsoft.XMLHTTP")
最速インターフェース研究会 :: XMLはメタデータというより生データとしての利用価値が高まりつつあり、AjaxによるUIの切り離しがそれを加速する
全部まとめて色々書こうかと思ったのだけれど、どうにも上手くいかないので、少しずつ分割して書くことにする。 まず最初にこれなのだけれども http://johnvey.com/features/deliciousdirector/ これは何かというと「JavaScriptで書かれたdel.icio.us APIのクライアント」である。最初に全てのブックマークを受信して、その後のタグによる絞込みなんかは全てJavaScriptで行う、というものだ。 とりあえず、実際にこのデモを見るのが早いだろう。 http://johnvey.com/features/deliciousdirector/demo.html この方式では、ブックマークの件数が1万件を超えるようなケースになると破綻することがわかっている。 del.icio.usのAPIでは特定のタグを含むブックマークを取り寄せることも出来るので
最速インターフェース研究会: Amazon最速検索を作ってみた
デモここから。 http://la.ma.la/misc/aws/demo.html 説明書はこれ。 http://la.ma.la/misc/aws/ -IE6、Firefox、Opera8で動作確認しています -Safariではスクリプトの動的ロードが出来ない関係で、動きません。 -IFRAME内にパラメタ渡したCGIでscriptタグ生成とかやれば出来ないことも無さそうだが面倒なのでパス。 このエントリで書いた http://la.ma.la/blog/diary_200504140039.htm ＞検索エンジンがJavaScriptで検索結果を出力するインターフェースを備えていれば、CGIが使えないサーバーでも、クライアント側の制御だけで動的に検索結果を読み込むことができるようになります。 この理論を実際に実践してみた、といったところです。 Ajaxというよりむしろ、ブラウザベース
最速インターフェース研究会 :: テンプレートエディタを作ってみた
こんなのを作ってみました。 http://la.ma.la/misc/tmpledit/ HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。 とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。 こういう感じの作るやつ、と言えばわかりやすいかも。 http://d.hatena.ne.jp/kamioka/20050609/1118324980 まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。 CSS適用ルーチンはこれの丸パク
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
