Latest topics 近況報告

タブでソース表示 - Oct 24, 2007

View Source in Tab。その名の通り、ソースの表示をタブで行うようにするだけという物。ツリー型タブの機能として加えようとしてて、よく考えたらこれツリー関係の機能関係なくね？　と思ったので別途リリースすることにした。

作り始める前に「そういえばそんな名前のアドオンがすでにあったような気がするんだが……」と思って「View Source in Tab」で検索してみたけど見あたらなかったのでそれなりに作り込んでさあそろそろ公開するか、と思ったところでふと「Open Source in Tab」で検索してみたらあっさり見つかったし

まあそれでもせっかく作っちゃったから公開しておく。一応、Open Source in TabやView Source Choiceに比べて以下の点でView Source in Tabの方が高機能ではあります。

• 「ページのソース」だけでなく「選択範囲のソース」もタブで開くことができる。
• 通常の「ソースを表示」ウィンドウと同じUIを持った物がタブで開かれる（Open Source in Tab、View Source ChoiceだとUIなし）ので、メニューからハイライトの機能の有効無効を切り替えたり、現在の行数・桁数が表示されたり、といった元々の「ソースを表示」機能の便利なところをそのまま使い続けられる。
• Firefox 2のセッション保存のAPIを利用しているので、タブを閉じた後もう一度開き直しても、選択範囲まで含めてちゃんとタブが復元される。
• ツリー型タブのAPIを利用しているので、一緒に入れとくと現在のタブの子タブとしてソース表示のタブが開かれる。
• Firefox 2（Firefox 1.5からだったか）の隠し機能でソース表示に外部のエディタを使う機能があるけど、実行ファイルまでのパスの中に日本語が入ってるとエラーで起動に失敗するので、独自にパッチを当てて、日本語を含むパスでも問題なく外部エディタを起動できるようにした。（外部エディタを使う場合は選択範囲のソースは今まで通り内部のビューワで表示される）

でも徹底的に探したわけではないので、これで後から「実はすでにView Source in Tabという名前のアドオンがあるんだが」という風に気がついたら、もうどうしようもない。→ありました

25日追記。無難なところで「Source Viewer Tab（ソース表示タブ）」に改名しておきました……

Tree Style Tab - ツリー型タブ - Oct 21, 2007

先日から作業してたものの成果がそれなりの形になったので、公開しました。

• ツリー型タブ 0.1.2007102101

これだけでも当然使えるけど、僕としては情報化タブとマルチプルタブハンドラの二つと組み合わせて使うのがお勧めだと思ってます。

実際に組み合わせて使ってる様子：

元々、使い勝手のいいツリー表示アドオンが出てきたらそっち使う気でいたんだけど、TabKitが案外期待外れだった（←うわー言っちゃったー）ので一念発起して自分好みの物を作った。インデント幅を自動調整するようにしたとか、ドラッグ＆ドロップでのタブの移動とツリー編集の挙動をIllustratorのレイヤツリー風にしたとか、TBEのタブツリーより完成度は地味に高くなってると思う。

突貫工事で作ったワリには案外ちゃんと動いてくれているなあ、というのが率直な感想。なめらかスクロールの実装やサブツリーの開閉まわりのコードをTBEからコピってきて使った箇所が少しだけあるけど、改めて今TBEのコードを見てみたら、タブのスクロール一つとってもとんでもなく面倒なことをしていたんだなあということに、我ながら改めて驚かされる。だって、普通にボックスの内容をスクロールさせるメソッドがなかったんですよ？　バインディングを使って不可視のスクロールバーを取得して強引にスクロールの制御を行ってたとか根本的にバッドノウハウの塊すぎて、読み解くのも一苦労でした。あの頃から比べたらFirefoxの方でAPIを用意してくれてるところが増えてだいぶ楽になったもんです。

以下、検討事項。

• ウィンドウをまたいだドラッグ&ドロップ……は、要望があれば考えよう。
• ドラッグ中にタブバーの端をポイントしたら自動でスクロールするようにしたい。
• 通常の横置きタブでも動くような設計になってはいるけど、十分テストしてなかったり、うっかり縦置きタブ用に決め打ちしちゃってるとことかあるかもだったりで、その機能は今は封印ということにしておく。ていうか自分じゃもうそんな機能使いそうにないし、やる気の度合いは非常に低い。
• アイコンとかもうちょっとマシな物にしようよ。
• 他の（僕が作った物以外の）タブ系アドオンとの組み合わせでちゃんと動くかどうかは知らない。要望が出てき次第対応していこう。
• 複数リンクを選択してまとめて開く機能もこれに入れるべき？
• Text Linkとの連携もしなきゃなぁ
• iRiderのようにすべてのリンクを常にタブで開くモードを付ける？

