Firebugクックブック #2 - bits and bytes
前回に引き続き、自分がよくあるブラウザ上での単純作業をFirebugコンソールで片付けている方法の紹介です。前回はブラウザに表示されているデータをこっち側に持ってくる作業をどうやっやるかでした。今回はブラウザの向こう側のデータをFirebugで操作するにはどうするかです。 ボタンをクリックさせる ウェブのサービスを使っていて、今までに投稿したものを全部消したくなったり(でもアカウントは消したくないとか)することがあります。管理画面で投稿を消すことはできるけど、いちいちクリックしていかないといけなくて面倒.... という時にはFirebugでフェイクのクリックイベントを作って送れば、自動でクリックさせることができます。 Twitterのfavoritesを全部外したい、というのを例としてあげます。TwitterのfavoritesはAPIがあるのでAPIを使う手もありますが、サービスによって
日時表記のフォーマットの名前とperl/PHP/javascriptでのつくりかた - bits and bytes
毎回毎回日時を出力する時にどうすればいいのか思い出せなくて毎回毎回調べていてばかみたいなのできちんとまとめてみます。 日時のフォーマット名 まず、よく使われる日時表記の名前を把握することが大切です。名前がわからないと検索のしようがありません。 ISO8601 ISO8601はたぶん一番なじみが深いものだと思います。 MySQLのdatetime型の表記 2008-08-06 19:38:56 はISO8601です。 ISO8601は日時を表すだけでなく、年だけや時刻だけを表せるほか、期間を表すことができます。また、多様な書き方を許していて、間にある記号を省略して20080806 193856というのもISO8601として正しい日時になります。英語のwikipediaのISO 8601が詳しいです。 W3CDTF W3CDTFはatomのフィードで使われている 2003-12-13T18:3
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は戻り値として配列を返すのに対して、何
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くらいか
WiiリモコンとFirefoxをjavascriptでつなげるWiiRemoCom Firefox3対応版 - bits and bytes
以前に作ったWiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoComがFirefox3では動かなくなっていたのでFirefox3で動くように修正して、ヌンチャクをマウスとして使用できるようにしたり、いくつか機能を追加しました。 Download wiiremocom.xpi (for OSX+Firefox3) 動作環境 Firefox3beta2, Firefox3beta3 + MacBookPro内蔵Bluetooth + OSX10.4(intel) で動作確認済み Firefox2用のものはWiiリモコンをFirefoxにつなげてイベントを取得したりするための拡張機能 WiiRemoComにあります(ただしXPCOMのインターフェイス等が異なります)。 概要 WiiRemoComはWiiリモコンをFirefoxに繋いで直接操作できるよう
てきとうにクリックしたらてきとうにWeb::Scraperのコードを作ってくれるWebScraper IDE - bits and bytes
まえに作ったWeb::Scraperのjavascriptバージョンwebscraper.jsとXPathをてきとうに作ってくれる機能を追加したwebscraperp.jsにHTMLのドキュメントから繰り返し部分をみつけてSITEINFOをつくるAutoPagerize Iteration Detectorみたいなみためをくっつけて、取り出したい部分をクリックしたらてきとうにXPathを生成してWeb::Scraperのコードにして出してくれるFirefoxのextensionを作りました。Firefox3専用です。ごめんなさい。 ダウンロード WebScraper IDE (for Firefox3) 使い方 今回もいつもお世話になっているスターバックスさんの店舗検索結果(住所・店名・条件から探す)を例に使い方をご紹介します。 WebScraper IDEをインストールするとツールメニュ
いまさら人に聞けない Firebug tips - bits and bytes
2年前の夏に書かれたFirebugの便利な組み込み関数 - 技術メモ帳を読んで、いまさらdebuggerと書くとそこからデバッガでステップ実行できるのを知ってショックでした.... lurkerさんのブログで紹介されている$0, $1 で直前にinspectしたものを参照できることも、なぜか公式のドキュメントっぽいFirebug Documentationには載っていなくて、FireBug Documentation - JoeHewitt.comには載っています。 で、もうひとつ、ソースコードにしか書かれてなさそうなやつを発見しました。$$1と$$2です。 自分はFirebugを使っていて、ときどきconsole.logで出したオブジェクトのプロパティを引数にして関数を呼んだりしたい、ということがあったけどできなくて困ってたんですが$$1でそういうことができるようになりました。 たとえば
Codaで秘密鍵を使ってSFTPでサーバにアクセスする方法 - bits and bytes
こんにちは。みなさまはCodaをご存知でしょうか。CodaはOSX用のHTMLコーディングに威力を発揮するエディタとSafariとターミナルとFTP/SFTP/WebDavクライアントとリファレンスがひとつになったHTMLコーディング用のIDEみたいなものです。 実際のところ自分は使ってないので細かいところまでは知らないのですがgl,fb.の飛鳥さんが使っているのをちょっとみたり、話を聞いたりするといいかんじです。Worldwide Developers Conference 2007 - Apple Design AwardsのUser Experience部門で賞をもらっており、触ってみるとわかりますがいちいちかっこよくてアタマが良くなった気持ちにさせてくれるアプリケーションです。 接続先のサーバの設定にサイトのURLが含まれていて、URLを設定するとサイトのスクリーンショットがその接
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
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
HTMLのドキュメントから繰り返し部分をみつける - bits and bytes
RSSを生成していないページからRSSを生成するなんでもRSS 0.1bは、公開されているJSAI2005: なんでもRSS - HTML文書からのRSS自動生成によると、日付情報を目印にしてそのHTMLドキュメントの構造を推測して、各エントリ(item要素)のタイトルと本文を単語の統計的に処理して決定し、フィードを生成していると書かれています。 ウェブ上にあるHTMLドキュメントは Ask.jp ： "xml" Search results. のように、RSSのitem要素に相当する部分に日付が含まれていないものもあります。 その中でも、大量のデータを複数のページにわけて表示しているHTMLドキュメントを対象に、ドキュメント中に含まれる繰り返し部分のXPathを生成するブログラムをjavascriptで作りました。 アプローチ 大量のデータを複数のページわけて表示しているドキュメントを
アプリケーションもjavascriptで書けるpure javascriptのHTTPサーバmozJSHTTP - bits and bytes
以前Firefoxのソースコードの中にmozJSHTTPという名前のjavascriptで実装されたHTTPサーバをみつけたのでちょっと動かしてみました。 mozJSHTTPがいったいどういう目的で開発されているのか、わかりませんでしたが(いまはFirefox本体に組み込まれているわけでもないし、拡張機能でもなく、単にソースコードがCVSに入っているだけみたいです)ソースコードはmozillaのCVSから持ってくることができます。 cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/netwerk/test/httpserver Firefox3のインストール mozJSHTTPは、新しくFirefox3で追加された @mozilla.org/thread-manager;1 という名前のコンポーネントを
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
Flock内に各種ウェブサービス用のjavascriptコードを発見 - bits and bytes
Firefoxのソースコードをいろいろ見ていたときにちょっとべんりそうな nsIXmlRpcClient という名前のインターフェイスがあるのを発見しました。どこで使われてるのかなー、と思ってさらに探したところFirefoxでは使われてなさそうですが、しばらく前にちょっと話題になったFirefoxベースの Flock - The Social Web Browser で使われているようです。 そしてこのFlockがいろんなWebサービスにアクセスするためのjavascriptのコード満載なのです(基本的にextensionからしか呼べませんが)。 Flockははじめにそのきれいなみためと、ブックマークがdel.icio.usと直結できたりする新しさにしびれたものの、そのあとしばらく忘れていたのですが ソーシャルブラウザ「Flock」が着々とバージョンアップ中 : ワークスタイル・メモ によ
javascriptは本当にシングルスレッドで実行されているけれど起こるsetTimeout/prompt現象 - bits and bytes
前回の FirefoxのsetTimeoutの実装 - bits and bytes を書いたときには、はてなブックマークのコメントでご指摘いただいているsetTimeoutとpromptを組み合わせるとpromptが終了する前にタイムアウトハンドラが呼び出される現象を知りませんでした。この現象については [JavaScript]JavaScriptはほんとにシングルスレッドで実行されているのか？ に詳しく書かれています。 FirefoxのsetTimeoutの実装 - bits and bytes だと、この現象を説明できないので、どうなっているかはっきりさせるためさらに調べてみました。 setTimeout/prompt現象とは かんたんにこの現象について説明しておきます。FirefoxやIEやOperaでは setTimeout( function () { timeout_hand
FirefoxのsetTimeoutの実装 - bits and bytes
Firefoxのソースコードを追っているうちに、たまたま1年遅れで IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 の裏側がどうなっているかがわかったので、その話を。 タイマーの管理方法 そもそもjavascriptからsetTimeoutを呼ぶと、どういう仕組みで指定した時間後に渡した関数が呼び出されるようになっているのでしょう。Linuxであればsleepのように一定時間後にawakeするという処理は、タイマーリストによって管理されています。カーネルの中にN jiffies(LinuxのOS内時間の単位はjiffyと呼ぶそうです)経過後に実行することリストがあって、カーネルが4msごとに毎回タイマーリストをチェックしてやることがあったときにはそれを実行しています。 FirefoxもLinuxと同じようにタイマーリストみたいな
FirefoxのE4XはXPathより便利？ - bits and bytes
つい最近FirefoxのXMLオブジェクトがすごく便利なのを知りました。そして、そのXMLオブジェクトサポートのことをE4X(ECMAScript for XML)と呼んでいたというのを今知りました.... E4Xについては ECMAScript for XML (E4X) 仕様邦訳 を翻訳された nanto_viさんが書かれている E4X in Firefox が詳しいです。 しょせんはさっきE4Xがなんなのかを知った程度なのでちゃんとしたことは他のページを参照していただくことにして、11.2 左辺式 に書かれているアクセサと選別述語演算子でXPathと同じようなことができて、それがXPath以上に便利なところがありますよ、というはなしだけ書こうと思います。 E4XについてECMAScript for XML (E4X) 仕様邦訳序文には このプログラミング言語拡張は、世界中のもっとも大
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
