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回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの
日時表記のフォーマットの名前と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
大切じゃないパスワードを記録するためのiPhone用ブックマークレットとclient-side storageの可能性 - bits and bytes
JavaScript++かも日記: 【iPhone】iPhone用 JavaScriptデータベースプログラミング入門 (1)でiPhoneのSafariでもclient-side storageが実装されていてjavascriptからSQLite3を利用できる、というのを知りました。 Firefox3に載っているsqliteよりもちょっとバージョンが古いのでFirefox3でSQLite3の全文検索機能を使って日本語を検索するのはまだできないようですが、できるようになるのも時間の問題でしょう。ためしにちょっと触ってみようと思ってclient-side storageをバックエンドにして、入力したパスワードを保存して次回から入力を楽にするためのbookmarkletをつくりました。 client-side storageはHTMLに書かれたjavascriptから読み出すことができ、データ
bits and bytes - Firefoxのヒストリぜんぶをfaviconにして見る！
最近はほとんどどのサイトにfaviconが置かれるようになりました。Ruby on Railに似せて作られたPHPのアプリケーションフレームワークCakePHPではデフォルトでcakePHPのfaviconが入るようになっていたりします。 サイトのfaviconは、ブラウザのブックマークから目的のサイトを探す時のように、大量にあるリストから自分の探しているものを見つける手がかりになります。ロシアで最大のシェアを誇るサーチエンジンyandexの検索結果にはfaviconが一緒に表示されるようになっています。 yandexで表示されているfaviconのURLはhttp://favicon.yandex.net/favicon/ru.wikipedia.orgという形式になっていて、faviconよりあとの部分を変えればそのURLのfaviconが表示されるようになっていました。が、さすがにロ
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くらいか
Google Gearsの位置情報取得機能(まだぜんぜん実装されてないけど) - bits and bytes
気がついたらGoogle Gears API Blog: Gears and Standardsを読んでいて、この中に and we're working on resumable uploads, a geolocation API, and lots more fun things for the future. と書かれているのを発見(強調は自分によるものです)。 "geolocation API"と聞いてはじめは住所から緯度経度を返すジオコーダのことかと思ったけどそうではなくて、クライアントのデバイスの現在位置を取得するためのものです。日本のケータイでいう位置情報取得APIみたいなもの。 そんな機能が実装される予定になっているとは、と思って調べたらいつのまにかいくつかの機能が追加されていました。API History - Google Gears API - Google Code
Firebug1.2alpha向け $xでコンテキストを指定できるようにするためのuserchrome.jsスクリプト - bits and bytes
Firebugの最新情報が追えるFirebug | Google グループを見ていると、Firefox3beta4くらいから最新版のFirefoxでうまく動くようにするのに手間取っているようで(先日紹介した$$1は1.2alphaでは使えなくなくなっちゃいました)ちょっと心配してたのですが、Firebugのコンソールがぜんぜん機能しないという大きな問題は乗り越えたみたいです。 ちなみにこのグループ、こないだhow to remove a cockroach from the right corner of browser? - Firebug | Google グループなんてアホな投稿(投稿した人はまじめにアイコンを変えたかったみたいですけど)が流れてきておもしろかったです。 $xにコンテキストを指定できるようにする Firebug純正のXPathを評価するコマンド$xは、DOM要素のリス
新しくなったAutoPagerizeのSITEINFOバックエンドwedata - bits and bytes
AutoPagerizeのSITEINFOがwedataという、キーと値を管理することを目的としたwikiのようなもので管理されるようになりました。このwedataはキーと値を管理するだけの単純なデータベースを不特定多数で編集することができる仕組みです。新しく自分でデータベースを作れことができるようになっているのでAutoPagerizeのSITEINFOだけでなく、自分で作ったスクリプトのためのSITEINFOをかんたんに作ったりすることができます。 私が作ったわけではないのですが、去年のはじめからこんな仕組みがほしいなと思っていたようなものになっていてとてもうれしいので、ちょっと長いですがwedataの紹介をしたいと思います。 AutoPagerizeとそのしくみ いろんなサイトで次のページを自動的に表示するためのGreasemonkeyスクリプトのAutoPagerizeは、wiki
JavaScript-XPathでXPathが評価される様子を視覚化する - bits and bytes
AutoPagerizeやLDRizeなどのスクリプトで、ページごとの構造を記述するSITEINFOに書くXPathは、どう書いたら速いのかが話題にのぼっていたので、JavaScript-XPathを使ってXPathがDOMツリーから要素を見つけ出す雰囲気を視覚化してみました。JavaScript-XPathが各ロケーションステップで要素がマッチするかどうかをテストするときに呼ばれている(んだと思う)attrMatchという関数の引数に渡される要素をロギングして、そのデータをもとにちょっと時間をずらしながら要素をハイライトしています。 前置き あくまでJavaScript-XPathでattrMatchが呼ばれている要素を視覚化したものです。実際のXPath実装とは異なります。JavaScript-XPathではdescendant::*((//*))の評価をgetElementsByTa
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に繋いで直接操作できるよう
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を指定することができて
てきとうにクリックしたらてきとうに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でそういうことができるようになりました。 たとえば
XPathをてきとうに作ってくれる機能を追加したwebscraperp.js - bits and bytes
perlのWeb::Scraperみたいな記述で、ページの中からデータを取り出すwebscraper.jsという小さなjavascriptのライブラリに、要素をてきとうに渡したらてきとうにXPathを作って動いてくれるwebscraperp.jsというのを書きました。なんで最後にpをつけたかは思い出せません... ブックマークレットWeb::Scraperのjavascriptバージョンwebscraper.jsと同じように、データを取り出したいページでブックマークレットでwebscraperp.jsを読み込んでFirebugコンソールで使います。 ブックマークレット(Firefox3専用) webscraperp コードwebscraperp.js つかいかた Web::ScraperのSYNOPSISで例としてあげられているebayだとアクセスしたときによって出品されているものが違って
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
WWW::Mechanize::AutoPager+Web::Scraperで複数ページにまたがるデータを扱う - bits and bytes
AutoPagerizeのSITEINFOに含まれている、次のページへのリンクを示すXPathはAutoPagerize以外の用途でも使うことができます。 CPANにこのSITEINFOをパースすめたるの HTML::AutoPagerize - Utility to load AutoPagerize SITEINFO stuff というモジュールがあるのは知っていたのですが、ページのロードと次のページのURLの解決もやってくれる WWW::Mechanize::AutoPager - Automatic Pagination using AutoPagerize というモジュールがあるのはさっき知りました... このモジュールを使うと、MechanizeでロードしたページがAutoPagerizeのSITEINFOに記述されていれば、自動的にSITEINFOのnextLinkを参照して
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に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
