最速インターフェース研究会 :: ページレンダリングを妨げない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'
最速インターフェース研究会 :: そろそろライブドア事件について一言いっとくか
ライブドアの件で最速に一言いわせてもらう 最速インターフェース研究会 :: そろそろライブドア事件について一言いっとくか2月1日付けで株式会社ライブドアに就職しました。 最速な人が来た。 - にぽたん研究所 弊社に、最速インターフェース研究会の片栗 X こと mala らんが join しました。 おめでとうございます！ 思えば（検閲されました。）で、（特捜部に消されました）とかで（Z部さんからクレームがきました）ホルモンカワユスだったりしたわけですが、実にめでたいです。 そして（id:jnaoyaに怒られました）ですよね？ じゃなーい！ せっかくライブドア入りたい！をわがまま言って作ってもらったのに、ちっとも活用されていないじゃないですか！ はてな入りたい！とかSixApart入りたい！ (その後)とか活用されまくっているというのに！！！！ ひどいひどいひどい！ さっきはてなダイアリー市
最速インターフェース研究会 :: 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
デバッグに役立つかもしれないライブラリ 公開 : 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
最速インターフェース研究会 :: 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を使ったクリッ
最速インターフェース研究会 :: 編集インターフェースを考える
行番号付きのエディタのサンプル。 http://la.ma.la/misc/edit.html IEでしかまともに動かない。 Firefoxの場合、textareaのonscrollを取ってくれないので、onkeydownで動くように。ただし、行番号ずれる。 wikiのエディタとして、変更行強調や、検索ハイライトなどと組み合わせることで有用に使えるようになる予定、いまのところ実用性なし。 座標で行番号を計算しているので、折り返しが入ると2行として扱われてしまう。これは痛い。気持ち悪い。行番号の意味がさほどない。 しかし、これを回避するためにはどの位置で論理的な改行がされているのかを調査する必要がある。標準のテキストエリアじゃどうやっても無理だ。 IEとmozilla限定のhtml編集コンポーネント有効にしてbrタグの回数カウントしてやるしかなさそうだ。 あまり気が進まないが、どのみちキーワ
最速インターフェース研究会 :: 全ての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」だそう
最速インターフェース研究会 :: Tropyクローンを作った
なんかJavaScriptで作れ、みたいな圧力がかかったので作ってみた。 http://la.ma.la/misc/tropix/ (追記：ソース) http://la.ma.la/misc/tropix/tropix.zip 元ネタこれね http://www.hyuki.com/d/200511.html#i20051105203040 最速版Tropyということで、サーバー負荷と表示速度の改善を主に。 JavaScript無効だと表示すらできないのであんまりよろしくないんだけど。 ---- 技術的なこと - サーバーサイドはRubyで書いた。90行ぐらい。普通のCGI。 - ランダムなページのアドレスをCGIに問い合わせて、テキストはAjaxで直読みする。 - 履歴を10件分保持するので、行き過ぎても戻れる。 - サーバーにとてもやさしい。 - ページリストを取る際に履歴をPOSTで
最速インターフェース研究会 :: Amazonのカートが仕様変更してるっぽい
http://www.drk7.jp/MT/archives/000942.html エラー画面がしばらくほっとけば直るようにも読めるんだけど多分仕様変更だと思う。なんかAmazletのカートに入れるボタン動かなくなってるし、はてなのも動かなくなってるな。他にも動かなくなってるアプリがちらほら。GoogleのデフォルトエンコーディングがUTF-8になったときのことが思い出されるような。 あくまでフォームを勝手に呼び出してるだけなので、いつ動かなくなってもおかしくはないんだけど、こういう些細な変更でも告知とか出してくれたほうが親切な気がするんだけど単に担当者がいないんだろうな。 Amazonとしては「API公開してるんでそっち使ってね、仕様変更はこっちの勝手」とか、そういう立場なんじゃないかと思う。似たような事例としてはRSS配信してるからデザインがダサくてもオーケーとか。そういう。 外部と
最速インターフェース研究会 :: [速報] GoogleのRSSリーダー（β版）、早速真似して作ってみた
GoogleからRSSリーダーがリリースされましたね。 http://www.google.com/reader/ ソース読むのとか面倒なんで真似して作ってみました。だいたい6時間ぐらいで出来た。 http://la.ma.la/roll.html このBlogで使ってるjsファイルをちょっといじって使ったので、キャッシュ利いてて動かない場合はリロードしてみてください。 Firefoxだとアニメーションがやや重い。アニメーションを無くせばもっとサクサク動くんだけどGoogleReaderよりは軽いんじゃないかと思う。 Operaはなんかスクロールしていくと強制終了します。アニメーションさせつつ、上下の要素を継ぎ足すようにしてやれば多分大丈夫だとは思うけど面倒なので現時点ではそこまでやってない。 あとはIEとFirefoxではホイールを使ってページ切り替えられるようになっています。 Goog
最速インターフェース研究会 :: 実践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
最速インターフェース研究会 :: 三項演算子の正しい書き方ってあるのだろうか
最近は、三項演算子を多用しているのだけれど、やっぱり人が使ってるのを見ると気持ち悪い。 http://d.hatena.ne.jp/brazil/20050921/1127314004 Test.Builder.globalScope = typeof JSAN != 'undefined' ? JSAN.globalScope : typeof window != 'undefined' ? window : typeof _global != 'undefined' ? _global : null; これは解読するのにやたら時間がかかる気がする。コロンの後が値なのか条件なのかわからないからだ。 俺ならこう書く。 Test.Builder.globalScope = (typeof JSAN != 'undefined') ? JSAN.globalScope : (typeof wi
最速インターフェース研究会 :: prototype.jsのObject汚染を回避する方法
かなりターゲットの狭いTips。役に立たない。 prototype.jsというRuby on Railsなんかのフレームワークで使われている有名なJavaScriptのライブラリがあって、これが色々と使えそうな処理を綺麗に詰め込んであり、デファクトスタンダート的な地位を確立しているのだけれど、ちょっと微妙だなーと思うところがあって、それはObject.prototypeを拡張してしまう点。 実際の弊害はこういう。 http://d.hatena.ne.jp/nazoking/20050425/1114374966 要は連想配列として使うときに困るって話。 多分prototype.jsはJavaScriptの側でロジックを組むことをあまり想定していないため、この辺の問題にあんまり配慮していないのではないかと思うのだけれど、とりあえず無理やり回避する方法を思いついたので書いてみる。 http:
最速インターフェース研究会 :: 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")
最速インターフェース研究会 :: beyond.jsってなに？の巻
こどもてれびに対抗して巷のJavaScripterの間で最新流行のbeyond.jsってライブラリの解説をします。 beyond.jsとは 知らないやつはモグリといっても過言ではないぐらい有名なライブラリです。 嘘です。どれぐらい使われているのかは良くわかりません。 Ajaxとか全然関係なくて、純粋にJavaScriptのライブラリです。 beyond.jsはここからダウンロードできます。 http://w3future.com/html/beyondJS/ Beyond JS is a Javascript library that lets you write Javascript unlike anything you've ever written. Your code will never be the same again. It contains both useful, f
最速インターフェース研究会 :: JavaScriptのデザインパターン - Singleton
JavaScriptじゃねえと書けねえよ、ってやり方でデザインパターンを実装してみるコーナー。とはいってもデザインパターンとか良くわからないので適当に覚えながら作る。 間違ってる箇所あったらつっこんでくれるとありがたいです。 わかりやすい文章を書く能力が欠如してるのでデザインパターンって何だとかそういうのはこっち参照。 http://d.hatena.ne.jp/naoya/20050813/1123924312 JavaScriptのコンストラクタはPerl同様自在に定義できます。returnでobjectを返してやれば、newの結果としてそいつを使います。 普通にシングルトンなクラスを実装するにはこんな感じだと思います。 function Singleton(){ var self = arguments.callee; if(self.instance == null){ this.
最速インターフェース研究会 :: テンプレートエディタを作ってみた
こんなのを作ってみました。 http://la.ma.la/misc/tmpledit/ HTMLソースを貼り付けて、ページの構造をダンプすることが出来ます。 とりあえずどんな感じかわかるように、このBlogのアドレスを入れてあるので取得ボタンを押すと出て来る様になってます。XMLHTTPでソース受信してるので外部ドメインのソース取得は無理です。ローカル保存+IEの場合は外部ドメインのソースも解析できます。 こういう感じの作るやつ、と言えばわかりやすいかも。 http://d.hatena.ne.jp/kamioka/20050609/1118324980 まあ、これがやりたかっただけなのですが、ついでにCSSの編集もできるようにしてみました。CSS編集モードに切り替えると、タグ名とクラス名とIDを確認しながらプレビューしつつその場でCSSを編集できます。 CSS適用ルーチンはこれの丸パク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォントブラウザ （激しくIE限定）