Index of /js
Parent Directory README.html Text/ array_extra.js date_extra.js dom.js extra.js function_extra.js hotkey.js ie_xmlhttp.js json.js merge.txt number_extra.js object_extra.js profiler.js regexp_extra.js roma.html roma.js site.js string_extra.js timer_extra.js blogで使っているJavaScriptです。使ってないのもあります。 ie_xmlhttp.js - IEで、ほぼ完全互換のXMLHttpRequest json.js - object.toJSON()でJSONダンプ出力、デバッグに便利 roma.js - アルファベットから曖昧
最速インターフェース研究会 :: Shibuya.js #2 でしゃべってきました
前回に続き、shibuya.jsでしゃべってきました。 プレゼン資料はこちら。諸事情により少しフォントが小さめです。 http://ma.la/files/shibuya.js/techtalk2.html JavaScriptが無効でも閲覧できるように画像に変換しておきました。 いくつか補足 - APIは最初から全部できてるわけじゃなく、必要に応じて拡張していく感じ - 最初はダミーのJSONを読み込ませたりする - プログラマはクライアント側一人、サーバー側一人、の計二人 - UIを作るのは分業できない気がする。 - 「とりあえず動く」状態ものは10日ぐらいで出来た。3月の頭ぐらい。 - プロトタイプを発展させてって、そのまま本番用になった。 - APIは今のところPlaggerで使ってる例もあるけど(Plagger以外で使ってる例ないけど)、人間向けのサーバーにアクセスが来るのは良く
最速インターフェース研究会 :: 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={
最速インターフェース研究会 :: [Ajax] JSAN構想とリモートデータの取得とUserJavaScript
通常、JavaScriptを使って動的にデータを読み込む際には、データソースが同一ドメイン上にある必要があります。 XMLHTTPRequestを使う場合でもIFRAMEを使う場合でも同様です。 ですが、scriptタグを使う場合に限り、ドメインの制約を受けずにデータを取得することが出来ます。 検索結果をページに貼り付けるJavaScriptなどでよく使われる方法ですが、これを応用して、外部ドメインに置いてあるライブラリやデータを動的に取得するというアプローチを考えています。 同じようなことを考える人はいるもので、CPANのJavaScript版、JSANという構想がuse Perlにポストされています。 http://blog.bulknews.net/mt/archives/001649.html で、先月からずっとライブラリばかり作ってたのですが、 一応、問題なく動くレベルまでは来て
Amazon最速検索 説明書
デモ兼ダウンロード βバージョン β以前 XSLファイル 特徴 JavaScriptだけで動いています。 サーバーサイド処理は一切ありません。Amazonと直結です。 ローカルディスクに保存してもそのまま動きます。 だからどうしたという話ではありますが、面白いのはそこです。理解しろ。 Safariでは動きません 使い方 単語入れて検索。 続きがある場合は、続けてエンターを押すと、次の10件を読み込む。 動作の仕組み 簡単に書くと、検索実行されるたびにscriptタグを動的生成してAmazonウェブサービスにリクエストを発行、Amazonの側でXSLTによって生成されたJavaScriptのコードを実行して画面に検索結果を追加しています。 ただし、Amazonの側では単純なデータを返すのみで、実際の画面の制御は全て本体HTML側のJavaScriptに記述しています。 JavaScriptの
Amazon最速検索 β以前
説明書 (2005-07-03更新) 「もっと探す」には同じ条件で検索してください。次の検索結果が読み込まれます。 連続して検索できますが、前回の検索実行から1秒のウェイトがかかります。 上下キーで検索の種類を指定することが出来ます。 多分メタ検索エンジンか何かに進化する予定です。
Amazon最速検索β
説明書 (2005-07-31更新) 「もっと探す」には同じ条件で検索してください。次の検索結果が読み込まれます。 連続して検索できますが、前回の検索実行から1秒のウェイトがかかります。 作者名、出版社名をクリックで検索できます。 上下キーで検索の種類を指定することが出来ます。 サイドバーの商品詳細の上でホイール回転で前後商品移動。 ドラッグで商品をまとめて選択/解除できます。 選択した商品はまとめてAmazonのカートに入れたりカスタム表示したり。 フィルタは検索結果の絞込みです。ローマ字のまま検索できます。商品名、作者、製造元が対象で、発売日でソートされます。 これは何 Amazonウェブサービスを利用して作った検索ツールです。 ベータです。不具合とかあると思います。 全部JavaScriptで作られています。ローカルに保存しても動きます。 多分メタ検索エンジンか何かに進化する予定です
最速インターフェース研究会 :: Function.prototypeを拡張して遅延実行を実現する
JavaScriptにおいて関数というのはFunctionオブジェクトで、他のビルトインオブジェクトと同様に、組み込みのメソッドがある。これがapplyとcallしかないのだけれど、こんな感じに使う。 func.apply(thisObj,arguments) func.call(thisObj,arg1,arg2,arg3) thisObjには、その関数内で「this」として使うオブジェクトを指定する。applyの第二引数はargumentsオブジェクトを指定する。配列か、現在実行中の関数のargumentsオブジェクトを丸ごと別の関数に引き渡せる。つまり引数の長さが良くわかってなくても使える。 callは代わりに func.apply(thisObj,[arg1,arg2,arg3]) と書けるので、実はいらないんじゃないかと思う。 これらは多分、ふつうにJavaScriptを書く上で
『Amazon最速検索β』
アップしました。まだベータです。 http://la.ma.la/misc/aws/beta.html 早いうちにECS4に対応しようかと思ってたのですが、先にユーザーインターフェースのほうに色々手を加えました。ファイルサイズがやや大きくなってますが、ローカルにダウンロードしても動かしやすいように1ファイルにしました。 主な変更点 -作者、出版社で検索結果を辿れるようになった -商品をドラッグで選択、まとめてカートに入れる機能 -カスタム表示機能 -検索結果を絞り込み -Firefoxのクイックサーチに対応 -その他いろいろ。 Firefoxの「この検索にキーワードを設定」で登録できます。 こんな感じで。 http://la.ma.la/misc/demo/quicksearch.htm なにげにこの機能、すごく便利だと思う。検索プラグインよりもこっちの方がいい気がする。というわけで、一応
最速インターフェース研究会 :: ライブドアのテクノロジーセミナーでしゃべってきました
昨晩はライブドアで開催されたテクノロジーセミナーで「Technologies for UI」という題でプレゼンをやりました。 発表資料はpdfかhtmlで公開する予定ですが、とりあえずテキストだけ先にアップしておきます。 http://ma.la/files/livedoor/seminar2006/seminar.txt プレゼンツールがFirefox専用だったりするので、これも少し手直しして公開予定です。 こういう機会があるたびにプレゼンツールを作ってるような気がします。 ---- 追記:12/15 ライブドアのtechblogの方に発表資料をアップしました。 http://blog.livedoor.jp/techblog/paper/ldtech2006/ 上下カーソルキーでページをめくれます。
最速インターフェース研究会 :: livedoor Readerに何かくっつけるGreasemonkeyの書き方
何かくっつける系のGreasemonkeyが作りやすくなってます。 エントリごとに表示投稿日時が出てる箇所に追加されます。 window.entry_widgets.add("name", generator , "description"); generatorはfunction(feed,item){ ... }のように無名関数で記述できます。feedはフィードに関する情報、itemはその記事のリンクや記事本文が取れます。データ構造はまるごとPerlに書いてあります。 descriptionは省略可能ですが、将来的に何か気の利いたUIでも作ろうかと考えていたりするので入れておくと良いかも知れません。今のところtitle属性に使うようになってます。Greasemonkeyだと日本語が通らないのでエスケープする必要があります。 エントリにくっつけるサンプルエントリごとにlivedoorクリ
最速インターフェース研究会 :: JavaScriptでDebugScreen、その2
Bookmarkletを作った 最速インターフェース研究会を参考にして、ソースを表示するブックマークレットを作った。Firefox のソースを見る機能は、遅いしCGIとかだとリクエストを再送しちゃうし、けっこうダメダメ。これは Javascriptで動的にコードを生成するような場合でも、その時点でのソースを表示できる。 javascript:(function(){var HTMLtext = document.getElementsByTagName("*").item(0).innerHTML;var HTMLline = HTMLtext.split(/\n/);HTMLline = map(HTMLline,function(line,i){ var ln = i+1; var t = mul(" ", 5 - ("" + ln).length) + ln + ": " + esc
最速インターフェース研究会 :: 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で受
最速インターフェース研究会 :: 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
最速インターフェース研究会 :: AutoHotkeyを使ってFirefoxをリロードするだけのexeファイルを作ってみた
エディタの保存と同時にブラウザを自動でリロードさせると開発がはかどって素晴らしいよ、みたいな話をしてたら軽く派生したわけなんですが 自動リロードで開発をアジャイルにするたった一つの方法！ < 31 < July < 2006 < nulog, NULL::something : out of the headphone http://lowreal.net/logs/2006/07/31/1 hail2u.net - Weblog - CSSファイルを保存すると同時にブラウザをリロード http://hail2u.net/blog/webdesign/save-css-file-and-reload-browser.html WSHやRubyからキー操作を送るって方法だと、操作対象のウィンドウをアクティブにしないとキー操作を受け付けてくれなかったりして(もっといい方法あるのかも知れないけど
最速インターフェース研究会 :: Shibuya.jsでしゃべってきました
Shibuya.jsでJavaScriptの開発環境の話なんかをしゃべってきました。 プレゼン資料はこちら。少し内容削ってます。 http://ma.la/files/shibuya.js/techtalk1.html - ページめくり s/a or space - 行移動 j/k or enter Webrickのソースは結構適当でadhocにルールを追加したりしてる。なんかsecondlifeがYAMLで設定かけるようなのを作ったとか何か言ってた。 プレゼン資料だけだとわかりづらい部分があるのであとで個別にエントリを書きます。 [雑談]Opera M2はじめました。 公私ともにメールソフトはBecky! Ver.2 + POPFileを使っていたわけですが、[http://la.ma.la/blog:title]の方の「Operaはメーラー」という大胆発言にやられてしまい、いくつかある
最速インターフェース研究会 :: 萌ディタとSleipnirとWEBrickを使って人のサイトのCSSをリアルタイム編集するデモ
Shiubya.js #1で話したネタですが、Winkでデモを作ってみました。 http://la.ma.la/misc/demo/realtime_cssedit.htm エディタとブラウザが並んでて窮屈ですが、実際はこれを20インチワイド液晶縦置きデュアルでやります。 仕組みは、WEBrickでローカルプロキシを立てて、同名のファイルがローカルにある場合は内容を置き換えて表示する、というもので、CSSやJavaScriptを編集するのに向いています。 プロキシサーバーはPerlで書かれた同等のものがここにあります。 http://www.ornithopter.jp/archives/2006/05/perl_perl.html 自分が使ってるのは必要に応じて行き当たりばったりに拡張していったりするのですが、現時点でのソースを置いておきます。 http://la.ma.la/misc/
最速インターフェース研究会 :: 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では特定のタグを含むブックマークを取り寄せることも出来るので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リボルバー型インターフェースの試作
全体のクリックを監視する例