最速インターフェース研究会 :: 編集インターフェースを考える
行番号付きのエディタのサンプル。 http://la.ma.la/misc/edit.html IEでしかまともに動かない。 Firefoxの場合、textareaのonscrollを取ってくれないので、onkeydownで動くように。ただし、行番号ずれる。 wikiのエディタとして、変更行強調や、検索ハイライトなどと組み合わせることで有用に使えるようになる予定、いまのところ実用性なし。 座標で行番号を計算しているので、折り返しが入ると2行として扱われてしまう。これは痛い。気持ち悪い。行番号の意味がさほどない。 しかし、これを回避するためにはどの位置で論理的な改行がされているのかを調査する必要がある。標準のテキストエリアじゃどうやっても無理だ。 IEとmozilla限定のhtml編集コンポーネント有効にしてbrタグの回数カウントしてやるしかなさそうだ。 あまり気が進まないが、どのみちキーワ
最速インターフェース研究会 :: キー割り当て用ライブラリを作った
依頼を受けて作ってみた。 http://la.ma.la/roll.html http://la.ma.la/js/hotkey.js j,kでスクロールできる。 使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。 全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。 追加したコードはこんな感じ。 var kb = new HotKey; kb.add(["j","2","down"], functio
最速インターフェース研究会 :: 実践JavaScriptリファクタリング、その2
連載すんの？ リファクタリングとか嘘で実は実践ビルトインオブジェクトハックなんだけど。 例題 配列 a = [3,5,4,2,1] から一番小さな値と、一番大きな値を取り出すにはどうすればいいか。 多分昔はこんな風に書いてたと思うんですよ。 a = [3,5,4,2,1]; for(i=0;i<a.length;i++){ if(i == 0){ min = a[0]; max = a[0]; } if(min > a[i]){min = a[i]} if(max < a[i]){max = a[i]} } 模範解答として、後先考えないやり方を提示しておく。 a = [3,5,4,2,1]; min = a.sort().shift();// 1 max = a.sort().pop(); // 5 短い。ただし、これをやるとaの内容は並べ替えられて最初と最後の要素が取り除かれる。 a /
最速インターフェース研究会 :: 実践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
最速インターフェース研究会 :: 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")
最速インターフェース研究会 :: むしろdocument.writeの方を書き換えて遅延ロードを実現する
一つ前のエントリの続き。 document.writeを使うデメリットは一個前に書いたとおり、jsファイルを置いてあるサーバーのレスポンスに引きずられてページの描画が遅くなる、ということなんだけど 広告にせよRSS貼り付けにせよ、どれもこれもdocument.writeで表示するHTMLを書き出すものばかりなので、むしろdocument.writeの方を書き換えてみることにした。 ビフォー http://la.ma.la/misc/js/feed2js_old.html アフター http://la.ma.la/misc/js/feed2js.html Feed2JSというサービスを使っている。 http://jade.mcli.dist.maricopa.edu/feed/ 本来は、Scriptタグの挿入位置にRSSやAtomフィードを貼り付けるサービスだ。前者が本来の使い方で、docu
最速インターフェース研究会 :: IEにFirefox風検索バーをくっつけるBookmarklet
というのを作ってみました。 このページで試してみる(IE限定) ローマ字のまま検索できるので、例えばmohicanでモヒカンにヒットします。 例えばこんな具合。 http://la.ma.la/misc/demo/isearch.htm 上記ブックマークレットで他のページでも動かせますが、リファラが付くとイヤなのでやめてください。いきなりクッキー盗んだりするスクリプトに化ける可能性があるので、ローカルに保存して動作させることを推奨します。 で、ファイル保存してJavaScript書き換えてリンクバーに登録とかいう作業は非常に面倒くさいと思うので、ブックマークレットで使うjsファイルの中にWSHを使ったインストーラーを書いてみた。 ---- インストール方法 http://la.ma.la/misc/bookmarklet/isearch.js このファイルを適当なフォルダに保存してダブルク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pure JavaScriptによるQRコード生成ライブラリ