tilfin's note

jQuery の hover() について調べたことのまとめ

hover() は mouseenter と mouseleave を同時にセットする http://docs.jquery.com/Events/hover の引数の名前付けを見て、hover は mouseover と mouseout を同時に指定するものだと思っていたが違うらしい。 jquery-1.2.6.js の 2278 行付近 hover: function(fnOver, fnOut) { return this.bind(‘mouseenter’, fnOver).bind(‘mouseleave’, fnOut); }, とあるように mouseenter と mouseleave に対して指定するものである。 over/outと enter/leave の違いは、http://docs.jquery.com/Events/mouseover の Demo みるとよくわかる。ある領域 A にカーソルが載ったときに、領域 A 内に動的にブロック B を表示するという処理を次のようなに作っていた。 http://tilfin.googlepages.com/overout.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript"> <script src="jquery-1.2.6.js"></script> <title>jquery mouseover / mouseout</title> <style type="text/css"></style> <script></script> </head> <body> <div id="A">A</div> <div id="B">B</div> <div id="debug"></div> </body> </html> しかし、これだと表示されたブロック B にカーソルが載ったとき、A の mouseout が発生するためちらつきが起こってしまう（これは Firefox のときで IE ではちらつきではなく消えたままになった）。 ...

Ruby で CSS のカラー指定を RGB 値の配列に変換する

スタイルシートのカラー指定文字列を 3 要素の RGB 値の配列として取得する方法のメモ書き。逆変換のメソッドもあり。 css.rb # # Ruby CSS Color Module # module ColorUtil def get_rgb(value) if value =~ /^#?(\[a-fA-F0-9\]+)$/ c = $1 if c.length == 3 return Array.new(3) { |i| (c\[i,1\] \* 2).hex } elsif c.length == 6 return \[ c\[0,2\].hex, c\[2,2\].hex, c\[4,2\].hex \] end end raise "format error" end def get_value(rgb) c = "#" rgb.each { |x| c += format("%02x", x) } return c end end サンプル $ irb irb(main):001:0> require 'css' =\> true irb(main):002:0> include ColorUtil =\> Object irb(main):003:0> get_rgb("000") =\> \[0, 0, 0\] irb(main):004:0> get_rgb("#00ddff)" irb(main):005:1> ) =\> nil irb(main):006:0> get_rgb("#00ddff") =\> \[0, 221, 255\] irb(main):007:0> get_rgb("#999") =\> \[153, 153, 153\] irb(main):008:0> get_value(\[153,153,153\]) =\> "#999999" irb(main):009:0> get_value(\[255, 255, 0\]) =\> "#ffff00"

Ajax アプリケーションのステータス変更をタイトルをロールさせて目立たせたい

