Latest topics 近況報告

Software Designの特集記事書いたよ（前にも宣伝したけど） - Mar 18, 2007

1章を担当されたlevelさんが紹介されているけれども、Firefoxの拡張機能の作り方について解説した特集記事が掲載された号のSoftware Designが発売された模様です。

自分の担当したパートではXULとXPCOMの使い方を紹介したけど、それらを組み合わせて使うためのJavaScriptの書き方やCSSとかの部分は全く解説していないので、ご注意ください。DHTMLでWebアプリケーションのフロントエンドを作ったことがある、というくらいの知識レベルの人を一応想定して書いてみました。

続きを表示する ...

MDCのXBLのリファレンス - Mar 14, 2007

Gomitaさんが訳し残された所を訳してみた。children要素のincludes属性の解説はちょっと分かりにくいような気がしたんで勝手に英語版にも例示を追加してみた（リファレンスを勝手にド素人が書き換えるなんて差し出がましいにも程がある）。ところで、複数タブでページ内の部分的な編集をしてると、タブを開いた時点のバージョンの記述が他の部分にも影響してしまうっぽい？　なんか何度も無駄な書き換えをしてしまった。こんな荒しまがいの事をやってるとそのうちアカウント停止されてしまうだろうか。

XUL/MigemoのXPCOMコンポーネント化 - Mar 10, 2007

JavaScriptによるXPCOMコンポーネント作成の練習に、XUL/Migemo勝手改造版の主要な部分をXPCOMコンポーネントにするという実験をやってみた。

ブランチ切って昨日一日作業してたんだけど、それなりにうまくいったようなので、すでにTrunkにマージはしてある（Subversionでブランチ切ったものを再び統合するやり方が分からなくて右往左往したのは秘密だ）。

続きを表示する ...

JavaScriptでXPCOM - Mar 08, 2007

まとめサイトのXPCOMコンポーネント開発の資料に、須藤さんがLinuxとMac OS XでのC++でのコンポーネント開発のチュートリアルを書き加えてくださった。というわけでそれに触発されて自分もJavaScriptで実際にコンポーネント作ってみた。

以前からこのページにあった解説はコンポーネント名やなんかが全部「xxx」という形になってて何がなんだか分からなかったので読む気がしなかったんだけど、須藤さんが書いてくれた部分は英語の原文と同様にコンポーネント名とかもちゃんと具体例を示してあったので、それを見ながら試してみることで、やっと理解することができた。というわけでJSの例も具体例を示すように書き直しておいた。

世の中的には、どうなんだろう。具体例から原則を見出すチュートリアル式のやり方と、原則から具体例を導き出すやり方の、どっちがウケがいいんだろうか？　先日書いたSoftware Designの記事（次号掲載予定）はチュートリアル的な書き方を意識して書いたし、自分が記事を書くときはなるべくそうするようにしてるんだけど、思考回路が全く自分と異なる人から見たら、こんなのまどろっこしくてとてもじゃないけど読んでられねえ、というものなのかもしれない。

そしてもし頭の良い人達にそういう人の方が多いのだったら、馬鹿な僕がサンプルを勝手に具体的な物に書き換えたことによって、彼らの足を引っ張ることになってしまっているのかもしれない。だとしたら申し訳ない限りだ。

nsIScriptableUnescapeHTMLとXUL/Migemo - Mar 05, 2007

plus7さんによるXUL/Migemoの実装の解説を見ると分かる通り、XUL/Migemoでは正規表現での全文検索を実現するためにDOM2 Rangeの機能を使っている。この方法は素直に使うとscript要素の内容やstyle要素の内容、その他非表示の要素の内容にまでヒットしてしまうということで、氏は色々と工夫されていた。

takenさんが紹介されている、nsIScriptableUnescapeHTMLを使えばこの件について改善できるか……？　と思ったけど、調べてみたらこの機能はFirefox 2以降でしか使えないっぽい（Fx 1.5では使えない）。残念。

まあ、軽く見た感じでは、全然別のDOMDocumentFragmentを生成するものということで、どちらにしろXUL/Migemoでは利用できなかったかもしれないんだけど。

nsITypeAheadFindのfindの挙動でハマった - Feb 27, 2007

XUL/Migemo [Forked Edition]の挙動がおかしいのを直そうとしてハマってしまった。検索欄に長い文字列をペーストして検索を実行しても正常に検索できないという問題。

色々条件を変えて試してみたら、どうも、検索できなくなってるんじゃなくて、リンク内の文字列のみ検索するモードに強制的に切り替えられてしまっているようだった。しかし検索モードを指定するフラグの値を変更しても全然効果が現れない。

Type Ahead Findの実装の深いところを見てみてびっくらこいた。検索バッファ（最後に検索した文字列）が空の状態で検索を始めて、且つ、accessibility.typeaheadfind.linksonlyがtrueの時は、強制的にリンク内検索モードになるように書かれてるじゃあないですか。そりゃあ、いくらやっても無駄なはずだよ……

