Firebugクックブック #2 - bits and bytes
前回に引き続き、自分がよくあるブラウザ上での単純作業をFirebugコンソールで片付けている方法の紹介です。前回はブラウザに表示されているデータをこっち側に持ってくる作業をどうやっやるかでした。今回はブラウザの向こう側のデータをFirebugで操作するにはどうするかです。 ボタンをクリックさせる ウェブのサービスを使っていて、今までに投稿したものを全部消したくなったり(でもアカウントは消したくないとか)することがあります。管理画面で投稿を消すことはできるけど、いちいちクリックしていかないといけなくて面倒.... という時にはFirebugでフェイクのクリックイベントを作って送れば、自動でクリックさせることができます。 Twitterのfavoritesを全部外したい、というのを例としてあげます。TwitterのfavoritesはAPIがあるのでAPIを使う手もありますが、サービスによって
Firebugクックブック #1 - bits and bytes
最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。 そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの
WebKitでサポートされているJavaScript1.6のべんりなArrayメソッド - bits and bytes
常識なのかもしれないですけど、先日たまたまJavaScript1.6で追加されたArrayの拡張メソッドがWebKitでもサポートされているのに気がつきました。 ちゃんとした文書をみつけられなかったのですが[webkit-reviews] review denied: [Bug 6252] JavaScript 1.6 Array.lastIndexOf : [Attachment 10095] lastIndexOf javascript patchというのが出てきたので、WebKitでも正式にJavaScript1.6がサポートされてるようです。 こういうときにべんり 追加されたメソッドで最も便利なのがmap()です。mapは引数に関数を渡して使います。配列の各要素を引数にして渡された関数を実行して、関数の返した値を配列として返してくれます。mapは戻り値として配列を返すのに対して、何
Firefox3の新機能 SmartBookmarkを使ってブックマークや履歴を一定の基準でリストアップする - bits and bytes
(たしか)Firefox3beta5から、ブックマークツールバーに"Most Visited"や"Recently Bookmarked"という項目がデフォルトで入っているようになりました。プロパティをみてもタイトルしか表示されず、どういう仕組みになっているのかわかりません。表示する情報をいろいろ変えられるのならおもしそうだなーと思って、これの作り方を調べました。 以前からあるlivemarkと同じようなみためで、自分のブラウザの履歴やブックマークから一定の基準でフィルタされたデータがリスト表示されます。 ちなみにlivemarkはSafariやIE7にもついているRSSをブックマークのフォルダとして登録できて、RSSのアイテムひとつひとつがブックマークとして表示される機能のことです。ほかにもFirefoxにはmicrosummariesというXPathでページの特定の部分を取り出して表示
jqueryのpackedバージョンは読み込みに(80msくらい)時間がかかる - bits and bytes
先日The JUI 2008 Tokyoに参加させていただいて、その中でGreasemonkeyの中で使うならjQueryが便利だよ！というLightning Talkを聞きました。たぶんその発表をされていた内山さんが以前に書かれたWe Ain't Seen Nothin' Yet. : GreasemonkeyスクリプトにjQueryを読み込む汎用スクリプトを今朝読んでXPCNativeWrapperがあるのでグローバルのネームスペースにいろいろ設定したりするほかのライブラリだと使いにくいというのもあるのを知りました。 コードの評価にどれくらい時間がかかるのか 自分も以前にMochiKitの非同期処理をラップしてくれるDefferedを使いたくてMochiKitをまるまるスクリプトの中に入れて使ったことがありました。そのときMochiKitをまるまるいれたら読み込むのに100msくらいか
Firefox3でSQLite3の全文検索機能を使って日本語を検索する - bits and bytes
mal_blue@tumblrでFirefox3に載っているSQLiteに全文検索機能がついたのを知りました。昨年12月にGoogle Japan Blog: Google デベロッパー交流会 ( 第 4 回 )に参加させていただいたとき、Google Gearsの開発者がGoogle Gearsでサポートされているlocal storage(実体はsqliteのデータベースでSQLを使ってデータを読み書きできます)について非ASCIIのfull-text searchをサポートしたいと言われていたのを思い出しました。 その後どうなったかなー、と思ってちょっと検索してみたらGoogle Gearsと直接関係ないけどSQLite Full Text Search with MeCab - mynoteという記事が。この記事はSQLiteのCのAPIにはtokenizerを指定することができて
いまさら人に聞けない Firebug tips - bits and bytes
2年前の夏に書かれたFirebugの便利な組み込み関数 - 技術メモ帳を読んで、いまさらdebuggerと書くとそこからデバッガでステップ実行できるのを知ってショックでした.... lurkerさんのブログで紹介されている$0, $1 で直前にinspectしたものを参照できることも、なぜか公式のドキュメントっぽいFirebug Documentationには載っていなくて、FireBug Documentation - JoeHewitt.comには載っています。 で、もうひとつ、ソースコードにしか書かれてなさそうなやつを発見しました。$$1と$$2です。 自分はFirebugを使っていて、ときどきconsole.logで出したオブジェクトのプロパティを引数にして関数を呼んだりしたい、ということがあったけどできなくて困ってたんですが$$1でそういうことができるようになりました。 たとえば
Web::Scraperのjavascriptバージョンwebscraper.js - bits and bytes
perlのWeb::Scraperみたいな記述で、ページの中からデータを取り出すwebscraper.jsという小さなjavascriptのライブラリを書きました。 ブックマークレット データを取り出したいページでブックマークレットでwebscraper.jsを読み込んでFirebugコンソールで使います。 ブックマークレット webscraper コードwebscraper.js つかいかた Web::ScraperのSYNOPSISで例としてあげられているebayでapple ipod nanoを検索した結果からデータを取り出すときは 検索結果ページで上のブックマークレットを呼び出してFirebugコンソールで取り出す部分を記述します。 こんなかんじ。 SYNOPSISのperlのコードで変数$ebay_auctionに一度代入されている部分をそのままインラインで書き直すと my $e
Lilyで視覚的にHTTPDサーバを作る - bits and bytes
なんか気がついたらノキアの携帯向けApache Nokia Mobile Web ServerからはじまってWindows Mobile, iPhone, mozJSHTTPとキワモノHTTPサーバ紹介ブログみたいになってますが、今回のHTTPサーバはFirefox上で動くLily | Visual Programming for the Mozilla Frameworkのhttpdパッチです。去年Yahoo! Pipesが話題になったちょっとあとでその存在を知りました。Yahoo! PipesはXMLデータを視覚的に処理するためのツールでしたが、Lilyは視覚的にプログラムを作るためのツールです。その中になぜかHTTPサーバが含まれているのです。 プログラムを視覚的に作るものを文章で説明してもしょうがないので、どんなものかはLily: Demo Archivesのビデオをみてみてくださ
Firefox3のクロスサイトXMLHttpRequestの仕様 - bits and bytes
補足 2008.3.28 Cross Site XMLHttpRequest (XHR) Removed From Firefox 3 | Robert Accettura’s Fun With Wordageによると、最近XMLHttpRequestの仕様ドラフトに変更があり、Firefox3のリリース(今のところ6月の予定だとどこかで読みました)には実装が間に合わなそうなので、Firefox3の初期バージョンにはCross Site XMLHttpRequestは載らないことになったそうです。 Firefox3ではドメインが異なっていてもXMLHttpRequestでリクエストが出せるのをmal_blue@tumblrで知りました。 すごいじゃーんというわけでJohn Resig - Cross-Site XMLHttpRequestに書かれている使いかたを参考にちょっといじってみま
HTMLのドキュメントから繰り返し部分をみつけてSITEINFOをつくるAutoPagerize Iteration Detector - bits and bytes
HTMLのドキュメントから繰り返し部分をみつけてSITEINFOをつくるAutoPagerize Iteration Detector HTMLのドキュメントから繰り返し部分をみつける - bits and bytesをベースにして、(ページによるけど)3回くらいクリックしたらSITEINFOが作れるAutoPagerize Iteration Detectorという長い名前のFirefox extensionを作りました。 インストール iterd.xpi version 0.12 (supports Firefox 2.0-3.0.0.*) つかいかた 今回はスターバックスさんの店舗検索結果(住所・店名・条件から探す)を例としてご紹介します。 AutoPagerize Iteration Detectorをインストールすると、リンクを右クリックしたときに出てくるメニューにDetect
ブラウザ別のタイマ性能比較 - bits and bytes
えええ、先月あったMozilla Japan - The Future of JavaScript -presented by Mozilla & Shibuya.JS-にかなり遅刻して行って、まんまとじゃんけんで勝ち残ってJohn Resigと握手してもらってサイン入りFirefoxマウスパッドを持って帰った熊谷です。 そのJohn ResigがFirefox3でタイマの性能がどうなったか、FirefoxのほかにSafariとOperaとあわせて タイマ呼び出しの遅延 タイマ呼び出し間隔の安定度 複数タイマを使用するときのスケーラビリティ 利用可能な最小呼び出し間隔 について調べたはなしを John Resig - Analyzing Timer Performance で書いていたのでご紹介。 この記事ではOSXでFirefox2, Firefox3, Opera9, Safari3に
次のページへのリンクをみつけるFastForwardアプローチの定量的評価 - bits and bytes
AutoPagerize0.0.18で、SITEINFOにexampleUrlという項目が含まれるようになりました。そのSITEINFOが動くことを想定している実際のURLを記述するためのものです。 このexampleUrlを利用してSITEINFOが壊れていないかをチェックするAutoPagerize SITEINFO Test – Userscripts.orgというのが作られています。 このようにSITEINFOを参照して、ルールが壊れていないかをチェックしてかわいく表示してくれます。 これをちょこっといじってOperaのFast Forwardはどうやって次のページを決定しているのかで心残りだった、FastForwardの特定のキーワードが入っているリンクを次のページへのリンクだということにするアプローチがどれくらいうまく機能するか定量的に調べてみました。 次のページへのリンク子要
ほかのサービスとくっつけられるストレージサービスOpenBoxを自分でくっつける - bits and bytes
ストレージサービスのBoxがOpenBoxというちょっとおもしろいことをしてるのをTumblrのポストJunk Innで知りました。OpenBoxは、Boxにアップロードしたファイルをウェブ上のほかのBoxとぜんぜん関係のないサービスでかんたんに使えるようにするためのしくみです。 OpenBoxをつかってみる 利用可能なサービス一覧から、使いたいサービスを選んで追加しておくと、自分のアップロードしたファイルを選んでメニューを開いたときにそのサービスが出てきます。 ちょうどWindowsでファイルを右クリックして、使いたいアプリケーションを選ぶと、選んだアプリケーションが起動してそのファイルを開いてくれるかんじで、えらんだウェブのサービスがそのファイルを開いてくれる、イメージで使えます。 ここまではまあなんかあったりもしそうですが、すごいのはBoxとぜんぜん関係ないサービスでそのファイルを編
Firefox3で動くGreasemonkeyを作る&新機能の@import @require - bits and bytes
少し前にFirefox3 beta1がリリースされたものの、いろいろ拡張機能が動かないから使えないもんねーと思ってスルーしていたけれど、ちょっと移行してみようかと試してみたら、まずGreasemonkeyがFirefox3に対応していませんでした... が、検索してみるとGreasemonkeyのchange log /trunk/src (log) - greasemonkey - DevjaVuにAdding FF3b supportと書かれているのを発見。最新版なら動くっぽいのでチェックアウトしてきて試してみたら、新しく@importと@requireという新機能もついていたのでちょっと調べてみました。 Firefox3対応のGreasemonkeyのビルドとインストール ビルドと言ってもFirefoxのaddonはプラットホームに依存しないものはzipファイルを作るだけなので、たい
E4Xっぽい記述でXPath式の文字列を作るXPathBuilder - bits and bytes
AutoPagerize IDEのように、ある条件を元にXPathを生成するようなコードは、とりあえずふつうに書くと var attribute = "class"; var nodeName = "div" var value = "main"; "/" + nodeName + "[contains(@" + attribute +",'" + value + "')]" のような何を書いてるのかわからないようなコードになってしまいます(AutoPagerizeもこんなかんじになってます)。 SQLであればDBIx::ClassをはじめとしてORマッパがあって $self->{schema}->resultset('Recents')->select( { id => 4000, } ); と書いたものを SELECT * FROM recents me WHERE ( ( me.id
デバイスドライバ/FUSEのrestfs/SITEINFOの役割比較 - bits and bytes
これまで、物理的なコンピュータの上でプログラムを動かそうとするときに必要な、ハードウェアの制御、プロセスの管理などなど面倒なことをやってくれるソフトウェアのことをオペレーティングシステムと呼んでいました。 最近はいままでコンピュータの上でやっていたような作業、エクセルのシートを作るだとか、パワーポイントで資料を作るだとか、ファイルを保存しておくとか、そういった作業が全部ブラウザの向こう側にあるウェブ上のアプリケーションだけでできるようになってきています。 手元のコンピュータで動いていたアプリケーションのかわりに、ブラウザの向こう側にあるウェブ上のアプリケーションを使うようになってきた結果ウェブがOSのように感じられるようになったことを指してWeb Operating Systemと呼ぶこともあります。(Web operating system - Wikipedia, the free e
WiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoCom - bits and bytes
先日第六回Mozilla拡張機能勉強会に参加させていただいたあとのお酒の席でid:ZIGOROuさんに、WiiリモコンがFirefoxにつながるといろいろうれしい、という話を聞いてWiiリモコンのイベントをFirefoxから取得するextensionを作りました。 作りかけ＆不安定＆OSX専用ですが、今後の開発の方向性などについてコメントをいただけたらと思い、公開します。 概要 WiiRemoComからWiiリモコンに接続して、Wiiリモコンから送られてくるイベントをHTML中に記述したjavascriptで処理することができます。十字キー、ボタンの押下情報、モーションセンサ、IRリモコンの値をイベントとして受け取ることができます。HTMLに記述したjavascriptからWiiリモコンのバイブレーションのon/offと、LEDを制御することができます。 現在WiiRemoCom自体にはW
FirefoxのsetTimeoutの実装 - bits and bytes
Firefoxのソースコードを追っているうちに、たまたま1年遅れで IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 の裏側がどうなっているかがわかったので、その話を。 タイマーの管理方法 そもそもjavascriptからsetTimeoutを呼ぶと、どういう仕組みで指定した時間後に渡した関数が呼び出されるようになっているのでしょう。Linuxであればsleepのように一定時間後にawakeするという処理は、タイマーリストによって管理されています。カーネルの中にN jiffies(LinuxのOS内時間の単位はjiffyと呼ぶそうです)経過後に実行することリストがあって、カーネルが4msごとに毎回タイマーリストをチェックしてやることがあったときにはそれを実行しています。 FirefoxもLinuxと同じようにタイマーリストみたいな
FirefoxのlivehttpheadersでHTTPリクエストの中身が見られるしくみ - bits and bytes
サーバに送っているHTTPリクエストのヘッダやレスポンスのヘッダが見られるFirefoxのextension livehttpheaders がどうやってこの機能を実現しているのか調べてみました。 HTTPリクエストを送るタイミングでイベントを捕まえることができるんだろうと予想して探してみるとLiveHTTPHeaders.jsの43行めからのaddToListener()に function addToListener(obj) { ... snip ... // Should be a new version of Mozilla/Phoenix (after september 15, 2003) var observerService = Components.classes["@mozilla.org/observer-service;1"].getService(Compone
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
