はてなブックマーク

最近の中学生のはじめてのプログラミング言語がJavaScriptだったりするこの時代、最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。UNIXコマンドラインでgrepやuniqを使って、日常の細々した処理を行うのと同じようにFirebugとjavascriptを使いこなせると、日常作業のちょっとしたことをさくっとこなすことができます。ちょっとした作業だから手作業でやってもいいけど自動でやればミスったりしないし、気分的には楽なので自動でやりたい、という作業がけっこうないでしょうか。例えば、ページの中の特定の部分の文字列をリストにしてテキストファイルに保存したい、とか。 そこで今回は私が普段よくやっている単純作業をFirebug+javascriptでさくっとかたづける方法を2回にわけてご紹介します。 ページの中からテキストや属性の値を拾う ページの

毎回毎回日時を出力する時にどうすればいいのか思い出せなくて毎回毎回調べていてばかみたいなのできちんとまとめてみます。 日時のフォーマット名 まず、よく使われる日時表記の名前を把握することが大切です。名前がわからないと検索のしようがありません。 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

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から読み出すことができ、データ

ページからデータをとりだそうとするとき、詳細な情報が書かれているページは別に用意されていて、もとのページと詳細ページのデータを混ぜ合わせないと全部のデータが得られないことがあります。 例としてTwitterが挙げられます。 タイムラインのページでは、発言が長い時は発言の末尾が省略されて ... になるため、発言の個別ページにいって発言全体を取得する必要があります(と思って今確認したら、今は長くても発言全体が表示されるようになってました...)。 以前に作ったWeb::Scraperのjavascriptバージョンwebscraper.jsはひとつのページからしかデータが取れなかったので、複数のページからもデータが取れるもの急いで作りました。 Firefoxであればブックマークレットから呼び出したり、Firebugコンソールで使えます。 スクリプト jscrawler.js つかいかた Tw

最近はほとんどどのサイトに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が表示されるようになっていました。が、さすがにロ

web2.0 時代のジョブキューサーバー Gearman と TheSchwartz の関係について - TokuLog 改めB日記に書かれているとおり、Gearmanは仕事を投げられたらすぐやって返す前提になっていて今やりたくないけどあとでやるみたいなのができません。 たとえば、10分後にならできるんだけど、という仕事が来たとします。 このときGearmanのワーカの中でsleepして10分待つと、後から来たほかの仕事を一切しないで10分待つことになってしまって、後から来た仕事が今すぐできるものだったとしても10分待たれさるのでGearmanだと今来た仕事のためにsleepして待つわけにはいきません。 結果としてGearmanだとやってきた仕事を今すぐやるか、絶対やらないか、の二択になってしまいます。 それだと困るので、もう一方のTheSchwartzだと、今やりたくないけどあとでやる、

Permalinkという概念が浸透して、比較的最近作られたようなウェブのサービス上にあるリソースには、そのリソースを一意に表すことのできるURLが割り当てられているようになりました。このブログの記事を表すURLはhttp://labs.gmo.jp/blog/ku/2008/06/fav.htmlで、このURLにアクセスすればこのページがなくなったりしない限りは"多くのサービスに見られるコンテンツに対するfavという概念"について書かれた文章が得られます。このブログにある記事が増えたり減ったりしても、この記事を表すURLは変わりません。 read/write ひとつのリソースに普遍的なひとつのURLが割り当てられていれば、そのURL自体をIDにしてリソースを読み書きすることができます。以前デバイスドライバ/FUSEのrestfs/SITEINFOの役割比較で触れたRESTfsはその前提の上

Webアプリケーションの中には、ときどき時間がかかる処理をしないといけない部分があります。アップロードされた画像のサムネイルを多数生成するときや、クライアントからのリクエストに応じてさらにリモートのサーバからファイルを取得してきたりするとき、ふつうに作るとユーザは処理が終わるまでの数秒~数十秒間待たされるのでイライラしてきます。 こんなときには昨年のYAPCでLiveJournal: Behind The Scenesの中で紹介されている、perlで書かれた非同期処理サーバのGearmanが役に立ちます。Webアプリケーションから時間のかかる処理を別プロセスで動いているGearmanに依頼しておくことで、時間のかかる処理が終わるまで待つことなくユーザにレスポンスを返すことができます。 ほんとうは、時間のかる処理の性質と、必要とされる機能に応じてGearmanとTheSchwartzとを使い

(たしか)Firefox3beta5から、ブックマークツールバーに"Most Visited"や"Recently Bookmarked"という項目がデフォルトで入っているようになりました。プロパティをみてもタイトルしか表示されず、どういう仕組みになっているのかわかりません。表示する情報をいろいろ変えられるのならおもしそうだなーと思って、これの作り方を調べました。 以前からあるlivemarkと同じようなみためで、自分のブラウザの履歴やブックマークから一定の基準でフィルタされたデータがリスト表示されます。 ちなみにlivemarkはSafariやIE7にもついているRSSをブックマークのフォルダとして登録できて、RSSのアイテムひとつひとつがブックマークとして表示される機能のことです。ほかにもFirefoxにはmicrosummariesというXPathでページの特定の部分を取り出して表示

先日The JUI 2008 Tokyoに参加させていただいて、その中でGreasemonkeyの中で使うならjQueryが便利だよ！というLightning Talkを聞きました。たぶんその発表をされていた内山さんが以前に書かれたWe Ain't Seen Nothin' Yet. : GreasemonkeyスクリプトにjQueryを読み込む汎用スクリプトを今朝読んでXPCNativeWrapperがあるのでグローバルのネームスペースにいろいろ設定したりするほかのライブラリだと使いにくいというのもあるのを知りました。 コードの評価にどれくらい時間がかかるのか 自分も以前にMochiKitの非同期処理をラップしてくれるDefferedを使いたくてMochiKitをまるまるスクリプトの中に入れて使ったことがありました。そのときMochiKitをまるまるいれたら読み込むのに100msくらいか