つうかコレ書いた人何考えてんだろう？　普通のページ内検索でこの設定を参照する意図が全然わからない。これってクイック検索の時専用の設定じゃないのん？　まあ、そもそもこの問題に引っかかったのは何らかの理由でaccessibility.typeaheadfind.linksonlyがtrueになってしまってた（初期状態はfalse）のが原因なので、こっちのせいといえばこっちのせいなんだけど。

とりあえず、検索を実行する前に検索文字列の最初の1文字で検索してからもう一度長い文字列で検索するようにしてみたところ、accessibility.typeaheadfind.linksonlyがtrueでも問題なく意図通りの動作をするようになってくれるところまでは確認できた。でも、これって変なやり方だよなあ。たぶんaccessibility.typeaheadfind.linksonlyをfalseに設定するのが本道なんだと思う。でもこの設定を本来の目的で使いたい人はどうすればいいんだろう？　全く訳がわからない。

Fx2でこの問題が起こることを確認したけど、Fx3ではどうなのかは未確認。そっちでも起こってるようならいよいよバグ報告してみようか(どちらかというと機能要望？）。

複数の拡張機能をまとめたパッケージの作り方 - Feb 22, 2007

Multiple Item Packaging……必要になったのでちょっと検索してみたら、MDCの方は未訳だったので、訳してみた。他の文書でマルチアイテム拡張XPIという訳があったから、それに倣って「マルチアイテムパッケージ」としてみたけど……勝手に造語増やすなよと怒られたりせんかな？

XUL Slideshow Toolkit - Feb 12, 2007

高橋メソッド in XUL リターンズを元に開発されたXUL Slideshow Toolkitというものがあるようです。会社のロゴを入れられるとか、グラデーションの背景が使えるとか、色々改良されてるらしい。

見てみたら、どうやら結構前のバージョンの高橋XULをベースにしてるみたいだった。グラデーション背景は画像が添付されてるのを使うだけみたい。

でもこうやって僕の作ったヘボヘボスクリプトが他の言語圏でも評価されるのって嬉しいです。

追記。ロゴ部分だけ高橋XULに逆輸入してみました。CSSでなんか指定したら使えると思われます。

エンティティ参照でモジュール化 - Feb 05, 2007

活用されてる例を知らないんだけど、XULもXMLだから、DTDでエンティティ参照使ってモジュール化できるんですよね。

<?xml version="1.0"?>
<!DOCTYPE page [
  <!ENTITY button  '<button label="button label"/>'>
  <!ENTITY buttons '
    &button;
    &button;
    &button;
    &button;
  '>
]>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  &buttons;
</page>

実際に見てみる

せっかくだから何かに活用できないものかしらん。

追記。理由は知りませんが、MozillaではChrome URLで示された外部DTDファイルは読み込めません。なので、これはWeb上での話ではなく、拡張機能の開発の話って事で。

splitterの前後の要素の大きさを変える時の注意 - Feb 02, 2007

もう一つ小ネタ。Split Browserで詰まった箇所。

splitter要素は、ドラッグすると、前後に置かれた要素の大きさを伸縮してくれる。この時、前後の要素の属性一覧とかを見ると、伸縮後の幅（width）もしくは高さ（height）が属性として指定されていることが分かる。

前のエントリに書いたように、「常にツールバーだけは表示される要素」みたいなものをスプリッタの隣に置いておく場合、その要素をツールバーだけの状態に自動で折りたたむ処理は、自分で一から書かないといけない。といってもそんなに難しいことはなくて、要するにツールバーの大きさと同じ値を親要素の大きさに指定してやればいい。

<vbox>
  <hbox id="above" flex="1"/>
  <splitter/>
  <vbox id="below" flex="1">
    <toolbar id="bar"/>
    <hbox id="content" flex="1">
  </vbox>
</vbox>

<script>
  function collapse() {
    var box = document.getElementById('below');
    var bar = document.getElementById('bar');
    box.height = bar.boxObject.height;
  }
</script>

ただ、これには一つ問題がある。折りたたむ方はこれでいいんだけど、元の状態に戻す、つまり畳まれたボックスを広げ直す時には、同じやり方をやっても望んだとおりの大きさにまでボックスが広がってくれないことがある。

これは何故かというと、スプリッタの前後の片方にある要素の大きさを指定し直しても、反対側にあるもう一つの要素の大きさ指定がそのままになっているからだ。畳まれたボックスを狙ったとおりの大きさに広げるには、反対側にある要素のサイズ指定も同時にいじってやらないといけない。

function collapse() {
  var box = document.getElementById('below');
  var bar = document.getElementById('bar');
  box.lastheight = box.boxObject.height;
  box.height = bar.boxObject.height;
}

function expand() {
  var box     = document.getElementById('below');
  var sidebox = document.getElementById('above');
  var last    = box.lastheight;
  var current = box.boxObject.height;
  sidebox.height = sidebox.boxObject.height - (last - current);
  box.height     = last;
}