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を使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
Safari拡張の自動更新方法 - os0x.blog
次のようなXMLを拡張子.plistで適当な名前で保存して、サーバーにアップします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Extension Updates</key> <array> <dict> <key>CFBundleIdentifier</key> <string>net.os0x.autopatchwork</string> <key>Developer Identifier</key> <string>LAM47A73AC</string> <key>CFBundl
NinjaKit - os0x.blog
NinjaKit*1というChrome/Safari拡張を公開しました。 Chrome:Chrome Web Store - NinjaKit Safari:NinjaKit for Safari Source: os0x/NinjaKit · GitHub これはFirefoxのアドオンであるGreasemonkey相当の機能を実装することを目指しています。 今のところ、 GM_xmlhttpRequest GM_addStyle GM_getValue GM_setValue GM_deleteValue(new in ver 0.7) GM_listValues(new in ver 0.7) GM_log GM_openInTab GM_registerMenuCommand(Safari版は未サポート) Metadata @include @exclude @require @b
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
BPStudy#32でChrome拡張とECMAScript5についてお話してきました - os0x.blog
若手IT勉強会 : ATND(次回25日)繋がりのid:monjudohに誘われて株式会社ビープラウドさん主催のBPStudy#32 : ATNDでChrome拡張についてお話してきました。 資料はこちらChrome Extension with ECMAScript またこの資料か、という声が聞こえてきそうですが、http://ss-o.net/chrome/extension/ecma.html#yet-another-greasemonkeyあたりから今回用の新しい内容になっています。 と、このyet another greasemonkeyについては書き始めると長くなるので、近いうちに改めて記事を書きます。現状とりあえず動くレベル(AutoPagerizeがなんとか動くくらい)にはなってるけど、あちこちボロボロな状態です…。 そしてhttp://ss-o.net/chrome/ex
IEでのテキストノード走査の高速化 - os0x.blog
に釣られて。 HatenaStar.js 1380 行目 テキストノード走査 一番のボトルネックはやはりここですね。IEなので、こんな感じでベタに計測。 makeTextNodes: function(c) { if (c.textNodes || c.textNodePositions || c.documentText) return; if (Ten.Highlight.highlighted) Ten.Highlight.highlighted.hide(); c.textNodes = []; c.textNodePositions = []; var isIE = navigator.userAgent.indexOf('MSIE') != -1; var texts = []; var pos = 0; var st = new Date*1; (function(node,
複数のバージョンのGoogle Chromeを同時に動かす方法 - os0x.blog
複数バージョンのChromeを同時に動かす方法は公式には用意されていませんが*1、割と簡単にバージョンごとのChromeを動かすことができます。 出典はGoogle Chromeを任意のフォルダにインストールする方法など: 夜明け前と2chのChromeスレ*2からです。 インストールしたいバージョンのインストーラーを用意 4.0.249.30をインストールしたい場合、http://dl.google.com/chrome/install/249.30/chrome_installer.exe からダウンロードできます。 バージョン番号の後半2つをhttp://dl.google.com/chrome/install/xxx.xx/chrome_installer.exe のxxx.xxの部分に当てはめればそのバージョンがダウンロードできます。バージョン番号は後半2つだけでユニークになるよ
毎秒100回JavaScriptが実行ってのがどの程度なのか - os0x.blog
非ネットで聞いた話なども含め、ここまでやっても信じない人もいっぱいいるみたいで、そこまで疑う人のためにとりあえずパッチは出しておいたのだが、みんな「怪しいよね」って陰で言うだけで、誰も追試はしてくれなかったみたいだ。他人の書いた、しかもCPU使用率なんて割とどうでもいい系のエントリなんてわざわざ検証する人はそりゃいないだろうとは思うけど、気分が悪いのも確かだ。どうせ誰も試さないなら、パッチ自体は次のネタにとっときゃよかったなぁ…。 http://d.hatena.ne.jp/tkng/20091003/1254578195 では折角なので、検証を。Firefox前提なら、Firebugのプロファイル機能で一発なので、検証用マシン*1で以下のスクリプト実行。 // ==UserScript== // @name google stats // @namespace http://ss-o.n
IEをChromeにするGoogle Chrome Frameがすごい(けど実用的なレベルではないよ) - os0x.blog
Googleから、Google Chrome FrameというIE用プラグインが開発者向けにリリースされました。 FirefoxのAdd-onで、Firefoxの中にIEを表示するIE TabというAdd-onがありますが、Google Chrome Frameの場合はIEの中にChromeを表示します。 今のところ、Chromeで表示させる方法は3つあります。 URLにcf:というプリフィックスをつける(手軽だけど、その時限り) HTMLのメタタグで下記の記述をする(サイト側の指定) <meta http-equiv="X-UA-Compatible" content="chrome=1"> レジストリでURLを指定する Page not found - The Chromium Projectsに詳細がありますが、ここでの紹介は控えます。 この通り、Google Chromeのdev版
XMLHttpRequest Level 2 と wedata バックアップ - os0x.blog
http://ss-o.net/json/ 以下に対して、.htaccessで Header append Access-Control-Allow-Origin: *という指定をして、ヘッダーにAccess-Control-Allow-Originをつけているので、(*はすべてのドメインからのリクエストを許可) http://ss-o.net/json/wedataAutoPagerize.json http://ss-o.net/json/wedataLDRize.json などのファイルについてはFirefox3.5、Safari4、Google Chrome 2、IE8*1などのブラウザではクロスドメインでXMLHttpRequestを投げることができます。 サンプルコード javascript:(function(){ var xhr=window.XDomainRequest?
Subversionの履歴をMercurialに引き継ぐ - os0x.blog
Google CodeでMercurialを使う - 0xFFで、「ver1.1時点では変更履歴の引き継ぎはサポートしていない」と書いたところ、id:kzysに Subversion レポジトリのデータを引き継ぎたい場合は 1. hg convert でもとの Subversion レポジトリを Mercurial レポジトリに変換 2. Google Code 側を Mercurial に切り替え 3. 切り替えたレポジトリに hg convert でつくったレポジトリを push とやれば、うまくいきそうだと思いました。ごめんなさい、未検証です。 http://d.hatena.ne.jp/os0x/20090604/1244085244#c1244253413 と情報を頂きました。 折角の機会なので試したところ、確かに上記の方法で履歴を引き継ぐことができました。 以下、もう少し詳しい
Google CodeでMercurialを使う - os0x.blog
先日のGoogle I/OにてGoogleWaveの影でこっそりと、Google CodeでのMercurialのサポートが全面的に公開されました。 The Google Code Blog: Mercurial Now Available to All Open Source Projects (それまでは限定的にMercurialが使える状態でした) 日本ではgitの方が優勢のようですが、MercurialはPage not found - VecTraceやTortoiseHgなど開発環境が揃っている点が魅力的です。 今までは手軽なHosting先がなかった点がネックだったわけですが、Google Codeが正式に対応したおかげでMercurialを始める準備が整いました。 僕が知らなかっただけで、Free source code hosting — Bitbucketという素晴らし
大量に同じ画像を表示したいとき - os0x.blog
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += ' css:' + ((new Date*1) - now); })();
inspect window(and Safari3と4の判定) - os0x.blog
前回のをちょっと改良してwindowオブジェクトを解析してみた。 http://ss-o.net/test/window.html で、Safari3からSafari4betaで新たに増えたグローバルプロパティを調べてみた。 getSearchEngine postMessage setSearchEngine CSSVariablesDeclaration CSSVariablesRule CanvasRenderingContext2D Clipboard DOMStringList File FileList HTMLCollection MessageEvent MimeType MimeTypeArray Plugin PluginArray Storage StorageEvent TextMetrics WebKitAnimationEvent WebKitCSSKeyfra
TinyurlなどのURLを復元するJSON(P) API - os0x.blog
最近Perlの勉強を始め、入門書を読んだりしてPerlのソースがそこそこ読めるようになってきました。 で、そろそろ実際に書いてみますかということで、以前からほしかったAPIに挑戦してみました。 reurl API Tinyurlなどで圧縮されたURLを復元*1してJSON(callbackがあればJSONP)を返すAPIです。 圧縮されていないと思われるURL(サービスのドメインで判断)は基本的にそのまま返します空文字列を返します。 API API:http://ss-o.net/api/reurl.json Parameters: url (URL encoded) callback (Optional) Ex1. http://ss-o.net/api/reurl.json?url=http%3A%2F%2Ftinyurl.com%2Fc3vhol Ex2. http://ss-o.n
主要ブラウザで動くCSSを追加する関数 - os0x.blog
GM_addStyleの実装と最適化 - 0xFFに関連して、「IEでGM_addStyleみたいな関数ってどう書けばいいんだろ」とつぶやいたら、fubさんにcreateStyleSheetってのを教えてもらいました。で、調べてみたらcreateStyleSheetとcssTextで割と簡単に書けるみたいなので、クロスブラウザな関数にまとめてみました。 addCSS.js function addCSS (css){ if (document.createStyleSheet) { // for IE var sheet = document.createStyleSheet(); sheet.cssText = css; return sheet; } else { var sheet = document.createElement('style'); sheet.type = 'te
oAutoPagerize - 0x集積蔵
AutoPatchWorkがOpera、Chrome、Safariそれぞれの拡張機能として利用できるようになったので、oAutoPagerizeの更新は停止しました。ご了承ください。 id:swdyh氏のAutoPagerize for GreasemonkeyをOperaやSafari,Google Chromeなどで動作するように移植*1しました。 for Opera 必須ファイルは0AutoPagerize.SITEINFO.jsと、oAutoPagerize.jsの2つです。0AutoPagerize.Settings.jsはオプションです。以下説明。 SITEINFO ファイル:0AutoPagerize.SITEINFO.js wedataのSITEINFOをまとめたファイルです。OperaのUserjsはファイル名順に実行されるので、ファイル名を0で始めています。このSITE
Greasemetal, GreaseKit で使える UserJavaScript (自作中心) - os0x.blog
Greasemetal, GreaseKit(Safari3以降)で使えるUserjsを自作のものを中心にまとめてみます。自作と言っても、いろんな方がFirefoxのGreasemonkey Scriptとして作成されたものをOperaやGreaseKitでも動作するように移植したものが大半です。先人の皆様に感謝。 Google Chrome 2がリリースされ、標準でGreasemonkey相当の機能が実装されました。そのため、Greasemetalは開発を終了しています。Google Chrome 2ではGoogle Chrome 2.0 で使える(自作の) User Scripts - 0xFFをどうぞ Greasemetal 利用時の注意 先ず注意事項を書いておきます。初歩的なことで、わかりきった内容だとは思いますが念のため。 必ずGreasemetalのショートカット(もしくはそれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