タブのツリー表示がだいぶ実用的になってきた - Oct 19, 2007

一昨日から取りかかってる奴だけど、サブツリーの開閉を実装して、やっと実用的なレベルになってきた。ツリーの状態もタブセッションの情報の一部として記憶させているので、セッションをまたいでツリーを維持できるし、クラッシュした後の復帰でもちゃんとツリーが復元される、はず。

フォーカス制御やタブの親子関係の保持・取得についてはほとんど全部新規に書いたけど、ツリーの開閉関係はTBEの実装に基づいている。いやまあ、もちろんコードは新しく書き直してるんだけど、アルゴリズム（と言っていいのか？）の部分ね。

あともう一息だー

タブのツリー表示 - Oct 17, 2007

ようやく手を着けることにしました。TBEの機能を分割してFirefox 2向けに移植する作業の続きの中で一番めんどくさそうな、タブのツリー表示。Tab KitとかTab Treeとか、すでに新しくて素晴らしい物がどんどん出てきてるんだけど、まあ、マイペースで行くことにします。

サムネイルは情報化タブのもの。タブの縦置きは現在はVertigo任せ。公開版ではもちろん自前で縦置きするようにする予定だけど、今は「ツリー表示」のための部分に集中して開発するために敢えて放置してる。

親子関係の構築にあたっては、TBEでは「タブを開く」処理を乗っ取って引数でゴチャゴチャやってたんだけど、Tab Treeの発想が物凄くシンプルだったので、試しにそれベースで実装してみている。

TODO（優先順位が高い物から順に）：

1. targetやwindow.open()で開かれたタブも親子関係の中に組み入れる→実装した
2. タブを閉じた時の、次にフォーカスするタブの制御→実装した
3. タブの親子関係をセッションをまたいで保持する（開き直したタブについても親子関係を自動的に復元する）→実装した（多分）
4. ツリーの折り畳み→実装した
5. 畳まれたツリーを閉じたら子孫のタブも全部閉じる→実装した
6. 開かれたツリーで親のタブを閉じたら、子孫のタブのレベルを一つ繰り上げる→実装した
7. Windowsエクスプローラのツリーのような自動開閉→実装した
8. マルチプルタブハンドラとの連携（畳まれたツリーに対応するために特別な処理を書かないといけない）→実装した
9. 畳まれたツリーについて、子孫に含んでいるタブの数を表示する→実装した
10. ドラッグ＆ドロップでの、ツリーの動的な変更→実装した
11. タブの縦置きの自前提供（動的な幅変更も含む）→実装した
12. タブを右に表示する機能→実装した
13. インデント幅の設定機能→実装した：ユーザがいちいち人力で変更するなんてあほらしいので、インデント幅を自動調整するようにした（初期値は変更可能）
14. 画面外にタブが開かれた場合の自動スクロール→実装した
15. ウィンドウをまたいだタブのドラッグ&ドロップ

TBEに存在した、別のドメインのページを読み込んだ時にタブの親子関係を自動的に破棄するとかの細かい部分については、実装してみてはいたものの自分が使ってる限りでは全然役に立ったことがないので、サクッと省略の方向で。

はてな匿名ダイアリー　トラックバックローダー for Greasemonkey - Sep 18, 2007

どっちが正しいとかはどうでもいいがとかの増田エントリを見ていて、トラックバックとして書き込まれているレスをいちいちタブ開いて読むのが面倒だったので、ダブルクリックもしくは「show」ボタンのクリックでその場に読み込むようなスクリプトを探してみたんだけど、見付からなかったのでサクッと書いてみた。

Firefox + Greasemonkeyの組み合わせでしかテストしてないので、他の類似環境で動くかどうかは知りません。

• Hatena Anonymous Diary Trackback Loader [anond-trackback-loader.user.js]

