prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
valueOfとtoStringとToPrimitive - os0x.blog
valueOfとtoStringメソッドの水深43cmぐらいの深さの話 - 三等兵のもう少し深いお話。コメント欄に書こうかとも思ったけど、最近ブログ書いてない気がしたのでちゃんと記事にしてみる。 まずは問題です。次のコードを実行したときにtrueかfalseのどちらがalertされるかそれぞれ当ててみてください。 var date = new Date(); var date_string = date.toString(); var date_value = date.valueOf(); alert(date == date_string); alert(date == date_value); true, true false, false true, false false, true (難しい問題ではないと思いますが、)この問題の答えは最後に。 続いて、もっとシンプルな問題です。
JavaScript連載第14回とデベロッパーツール特集 - os0x.blog
デベロッパーツール特集は最終回、クロスブラウザJavaScriptのほうは第14回が公開されています。 デベロッパーツールの最終回は細かいネタを集めた感じに。個人的な一押しはChrome6から実装された about:about です。about:〜って2年前から何度かネタにされていると思いますが、そこそこ有用で使えるヤツはこのabout:aboutでカバーされているはずです。ただ、一部ミドルクリックから開かないと機能しなかったり、ブランクページが表示されるものがあったりしますが…。もちろん、Chrome7ならabout:labsも追加されていますよ。 クロスブラウザJavaScriptは基礎編に戻ってprototypeについて。あんまりクロスブラウザしてないけど、まあ折角なのでこのままthisとかcallとかについてかなり詳しく解説していこうと思います。 うーん、書こうと思えばいくらでも書
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を動的に適用したときの時間
Twitterで自分がブロックしているユーザーを確認するブックマークレット(とサービス) - os0x.blog
Who I Block? by @arikfrでSign in with Twitterボタンをクリック→Twitterのサイトに飛ぶのでそこで拒否か許可を選択。whoiblockに戻るとブロックしているユーザーが表示される。こちらでは下記のようなブラウザの再起動みたいな手間もなく割と安全に確認できるはずです。ただ、このサービスを私とは一切関係がないので本当に安全かどうかは(私は)保証できません。あしからず。 Twitterの仕様変更により、下記のブックマークレットは動作しません。 http://twitter.com/ を開いた状態で、下記をブラウザのアドレスバーに貼り付けて実行すると認証ダイアログが出るので、ユーザー名、パスワードを入力してください。サイドバーにユーザー名がずらっと出てくると思います(一人もブロックしてなければ何も出てきませんが)。 なお、一度認証を通すと、ブラウザを再
等価演算子と厳密等価演算子 in ECMA-262 3rd Edition - os0x.blog
高速化 - latest log 等価演算子（==）と厳密等価演算子（===） - ?D of K について。 等価演算子と厳密等価演算子はどちらが高速か。もちろんケースバイケースではありますが、どちらかといえば厳密等価演算子が有利です。 というのも、ECMA-262 3rd Editionに抽象的等価比較アルゴリズムと厳密等価比較アルゴリズムがあります。このアルゴリズムにおいて少ないステップで値を返すケースは、高速に比較を終えることになります。(と期待できますくらいのほうが良いかな。。) 特に注目すべきは厳密等価比較アルゴリズムで、ステップ1で型を調べてその型が一致しなければそこで false を返します。このため、型の異なる演算では厳密等価演算子が有利になります。 http://ss-o.net/test/js.html ( id:ofk さんのサンプルを改造) 抽象的等価比較 Str
バッチファイルをJScriptとして実行し直すイディオム - os0x.blog
JScript でハマる日々 - m2の別パターン 以前、コメントで教えてもらったやつです。 まず、winbatchとしてハイライト。 rem=0;/* cscript -E:JScript %0 exit */ remで始まる行はコメント扱いに。 2行目で自分自身をJScriptとして実行。 3行目のexitで終了。 バッチファイルとしては以上。 続いて、JScript(javascript)としてハイライト。 rem=0;/* cscript -E:JScript %0 exit */ これはもう見たまま。/* */でコメントアウトされてます。 rem=0が気になるといえば気になるけど。 どちらかといえば、void 0でundefinedにして置いたほうが気持ちマシかな。 rem=void 0;/* cscript -E:JScript %0 exit */
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 と情報を頂きました。 折角の機会なので試したところ、確かに上記の方法で履歴を引き継ぐことができました。 以下、もう少し詳しい
oAutoPagerize ver1.2.3 - os0x.blog
XREA.COMという記事を見つけ、調べてみたところFlickrのサイト側のJavaScriptの影響を受けて*1いることがわかりました。 ただ、直接的な対応をしなくても、XHTMLかどうかの判定方法を変えることで対応できることがわかったので、その方法で修正しました。 Safari以外には直接影響しませんが、一応アップデート推奨です。 oAutoPagerize - 0xFF HTMLとNamespace 以下、内部的な話。 ちょっと前に b:id:vantguarde に教えてもらったのですが、HTML5ではhtml要素のデフォルトのNamespaceが http://www.w3.org/1999/xhtml になっているそうです。 その影響か、WebKitでは(つまりSafariとGoogle Chromeでは)HTMLなページでも、lookupNamespaceURIするとName
Googleの検索結果からキーワードハイライトするGreasemonkey Script - 0xFF
先々週くらいからコツコツと書いていたキーワードハイライトするGreasemonkey Script(もしくは UserJavaScript)をリリースします。 word highlight for Greasemonkey 今のところ、Opera9.5+(Operaで使う場合はファイル名をword_highlight.jsで保存してください。.userはつけないでください)、Firefox3+、Google Chrome2(Devリリース)、WebKit Nightlyあたりで動作します。Safari3、4は後で対応するかも。 検索語を強調表示＆ショートカットが快適なグリモンスクリプト :教えて君.netで紹介記事頂きました。ありがとうございます。記事書くのすげー早い。しかも、要点書いてあるし、画像付きでわかりやすいし、ほんと嬉しいです。 特徴 高速(だと思う) XPathを使って検索する
oAutoPagerize ver1.2.2 - os0x.blog
iframeでは起動しないオプションを追加(DISABLE_IFRAME) thx! oAutoPagerizeをiframe内ではオフにしてみた - by edvakf in hatena Operaで、Remove_blank.cssとの併用時に落ちることがある問題を修正 thx! -o-link で落ちる原因を調べる - Griever thx! oAutoPagerizeとCSSの-o-linkの件 - by edvakf in hatena 本家にあわせ、@exclude http://b.hatena.ne.jp/* を追加 AUTO_STARTのデフォルト設定が変更できなかった問題を修正 本体へのローディング画像の埋め込みをやめ、設定ファイルに画像追加(Thx! id:edvakf) 英辞郎 on the Webへの特別対応を追加 右上アイコンとヘルプの表示方法をCSSベース
空から降ってくる女の子(ゲームっぽく) - os0x.blog
空から女の子が降ってくる - ぼくはまちちゃん！(Hatena) id:murky-satyr先生 の http://gist.github.com/45346 を勉強目的に読んでたら、自分でも書きたくなってついやってしまった。すごく出遅れ感あるけど、折角なので公開。 <br /> javascript:H='http://hamachiya.com/g';E='.gif';R=Math.random;Q=new Image;Q.src=H+1+E;N=90;P='%';I=0;L=function(Y,r,V,f,S){S=(V=Q.cloneNode(r=R(Y=N)+1)).style;S.position='absolute';S.right=R()*N+P;(B=document.body).appendChild(V);f=function(){Y>2?(S.bottom=(Y
arguments.callee.caller で UserJavaScriptのソース取得 - os0x.blog
最初に要点を述べると、UserJavaScriptのソースはサイト側のScriptから取得することが不可能ではないので、UserJavaScript にパスワードなどを書き込む必要がある場合は実行を許可するサイトに十分に気をつけましょう(そもそも書き込まないで済むならそれに越したことはない)。というお話です。 Function.caller 9.60 beta 1 RCからFunctionにcallerプロパティが追加され、関数の呼び出し元を参照できるようになりました。caller は非標準ではありますが、FirefoxやIEでも以前から使えているようです。 そして、サイト側のScriptで、UserJavaScriptが呼び出すであろうメソッドを上書きしておくことで、UserJavaScriptの処理をフックし、そこから .caller を辿って UserJavaScript のソースを
リンクになっていないURLを新規タブで開くGreasemonkey Script - os0x.blog
Text URL Linker という Greasemonkey Script を CodeRepos (と Text URL Linker for Greasemonkey) にあげました。Firefox の Greasemonkey, Opera(9.50以降) の UserJavaScript, Safari の GreaseKit, Google Chrome の Greasemetal, Chromium の Greasemonkey で動作します。 はてなダイアリーのコメント欄など、リンクになっていないURL (一応 ttp://hoge のようなURLにも対応) を新規タブで開くリンク(通常のリンクと区別するため overline 入りカーソルをhelp) にする Script です。Firefox の人には Piro さんの Text Link でお馴染みのあれです。同種の
XML(XHTML)とHTMLの判定 - os0x.blog
document.contentType == "application/xhtml+xml"なページでの$X - 0xFFのおまけ的な話です。 まず、OperaのNAMESPACE_ERRの件は都合の悪いものを見なかったことにするかのようにスルーしてましたが、単に気づいてなかっただけです。。 Opera (9.24/9.5) では resolver が "" (空文字列) をかえすと、null を返したときと同じように NAMESPACE_ERR を投げてしまう (Safari や Gecko では名前空間が空ということにしてくれる)。つまり Opera だと全適用のユーザスクリプトで XPath つかうときはページが XML か HTML かで式自体を変えないといけないのでめんどい。 http://subtech.g.hatena.ne.jp/cho45/20071119/119540
JSTweener ライクなアニメーション code snippets - os0x.blog
JSTweenerライクな軽量アニメーションが手軽に実現できる、tween.jsというのを書いてみました。 Greasemonkey Script を書く際に、@requireで手軽に使えるサイズのシンプルなアニメーション code snippets がほしかったので、強引に18行という短さに収めています。手軽に使いたいので、サンプルコード扱いで、自由に使用、改変して頂いてOKです。一応IE6, Firefox2, Safari3*1, Opera9で動きます。それなりにクロスブラウザです。 とりあえずサンプル Tweener Example(XHTML) Tweener Example2(XHTML) (半透明のdivを4枚重ねているので、少し重いかも) 簡単な使い方はこれだけ。 var div = document.getElementById("simple-header"); di
gis?t 始めました - os0x.blog
id:secondlife先生に勧誘されて、gist(と、こっそりgithubも)を始めてみました。 で、お薦めの通り、(若干繋がりにくいことがあるものの)Greasemonkeyを書くにはちょうど良い感じです。 まず、Firefoxな方はgist_link_user_js.user.jsをインストールしておきましょう。もしくは、Greasemonkeyスクリプトの末尾に?.user.jsを付けるスクリプトを汎用的に使えるようにした(SITEINFO) - 素人がプログラミングを勉強していたブログも良いかもしれません。 で、gistには複数ファイルを貼れるので、Opera用とかを別ファイルにするのも簡単でよい感じです。 ちょうど、はてなスターの星をプロフィールアイコンに置き換えるGreasemonkey Script - 0xFFはFirefox3だけ特殊なことをする必要があったので、別フ
Opera9.2から9.5でのJavaScript周りの変更点 - os0x.blog
結構な重要な変更があるんですが、OperaのChangelogにそれらが抜けていたり、わかりにくい部分があるのでまとめてみます*1。 Opera 9.5 for Windows Changelog(原文:Opera 9.5 for Windows Changelog)の補足的なエントリになります。 JSONPが非同期リクエストに修正 JSONP が Opera だと非同期処理できない - 2nd lifeの件で、Operaでも非同期リクエストが並列処理できる img-JSONP | TAKESAKO @ Yet another Cybozu LabsのようなBKも生まれていた困った動作がようやく改善されました。最速インターフェース研究会 :: OperaでJSONPを非同期リクエストするのサンプルで、タイマーが止まらないことを確認できます。(なんでChangelogにないんだ…) Arra
oAutoPagerize ver 1.1.2 - os0x.blog
何度も更新して恐縮ですが、9.5xでiframe方式を使用するとページ上でのキーやマウスによる操作を受け付けなくなる現象が発生したので修正を行いました*1。 例によって、更新はoAutoPagerize - 0xFFからどうぞ。 更新が連続したので、これでしばらく落ち着く予定です。その間に、(9.5用の)細かいチューニングをCodeReposにコミットして行こうと思います。 *1:iframe内でBeforeScript、BeforeExternalScriptをpreventDefaultしていたのが不味かったようなのですが、9.2xでは問題なかったので、なにか仕様がかわったんでしょうか。。
対象文字列を自動的に英数に変換する - os0x.blog
「プロパティ」から「和英混合入力」タブを開く 対象文字列を自動的に英数に変換するのテーブルを一番下にスクロール 追加はここをクリックとあるので、javascript,functionなどのキーワードを追加 直接入力モードに設定 これで、プログラム書こうとしたときにIMEがONのままだったっていうストレスを軽減できそう。逆にブログに書くときにミスるんだけど。。 そもそもWindows環境で書くなって声が聞こえてくる。 ちなみに、JavaScripterとしては var を追加したいところだけど、4文字以上じゃないとダメって怒られた。残念。 javascriptで登録すると誤爆が多いので、javascript:に変更した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