おそらく常に起動している（開いている）ような Ajax アプリケーションを使う場合、タブブラウザを使っていることがほとんどだろう。そのアプリが例えば『新着メッセージがある』といった状態が変わったことを通知したいときに、ユーザーに目立たせるにはどうしたらよいだろうか。 Gears などを使うとブラウザ外へのアラートができるようだが、普通に行うにはタブ（タイトル）部分に注目させることになるだろう。そこでタイトルをロールしてみるサンプルを書いてみた。 TitleRoll クラス function TitleRoll(){} TitleRoll.prototype = { timerid: null, start: function(text, interval){ var itv = (interval != undefined) ? interval : 500; this.text = document.title; document.title = text + "　“; this.timerid = setInterval(function(){ with(document){ title = title.substr(1) + title.substr(0, 1); } }, itv); }, stop: function(){ if (this.timerid == null) return; clearInterval(this.timerid); this.timerid = null; document.title = this.text; }, isrolling: function(){ return (this.timerid != null); } }; ...

JavaScript の JIT 導入やバイトコード化

JavaScript 高速化へ Safari3より4倍高速、WebKit新JavaScriptエンジン"SquirrelFish" | マイナビニュース Adobe高速JavaScript実装、バイトコードにForthを採用 | マイナビニュース

Google AJAX Libraries API の使い方まとめ

Google Hosted Libraries - Developer’s Guide - Make the Web Faster — Google Developers Google が下記の主要 JavaScript ライブラリのホスティングを開始したので、以前作ったガジェットのソースを変更することにした。 jQuery prototype script_aculo_us MooTools dojo 『Google AJAX Libraries API』とホスティングだけで API って大げさな気がしたが、インターフェイスが確かにあった。また、script タグでの src 指定でもよい。 Google.load Google AJAX API を既に使っているのであれば Google.load 関数のライブラリ名とバージョンを指定してロードできる。Maps, Feed などと合わせて使うならこっちが便利だろう。 1 2 3 4 5 6 7 8 <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script> <script type="text/javascript"> google.load("jquery",　"1.2"); funtcion initialize(){ ... } google.setOnLoadCallback(initialize); </script> は、jQuery の 1.2.* な最新バージョンをロードして使用する。現在の最新は 1.2.6 だがより新しいバージョンがリリースされ Google がホストすれば自動的に新しいものを使うようになる。もちろんフルでバージョンを 1.2.3 のように指定すればそれを永続的に使える。欠点は動的ロードになるので document のロード終了時までライブラリの機能を使用できない。 ...

XMLHttpRequest でのステータスコード 304 (Not Modified) について

IE の Ajax (XMLHTTP) で、通信が行われたかキャッシュが使われたかを判定する方法 - IT戦記を読んで、レスポンスのステータスコード見るのが本来のやり方なのではと思い、試してみたら意外な結果になった。テスト content.txt を採りに行って表示するだけの下記のサンプルをそれぞれブラウザで表示して、リンクをクリックしたときレスポンスコードがどうなるか試してみた。 Internet Explorer 用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <script type="text/javascript"> function test(){ var req = new ActiveXObject('Microsoft.XMLHTTP'); req.onreadystatechange = function(){ if (req.readyState == 4) { alert(req.status); } }; req.open('GET', 'content.txt'); req.send(); } </script> </head> <body> <p><a href="#" onclick="test(); return false;">test</a></p> <div id="content"></div> </body> </html> Internet Explorer 以外のブラウザ用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <script type="text/javascript"> function test(){ var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState == 4) { alert(req.status); } }; req.open("GET", "./content.txt", true); req.send(null); } </script> </head> <body> <p><a href="#" onclick="test(); return false;">test</a></p> <div id="content"></div> </body> </html> 結果は全てレスポンスコード 200 の OK となってしまった。次にサーバのログをみてみよう。 ...

モバイルサイトを３キャリアでほぼ共通化して作りたい

フルブラウザ搭載機種が増えてきたとはいえ、実際に使うにはそれなりに定額サービスを利用しなければいけないし、操作性などを考えるとまだまだモバイルサイトを作る需要はある。未だに iモード向けコンテンツ (C-HTML) で作るのが一番簡単に共通化できるようだが、3G機種に焦点をあてて DoCoMo、au、SoftBank の最近の動向（2008年 5月現在）を探ってみた。なお、PC サイトのモバイルサイトを作るための情報収集のため、絵文字の利用については考慮しない。各キャリアのコンテンツ制作者向けサイト DoCoMo 開発者向け情報 | サービス・機能 | NTTドコモ DoCoMo は i-CSS といって外部CSSファイルをサポートしていないのでインラインで定義しかできない。 iモード対応XHTML 2.0 から table 要素に対応している。 au KDDI au: EZfactory SoftBank 文字エンコーディング SoftBank の機種を考慮すると、Shift_JIS での統一だけでは辛いようだ。ネット上情報を探し回った結果文字エンコーディングは UTF-8 にほとんど対応しているものの Shift_JIS にしておき、そして CGI で受け取ったデータは、Shift_JIS → UTF-8 の順で判別するのがマシに思えた。表示のみであれば、UTF-8 での統一は可能である。 au は GET, POST された情報が UTF-8 のページでも Shift_JIS になるらしい。 SoftBank の 3GC型（Shift_JIS非対応）機種はページが Shift_JIS でも GET, POST されたデータは UTF-8 になる。 HTTP ヘッダ Content-Type の出力 application/xhtml+xml; charset=Shift_JIS ...

