Latest topics 近況報告
たまに18歳未満の人や心臓の弱い人にはお勧めできない情報が含まれることもあるかもしれない、甘くなくて酸っぱくてしょっぱいチラシの裏。RSSによる簡単な更新情報を利用したりすると、ハッピーになるかも知れませんしそうでないかも知れません。
の動向はもえじら組ブログで。
宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。
以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！
The Future of JavaScript - Nov 02, 2007
本日18:30より、USTREAMでコソーリと中継します（予定）。申し込みに間に合わなかった方はよろしければどうぞ。
CSS3セレクタとXPathでの表現の対応表 - Sep 13, 2007
拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。
XPathをノードの検索に活用する方法を紹介したけど、肝心のXPathが書けなきゃ意味がないわけで。でもXPathって、ノードセットがどうとかノードテストがどうとか軸がどうとか修飾がどうとか、いざ勉強しようとしてもこれ専用の用語がやたらたくさん登場してきてものすごく萎える。CSSのセレクタの方が、機能は限られてるけどまだ分かりやすい。CSSのセレクタとXPath式の対応表があればいいのになあ、ということを、だいぶ前から僕は思ってた。
実は何年か前、哀さんのサイト（Black Box）でそういうコンテンツがあったんだけど、移転のゴタゴタか何かで消滅したままになってる。しかも、今「CSS XPath」みたいなキーワードでGoogleで検索してみて上位にくるエントリは、情報が不十分だったり間違いが含まれてたりする。
というわけで、CSS3セレクタ（このエントリを書いた時点ではワーキングドラフト）とXPath式の対応表で、詳細な物を作ってみた。
getElementsByなんちゃら の代わりにXPathを使う - Sep 09, 2007
拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。
W3CのDOMでは、要素ノード（およびそのリスト）を得る方法として以下の方法がある。
getElementById(aName)- IDをキーにして単一の要素ノードを得る。
getElementsByTagName(aTagName)- タグ名、要素名をキーにして要素ノードのリストを得る。
childNodes- 子ノードのリスト。
本当はネームスペースを指定して検索する物もあるんだけど、ここでは割愛。
これら以外に、W3C DOMではないがこういうのもある。
getElementsByClassName(aClassName)- クラス名をキーにして要素ノードのリストを得る。WHATWGのWeb Applications 1.0で定義されており、Firefox 3で利用可能。
getElementsByAttribute(aName, aValue)- 属性名と属性値をキーにして要素ノードのリストを得る。属性値として「*」を渡すとその属性を指定された要素全てを得る。FirefoxでXULドキュメントにおいて利用可能。
ただ、探したい要素ノードの条件が複雑な時は、これらを使って取得したノードリストをループ回して条件判断しないといけないし、そもそもこれらでは要素ノード以外は取得できない。そこで最近のJS界隈でよく使われているのが、XPathだ。
XPathとは、/html/descendant::li[@class="navigation"]という風な「式」でXMLノードを特定する技術だ。XPathの書き方を新たに憶える必要はあるが、これを使えば、複雑な条件に合致するノードのリストを一発で取得することができる。コードが簡潔になるのはいいことだし、FirefoxでもSafari 3でもOperaでも、普通にDOMとJavaScriptでごりごりやるのに比べて20倍以上高速に動作するという話もある。
XUL Tipsのページに書いてるけど、FirefoxではDOM3 XPathで提案されているXPath関係の機能が利用できる。詳しい解説はHawk's W3 Laboratoryの「DOMとXPathの連携」（サイトが消えてるので、インターネットアーカイブからどうぞ）を見て欲しい。リンク先では「Gecko用」と書かれてるけど、現在ではOperaとSafari 3でも利用できるようになっている。
第6回拡張機能勉強会 - Sep 03, 2007
目が覚めたら14時でした。
勉強会本体の感想。
Firemacs作者の山本さんの話を聞いてると、以前の自分を思い出した。XPCOMにどんな機能があるのか知らなかった頃に、知ってる範囲の知識でどうにかして解決しようとあれこれ工夫を試みていた。そういう「工夫」を思い付くかどうか、というのが、もしかしたらある種の「分れ道」なのかもしれないなと思った。
marさんによるXUL preLoaderの話。
- XULオーバーレイでボタンを追加したいのに、その要素にidが指定されていない、という場合、JavaScriptとDOMを使ってXUL要素を生成して埋め込むという方法をとらざるを得ない。
- オーバーレイで読み込むXUL文書を間に一つ増やして、その「間に挟まれた」XUL文書においてid属性をスクリプトで設定してオーバーレイを適用できるようにしてから、改めて、本来オーバーレイで読み込ませたかったXUL文書を
document.loadOverlay()で動的に読み込む。……というのが、preLoaderの発想。
preLoaderのような発想が僕に無かったのは、loadOverlayというメソッドを知らなかった・存在を忘れてたからというのも大きいんだけど、それ以前に、他の拡張機能で同じ方法を使われて異なるIDを指定されてしまったらこのテクニックは破綻してしまう、ということに気づいていたからだ。僕は以前から、拡張機能を作るときは他の拡張機能となるべく衝突しないようにということに気を付けるようにしている（TBEの時はそれで散々叩かれたし）ので、preLoaderのテクニックはあまり推奨しづらい。
ところで、今ふと思ったんだけど。E4X使ったらJavaScriptの中に普通にXUL文書片を書けるから、preLoaderあんまりいらなくね？（ぉ
誕生日を祝ってもらえて、フォクすけは幸せ者ですね。僕もこれくらい愛されてみたいです。どうでもいいですが、ケーキの周りのフィルムについたクリームを舐め取っている様子をばっちり撮られてしまっていました。
Mozilla 24のための各プログラムの番宣ビデオ？の撮影があって、Shibuya.jsのビデオに僕まで出ることになってしまった、というかほとんど僕が喋ってた。幽霊部員なのに。あとで映像見てみても、ほんとキモイなーと思った。また叩かれるんだろうなあ。いやだなあ。
ダイナミック疑似クラスに対応したよ（暫定） - Aug 07, 2007
テキストシャドウを:hover, :focus, :activeのダイナミック疑似クラスに対応させた……つもり。でも試してみたら:focusは意図通り動いてくれない。何でだろう。
userContent.css内でのtext-shadowの指定に対応したよ - Aug 06, 2007
テキストシャドウに、userContent.css内の指定を読む機能を加えた。圧倒的多数のサイトではtext-shadowはまだまだ使われていないけれども、ユーザースタイルシートを使えば色々遊べるよ、と。
といっても全サイトで同じ色の影しか指定できない、サイトごとにいちいち影の色を指定しなきゃいけない、なんてのじゃあとてもじゃないけど使ってらんないので、userContent.css内の指定のみ、色が無指定の時はCSS3の仕様を無視して自動的にそれっぽい影の色を適用するようにしてみた。例えばh1, h2, h3, h4, h5, h6 { text-shadow: 0.2em 0.2em 0.2em; }とかuserContent.cssに書いとけば、色んなサイトで影が付いて楽しくなるかもしれません。
ちなみに、XPCOMを使ってもuserChrome.cssやuserContent.cssから生成されたスタイルシートオブジェクトには絶対にアクセスできない。なので今回は、新規に空のドキュメントを生成し、そこにxml-stylesheet処理命令でuserContent.cssを読み込ませて、生成されたスタイルシートオブジェクトを参照する、という裏技を使っている。
LL魂 - Aug 05, 2007
Lightweight Language Spirit、通称LL魂行ってきましたよ。
前日朝までウトウトしながらテキストシャドウのコードいじってて（改行の問題の修正）、2～3時間寝た後昼過ぎくらいまでかけて必死こいてプレゼン資料作ってました。なのでVM魂より前の内容は見てません。しかもVM魂も会場で寝ちゃって最後の方の内容見れてません。酷い話だ。
amachangさんのプレゼンはさすがという感じで、JSだけでここまでやれる物なんだぁ……と、今更改めて驚かされました。サムネイルでプレゼン全体を一覧したりする機能（amachangさんのはプレゼンツールの機能として組み込んだものではないそうだけど）はそのうち是非ともパクらせていただきたい所存ではあります。というか会場の質問で「同じJS同士、コラボレーションやりますか」みたいな話が出てしまったので、その方向も含めて検討課題ですね。事務屋的というか地味なXULをamachangさんの協力で是非とも派手派手なものにしていただけたらなあとか思っています。
他はあまりに分野が違いすぎてコメントのしようがない……でもGaucheの小黒氏のプレゼンはなかなか興味深かった。最後の方ニコニコ的展開になってて、これがプレゼン2.0というやつか！みたいな。
そう。OHP由来のスライド型プレゼンの枠を乗り越えていないのが残念だったと言われたけれども、プレゼンっていうかパフォーマンス？ 壇上で言語使ってPCとプロジェクター使って発表するという段階で自ずとそのフォーマットは限定されてくる物なのではないかと、僕なんかは思うわけですよ。しかもテーマが「その言語で作ったプレゼンツール」じゃないすか。そうしたらなおさら、形式は限定されて仕方のない話だと思うわけですよ。
リアルタイムに動かせたらそれでいいの？ XULをその場で書いてそれがプレゼン内で表示される、そういう風にすればよかったの？ でもその場でやってtypoで動かなかったら、制限時間内にプレゼンが終わらないかもしれない。伝えたかった事を伝えきれないかもしれない。「重要な事をあらかじめスライドに書いておいて、それをめくりながら話す」という「プレゼンテーション」の「形式」は、廃れることなく何十年と行われ続けてきている。これはもう、僕のようなボンクラな人間にとって、そしてボンクラが圧倒的多数を占めている人類という種にとって、この形式が一番「適している」のではないか？ そんなことすら思ったりもするわけですよ。
次回予告。2008年8月30日、なかのZEROホール（収容人数1300人）。スケールでかいなあ……
以下、飲み会で話した事。
- Mozilla 24って結局なんなのかよく分からないから、技術者の間では話題にすら上らない。情報がちっとも出てこないから話題にしようがないんだよね。
- オープンソースのイベントとかっていうと、昔は同好会的雰囲気がメインだったけど、最近は、「起業！ 起業！」って目がギラギラした人達が増えてきてつまんなくなったよね。
- userChrome.jsとかGreasemonkeyとかの方が人気で、拡張機能作者は冷や飯食い感があるですよ。でもAutoPagerizeは便利だ（飲み会の席ではPage Concaterと言っていたけど、AutoPagerizeの間違いでした。すみません）。
そんな感じ。
この道はいつか来た道(他の人が) - Aug 01, 2007
Bugzillaの方のコメントにも書かれてるけど、テキストシャドウを公開した後で、2年以上前に同じようなことをやってた人がいたことを知った。いやぁ、薄々「既出なんじゃね？」とは思ってはいたんですけどね。
一応、対応してる機能（CSSのセレクタをかなりまじめに解釈してる）や使い勝手（XBLを使ってるので影付きテキストのコピペで困らない、アドオンだから自動アップデートできる、など）の面でアドバンテージはあると思うけど……まあ追加のコメントにも書いたように、頑張ればそれもGreasemonkeyスクリプトで実現は可能そうではあるわけで、アドオン嫌いグリモン好きというタイプの人は頑張ってみるのもいいかもね。
影付きテキストをコピーしても余計な文字列が出ないようにしたよ - Aug 01, 2007
テキストシャドウは原理上、影付きのテキストをコピーしようとした時に、影のために使っているダミーテキストまでコピーされてしまうのが大きな問題だった。フォーカスできなくしたり選択できなくしたりすることはできても、コピーの対象から外すということは、普通にやる限りはどう頑張ってもできない。
で、これをどうやって解決したのかという話なんだけど。
以前XHTMLルビサポートを作った時に、略語のフルスペルをルビで表示するという機能も持たせていて、そうやって表示したフルスペルはどう頑張ってもコピーできないという現象が起こっていたんだけれども、これがヒントになった。
略語のフルスペルの表示のためにルビサポートではバインディングを使っていて、どうやらバインディングで埋め込まれた匿名内容の中のテキストノードは、触れることもコピーすることもできないようだった。そして、XBLの<children/>要素の位置に配置された元々の子要素や子のテキストノードについては、通常通りアクセスできる。
ということは、逆に言えば、コピーの対象にさせたくないテキストはバインディングを使って匿名内容の中に入れてやればよいというわけだ。
ダイナミック疑似クラスの問題はまだ残っているとはいえ、もっとも致命的な問題はこうして解決できたので、やっと胸を張って「Firefoxをtext-shadowに対応させました」と言えるようになったと思う。
selector.js改 - Jul 31, 2007
にゃるら、さんのselector.jsをベースに色々やってたらそれっぽい物ができたので、氏に敬意を表しselector.js相当の部分をMITライセンスで公開しときます。冒頭のコメントを見ての通りですが、元のselector.jsで対応されていなかったCSS3のセレクタをだいぶサポートしてます。正しく動かない事があるかもしれないのでその時はフィードバックください。
改造版の一番の特徴は、document.convertSelectorToXPath()ですね。CSSのセレクタを文字列で渡すと、対応するXPath式を生成できる場合はそれを返します。ダイナミック疑似クラス等、XPath式では表現できない内容の時は空文字を返します。
var nodes = document.getElementsBySelector('li:nth-child(even)');
for (var i in nodes)
{
nodes[i].style.backgroundColor = 'gray';
}
var expression = document.convertSelectorToXPath('p:not(li > *)');
// → /descendant::*[local-name() = "p" or local-name() = "P"][not(self::*/parent::*[local-name() = "li" or local-name() = "LI"])]
- メソッド内の変数の
silhouettePseudElementsAndClassesがtrueの時は、:first-line疑似要素や:first-letter疑似要素など、無茶すればどうにか再現可能な物については、勝手に要素を生成したりclassを設定したりしてそれを使ったXPath式を返します。 - 上記の例を見ても分かるとおり、まあ、無駄が多いです。XPathの勉強用か、内部処理用と割り切って使う事をお勧めします。
- 内部で
document.evaluate()を多用してるので、DOM3 XPathを実装したブラウザでしか動かんです。というか多分Gecko専用？ 他のブラウザでも動いたら教えてください。 - Geckoの仕様上、スタイルシートに記述してあっても、内部のテーブルに存在しないセレクタは無視されるようです。
:nth-child()とかは、カンマ区切りのセレクタのリストにそれがあるだけで、その宣言ブロックが丸ごと無視される模様です。（豆知識）