君は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を使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
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月くらいのア
script, styleタグ内のコードの書き方 - os0x.blog
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
Safari5の拡張作ってみた - os0x.blog
Chrome拡張をとりあえず3つだけSafari拡張に移植というか、どちらでも動くようにしてみました。以下からインストールできると思いますが、今のところ拡張は頻繁にクラッシュしますし、正式リリースされてないということは色々と問題が残っているということですから、そのあたりをご理解の上、ご利用は自己責任でお願いします。 http://ss-o.net/safari/extension/AutoPatchWork.safariextz AutoPatchWorkのSafari拡張版。いわゆるAutoPagerizeクローン。アイコンの色がおかしい？アイコンの色は制限されているみたいです。ちょうどいい機会なのでアイコンを廃止してページの下にラインを出すようにしました。 http://ss-o.net/safari/extension/SocialCounter.safariextz SocialC
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を動的に適用したときの時間
クロスブラウザJavaScriptの連載始めました - os0x.blog
これでできる！ クロスブラウザJavaScript入門：第1回 ウェブブラウザとJavaScriptの未来｜gihyo.jp … 技術評論社 gihyo.jpさんでクロスブラウザを扱った連載を始めました。JavaScriptを中心に、CSSなどの周辺の話や、その辺のバックグラウンドにある標準化の話題なども扱っていく予定です。 去年までは仕事でクロスブラウザに苦労し続けてきましたが、最近はChrome拡張のような特定環境でのJavaScriptを書くことが増えてきました。このままクロスブラウザ周りを忘れてしまうのも勿体無いなと思って、これまでのノウハウは出来る限り詰め込んでいこうと思っています。 当面は、前半は背景知識とかノウハウとかをコラム的に、後半は実際にコードを読むという流れでやっていこうと思っています。ネタのストックはかなりあるので、続けられるだけ続けようと思っていますので、よろしく
複数のバージョンの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つだけでユニークになるよ
referrerやDeferredのスペル - os0x.blog
JSDeferredを打とうとしてrとeの数に不安になるこの頃だったが、 refer + rer defer + red で憶えると間違えないことに気がついた。
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を挿入し、そのなかで読み込みに失敗した画像を
株式会社ALBERTを退社します - os0x.blog
12月末が正式な退社日で、有給休暇の消化のため昨日(11月30日)が最終出社日でした。 2005年5月からちょうど4年半、長かったような短かったような、なんとも言えない気持ちです。 2005年当時、大学4年生だった私は大学院に進むつもりで割と軽い気持ちで(といってもゼミの先生の紹介だったのですが)アルバイトを始めました。それが今のALBERTの前身で、その2ヶ月後にALBERTの立ち上げがありました。 いざバイトを始めてみると、仕事のほうが楽しくなってしまい(ベンチャーの創業期に関わったのだから、今思えば当然ですね)、学校のほうは卒業に必要な単位をほぼ取り終えていたこともあり、ほぼ週5日フルタイムで働いていました。 で、あっさりと大学院への進学はやめ、そのまま2006年の4月から(形ばかりの)新卒としてALBERTに正式に入社することになりました。 職場の方々は経験豊かな先輩ばかりで、色々
Twitterで自分がブロックしているユーザーを確認するブックマークレット(とサービス) - os0x.blog
Who I Block? by @arikfrでSign in with Twitterボタンをクリック→Twitterのサイトに飛ぶのでそこで拒否か許可を選択。whoiblockに戻るとブロックしているユーザーが表示される。こちらでは下記のようなブラウザの再起動みたいな手間もなく割と安全に確認できるはずです。ただ、このサービスを私とは一切関係がないので本当に安全かどうかは(私は)保証できません。あしからず。 Twitterの仕様変更により、下記のブックマークレットは動作しません。 http://twitter.com/ を開いた状態で、下記をブラウザのアドレスバーに貼り付けて実行すると認証ダイアログが出るので、ユーザー名、パスワードを入力してください。サイドバーにユーザー名がずらっと出てくると思います(一人もブロックしてなければ何も出てきませんが)。 なお、一度認証を通すと、ブラウザを再
Chrome Keyconfig ver 1.4.1をリリースしました - os0x.blog
詳しい更新情報等は ChromeKeyconfig からどうぞ。以前のバージョンをインストールされている方は自動でアップデートされるはずです。 今回は、現状のChromeKeyconfigでどんなことが出来るのかざっくり解説します。 まず、メイン機能はキー入力へのアクションの割り当てです(いわゆるショートカットキー)。割り当て出来るアクションは、タブの開閉、隣接タブへの移動、URLに移動(ブックマークレットの実行も可能)、id:edvakfさん作のHit-A-Hintのほか、AutoPatchWorkとの連携なども可能です。 あえてデフォルトでは無効にしていますが、設定次第ではLDRizeやスムーズスクロールも可能です。 ショートカットキーはサイト側で設定されたキーとぶつかってしまう問題が良く起こりますが、その解決策として通常モードと制限モードという2つのモードを導入しています。デフォルト
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
毎秒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
JavaScriptの勉強会資料を公開 - os0x.blog
私が講師役をしている社内向けJavaScript勉強会の資料をまとめて公開しました。 実践JavaScript - 株式会社ALBERT 社内勉強会資料 1回目を書いてからだいぶ間が空いてしまいましたが、その分6回分をまとめて、インデックスや見た目等々を整理してあります。 コードのハイライトには google-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hosting を使用してみたのですが、すごく重かったので出力結果を静的に使っています。 オススメ回は実践JavaScript - JavaScript特有の問題・クロスブラウザなど - 株式会社ALBERT 勉強会資料でしょうか。特にクロスブラウザなDOMサイズ取得は自分でも良く参照してます。 間違いなどありましたら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
oAutoPagerize ver1.5.0 - os0x.blog
