Now browsing the archives for 7月, 2006.

nsIZipWriter @ Google Summer of Code 2006

4月に行われた Mozilla Party にて、ファイルを解凍したりするためのXPCOMである nsIZipReader はあるけど、逆にファイルを圧縮して書庫を作るためのXPCOM(つまり nsIZipWriter)が今のところ無く、将来的にこれが toolkit の一部として Firefox 本体に実装されたら、拡張機能でできることが広がって大変喜ばしいのであるが…という話をしたところ、Darin Fisher 氏からサマーなんたらにて発表?されるという情報をいただいた。

これについて調べたところ、 Mozilla Wiki に Google Summer of Code ついてのページがあり “Create a scriptable jar writer or zip writer” としてアイデアがエントリされているのを発見した。
Community:SummerOfCode06 – MozillaWiki

Summer of Code とはどうやら学生参加型のオープンソース開発プログラムのようである。この Wiki のページを見ると他にも色々と面白そうなアイデアが書いてある。

TOP

スピンボタン (xul:spinbuttons)

7月21日のトランクビルドにて Bug 155053 – Make the spinbuttons a real widget がFixされ、XULのスピンボタンが実装された。使い方はいたって簡単。 spinbuttons 要素に onup, ondown イベントハンドラを設定することで、△ボタンや▽ボタンの動作を設定できる。

<textbox value="0" />
<spinbuttons onup="this.previousSibling.value++;"
             ondown="this.previousSibling.value--;" />

また、 increaseDisabled, decreaseDisabled プロパティをセットすることで△ボタンや▽ボタンを無効にすることができる。
詳しくは: chrome://global/content/bindings/spinbuttons.xml

xul:spinbuttons

TOP

ツリーセルのインライン編集 (xul:tree editable=”true”)

7月13日のトランクビルドにて Bug 201499 – Tree widgets should support editable content within hierarchical data structures (inline edit) がFixされ、ツリーセルのインライン編集が可能になった。 xul:tree 要素の editable 属性を true にしてツリーセルをダブルクリックすると、テキストボックスが出現してツリーセルの文字列を編集できる。 InternetExplorer のお気に入りを「名前を変更」したときの動作に近い。
ただし現時点で最新の Minefield のナイトリービルドで試したところ、ダブルクリックしてテキストボックスが一瞬現れた後またすぐに元に戻ってしまう。本来の動作としては、テキストボックスが現れた後、その中の文字列が選択状態になるはずだが、選択状態にする処理によって編集状態が終了してしまうようだ。動作を確認するためには chrome://global/content/bindings/tree.xml を一部修正する必要があった。また、他にも編集中にツリーのカラム幅を変えてもテキストボックスの幅は変わらなかったり、いくつか問題があるようだ。

editable tree

TOP

