最速インターフェース研究会 :: JavaScriptの関数の結果を期限付きでキャッシュする
処理に時間がかかるけれども、一定時間は結果が変わらないような関数の結果をキャッシュしたい。 例えばgetElementsByTagName("*")なんかを頻繁に呼び出すようなコードがあったとして、結果をキャッシュしたいけれど画面描画が発生すると使えなくなってしまう。setTimeoutで0ミリ秒後にキャッシュを消す処理を入れておいて、画面描画と関係のある処理はタイマーで実行するような制約を付けてコードを書けばDOMが絡む処理の結果もキャッシュすることができる。というようなケースに使えるような気がする。 Function.prototype.timed_memoise = function(ms){ var self = this; ms = ms || 0; var memo = {}; var clear_q = false; function clear_cache(){memo={
最速インターフェース研究会 :: そろそろライブドア事件について一言いっておくか
今から1年前2006年1月16日はライブドアに強制捜査が入った日で、その日自分が何をしていたかというと社長面接を受けに行っていた。たかだか面接に大げさなもので、六本木ヒルズの周辺には報道陣が詰めかけており、張り詰めた空気の中、何も知らずに六本木ヒルズに突入すると、こんな状況ですいませんと茶菓子も出されずに真っ直ぐ家に帰された。全くひどい会社である。俺の面接と強制捜査とどっちが大事なのか、冷静に考えてみれば分かる話である。 (以下ノンフィクションに一部誇張を交えてお送りします) 強制捜査なんてものは言ってしまえば良くある話で、それに対して俺が面接を受けるとなると世紀に一度あるかないか惑星直列ぐらいの確率である。てっきり報道陣もそっちを取材しに来たのかと思ったらスルーである。全力スルーである。この手の事件に関するマスコミのスルー力ときたら大したもので、唯一かまってくれたのはスポニチだけだった。
最速インターフェース研究会 :: livedoor Wirelessのラの字も考えてないWeb屋のネタ帳の誤読記事
livedoor wireless、MACアドレスによる認証を開始--ニンテンドーDSにも対応 http://japan.cnet.com/news/com/story/0,2000056021,20339983,00.htm に関して、Web屋のネタ帳の人が 「セキュリティのセの字も考えてないライブドアの公衆無線LANサービス」という記事を書いているのですが、 http://neta.ywcafe.net/000698.html 何か色々間違ってると思うので、書いておきます。これはライブドアの中の人じゃなくて、1ユーザーとしての立場で書いてるのと、あとネットワーク管理者でもなんでもないんで、そこら辺信頼できるかどうかは各自ご判断ください。 まず、実際自分で試してみたのですが、これは接続したい機器のMACアドレスを事前に登録しておくとWEB認証をスキップできるというもので、そもそもWEPキ
最速インターフェース研究会 :: ページレンダリングを妨げない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
最速インターフェース研究会 :: del.icio.us買収と1470.netのExit戦略
すでにあちこち書かれているけど米Yahoo!がdel.icio.usを買収した。 del.icio.usは良くあるネットベンチャーではない。買収されるために作った会社、というのは、まあ実際そうだろう、実際そうだろうけれどもそんなこと言うやつはスーツ脳だ。スーツ脳の恐怖だ。 del.icio.usは完全独立中立国家だった。 - 概要を取得してAdsenseを貼り付ける、であるとか。 - AmazonのURLならアソシエイトIDを付加する、であるとか。 そういうことをしない。 AmazonのURLは正規化したほうがいいに決まってるのにそういう特別扱いをしない。クロールをしない。ブックマーク以外のデータを保持しない。URLのMD5ハッシュ値をキーにしていてdel.icio.usにURLを教えずにそのページに関する情報を取得することが出来る(これは、だいぶ昔に書いた)。完全一致の取り出しに特化して
最速インターフェース研究会: Synergyの裏設定「switchDoubleTap」を知らない人が多すぎる
LANで繋がっているマシンのマウスとキーボードを共有してWindowsとMacをつなげたりといったことが出来るSynergyというツールがあるのですが、Synergyの設定ファイルに section: options switchDoubleTap = 250 end などとやると、デスクトップの端っこをコンコンと二回タップしたときだけ画面が切り替わるようになります。切り替える際に一手間増えることになりますが、そんなに頻繁に画面を切り替えるわけでもないのでさほど気になりません。WindowsのサーバーだとOptionsの中に項目があります。トラックボールを使うようになってから暇なときはボールを勢いよく転がして遊んでいるのですが、デスクトップが頻繁に切り替わってしまって鬱陶しいことになります。また、最近ではホイールを使うのでスクロールバーを使わないという人も多いかとは思いますが、スクロールバ
最速インターフェース研究会 :: Firefox2.0に任意のRSSリーダーを追加する方法
Firefox2でGoogle Reader をRSS reader として追加する方法 参考: 最速インターフェース研究会 :: Firefox2.0に任意のRSSリーダーを追加する方法 Adding feed readers to Firefox - MDC bookmarkletから追加するという手もあるのだけれど、それだと複数のfeedを提供しているペ
最速インターフェース研究会 :: SafariのDate#setMonthがバグってたのでprototype上書きで対処してみる
JavaScriptのDateオブジェクトはdate.setMonth(-1)とやると、前年の12月にしてくれて大変便利なのですが、Safariで上手く動かなかったりするようなのでprototype上書きで対処してみました。 // fix safari's Date#setMonth (function(){ var set_month = Date.prototype.setMonth; Date.prototype.setMonth = function(num){ if(num <= -1){ var n = Math.ceil(-num); var back_year = Math.ceil(n/12); var month = (n % 12) ? 12 - n % 12 : 0 ; this.setFullYear(this.getFullYear() - back_year)
最速インターフェース研究会 :: 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'
最速インターフェース研究会 :: SafariのAjaxの文字化けをクライアント側だけで対応するバッドノウハウ
SafariでXMLHttpRequestのresponseTextが文字化けするという話。 http://blog.33rpm.jp/garbled-on-safari.html 最近のバージョンだとcontent-typeがちゃんとしてれば化けなかったような記憶があるけど、まあともかくとして、Safariで文字化けするのはJavaScript側だけで対処することができたりする。 http://kawa.at.webry.info/200511/article_9.html これ読んでほんとかよ、って感じだったんだけど案外役に立った。livedoor Readerで使われてたり。 実際に使われてるコードはこんなの。 if(browser.isKHTML){ ajax.filter.add(function(t){ var esc = escape(t); return(esc.index
最速インターフェース研究会 :: OperaでJSONPを非同期リクエストする
JSONP が Opera だと非同期処理できない http://d.hatena.ne.jp/secondlife/20060906/1157515075 に書かれているとおりOperaだとscript要素を足した瞬間にJavaScriptの実行が止まって、ロード完了まで後続のスクリプトが実行されなくなります。 サンプル http://la.ma.la/misc/js/opera_jsonp_test.html そこで、リクエストの度にダミーのIFRAMEを作って、そのIFRAME内のcontentWindowで実行するという方法を試してみました。 IFRAME内でJSONをロードするサンプル http://la.ma.la/misc/js/iframe_jsonp_request.html なんかIEで動かないっぽいけど気にしない。相変わらずタイマーは停止しますが、appendChil
最速インターフェース研究会 :: history.backが成功したかどうかを判別する
今も昔も大変よく使われている古典的JavaScriptの一つjavascript:history.back()なんですが、実際に戻る操作が成功したのかどうかを判別することができません。タブブラウザなんかを使っててミドルクリックで新規タブで開いてたりすると、history.backをクリックしても無反応で何も起こらない、なんてことよくありませんか？ そんなわけなのでhistory.backを実行後にページ移動が発生しているかどうかを監視して、戻るに失敗したときに特定の処理を発生させることができるような関数を作ってみました。 function try_back(errback){ var bs = false; Event.observe(window,"unload",function(){bs=true}); Event.observe(window,"beforeunload",func
最速インターフェース研究会 :: 実践JavaScriptで配列をシャッフルする方法リファクタリング
JavaScriptで配列をシャッフルする話を見て、そういえばArray#shuffleは以前書いた記憶があるなーと思って調べてみたらコピペだった。 http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html Fisher-Yatesというアルゴリズムだそうです。 Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } a = [1,2,3,4,5]; a.shuffle() // 3,1,5,2,4 a // 3,1,5,2,4 ごく普通に実装
最速インターフェース研究会 :: JavaScriptでDebugScreenを表示する
デモ、IEかFirefox http://la.ma.la/misc/js/debugscreen/ IEとFirefoxではwindow.onerrorを設定するとJavaScript全体のエラーを補足できます。さらに返値をtrueにすると標準のエラーダイアログを抑制できます。 簡単なサンプルはこんな感じ。 window.onerror = function(mes,file,num){ alert([ "file : " + file, "line : " + num, "message : " + mes ].join("\n")); return true; } あまり細かい情報を取得できるわけではないので、例外処理に使ったりはできないのですが、エラーメッセージを親切にしたりできるかもしれません。 そんなわけで、ファイル名と行番号わかるなら自分自身をXMLHttpRequestで受
最速インターフェース研究会 :: Shibuya.js #2 でしゃべってきました
前回に続き、shibuya.jsでしゃべってきました。 プレゼン資料はこちら。諸事情により少しフォントが小さめです。 http://ma.la/files/shibuya.js/techtalk2.html JavaScriptが無効でも閲覧できるように画像に変換しておきました。 いくつか補足 - APIは最初から全部できてるわけじゃなく、必要に応じて拡張していく感じ - 最初はダミーのJSONを読み込ませたりする - プログラマはクライアント側一人、サーバー側一人、の計二人 - UIを作るのは分業できない気がする。 - 「とりあえず動く」状態ものは10日ぐらいで出来た。3月の頭ぐらい。 - プロトタイプを発展させてって、そのまま本番用になった。 - APIは今のところPlaggerで使ってる例もあるけど(Plagger以外で使ってる例ないけど)、人間向けのサーバーにアクセスが来るのは良く
最速インターフェース研究会 :: [Ajax] location.hashを使ったセッション復元
最近になってようやくJavaScript関係、動的ロードを使ったテクニック等について 話せる相手ができまして、、なかなか充実しています。 Gmail、GoogleMapsのような画面遷移なしの高速なナビゲーションが注目されています。 サイトが特定のタスクに対して特化している場合、JavaScriptを使ったインターフェースの最適化が非常に有用であるのは間違いありません。 ブラウザ上で動作するリッチクライアントとしてはFlashが圧倒的に有名ですが、Flashは、ブックマーク、ブラウザの戻る進む機能、文字の拡大縮小、などのブラウザが本来備えている機能が使えないため、ユーザビリティ研究者の間では嫌われ者です。 http://d.hatena.ne.jp/nazoking/20050226 というわけで、AjaxがFlashのような使い方をされないような実装例を考えてみたいと思います。 一つは、
最速インターフェース研究会 :: JavaScriptで差分リロードなチャット
3年と少し前から作っているチャットのリファクタリングをしています。 http://ma.la/mirrorman/wiki.cgi/%e5%8b%95%e7%9a%84%e3%83%ad%e3%83%bc%e3%83%89 ここに書いてあるチャットのことで、当時はNN4でも動くように、けっこう苦労した覚えがあります。 フレームを使わないスタイルシートでのレイアウトへ変更、 オブジェクト指向化、イベント定義を外部記述へ変更など、大幅に直しています。 ベースの部分は3年前からほとんど変化ありません。 IFRAMEで通信しているので、Ajaxとは違うと思いますが、XMLHTTPを使わなくても昔から動的ロードは出来たよ、ということで。 最近はDHTMLを使ったチャットも多くなっているので、 目新しくはなくなってしまっているかもしれません。 まだ何かと中途半端ですが、とりあえず、動作デモとして設置し
JavaScript::DebugScreen
デバッグに役立つかもしれないライブラリ 公開 : 2006-01-15 更新 : 2006-01-16 License : Same as Perl See also : http://www.bigbold.com/snippets/user/ma.la サンプル ダイアログはダブルクリックで消えます。 Firefoxだとeval系の行番号が正確に出ません 伝家の宝刀 Null またはオブジェクトではありません IEだと外部jsファイルのエラーを補足できません 使い方 debug.js debug.css ie_xmlhttp.js ファイルを保存してheadタグの中にこんな感じで貼り付ける。 <link rel="stylesheet" href="debug.css"> <script type="text/javascript" src="ie_xmlhttp.js"></scri
最速インターフェース研究会 :: CPAN最速検索
作りました。 http://cpan.ma.la/ Firefox用パネル。ブックマークしてプロパティ→サイドバーに読み込む。 http://cpan.ma.la/panel.html 全モジュールのリストを改行で区切ったテキストファイルを受信してクライアントサイドで検索させています。クライアントサイドで検索させているのでサーバー負荷は全くかかりません。 仕組み省メモリ、高速に動作するように工夫してあります。 - 配列に変換せずに一つの巨大な文字列から検索 → 切り出し。 - クロージャで次の検索結果を取得する関数を保持しておいて、描画が必要になった時点で検索を実行。 -- その代わりにトータルのヒット件数がわかりません。 今の所の機能- 上下で選択、エンターでperldoc表示、マウスクリックでもperldoc表示。 - 正規表現がおかしくなければ、そのまま使えます。 -- 例えば \d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最速インターフェース研究会 :: mixiのポータル化を阻害するGreasemonkeyスクリプト