JSONP ならぬ HTMLP を Amazon XSLT で試してみた

Amazon Web Services では Style 引数に XSL ファイルの URL を指定することでレスポンスの XML を Amazon のサーバ側でパースできる。これを使って、JSONP 形式に返すサンプルが色々あった。でも単純に表示するだけなら innerHTML に HTML を流し込むだけの方が楽だろう。ということで JSON with Padding ならぬ HTML with Padding（で合ってる？？）を試しに作ってみることにした。 function awsResult(html){ document.getElementById(‘content’).innerHTML = html; } と定義しておいて、Script タグの Padding によって、 awsResult(’ ・・・ ’); 最終的に上記のように返ってくれば、・・・の部分を content に表示できる。 awshtmlp.xsl AWS に渡す XSL ファイルの内容は次のとおり。ポイントは Callback 引数を拡張定義することで aws:OperationRequest/aws:Arguments/aws:Argument[@Name=‘Callback’]/@Value から引っ張って出力していること。これでコールバック関数名（前述の awsResult）は固定せずに済む。また HTML 出力としているが結果は JavaScript であるので、インデントはさせない（改行はさせない）で、「’」で囲う。そして escape-apos でタイトルとラベルに含まれている場合はエスケープするようにしている。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:aws="http://webservices.amazon.com/AWSECommerceService/2005-10-05" exclude-result-prefixes="aws"> <xsl:output method="html" indent="no" encoding="UTF-8"/> <xsl:template match="/aws:ItemSearchResponse"> <xsl:value-of select="aws:OperationRequest/aws:Arguments/aws:Argument\[@Name='Callback'\]/@Value"/> <xsl:text>('</xsl:text> <xsl:apply-templates select="aws:Items"/> <xsl:text>')</xsl:text> </xsl:template> <xsl:template match="aws:Items"> <ul class="amazonList"> <xsl:apply-templates select="aws:Item"/> </ul> </xsl:template> <xsl:template match="aws:Item"> <li> <a> <xsl:attribute name="href"><xsl:value-of select="aws:DetailPageURL"/></xsl:attribute> <xsl:call-template name="escape-apos"> <xsl:with-param name="target" select="aws:ItemAttributes/aws:Title"/> </xsl:call-template> </a> <xsl:apply-templates select="aws:SmallImage"/> <span class="label"> <xsl:call-template name="escape-apos"> <xsl:with-param name="target" select="aws:ItemAttributes/aws:Label"/> </xsl:call-template> </span> <span class="price"> <xsl:value-of select="aws:ItemAttributes/aws:ListPrice/aws:FormattedPrice"/> </span> </li> </xsl:template> <xsl:template match="aws:SmallImage"> <img> <xsl:attribute name="src"><xsl:value-of select="aws:URL"/></xsl:attribute> <xsl:attribute name="width"><xsl:value-of select="aws:Width"/></xsl:attribute> <xsl:attribute name="height"><xsl:value-of select="aws:Height"/></xsl:attribute> </img> </xsl:template> <xsl:template name="escape-apos"> <xsl:param name="target"/> <xsl:variable name="m"><xsl:text>'</xsl:text></xsl:variable> <xsl:variable name="r"><xsl:text>&apos;</xsl:text></xsl:variable> <xsl:choose> <xsl:when test="contains($target, $m)"> <xsl:value-of select="substring-before($target, $m)"/> <xsl:value-of select="$r"/> <xsl:call-template name="escape-apos"> <xsl:with-param name="target" select="substring-after($target, $m)"/> </xsl:call-template> </xsl:when> <xsl:otherwise><xsl:value-of select="$target"/></xsl:otherwise> </xsl:choose> </xsl:template> </xsl:stylesheet> サンプル HTML 下記は検索ボックスの内容を HTML with Padding(?) で投げて、結果を表示するサンプルである。 ...

