CSSセレクタの高速化の話を検証 - os0x.blog
CSSセレクタの高速化の話し - Webtech Walkerの件。元ネタは続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティスで、元ネタの元ネタはWriting Efficient CSS for use in the Mozilla UI - MDC。 先に書いておくと、この元ネタのMozillaの記事には、in the Mozilla UIとある通り、FirefoxなどのUIレベルの話です。Mozillaの場合、ウィンドウとかタブとか、とにかくなんでもCSSでスタイルを指定できる(している)のでCSSのパフォーマンスについて考慮する点が他のブラウザとはズレています。 とはいえ、実際にどうなのか検証したことなかったので、少し試してみました。 今回の検証方法は、dl>dt+ddを5重に入れ子にした300KB強の大きめなHTMLを用意して、CSSを動的に適用したときの時間
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の開発環境をなるべく最近の流行りを取り入れてレポートします。 ブラウザ さて、マシンのセ
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
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月くらいのア
AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - os0x.blog
以前からある手法から順番に見ていきます。 ページの高さの監視 setIntervalでページの高さを監視して、増えていたらAutoPagerizeが動いたとみなして処理を行う var THRESHOLD = 300; var _height = window.innerHeight; setInterval(function(){ if (window.innerHeight - _height > THRESHOLD) { // 処理 } _height = window.innerHeight; }, 300); メリット AutoPagerizeだけでなく、はてなダイアリー・ブックマーク、Twitterなどでのサイト側でのページの継ぎ足しにも対応できる デメリット THRESHOLDをいくつにするかなど、一概に決められない。タイマーをたくさん回すと重くなる。Floatしている要素を継
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
オレ標準JavaScript勉強会を開催しました - os0x.blog
Twitterでこっそりと募集して、オレ標準JavaScript勉強会というイベントを開催しました。 id:edvakfさんが来日されるということで、「会いましょう→何かやりましょう→勉強会とかどうでしょう」というTwitter上の軽いノリで企画され、みんなで短いネタを披露し合う一品持ち寄りの少人数勉強会をやってみよう、ということになりました。で、そのままTwitter上で参加者を呼びかけてみたところ、半日もたたずに15名集まって、しかもそうそうたる顔ぶれに！ 当日 色々と反省があったので、少し書き出しておきます。 まず、会場*1には有線LANしかないので、自前のルータで無線LANをやろうとしたんですが、設定がなかなかうまくいかず、だいぶ手間取ってしまいました。やはり、安物のLANは駄目ですね…。大人数で繋ぐと安定しないし、有線をいっぱい用意したほうが良かったです。 で、Ustreamに挑
Safari拡張の作り方 - os0x.blog
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
JavaScriptで3D - os0x.blog
id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと本格的な(だけどライブラリとして大きすぎないような)のをポートしたくなったところにchannel3のことを思い出して、突貫でやってみました(コメントアウトいっぱいでソースは綺麗じゃないです)。 SVGとCanvas両対応です。なぜかというとパフォーマンスを比べたかった(SVGのほうが良い)のと、テクスチャやるにはCanvasが必要になりそうだから。 実はSVGほぼ初めて触ったんですが、面白いので後でまとめようと思います。 ソースは os0x / channel3JS / source — B
第3回はクロスブラウザの傾向と対策 - os0x.blog
これでできる！ クロスブラウザJavaScript入門：第3回 クロスブラウザの傾向と対策｜gihyo.jp … 技術評論社 と、今さらですが、連載全体としては連載：これでできる！ クロスブラウザJavaScript入門｜gihyo.jp … 技術評論社からどうぞ。 今回からいよいよクロスブラウザの本題に入ってきました。前回の記事について、バッドノウハウを広めるのはどうよ的なツッコミがあり、はてなブックマーク - clear sky source - とてもCSSハックが面倒ですので、何か用意してくださいのedvakfさんのコメントなどに影響されたところもあって、かなり標準仕様への準拠を意識した内容になっています。正直、すごいハードルが高くなるので不安はありますが、折角なので頑張ろうと思っています。 あと正直、何が辛いかというとDOM Level 0周りのドキュメントの少なさが一番きついで
Chromeで読み込みに失敗した画像についてリファラを消して再読み込みを試みる方法 - os0x.blog
[追記]実際に使用したい方は @civic さん作のLDR Image Loader extensionをどうぞ。 Chrome Dirty Hacks 01: fc2 image for LDR - 枕を欹てて聴くの別解みたいなのです。要は、livedoor Readerでfc2やアメブロの画像を表示してやろうというネタです。 まず、id:edvakfさんが実験していた edvakf's gist: 48621 — Gist から インラインフレームにdataスキームでhtmlを挿入するとlocationがそのdataスキーム自身になり、そこからのリクエストにはリファラがつかない というテクニックを応用して、さらに errorイベントキャプチャリングフェーズで監視*1して画像のerrorを捕捉 インラインフレームを作ってデータスキームのhtmlを挿入し、そのなかで読み込みに失敗した画像を
連載第6回はWeb Inspectorの紹介 - os0x.blog
続・先取り！ Google Chrome Extensions：第6回 Firebug要らずなChromeのWeb Inspector｜gihyo.jp … 技術評論社 「ChromeにFirebugはないのか」みたいな発言をちょくちょく見かけるので、Firebugより強力なWeb Inspectorがあるよって記事にしました。まあ、まだまだ使いにくいところとかあって、Firebugにも及ばないところも多少ありますが、かなりいい感じになってきているので、是非試してみてください。 なお、今回の記事の元ネタはGoogle Chrome Developer Tools - The Chromium ProjectsとGoogle Chrome Developer Tools Tutorial - The Chromium Projectsです。誰かがこれをネタに記事を書くんじゃないかとすこし心配
複数のバージョンの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つだけでユニークになるよ
連載第5回と公開している拡張 - os0x.blog
続・先取り！ Google Chrome Extensions：第5回 Chrome ExtensionのAPI#2｜gihyo.jp … 技術評論社 今回から新しい拡張を作り始めました。記事中では本当に作りかけですが、今朝なんとか実用できるレベルにしてギャラリーにアップしました。 Chrome Web Store - Start Tile New Tabページをこんなふうにする拡張です。 一応予定としては、左側のタブ一覧でタブを閉じたり移動させたりとか、またブックマークからドラッグ&ドロップしてタブを開いたりとかをできるようにしようと思っています。 あと、個人的にはChrome Web Store - Gestures for Chrome(TM)と、Chrome Web Store - Keyconfigが動くのもポイントです。なぜ動くのかといえば、単にjsファイルを読み込んでいるだけ
Chromium-Extensions-Japan開始と、Google API Expertのお知らせ - os0x.blog
既に、いくつかの記事*1で報じられていますが、Google Chrome拡張のGoogle準公式コミュニティChromium-Extensions-Japanができました。 そして、私がそのコミュニティの管理人を担当させて頂くことになり、同時にGoogle API Expertになりました。 私にそんな大役が務まるのか不安はありますが、同じくGoogle準公式コミュニティである html5j.org | Google グループ の白石さん、羽田野さんという大先輩にもサポートを頂きつつ活動していく予定です。このあたり、Google Chrome拡張はHTML5とその関連技術によって成り立っていますし、HTML5はブラウザの対応状況の問題で、その最新技術のフィールドとしてGoogle Chrome拡張を求めているという、実利的な関係があります。 拡張が使える Google Chrome (BE
Mac版Chromiumについて - os0x.blog
Google Chrome Official Build が出た！ - soundscape out 404 Blog Not Found:chromium (google chrome for Mac) を早速試してみた [N] Google Chrome for Mac「Chromium」を試す Google Chrome for Mac（Chromium）を試す | ソフトウェア | Macお宝鑑定団 blog（羅針盤） 若干誤解が広まりつつあるように思えるので、補足情報を。 ChromiumというのはThe Chromium Authors*1が作っているオープンソースブラウザで、そのChromiumがカスタマイズしてリリースしているのがGoogle Chromeです。 上記エントリでは Chromium が Google によって提供されているかのように書かれていたりしますが、そ
AutoPagerizeを軽量化するアイデア - 0xFF
先に結論を言うと、AutoPagerizeは拡張版がオススメです。以下その理由と余談的なお話です。 拡張版のAutoPagerizeについてちょっと勘違いしてました。AutoPagerizeは軽量化できるという話に路線変更します。 AutoPagerizeってのは、次のページを今見ているページの下に継ぎ足して、ページ遷移することなく次のページを見ることができる、ブラウザの機能を拡張するスクリプトです。 このAutoPagerizeは派生スクリプトがたくさんあって、FirefoxだけでみてもGreasemonkey版のAutoPagerize(本家)、cho45さんのjAutoPagerize、Add-onのAutoPagerize(本家)、AutoPager(作者は日本人ではなく、どちらかというと非日本語圏向けかも)などなど。他にもかなりの数があります*1。 で、Opera、Google
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が確定する前の入力途中のキーワードを捕まえるためのようです。そこまでする必要ないよって人も多そうですよね。そういう人向けのスクリ
FirefoxとOpera対応のUser Scriptを書くときのunsafeWindow - os0x.blog
煤 - Note : 各ユーザスクリプトツールの window、unsafeWindowの件。 今までは、 var w = typeof unsafeWindow != "undefined" ? unsafeWindow : window; こう書いてた。typeofや"undefined"が嫌な感じ。 でも、 var w = this.unsafeWindow || window; これでいけるみたい。 もちろん、thisが変わっている場合は使えない。 無名関数を使って、 (function(unsafeWindow){ // alert(unsafeWindow) })(this.unsafeWindow || window); こうするとスマートかも。 SafariやIE(fub)は確認してない。(が、問題ないと思う) [追記] miya2000さんのブクマコメより、 window
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
oAutoPagerize ver1.5.0 - os0x.blog