Firefox 2.0 Beta 1 ファーストインプレッション

  1. タブの閉じるボタン
    無くても我慢できるけど、あったらあったで便利そうではある。けど、タブがひとつしか無い時に閉じるボタンが表示されなくなるのは困る。何も見ていないときは空白タブにしておきたいので。
  2. タブオーバーフロー
    タブがあふれたときに表示されるボタンの大きさは適当だけど、その中の三角形が小さすぎて存在感が薄い。無いよりはましだけど決して使いやすいとはいえない機能。もっとましなユーザーインターフェースはありそうだと色々考えてみるものの、いいアイデアは浮かばない。
  3. 閉じたタブを元に戻す
    Undo Close Tabは今まで All-in-one Gestures に頼っていたが、本体に備わったのはうれしい。ただ、タブを右クリックしての操作はあまり使わないだろう。結局マウスジェスチャーに頼ることになりそうだ。
  4. メニューバーの履歴メニュー
    メニュー直下の「戻る」「進む」「ホーム」は間違いなく使わない。履歴10個表示も要らない。でも、新たに追加された「最近閉じたタブ」のリストはかなり重宝しそう。どうせなら「閉じたタブを元に戻す」をここに配置して欲しかった。
  5. RSS フィードの整形表示
    ありがたい機能。Sageは更新チェックだけやって、整形表示は Firefox に任せる、という使い方ができたらいいな。
  6. 検索プラグインの管理
    これはあって当然の機能だろう。欲を言えばセパレータの追加や、個々のエンジンを一時的に無効にする機能があればよかった。
  7. アドオンマネージャ
    拡張マネージャはよく使うけどテーママネージャはめったに使わないので、統合してもあまりうれしくない。自動でABC順に並ぶのは潔くて良い。選択している項目にはボタンが表示されるわけだが、項目を選択するといちいち縦幅が変化する動きがあまり好きでない。あと Firefox 1.5 でもそうだったが、項目クリック時の反応の鈍さも気になる。もう少し動作が軽くならないかな。
  8. フィッシング対策機能
    お世話になることは無いと思うけど、万が一に備えて有効にしておいた方がよさそうな機能。「ローカルに保存されているリスト」というのはウィルス定義ファイルみたいに定期的にアップデートされたりするの?
  9. クラッシュ時のセッション復元
    突然のクラッシュに泣かされることは少なからずあったので、これはありがたい。逆に、任意のタイミングでセッション保存や復元もできたらうれしい。
  10. インラインスペルチェック
    英語圏のユーザには重宝するかもしれないけど、今のところあまり必要性を感じない。 Firefox と打ち込んだだけでいちいち指摘されるし。デフォルトで無効、使いたいときだけ右クリックから有効にするようにしたい。
  11. Web検索ボックス
    検索エンジンの選択を右側のボタンから行うのは慣れないし、なんでわざわざIE7のマネして改悪するのだろう。と思いきや、今後のバージョンでは左側に戻されるようだ。そうなると、虫眼鏡ボタンはもはや邪魔なだけと思われる。userChrome.css で入力履歴のドロップダウン表示を可能にしている場合はなおさら邪魔だ。
    あと、今までは横幅狭すぎと思ってたら、今度は横幅広すぎになった。
  12. Web検索ボックスでのGoogleサジェスト
    一見面白い機能なんだけど、実際のところ、↓キーを押して候補から選択する手間を考えるとキーワードを入力しきってしまった方が確実だし速いに違いない。いちいちインターネット接続されるのもうっとうしいし。
  13. 検索プラグインのフォーマット変更
    今までのへんてこなSRCファイル+PNGアイコンの組み合わせからXML単独となり、すっきりした。POSTメソッドにも対応したもよう。旧形式との互換性はどうなんだろう?
  14. ブックマークのマイクロサマリ
    わかりづらい機能だし、こんなの誰が望んでいるんだろうと思っていたが、いつのまにか消滅した?
  15. JavaScript 1.7 のサポート
    色々変わったなかでも let は特に重要そう。あと、var [foo,bar] = “hoge<>huga”.split(“<>“); みたいなことができるのも良い。
  16. Client-side session, persistent storage
    面白そうだけどすぐには効果的な使い方はわからない。
  17. 新しいインストーラ
    どうでもいい。

TOP

宿題

ScrapBookのページ保存機能ではCSSから参照される画像は無条件でダウンロードされる。たとえば、CSS中に

#hoge { background-image: url('foobar.png'); }

というルールがあれば、たとえ現在のページ中に id=”hoge” が存在しないとしても foobar.png はダウンロードされる。
この仕様だと確かに保存機能の精度は高くなるが、場合によっては無駄なファイルが大量にダウンロードされる。特に最近はCSSを利用したデザインが多い傾向にあるようで、不要な画像ファイルをダウンロードすることによるデータサイズの肥大がかなり気になってきた。
そこで、CSSからは参照されているが、実際のページ(HTML)からは参照されない画像をダウンロードしないための方法を考えてみようと思う。

