Web Technology features with Firefox 3.6 / Gecko 1.9.2� and later
外部スクリプトの読み込み var Foo = "foo"; var Bar = "bar"; // 外部スクリプト読み込み var source = readFile("d:\\script.js", "UTF-8"); // 外部スクリプト実行 var sandbox = new Components.utils.Sandbox(window); sandbox.__proto__ = window; Components.utils.evalInSandbox(source, sandbox); // 外部スクリプトの実行結果を取得 sandbox.__proto__ = {}; for(let[key, value] in sandbox){ if(key == "Bar") continue; // Bar の上書きを拒否 window[key] = value; } print(
羊毛布団を洗濯機にかけられないことを知りました。ago(@kyo_ago)です。 意外と知られていない機能が多い!?Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - 文殊堂の応用編 参照が欲しい無名関数の中の適当な所で、 breakpointを設定し、条件を↓にする。 (window.someFunction = arguments.callee),false この無名関数が1度でも実行されれば、someFunctionで参照できるようになっている。 someFunction.toSource(); とかやると以下のようになる。 (function ($) {var map = new Array;$.Watermark = {ShowAll: function () {for (var i = 0; i < map.length; i++) {if (map[i].obj.val() == "") {map[i].obj.val(map[i
Firebugでは条件付きブレークポイントが使えるので、 scriptタブにて該当行にブレークポイントを貼り、 条件としてconsoleへの出力を||区切りで、最後に&& falseを入れる。 console.debug('this.lastPosition') || console.dir(this.lastPosition) && false こうするとブレークポイントを通る度にconsoleへの出力は評価され、 consoleに出力され、最後の&& falseのため式全体は必ずfalseとして評価されるため ブレークすることはない。 追記 console出力系関数の戻り値はundefinedなんだから&& falseは不要か 追記 nanto_vi @monjudoh JSでは||より&&の方が優先順位が高いので、a || b && c はaが真ならbもcも評価されずに全体が真として
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に3項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 1.基本:(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。 そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの
随時更新 公式ドキュメント Firebug Console API http://getfirebug.com/commandline.html 気になったところ $$(selector) 複雑なCSSセレクタでなければjQueryの$関数の変わりとして使える感じ。 dirxml(node) outerHTML相当のHTMLを出してくれる感じ $$(selector)と組み合わせると便利そう。 inspect(object[, tabName]) 指定したオブジェクトを指定したタブで表示できる。特定要素をHTMLタブで表示させる時、「inspect($$('table#some-id td')[0],'html');」みたいにできる。今まで、「console.log($$('table#tab td')[0]);」を実行してconsoleタブに表示させた後、そこをクリックみたいにやっていた
nsIURIのインスタンスには2種類ある XULを扱っていると、nsIURIというインターフェースを使う必要のある場面が頻繁に出てきます。大概のメソッドでは、Web上のリソースもローカルのファイルも位置情報をこのnsIURIの形で渡してやれば万事OKなのですが、希に処理に失敗する場合があります。僕は、バックアップしておいた情報からブラウザのヒストリを復元する処理でこの問題に引っかかりました。 これは、「nsIURIのインスタンス」として生成したインスタンスはそのままではnsIFileURLとして扱えないからというのが原因でした。詳しく言うと、nsIURIのインスタンスは Components.classes['@mozilla.org/network/standard-url;1'].createInstance(Components.interfaces.nsIURI) で生成することが
指定したURLのデータをダウンロードし、指定したパスのファイルへと保存するだけの簡単なコードを作る。 まずは URL 文字列から nsIURL オブジェクトを、ファイルパスから nsILocalFile オブジェクトを生成する。 const URL_SPEC = "http://www.mozilla.com/img/firefox-title.png"; const FILE_PATH = "C:firefox-title.png"; // make nsIURL var url = Cc["@mozilla.org/network/standard-url;1"].createInstance(Ci.nsIURL); url.spec = URL_SPEC; // make nsILocalFile var file = Cc["@mozilla.org/file/local;1"].
URI で示されたリソースをファイルとして保存する場合、リンク先を保存などで実際に使われている処理を参考にすると、簡単に記述することができます。 nsIWebBrowserPersist を使う リソースの保存には nsIWebBrowserPersist の saveURI というメソッドが使えます。このメソッドは引数として URI オブジェクトとファイルオブジェクトを必要とします。 下準備 まず、 URI を示す文字列から URI オブジェクトを作ります。 var targetURI = Components.classes['@mozilla.org/network/io-service;1'] .getService(Components.interfaces.nsIIOService) .newURI(uri, null, null); 次に、ファイルパスを示す文字列からファイル
MySpaceのMP3ファイルにID3tagを埋め込みつつダウンロードするJSActionsスクリプト でやっているダウンロードしながらファイルを加工してその進行状況をダウンロードマネージャに表示する、っていうのが簡単じゃなかったのでご紹介。でもextensionっぽいの書いて2日目なので違うところも多々あると思うので間違ってたら指摘していただけるとうれしいです。 ふつうにダウンロードして保存するだけだったらこれですみます。 var dm = Components.classes["@mozilla.org/download-manager;1"] .getService(Components.interfaces.nsIDownloadManager); var persist = Components.classes["@mozilla.org/embedding/browser/ns
New in JavaScript 1.7 - MDC JavaScript1.7 の yield を使って、非同期処理を同期処理のように書く方法 - IT戦記 // ==UserScript== // @name defer // @namespace http://mayokara.info/ // @description sample script // @include http://* // ==/UserScript== (function(cdata){ // type指定しないとyieldが使えない var s = document.createElement("script"); s.type = "application/javascript;version=1.7"; s.textContent = cdata.toString(); var head = docu
id:brazil さんのブックマークで知ったのだが、 Firebugには、便利な組み込み関数が定義されているようだ。 一通りさわってみたのだが、 $x() で 任意のXPath要素が取得できるのとかに感動した。 そして、やっぱりちゃんとドキュメント読むべきだなぁと思った。 XPathから要素を取得する。 $x("/html/body/h1"); -> 要素の配列が返ってくる。 selector名から要素を取得する。(getElementsByTagName) $$("h1") -> 要素の配列 所要時間測定 console#time, console#timeEnd time ~ timeEnd で囲んだ部分の所要時間を 計測することが出来るみたいで、 以下のような関数にまとめると良さそうだ。 function bench( callback ) { var uniq_id = Date
2年前の夏に書かれたFirebugの便利な組み込み関数 - 技術メモ帳を読んで、いまさらdebuggerと書くとそこからデバッガでステップ実行できるのを知ってショックでした.... lurkerさんのブログで紹介されている$0, $1 で直前にinspectしたものを参照できることも、なぜか公式のドキュメントっぽいFirebug Documentationには載っていなくて、FireBug Documentation - JoeHewitt.comには載っています。 で、もうひとつ、ソースコードにしか書かれてなさそうなやつを発見しました。$$1と$$2です。 自分はFirebugを使っていて、ときどきconsole.logで出したオブジェクトのプロパティを引数にして関数を呼んだりしたい、ということがあったけどできなくて困ってたんですが$$1でそういうことができるようになりました。 たとえば
さいきんFirebugでコードを書いている。書いてCtrl-Enterを押した瞬間に結果が確認できるので気持ちがいい。Canvasを使えばグラフィックも扱える。BASICでコードを書く感覚を思い出した。 Firebug上では、あんまり長いコードを書くのはつらいところが難点だった。自分で拡張してincludeできるようにしたらこれがすごくいい。Firebug上で実行して動作を確認しながら関数を書いていって、うまく動くようになった時点でincludeしているファイルのほうに移動してFirebugのコマンドラインを空にする。vim上でコードを書いてブラウザに戻ってきてreloadするのにくらべてストレスが少ない。 vim上でコードを書き換えたときもCtrl-Enterでもう一度includeされて実行されるので、リロードは発生しないし、Firefoxとvimとをいったりきたりしなくてもいい。
GM_setValue / GM_getValue + unsafeWindow.eval を使って 永続的に外部スクリプトを利用する方法を考えてみた。 わざわざ DOM で script要素 を毎回注入するよりも 速いんじゃないかと思う。 Greasemonkeyには、GM_setValue / GM_getValue というのがあって、 GM_setValue("キー", "値") 上記のように入力してあげる事によって、たとえ、 Firefoxを終了させたとしても消えないデータを作成する事が出来る。 そして、それを利用して、 初回のみ XmlHttpRequest で外部スクリプトデータを取得して、 GM_setValue でスクリプトデータを永続化しておき、 二回目以降は、それを GM_getValue して eval するようにした。 以下は、永続的に prototype.js を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く