みなさまGraffiti Research Labをご存じでしょうか。 ハイテク(とかローテクとか)を駆使して最先端のグラフィティをテーマに活動している集団で、ビルにレーザーで落書き映像を投影するL.A.S.E.R. Tagが有名です(MoMAで展示もあったそうで)。Graffiti Research Labにはいろんな作品があるんですが(ページの右側にリストされています)、その中で個人でもわりとお手軽に楽しめるのがGraffiti Research Lab » LED Throwiesです。 LED throwies の作り方 3Vのボタン型リチウム電池にLEDを挟んで磁石と一緒にテープでくっつけたらできあがり。あとは身近にある金属の部分がある何かにくっつけて楽しみます。部品の調達方法から組み立てかたまで、詳しいことはLED Throwies - Instructablesに載っています

気がついたら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

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要素のリス

wedata対応バージョンのSITEINFO作成用Firefox拡張機能 AutoPagerize Iteration Detector HTMLのドキュメントから繰り返し部分をみつけてSITEINFOをつくるAutoPagerize Iteration Detectorをwedataに対応させました。AutoPagerize Iteration Detectorで作ったSITEINFOを直接wedataに反映させられるようになっています。 インストール iterd.xpi(supports Firefox 2.0-3.0.0.*) つかいかた 使い方はwedataに接続する部分以外以前のバージョンとかわっていませんが、ざっと紹介します。 次のページへのリンクを右クリックする SITEINFOを作りたいページを開いて、ページの中にある次のページへのリンクを右クリックします。メニューの中に

AutoPagerizeのSITEINFOがwedataという、キーと値を管理することを目的としたwikiのようなもので管理されるようになりました。このwedataはキーと値を管理するだけの単純なデータベースを不特定多数で編集することができる仕組みです。新しく自分でデータベースを作れことができるようになっているのでAutoPagerizeのSITEINFOだけでなく、自分で作ったスクリプトのためのSITEINFOをかんたんに作ったりすることができます。 私が作ったわけではないのですが、去年のはじめからこんな仕組みがほしいなと思っていたようなものになっていてとてもうれしいので、ちょっと長いですがwedataの紹介をしたいと思います。 AutoPagerizeとそのしくみ いろんなサイトで次のページを自動的に表示するためのGreasemonkeyスクリプトのAutoPagerizeは、wiki

AutoPagerizeやLDRizeなどのスクリプトで、ページごとの構造を記述するSITEINFOに書くXPathは、どう書いたら速いのかが話題にのぼっていたので、JavaScript-XPathを使ってXPathがDOMツリーから要素を見つけ出す雰囲気を視覚化してみました。JavaScript-XPathが各ロケーションステップで要素がマッチするかどうかをテストするときに呼ばれている(んだと思う)attrMatchという関数の引数に渡される要素をロギングして、そのデータをもとにちょっと時間をずらしながら要素をハイライトしています。 前置き あくまでJavaScript-XPathでattrMatchが呼ばれている要素を視覚化したものです。実際のXPath実装とは異なります。JavaScript-XPathではdescendant::*((//*))の評価をgetElementsByTa

Firefox3のbeta5が公開されました。 Firefox web browser | International versions: Get Firefox in your languageでダウンロードすることができます。 Firefox3はFirefox2とくらべて、メモリの使用量が減ったとか、レンダリングやjavascriptの実行が速くなったとか、いろいろ変わっています。でも個人的にダントツで一番便利になったと感じているのはアドレスバーでのURL補完機能が強化されたところです。 今のブラウザはみんなアドレスバーにURLを入れると、前にアクセスしたことのあるページでそのURLから始まっているページのリストが表示されます。よく覚えてないけどこの機能は Netscape Navigator 4.0で(自分の知る範囲では)はじめて導入されて、その後IEにも導入された機能です。でもこ

以前に作った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に繋いで直接操作できるよう

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のjavascriptバージョンwebscraper.jsとXPathをてきとうに作ってくれる機能を追加したwebscraperp.jsにHTMLのドキュメントから繰り返し部分をみつけてSITEINFOをつくるAutoPagerize Iteration Detectorみたいなみためをくっつけて、取り出したい部分をクリックしたらてきとうにXPathを生成してWeb::Scraperのコードにして出してくれるFirefoxのextensionを作りました。Firefox3専用です。ごめんなさい。 ダウンロード WebScraper IDE (for Firefox3) 使い方 今回もいつもお世話になっているスターバックスさんの店舗検索結果(住所・店名・条件から探す)を例に使い方をご紹介します。 WebScraper IDEをインストールするとツールメニュ

2年前の夏に書かれたFirebugの便利な組み込み関数 - 技術メモ帳を読んで、いまさらdebuggerと書くとそこからデバッガでステップ実行できるのを知ってショックでした.... lurkerさんのブログで紹介されている$0, $1 で直前にinspectしたものを参照できることも、なぜか公式のドキュメントっぽいFirebug Documentationには載っていなくて、FireBug Documentation - JoeHewitt.comには載っています。 で、もうひとつ、ソースコードにしか書かれてなさそうなやつを発見しました。$$1と$$2です。 自分はFirebugを使っていて、ときどきconsole.logで出したオブジェクトのプロパティを引数にして関数を呼んだりしたい、ということがあったけどできなくて困ってたんですが$$1でそういうことができるようになりました。 たとえば

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だとアクセスしたときによって出品されているものが違って

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