ロジック:

  • CSSのルールから参照される各画像について、それがHTMLから参照されているかどうか判別する
  • 現在表示しているHTMLから「実際に」参照されている画像をリストアップし、CSSから参照されている画像のリストと突き合わせて不要ファイルを検出する
    →現在表示しているHTMLから「実際に」参照されている画像のリストアップは「ページ情報」の「メディア」に相当するので、これが参考になるかも?

ユーザインタフェース:

  • [設定]の[取り込み]タブに、試験的なオプションを追加する
    →十分なデバッグの後、正式採用する
  • 編集ツールバーに[不要ファイル削除]機能を追加する(ボタンまたはメニュー)
    →DOMイレーサーなどでページから削除された(=参照されなくなった)画像を物理的に削除する機能としても使える

TOP

autoCheck=”false” と autocheck=”false”

XULの button および toolbarbutton 要素に対して type=”checkbox” 属性を指定すると、オンオフ可能なチェックボックス型ボタンとなる。通常、ユーザがマウスまたはキー操作でボタンをクリックすると、自動的にチェック状態が変化してチェックマークが反転される。チェック状態の変化に伴って何か処理を行うのであればこれで問題ないが、何らかの条件付でチェック状態を変化させたいような状況もありうる。そのような場合は button および toolbarbutton 要素に対して autoCheck=”false” 属性を指定して、自動的にチェック状態変化させないようにすればよい。その代わり、スクリプトで checked プロパティを反転させ、チェック状態を変化させるのである。

<script type="application/x-javascript"><![CDATA[
function checkStateHandler(aEvent)
{
    var target = aEvent.originalTarget;
    // 条件付きで checked プロパティを反転させる
    if ( (new Date()).getSeconds() % 2 == 0 )
    {
        target.checked = !target.checked;
        alert("checked property = " + target.checked);
    }
}
]]></script>

<!--チェックボックス型ボタン-->
<button type="checkbox"
    autoCheck="false"
    label="button"
    oncommand="checkStateHandler(event);" />

<!--チェックボックス型ツールバーボタン-->
<toolbarbutton type="checkbox"
    autoCheck="false"
    label="toolbarbutton"
    oncommand="checkStateHandler(event);" />

一方、XULの menuitem 要素に対して type=”checkbox” 属性を指定すると、オンオフ可能なチェックボックス型メニューアイテムとなる。また、 type=”radio” を指定すると、兄弟関係にあるすべての menuitem からひとつだけ選択可能なラジオボタン型メニューアイテムとなる。これらについても同様に、条件付きでチェック状態を変化させたい場合はどうすればよいか。これらの要素で自動的にチェック状態を変化させるには、 autocheck=”false” 属性を指定してやればよい(先述した autoCheck と異なり、c が小文字であることに注意)。また、スクリプトから手動でチェック状態を切り替える際には、先述のように checked プロパティを反転させる代わりに、 checked 属性を反転させる。

<script type="application/x-javascript"><![CDATA[
function checkStateHandler2(aEvent)
{
    var target = aEvent.originalTarget;
    // 条件付きで checked 属性を反転させる
    if ( (new Date()).getSeconds() % 2 == 0 )
    {
        target.setAttribute("checked", !(target.getAttribute("checked") == "true"));
        alert("checked attribute = " + target.getAttribute("checked"));
    }
}
]]></script>

<toolbarbutton type="menu" label="menu">
    <menupopup>
        <!--チェックボックス型メニューアイテム-->
        <menuitem type="checkbox"
            autocheck="false"
            label="menuitem (checkbox)"
            oncommand="checkStateHandler2(event);" />
        <!--ラジオボタン型メニューアイテム-->
        <menuitem type="radio"
            autocheck="false"
            label="menuitem (radio)"
            oncommand="checkStateHandler2(event);" />
    </menupopup>
</toolbarbutton>

なお、XULの checkbox 要素および type=”checkbox” とした listitem 要素については、 autoCheck / autocheck 属性は存在しない。

リファレンス:
XUL:toolbarbutton – MDC
XUL:menuitem – MDC

TOP