Latest topics 近況報告

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はシラネ。

他の拡張機能やFirefoxの機能を破壊しないための基本テク - Sep 04, 2007

拡張機能勉強会の時に焚き付けられた、Text Shadowのコード（textshadow.js）を教材にして拡張機能開発のノウハウを解説していくシリーズ。

JavaScriptでは、普通に宣言した変数や関数はグローバルな物になる。

var name = 'hoge';
function getItem(aKey) {
  return array[aKey];
}

だから、Firefoxで最初から定義されてるグローバル変数や関数と同じ名前の変数や関数を定義してしまうと、エラーが起こるし、最悪の場合はFirefoxが動かなくなってしまう。

// ステータスバーだけ表示した
// 新規ウィンドウを開く関数「loadURI」を定義。
function loadURI(aURI) {
  window.open(aURI, 'mytarget', 'status');
}
// でも、これをやってしまうと、事あるごとに
// 新しいウィンドウが開かれるようになってしまう。
// なぜなら、Firefox内で既に「loadURI」という関数が
// 「ページを現在のタブで読み込む関数」として
// 定義されているから。

// 「ブラウザの一覧」のページを新しいウィンドウで開いて、
// そのウィンドウをgBrowserという変数に格納する。
gBrowser = window.open('http://piro.sakura.ne.jp/browsers-list.html');
// でも、これをやってしまうと、Firefoxがまともに
// 動かなくなる。なぜなら、Firefoxのブラウズ領域の
// 要素ノードへの参照としてgBrowserが定義されているから。

これを防ぐ手っ取り早い方法としてお勧めしたいのが、自分の拡張機能で使う変数や関数を、「自分の拡張機能専用のサービスオブジェクト」のプロパティやメソッドとして保持するようにするというやり方だ。

続きを表示する ...

第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 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をベースに色々やってたらそれっぽい物ができたので、氏に敬意を表し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()とかは、カンマ区切りのセレクタのリストにそれがあるだけで、その宣言ブロックが丸ごと無視される模様です。（豆知識）

折り返されたインライン要素への影付け - Jul 29, 2007

テキストシャドウでの影付けの基本原理は以下の通り。

以下の解説を図を使って書き直しました。

続きを表示する ...

一部の疑似クラスと疑似要素に対応したよ - Jul 29, 2007

テキストシャドウを地道に改良し続けている。

• 一部の疑似要素と疑似クラスに対応
• インラインで折り返された文字列に対する影の描画を改善
• 影の表示をSafariの表示に近くなるように調整
• Firefox 3でも動くようにした

Geckoもtext-shadowに対応してくれ！というバグにこれを貼り付けて煽ってみようかと思ったら、貼られていたテストケースで::first-line疑似要素が使われてて表示できなくてこりゃまずいと思ったんで、元々対応する気の無かった疑似要素と疑似クラスにまで頑張って対応してみた。疑似クラスについてはGeckoすら対応してない物にまで対応してたりして。

続きを表示する ...

拡張機能でtext-shadowを実装してみた - Jul 28, 2007

Text Shadow。名前の通り、CSS3のtext-shadowを無理矢理再現するインチキ拡張機能。

以下は原理的にどうしようもない問題。

• 重い重い重い重い重い重い重い
• 疑似クラス、疑似要素には対応できず（ダイナミック疑似クラス？　何それ？　つおい？）ダイナミック疑似クラスと:before, :after疑似要素以外はサポートの目処が付いた。:selection等はこの実装だと実現してもあまり意味がないし、そもそもFirefoxではセレクタ自体が無視されてしまうので、実装はオミットしても良さげ。0.2.2007080702でダイナミック疑似クラスに対応した。
• 文字選択やソースの表示で、無駄な文字列が大量に出てきてしまう 無駄な文字列までコピーされてしまう問題は0.2.2007080101で解決した。

以下はめんどくさいから実装をさぼってる部分。そのうちどうにかするかもしれないし、しないかもしれない。

• userContent.css内に書かれたtext-shadowの指定を読めない。 0.2.2007080602で、userContent.cssで書かれた指定も反映するようにした。
• 名前空間付きのセレクタに対応していない。
• ウィンドウをリサイズした時に自動で再描画しない。 0.1.2007072902で再描画処理を入れた。重いけど。
• mm、cm、pt、pcなどの絶対単位に対応していない。絶対単位は72dpi固定でとりあえずサポートした（0.1.2007073101）。ちなみにemとexの算出方法もいいかげんです。
• @mediaルールやなんかにも対応してません。0.1.2007072801で@mediaに対応した。セレクタの優先順位もまともに評価してません。0.2.2007080101で、セレクタの優先順位も計算するようにした。
• style属性で指定されたtext-shadowには対応してない。 style属性での指定には0.1.2007072800で対応した。
• 複数の影の指定に対応してない（まあSafariも対応してないし、そこは許してくださいな） 0.1.2007072802で複数の影の表示に対応した。が、Firefoxの仕様上の問題で3つ以上の指定は正しく認識できない。

セレクタから要素ノードを選択する処理は、selector.jsを丸パクリ。でも組み込んでみたら予想以上にまともに動いてくれなかったので、半泣きになりながら修正してやっとちゃんと使えるようにした。

XUL/Migemo 0.7.0 - Jun 28, 2007

XUL/Migemo 0.7.0公開した。このバージョンから「Forked Edition」を外して、おこがましくも本家XUL/Migemoの後継とさせていただくことにした。

前のバージョンからの最大の変更点は、ローマ字と平仮名の相互変換処理部分にRuby/Romkanを移植して採用したこと。これはMigemoの大本であるRuby/Migemoが使用しているライブラリでもある。今までは元の処理に増築に増築を重ねたみたいなややこしい物になってたけど、これで、平仮名からローマ字への逆変換も含めて大部分のコードを共通化できて見通しが良くなった、と思う。ただ、速度面で若干遅くなってないかどうか心配ではある。体感できる程の差は無いと思うんだけど。

Ruby/Romkanのコードって無駄がない感じですごいなーと思った。Ruby自体、エレガントにそういう物を作れる言語なんだな、とも。Rubyでたった7KBちょいの物がJavaScriptへの移植で30KB近くにまで膨れ上がってしまうとは……いや、これは単に僕の技術力がヘボいだけか。

あと、Ruby/Romkan自体はRubyのライセンスに準拠していて、RubyはGPL2ということで、XUL/Migemo全体もこの際だからGPL2にしてみた。