Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
MacをJavaScriptの開発環境にするメモ - os0x.blog
以前は自宅も仕事もWindowsメインな環境だったんですが、仕事の方がでMac+英語キーボードな環境になり、ついでなので自宅もそれに合わせることにしました。 環境はMac miniの最新型で一番安いの(6月くらいに購入)とMacbook Airのやっぱり一番安いの(11月に購入)です。両方合わせて15万くらい。お手頃…なのか？どうでもいいけど、mac miniは1.3kgしかなくて、Macbook Airの13インチとほぼ同じ重さだっりします。miniデスネー。 ついでにWindowsのほうは2年半前に買ったCore2duo(Windows7アップグレード済み)で、当時そこそこハイエンドだったやつです(ちょうどMac miniと同じくらいのスペックだけどこいつは一体何kgあるんだろう…)。 以下、Macの開発環境をなるべく最近の流行りを取り入れてレポートします。 ブラウザ さて、マシンのセ
AutoPatchWork更新とSITEINFOのあれこれ - os0x.blog
まだChrome版だけですが、AutoPatchWorkを更新しました(AutoPagerizeのセキュリティアップデートとは関係ありません)。 Chrome Web Store - AutoPatchWork ローカライズして(一部を日本語で表示されるようにしただけですが)、かなり前に作りかけていたSITEINFOの管理機能を載せました(あと、NAVERまとめとTumblrの専用対策)。 こんな感じです。 主な機能は 検索 ソート 特定のSITEINFOの無効化 SITEINFOの編集 "number of successful"はURLがマッチして実際に使われた回数、"number of failed"はURLがマッチしたけどXPathでマッチしなかった回数です。自分がよく使うSITEINFO、まったく使ってないSITEINFOが確認できます。 統計を取り始めたのは今年の2月くらいのア
リアルタイムWebハッカソンに参加してきた - os0x.blog
node.jsでWebSocket動かして遊ぼうという素敵なイベント、リアルタイムWebハッカソン : ATNDに参加してきました。 まず、なんといってもめそさんが準備した資料が素晴らしく、大変勉強になりました。資料はリアルタイムWebハッカソンでハンズオンしてきました - 自分の感受性くらいから。node.jsの環境構築から具体的なサンプルの作り方までわかりやすくまとまっています。 で、タイトルのとおりハッカソンなので、上記資料にざっくり目を通してから@yoshikawa_tさんとなにか作ってみようかという話になりました。 ただ、いいアイディアが思い浮かばず、「ゲームとか」と考えたところでという、こちらもnode.js+WebSocket(Socket.IO)で動いているデモアプリを思い出しました。このSwarmationは、右側でお題が与えられて、そのお題の形になるようにマス目を塗り潰
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
ChromiumでVertical Tabsの試験的な実装が始まっている - os0x.blog
少し前から、ChromiumOSのUIモックにSidetabバージョンがあったのですが、この実装が始まりました。 Issue 34509 - chromium - Vertical Tabs - An open-source browser project to help move the web forward. - Google Project Hosting ちょうど今日、 Issue 572041: Make basic side tabs actually appear. - Code Review と、なんだか少し動きそうなコミットがあったので、試しに404 Not Foundから、build 38321を入れて、enable-vertical-tabsオプション(とuser-data-dirも)を付けて起動してみました。 その結果がこちら まだちょっと早かったみたいです。これ
クロスブラウザJavaScriptの連載始めました - os0x.blog
これでできる！ クロスブラウザJavaScript入門：第1回 ウェブブラウザとJavaScriptの未来｜gihyo.jp … 技術評論社 gihyo.jpさんでクロスブラウザを扱った連載を始めました。JavaScriptを中心に、CSSなどの周辺の話や、その辺のバックグラウンドにある標準化の話題なども扱っていく予定です。 去年までは仕事でクロスブラウザに苦労し続けてきましたが、最近はChrome拡張のような特定環境でのJavaScriptを書くことが増えてきました。このままクロスブラウザ周りを忘れてしまうのも勿体無いなと思って、これまでのノウハウは出来る限り詰め込んでいこうと思っています。 当面は、前半は背景知識とかノウハウとかをコラム的に、後半は実際にコードを読むという流れでやっていこうと思っています。ネタのストックはかなりあるので、続けられるだけ続けようと思っていますので、よろしく
GM_addStyleの実装と最適化 - os0x.blog
GreasemonkeyのGM_addStyle関数は呼び出すたびにhead内にstyle要素を作る。 Greasemonkey 0.8.20080609.0のソースより。 function GM_addStyle(doc, css) { var head, style; head = doc.getElementsByTagName("head")[0]; if (!head) { return; } style = doc.createElement("style"); style.type = "text/css"; style.innerHTML = css; head.appendChild(style); } これは、はっきり言って効率が悪い。 補足:CSSをミスったときの影響が自分だけに留まるというメリットはある。 補足2:効率悪いと書いたけど、体感できるような話ではないと思
連載第4回とExtensions galleryについて - os0x.blog
前回の記事でさらっと書いてましたが、第4回が11月30日にアップされています。 続・先取り！ Google Chrome Extensions：第4回 ベータ版に向けたExtension総復習 ｜gihyo.jp … 技術評論社 betaリリースに向けて仕様は固まったので、manifest.json周りをまとめました。まあ、実はドキュメントにないものが幾つかあるので全部ではないのですが、また修正が面倒になるので今回はスルーしました。 さて、Extensionsが有効になったbeta版の公開とGoogle Chrome Extensions galleryの公開がいよいよ迫ってきました。 開発者の方はすでにgalleryにアップロードされているかもしれませんが、少々ハマリやすいところやいくつかポイントがあるのでまとめておきます。 ヘルプが公開されていました、英語ですが。Page not av
株式会社ALBERTを退社します - os0x.blog
12月末が正式な退社日で、有給休暇の消化のため昨日(11月30日)が最終出社日でした。 2005年5月からちょうど4年半、長かったような短かったような、なんとも言えない気持ちです。 2005年当時、大学4年生だった私は大学院に進むつもりで割と軽い気持ちで(といってもゼミの先生の紹介だったのですが)アルバイトを始めました。それが今のALBERTの前身で、その2ヶ月後にALBERTの立ち上げがありました。 いざバイトを始めてみると、仕事のほうが楽しくなってしまい(ベンチャーの創業期に関わったのだから、今思えば当然ですね)、学校のほうは卒業に必要な単位をほぼ取り終えていたこともあり、ほぼ週5日フルタイムで働いていました。 で、あっさりと大学院への進学はやめ、そのまま2006年の4月から(形ばかりの)新卒としてALBERTに正式に入社することになりました。 職場の方々は経験豊かな先輩ばかりで、色々
Googleのトップページを開くと毎秒100回実行されるスクリプトを止めるユーザースクリプト - os0x.blog
Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転をみて、ちょっとソース読んでみたらホントにそんな実装になっていた。んじゃ、止めちゃいますかってことで、サジェスト自体はそのまま機能させつつ、IMEでの確定前の入力には反応しないという実装に無理やり変えるスクリプトを書きました。一応動作を確認したのはFirefox3.5(Greasemokey 0.8)、Opera10、Google Chrome Dev(4.0.213.1)です。GreaseKitは実行タイミングの問題で怪しいかも。 404 Not Found – Userscripts.org ちなみに、なんでGoogleはポーリングをしているかっていうと、IMEが確定する前の入力途中のキーワードを捕まえるためのようです。そこまでする必要ないよって人も多そうですよね。そういう人向けのスクリ
Chrome Extensionsの作り方 2009/06/25版 - os0x.blog
続きは、特集：先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社 と、 連載：続・先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社をどうぞ。 用意するもの Google Chrome 3.0.190.1以降(dev版か、latest Chromium snapshotがオススメ。) 最低限必要なもの manifest.json JSON(not JavaScriptなので、値を'ではなく"で囲まないといけないなど、割と厳格なので注意)で書く拡張の定義ファイルです。 一応必須といえるのはnameとkeyの2つですが、とりあえずはnameさえあればOK。keyはパッケージするときに自動で振られるので自分で書く必要はありません。 { "content_scripts": [ { "js": [ "all.js"
LDRですべての外部リンクをバックグラウンドタブで開くUserScripts - os0x.blog
Greasemonkeyでも動くようにしましたが、一応Google Chrome用です。 LDR open in background tab for Greasemonkey Greasemonkeyでピンの数が減らないバグを修正 Operaで「ポップアップをバックグラウンドで開く」に設定した場合と同じ動作になっているはずです。 仕組みとしては、nativeのwindow.openを上書きして、a要素を作ってミドルクリックのイベントを投げる方式です。将来的に動かなくなる可能性が高い、グレーなテクニックです。 window.open = function(url,name){ var a = document.createElement('a'); a.href = url; if (name) a.target = name; var event = document.createEve
『JavaScript:The Good Parts』にツッコミ - os0x.blog
『JavaScript:The Good Parts』にツッコミ (Kanasansoft Web Lab.)へのレスも兼ねて。 Good Parts読んでない方は、A Life in Shinjuku.: JavaScript: The Good Partsを見れば大体書いてある。 かんそう 良書だと思うのだけど、初心者には説明不足なのが惜しい。ある程度わかってる人が「あるある/いやそれは…」と相槌を打つ感じで、対象読者が狭い印象。詳しく知りたい人はこちら的な情報があれば文句なしだった。 ==と=== ==じゃなくて===を使おうって話。無駄な型変換もなくなるから===を使うことには異論はないのだけど、そもそもfalsyな値との比較に危うさを感じ取るべきだし、いろんな型の値が入っている状況は設計を疑うべきだよね。 配列かどうかの判定 JavaScriptのオブジェクト判定tips - C
JavaScriptは悪くない - os0x.blog
JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第五回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第六回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 最終回 - Yahoo! JAPAN Tech Blog のシリーズがJavaScriptの面白さよりも、暗黒面ばかり伝えてしまっている印象で、連載モノだか
WebKitのデバッガが超絶便利になっている件 - os0x.blog
WebKitのデバッガはDroseraという別アプリで提供されていましたが、つい最近(2008/05/16)本体とセットになるようになりました。 このデバッガがヤバイです。(画像でかくて自分のモニタでもはみ出してるけど気にしない) 開発のWebインスペクタを開いてから、Scriptsを選択するとDebuggerを起動するか聞かれる Attach Debuggerをクリックすると左上に読み込んでるScriptがリストになっている。(eval script)となっているのはGreaseKitが実行するScriptの模様。 GreaseKitのScriptもちゃんとソースが見えるし、 左下の蟻アイコンが青くなっているとエラー(?)のあった箇所でPauseする。右上にPausedと出ていて、この左のボタンでステップ実行とかが出来る。 右側にはローカル変数とクロージャで保持されている変数がスコープご
JavaScriptをこれから勉強しようと思っている人へ(jQueryよりprototype.jsを薦める理由) - os0x.blog
JavaScriptは手軽で、実用的なプログラミング言語 どのくらい手軽かといえばJavaScriptを始めるのに(HTMLとCSSは出来た方が良いけど)予備知識はほとんど必要なくて、ブラウザとエディタさえあればすぐにJavaScriptを動かすことができる(FirefoxにFirebugを入れればコンソールでその場実行できるのでエディタも(リロードも)不要)。 その上実用性も十分で、最近のウェブサービスのバックエンドはPerlやPHP、JavaにRuby、Pythonなどなど様々だけど、フロントエンドは必ずといっていいほどJavaScriptが使われている(FlashもあるけどフルFlashサイトでない限りJavaScriptも使われているし、そもそもFlashを表示するのにJavaScriptが使われていたり)。とにかくJavaScriptが必要とされる場面はすごく多い。 と、こんな理
OperaとSafariでLDRizeとMinibuffer - 0x集積蔵
LDRizeのOpera、WebKitへの移植版です。SITEINFOファイルは定期的に更新されているので、適当にアップデートしてください(Windowsの場合、バッチでどうぞ)。 for Opera http://ss-o.net/userjs/0minibuffer.js http://ss-o.net/userjs/0LDRize.SITEINFO.js http://ss-o.net/userjs/xldrize.user.js http://ss-o.net/userjs/ldrize.opera.js http://ss-o.net/userjs/minibuffer.opera.js for Google Chrome2, GreaseKit(Safari3+) http://ss-o.net/userjs/0minibuffer.user.js http://ss-o.ne
さて、XPathはどこで使う? - os0x.blog
XPath は jQuery や Prototype.js と競合する技術ではなく、むしろ共存する技術です - IT戦記について軽く。 僕はGreasemonkeyを書くときに必ずといっていいほどXPathを使っている。XPathなしでいろんなサイトのHTMLを弄ることは最早苦痛でしかなくて、XPathがものすごく強力で、便利なであることは良く実感している。 でも、 僕は自分が管理するサイトでXPathを使うことはない、つまり汎用JSライブラリとXPathを併用することはないだろうなと思う。 理由は簡単で、自分が管理するサイトであれば適切なマークアップによってシンプルにDOM操作を行えるから。 JavaScriptから操作する各要素に、id,name,classなどの適切な属性を指定してあれば、getElementByIdなどのネイティブなメソッドで高速にアクセスできます*1。 普通はこれ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
