IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
以下のスクリプトを他のすべてのスクリプトよりも前に読み込む。 var nativeSetInterval = window.setInterval; _setInterval = {}; window.setInterval = function(process, delay) { var entry; if(typeof process == 'string') { entry = new _setInterval.Entry(function(){eval(process);}, delay); } else if(typeof process == 'function') { entry = new _setInterval.Entry(process, delay); } else { throw Error('第一引数が不正です。'); } var id = _setInterv
川o・-・）＜2nd life - bookmarkletの文字数制限を無くす
bookmarkletを作るとき、IEでは500文字ちょい、Firefoxでは2000文字ぐらい(?)の文字数制限がある。また、作った後に一行にまとめたり、デバッグしたりも大変面倒。でもそれがとても簡単な方法でどうにでもなることをインターフェイス！インターフェイス！の人に教わった。 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://example.com/example.js";document.body.appendChild(s)})(); createElementでscript要素を作って、その中にhttp://example.com/example.jsとソースを指定することによってそのJSを実行できる。WinIEとFirefoxでは確認済み。
nlog(n): 汎用ブックマークレットは可能か?
bricklife.weblog."Safari「でも」使える MT Bookmarklet" には、ブラウザの違いを吸収するテキスト選択型のブックマークレットが紹介されている。しかし、残念ながら仕様によりIE6では動作しない。 ブラウザ内のテキストを選択してブックマークレットを起動すると、Javascript の命令をひとつずつ試して、内容が空でなかったらそれを選択テキストとして採用し、その後の処理にまわすというもの。「ブラウザによって選択テキストを取得する関数が違う」という問題を解決しようという試みである。 document.selection() はIE4 で実装された関数 document.getSelection() は NN4 で実装された関数(Mozilla でも可) window.getSelection() は Safari で有効な関数 元ネタはJAVASCRIPT::
CMS researcher - W!ボタンの開発で利用したテクニックと参考文献の紹介
先日公開しました はてなブックマークを拡張するW!ボタンですが、想像していたよりも反響があり驚きました。ありがとうございました。 さて、今回はそのW!ボタンの開発に利用したテクニックの一部と参考文献を紹介します。 W!ボタンの開発には以下が役に立ちました。 JavaScript Shell return文で強制的に制御を返すテクニック The data: URI kitchen Live HTTP Headers Greasemonkey Hacks JavaScript Shell JavaScript Shellを利用することで 正規表現 DOM XPath などを手軽に試行錯誤できる環境が得られます。この中でもXPathの作成をJavaScript Shellで行うのが特に有効だと感じました。というのも、JavaScript Shellはシェルで入力されたJavaScriptのコード
XMLをJSONデータに変換するJavascriptライブラリ - スピリッツオブゼロ@blog
XML→JSON展開クラス(by Amazon Web サービス ブログ)経由で知ったXMLデータをJSONデータに変換するJavascriptライブラリが激しく便利です。JSONとは初めて知りましたが JSON (JavaScript Object Notation) は、軽量なデータ交換フォーマットです。それは、人間にとって読みやすく、書きやすく、また、機械にとっても解析と生成の容易な形式です。 JavaScript(ECMAScript)にもとづくサブセットです。(【Ajax】JSON by JavaScript++かも日記) なにやらデータ交換に適したフォーマットらしい。Javascriptの配列・連想配列形式になっています。Kawasakiさんの作成されたXML→JSON展開クラスのJavascriptライブラリ(jkl-parsexml.js)はJavascriptのXMLHt
(new Hatena).blog() - DOM 要素の集合のイテレーション
Update: id:reinyannyan:20060411:p1 に続きます getElementsByTagName の様なメソッドで得られた、配列ではない要素集合を配列のように扱いたい時に、prototype.js では "$A" という関数によってまず配列化する、という方法を用います。 これは非常に素晴らしい、便利な方法なんですが、集合の規模が大きくなると、それだけ配列化によるオーバーヘッドも大きなものになってしまいます。 そこで、仮にこのようなものを作ってみました。 // DOM Iterator var Domi = { each: function (collection, yield) { for (var i = 0; i < collection.length; i++) yield(collection[i]); } };べつに配列が欲しいわけじゃない、単純に ea
猿でも分かる GreaseMonkey Platypus 超入門
level様よりGreasemonkey0.3.5以下のバージョン における 脆弱性に関するご指摘を頂き、リンク先を修正しました。 ■ 特徴 GreaseMonkey（グリー スモンキー：整備士）ってのはどんなソフトかと言うと、Wired風にいうところの「サイトの体裁を整える」機 能を持ったソ フトです。「サイトの体裁を整える」というのは、普段見ているブログ記事にある邪魔な広告スペースを削除したり、内容は良いんだけどレイアウト のかんばしくないサイトを自分の好きなようにレイアウトすることをいいます。まぁ好きなようにレイアウトといっても、人様のページそのものを勝手 に変更が出来るわけではもちろんなくて、Firefox + GreaseMonkeyを使って見たときだけ、特定のページを自分の好きなように見ることがで きるよって感じです。他にもJavaScriptとCSS
Greasemonkey: prototype.jsでクロスドメインAjaxを可能にする - Accept Things
以前、「Greasemonkeyでprototype.jsやscript.aculo.usを使う方法」を紹介しました。しかし、Greasemonkey内でprototype.jsが利用できるようになった恩恵を十分に受けられていませんでした。つまり、Greasemonkeyで提供されているGM_xmlhttpRequest()が可能にする「異なるドメインとの非同期通信」からの恩恵です。そこで今回は、Greasemonkey内で使えるようになったprototype.jsをさらにパワーアップし、クロスドメインAjaxができるようにしてみたいと思います。 問題 厄介な問題は、GM_xmlhttpRequest()はFirefoxやInternet Explorerなどで提供されているXMLHttpRequestとインタフェースが全く違うということです。 GM_xmlhttpRequest()は単な
CMS researcher - Greasemonkeyでprototype.jsやscript.aculo.usを使う方法
Greasemonkeyでprototype.jsやscript.aculo.usが使えたら便利だろうな、と考えたことのある開発者は少なくないのではないでしょうか。ちょっとそんなアイデアを試してみたことのある方ならわかると思うのですが、Greasemonkeyでそういった外部JavaScriptライブラリは簡単には使えません。案外ハードルが高いです。 Googleで調べていたら、面白い解決方法が見つかったので紹介します。 Loading External JavaScript Libraries in Greasemonkey このブログで解説されているアプローチを用いれば、Greasemonkeyで外部JavaScriptライブラリが使えるようになります。 ポイントは、 外部ライブラリがロードされるまで待ち続ける制御構造 unsafeWindowを経由して外部ライブラリにアクセス といっ
[JavaScript] ECMAScript for XML (E4X) を試してみた
Firefox 1.5では、 ECMAScript for XML (E4X) が利用できます。 JavaScript 中に XML コードを埋め込んで XML オブジェクトとして利用できるほか、 （XML.ObjTreeクラスのように） 面倒な DOM 操作ではなくてJavaScriptオブジェクトの プロパティを辿るようにして簡単に XML のデータ構造にアクセスできます。 大なり・小なりの記号を新しい用途に使っているわけですね。賢い！ （C++ のストリームの << よりもよっぽど直感的な用途だと思う） XML の処理がスゴく直感的に分かりやすくなるので、良いと思うのですが、 まだ IE では使えないので、一般に普及するのはまだ当分先になりますね……。 ※このページのスクリプトは、Firefox 1.5 用になります。 IE 7／Opera 8.53 では動作しません。 要素の値・属
あれこれポップアップ
ウェブページ (HTML) にて、マウスポインタの下にある任意の箇所（要素）の情報（属性値）あれこれをポップアップに出す、 JavaScript と CSS のセット。 Web サイトの製作運営者向けの一種の「素材」。 HTML に「あれこれポップアップ」の外部 JavaScript と 外部 CSSを適用するだけで、すぐ機能します。そのはず。 多くの典型的なブラウザでは、 title 属性に何か書いてある要素部分にマウスポインタをかざすと、その title 属性値がツールチップとしてポップアップしますよね。あれのゴージャス版と思ってもらえればよいです。典型ブラウザ本来のポップアップとの違いは、ポップアップするのが title 属性だけではない点。それと自分で言うのも何だけど、見てくれがカコイイ事（笑） 適用サイト利用者向け FAQ だうんろーど他 お持ち帰り用アーカイブをダウンロード 2
最速インターフェース研究会 :: [Ajax] location.hashを使ったセッション復元
最近になってようやくJavaScript関係、動的ロードを使ったテクニック等について 話せる相手ができまして、、なかなか充実しています。 Gmail、GoogleMapsのような画面遷移なしの高速なナビゲーションが注目されています。 サイトが特定のタスクに対して特化している場合、JavaScriptを使ったインターフェースの最適化が非常に有用であるのは間違いありません。 ブラウザ上で動作するリッチクライアントとしてはFlashが圧倒的に有名ですが、Flashは、ブックマーク、ブラウザの戻る進む機能、文字の拡大縮小、などのブラウザが本来備えている機能が使えないため、ユーザビリティ研究者の間では嫌われ者です。 http://d.hatena.ne.jp/nazoking/20050226 というわけで、AjaxがFlashのような使い方をされないような実装例を考えてみたいと思います。 一つは、
最速インターフェース研究会 :: 実践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 OOP におけるクラス定義方法 - IT戦記
クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか？ プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler
暴満館 » JavaScriptでCSSを弄る際のメモ
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。 – 俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。 結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは知らね。 スタイルシートのルールを弄る div内の全要素をgetElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる。 function addRule( selector, property ) { if( document.styleSheets[0].addRule ) //IE document.styleSheets[0].addRule( selector, "{" + property + "}" );
Collection & Copy - 複数行の文字列
複数行の文字列 JavaScript Javascript Boot Camp Tutorial \を行端に置くことで、文字列を複数行に分けて記述できることを知った。 IE、Forefox、Operaで確認をした。 alert("<html>\ <body>\ <div>\ </div>\ </body>\ </html>"); 文字列リテラル (String Literals) ECMA Scriptの仕様を読んでも難しく、このことが記述されているのか否か判断ができない。 『JavaScript』の文字列リテラルの項を読み直してみたが記述は見当たらず、これまで色々なコードを読んだが利用されている例に会わなかった。 追記 2006/8/7 nanto_viさんから、詳細な情報をコメントで頂きました。 こちらへ転載させていただきます。 いつも、いつも、本当にありがとうございます。 nanto
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この記事のURL