さりげなく更新。一度展開した項目をもう一度展開しようとすると中身が消えてしまう問題を修正したり、外部サイトのトラックバックはインラインフレームで表示するようにしたり、項目の上でしばらく待つだけで項目を読み込むようにしたりしてみた。

もう一度検索し直してみたら似たスクリプトが既に存在していた……

更新。ボタンを押したりダブルクリックしたりした時に内容が消えてしまう問題を修正。

「戻る」ボタンに「何回戻れるか」を表示するアドオン作ってみた - Sep 06, 2007

「戻る」ボタンがどれだけ履歴を保持してるか一目でわかればどんなにいいかという話を見てサクッと実装してみた。

• COZMIXNG（コミュニティによって信頼されたサイト）からダウンロード：自動更新あり
• 信頼されていないサイトからダウンロード

元記事では色とかアイコンの変化とかで視覚的に表す方法を提唱しているけれども、そこまでやる元気がなかったので、単に数字で「2」とか「4」とか表示するだけにしてます。

追記。専用ページ作った。

ISBNコードからAmazonのアフィリエイトのリンクを生成するカスタムスクリプト for ContextMenu Extensions - Sep 04, 2007

前にも書いた気がするけど、ISBNコードが13桁になって前のやつが使えなくなったので、13桁ISBNコードを10桁ISBNコードに変換するコードを入れて書き直してみた（Amazonの個別商品ページのURIは13桁ISBNではなく10桁ISBNベースなのです）。

var title = prompt('タイトルを入力') || '';
var isbn  = prompt('ISBNコードを入力') || '';

isbn = isbn.replace(/^(urn:isbn:|isbn)/i, '');

if (!isbn) return;

var urn      = 'urn:isbn:'+isbn;
var urn_part = urn.match(/^urn:isbn:(\d{3}-)?(\d-?\d+-?\d+-?[x\d])$/i);
var numRaw   = urn_part[2];
var num      = numRaw.replace(/-/g, '');


/*
    13桁ISBNのチェックディジットは10桁ISBNのチェックディジットと異なるので、
    10桁ISBN基準で再計算する。
*/
var num10 = num;
if (urn_part[2]) {
    var sum = (parseInt(num.charAt(0)) * 10) +
                (parseInt(num.charAt(1)) * 9) +
                (parseInt(num.charAt(2)) * 8) +
                (parseInt(num.charAt(3)) * 7) +
                (parseInt(num.charAt(4)) * 6) +
                (parseInt(num.charAt(5)) * 5) +
                (parseInt(num.charAt(6)) * 4) +
                (parseInt(num.charAt(7)) * 3) +
                (parseInt(num.charAt(8)) * 2);

    var digit = (sum % 11);
    if (digit) {
        digit = 11 - digit;
        if (digit == 10)
            digit = 'X';
    }

    num10 = num.replace(/.$/, digit);
}


_setClipBoard(
'[<img src="http://images.amazon.com/images/P/'+num10+'.01._AA110_FMjpg_SCTZZZZZZZ_V66486851_.jpg" alt="" />'+title+']('+urn+')'+
'（[Amazon.co.jp](http://www.amazon.co.jp/exec/obidos/ASIN/'+
num10+
'/outsiderrefle-22/ref=nosim)）'
);

昨日から今日にかけてモリモリと書評を書いてたのはこれが原因。

おこづかいかせげるといいなあ！

ちなみにこのスクリプトでは基本のリンク先を urn:isbn:ISBNコード というURN形式のリンクにしてありますが、Firefoxでこれを読み込むにはURN Supportなどを使う必要があります。w3mの場合は近藤氏によるリダイレクタを使うといいでしょう。IEとOperaはシラネ。

ダイナミック疑似クラスに対応したよ（暫定） - 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を読み込ませて、生成されたスタイルシートオブジェクトを参照する、という裏技を使っている。

いつの間にか取り残されていた僕ら - Aug 03, 2007

テキストシャドウを作って以降、何かの機会に見るページで不意に影付きテキストがあったりして、「ああ、今まで僕は『古いブラウザの人は最新のWeb技術の恩恵を受けられなくてかわいそうだなあ』とか思ってたけど、いつの間にか、Firefoxユーザの自分自身の方が『最新の技術の恩恵を受けられずにみすぼらしいページしか見れずにいるかわいそうな人』になっていたんだ……」と切なくなる。（いやまあtext-shadowそのものは10年近く前の仕様ですけどね……）