AutoPatchWorkのサーバー周りのこと - os0x.blog
地味に色々と調整しているのでまとめておきます。見よう見まねの継ぎ接ぎばかりですが…。 AutoPatchWorkはwedata(About - wedata)のAutoPagerize用SITEINFOを使わせて頂いていますが、wedataのサーバーは負荷に弱いので、SITEINFOは自前のサーバー(といっても安心のhetemlですが)に置いています。 hetemlサーバーでcronを設定して1時間に1回、SITEINFOを更新するようにしていて、AutoPatchWorkユーザーは一日に1回hetemlサーバーからSITEINFOを取得しています。 ただ、AutoPagerizeのSITEINFOは2MB近くあるので、1万人が毎日アクセスしたら転送量が20GBに達します(全員が毎日更新にくるわけではないので、実際はもっと少ないですが)。hetemlの転送量は「目安として 1日 20GB
君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
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を使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
「Google API Expert が解説する Closure Library プログラミングガイド」 - os0x.blog
日本初の Closure Library 本「Google API Expert が解説する Closure Library プログラミングガイド」発売です！ - WebOS Goodies Google API Expertが解説する Closure Libraryプログラミングガイド 作者: 伊藤千光出版社/メーカー: インプレスジャパン発売日: 2010/12/10メディア: 単行本（ソフトカバー）購入: 4人 クリック: 179回この商品を含むブログ (14件) を見る 献本頂きました！ WebOS GoodiesのIto ChihiroさんによるClosure Libraryの解説本です。HTML5ガイドブック - 0xFFのシリーズ本になります。 Closure LibraryはGoogleが開発・提供しているクロスブラウザなJavaScriptライブラリです。jQueryなど
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
プログラミングに最適なConsolasとかInconsolataとか - os0x.blog
でInconsolataだけが紹介されているので、おまけ情報を少々。 Inconsolataというのは、Windows Vista/7 に標準で付属しているConsolasフォントに感銘を受けた作者がConsolasを意識して作ったフォントです。 ConsolasのほうはVista/7だけでなく、Visual Studioに付属してたりもします。一応、こちらからダウンロードもできるようです。 Download: Consolas Font Pack - Microsoft Download Center - Download Details Windows(少なくとも7では)ではConsolasのほうがより(ClearTypeの効きが)綺麗だと思います。というか、InconsolataはWindowsだとどうも今一つ…、ただMacやLinuxではWindowsでのConsolasと同じくら
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
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を動的に適用したときの時間
oAutoPagerize ver1.5.1 RC1 - os0x.blog
Opera10.50 RCが出ましたが、「oAutoPagerizeが原因でフリーズするぞ、どうなってんだ」とのご指摘を頂きましたので、oAutoPagerizeもRC版をリリースしました。 というのも、Googleとか(いろんなサイトで)で落ちるって報告だったんですが、こちらではGoogleで落ちる気配はなく、代わりにAmazonでフリーズしました。で、Amazonではフリーズしないように対応したけど、Googleで落ちる人が落ちなくなったのかは確認できないのでわかりません。というわけで、問題なさそうならこのままで、まだ落ちるような何か対策すると思います(まさにRC版)。ただ、フリーズする原因もはっきりしたわけではないので、対応できるのか…。 ついでに、前回のGoogle画像検索対応をちょっと修正して9.6系でも動くようにしました。SITEINFOをローカルに書かなくしたので保守性もアッ
DOM取得のパフォーマンス比較 - os0x.blog
心に宇宙は満ちているでChromeのXPathが遅いあたりが気になって、軽く検証してみました。 Speed Test. links, elements, xpath, querySelector! 単純にリンク要素を取得、走査 リンク要素を取得、#を含み、テキスト(手抜きでinnerHTML)が25で終わるリンクを検出 という2つのパターンについて、それぞれ document.links document.getElementsByTagName('a') XPath querySelectorAll で実行し、パフォーマンスを計測しています。 各ブラウザごとに特徴が出ていて、FirefoxではXPathが複雑になったほうがむしろパフォーマンスがあがっていたり、確かにChromeではXPathのパフォーマンスがいまひとつのようです。 まとめとしては、単純な条件で要素を取得したい場合はget
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している要素を継
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が確定する前の入力途中のキーワードを捕まえるためのようです。そこまでする必要ないよって人も多そうですよね。そういう人向けのスクリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