急上昇ワード by Google ガジェットが微妙なのでフルスクラッチしてみた

ケータイからの方はへどうぞ（参照：下記の追記へ）。 Google 急上昇ワードで使われている情報は、公には紹介されていないが Google Trend で作られているものらしく、 http://www.google.com/m/services/trends/get で取得できる。形式は XML なのだが RTT という独自形式らしい。調べてみたが情報は見つからなかった。しかもこの XML には snippet タグでワードの簡単な説明までソース元を含めて載っている。せっかくこんな情報があるなら表示すればいいものだが、シンプルさを追求したのだろうか。抜粋を載せておくと以下のような感じである。 1 2 3 4 5 6 7 8 9 10 11 12 13 <?xml version="1.0" encoding="UTF-8" ?> <rtt version="1.0"> <update>2008-05-25T00:00:23-07:00</update> <language>ja</language> <item> <query>ロブ・ノックス</query> <rank>1</rank> <prev_rank>1</prev_rank> <score>513.71</score> <snippet src="http://www.nikkansports.com/entertainment/news/f-et-tp0-20080525-364193.html">ロンドン南部で24日、若者らのけんかの末、俳優ロブ・ノックスさん（18）が刺殺された。ノックスさんは日本を含む各国で11月から上映される人気映画「ハリー・ポッターと謎のプリンス」で寄宿学校の生徒役の1人だった。英メディアが報じた。 ...</snippet> </item> … </rtt> 見ればわかるとおり説明不要なシンプルさだ。ちなみに圏外からランクインした場合は、prev_rank がないようだ。これが 20 分置きに更新されるらしい。ガジェットを作るのに必要なのは、この XML (RTT) をパースして取り込む方法だ。ガジェッド内の JavaScript だけでもできるが、サーバサイドで php で HTML にパースしてキャッシュしておくことにした。他には矢印をランクアップ、ダウン、New と三種類にすることでまとめてみた。そしてできたのは以下のガジェットである。説明があるだけでも情報量が違うと思うが如何だろうか。 ...

人力検索はてなのアンケートは本当に信頼できるのか

http://q.hatena.ne.jp/1211443834 でアンケート方式の質問をしてみた。しかし結果がどうも信用できない。まず回答終了までが予想以上に早かった。17:10:36 から 17:22:16 と開始から終了までで12分に満たなかった。また、このうち Q01, Q02 はいきなり答えられるとして、Q03. はまず初めて質問に書いてある URL にアクセスするはずである。この時間帯のアクセスログを見ていると 14件しかない。つまり、36人の人(?)は見ずに答えたことになる。厳密にはそれまでに見たことがあった人がいたかもしれないが、これまでに5人程度しかアクセスされていないことからも最低30人は選択肢から適当に答えたとしか思えない。もしくは自動回答ボットによって答えられている可能性がある。今回選択肢にダミーを入れていないが、Q02. で「タイトル」が判断材料にならないことはまずあり得ない。となると「タイトル」を選択した17人がだいたい人力であり、それ以外はボットと考えても不思議ではない。17人だと前述したアクセス数とも合ってくる。有効回答数は多く見積もっても40%(50件中20件)程度にしかならないだろう。ボットではなく単にポイントゲッターの人でも今回の質問は内容に沿った回答が Q03. を除いては素早くできると思われるのでボットが多いと思わざる得ない。 http://i.hatena.ne.jp/idea/10864 のような要望が実装されない限り使う気はもうない。結局、今回のアンケート結果も有効性がなくなってしまった。