日本向けのChrome Extensionを公開

自作のChrome Extension第三号を公開した。こんどは日本向けのショッピング拡張機能で、名前は「一挙にショッピング検索」。

先日公開したPriceComparer USAや、PriceComparer EUとは若干コンセプトが異なる。アマゾン、楽天、ヤフオクなどのショッピングサイトを一挙に検索して、それぞれのWebページをタブに表示するのが、この拡張機能で商品のオファーは行わない。商品オファー機能を組み込むことも考えたが、それは別の独立した拡張機能として提供した方がいいのではないかと現時点では考えている。

ヨーロッパ向けにShopping Chrome Extensionを公開

自作のChrome Extension第二号を公開した。ヨーロッパ向けのショッピング拡張機能で、名前はPriceComparer EU。先日公開したPriceComparer USAのヨーロッパ版だ。機能はほとんど同じだが、コードはだいぶ書き換えたため、公開までに時間がかかってしまった。

日本向けのExtensionも近々公開する予定だ。

AppEngineのAsync Datastore APIは積極的に使いたい

Google AppEngineの進化は速い。久しぶりにドキュメントを見ると新しい機能がたくさん追加されていて驚くことがある。昔つくったWebサービスも、新しい機能を使ってより良いものにできる場合がある。

すでに最新の機能というわけではないのだが、Async Datastore APIを使えば、従来のコードをちょっと換えるだけでレスポンスを速くすることができるかもしれない。AppEngineは、データの読み込みは速いが、書き込みや削除に時間がかかるので、非同期化できる部分は非同期化するのが望ましい。db.put(model) と書いていた部分を、 db.put_async(model) と書き換えるだけの修正でも、効果が期待できる。

Chrome ExtensionでContentScriptを実行する際の注意点

Chrome ExtensionのContent Scriptでは、JavaScriptの変数などは他から隔絶された空間に定義されるため競合の心配がない。しかし、DOMは共有されるので注意が必要だ。たとえば、

document.body.onmousemove = myFunc;

というようにイベントを登録すると、ページや他のExtensionのイベントを上書きしてしまうので、

document.body.addEventListener(
    "mousemove", myFunc, false
);

とするべきだ。この手のバグは、すべてのWebページで問題を起こすわけではないので、テストをしても発見が難しい。

Content ScriptでDOMを操作する場合、考え得る問題のすべてを防ぐことは難しいかもしれない。しかし、DOMが共有されていることに注意してコーディングを行えば問題が生じる確率をかなり下げることができるだろう。

Chrome Extensionの内部からオプション・ページを開く

Chrome Extensionの内部に設定ボタンをつくったり、あるいは初回に起動したときに、オプション・ページ（options.html）をタブに表示するには、次のようにして拡張機能の内部からオプション・ページを開けば良い。

CSSでline-heightには単位を指定しない

複数行にわたる文章にサイズの異なる文字が混在する場合、ブラウザの設定で文字サイズを変更すると文字が重なってしまうことがある。こうした場合は、line-heightのプロパティの値の指定に原因がある可能性が高い。
{line-height: 1.5em;} や {line-height: 20px;} のように単位付きで値を指定するとときと、{line-height: 1.5;} のように単位なしで値を指定するときとでは、子孫要素への継承のされ方が異なる。単位なしの場合は子孫要素で高さが再計算されるのに対して、単位ありの場合は子孫要素にも同じ値が適用される。通常は、単位なしでline-heightの値を指定することで問題を解決できる。

例１：これはline-heightを1.2に指定した場合:
font-sizeを大きくしても文字が重ならないはず
コードはこちら：

例２：これはline-heightを1.2emに指定した場合:
font-sizeを大きくすると文字が重なってしまうはず
コードはこちら：

Chrome Extensionを公開

最初の自作のChrome Extensionが完成しました。PriceComparer USAという名称でChrome Web Storeに公開してあります。
価格比較を行うショッピング拡張機能なのですが、対象ユーザーはアメリカ人です。

この拡張機能と同じ発想で、日本やヨーロッパ向けの拡張機能を近々公開する予定です。

CSSにおけるマージンの相殺の規則

CSSにおいてマージンの相殺される際の基本的な規則は下記の通り：

• 水平方向（左右）のマージンは相殺されない（マージンの相殺が行われるのは垂直方向のみ）。
• パディング、ボーダーによって分離されず隣接するマージンにおいては、親ボックスとの間でも相殺が生じる。
• floatされたボックスマージンは相殺されない。
• overflow属性の値に"visible"以外が指定された要素は、その子要素とのあいだでマージンを相殺しない。
• 絶対配置（position:absolute;）されたボックスのマージンは相殺されない。
• inline-block要素（display:inline-block;と指定されたボックス）のマージンは相殺されない。
• クリアランスが与えられた要素の上のマージンは相殺されない。
• ルート要素のマージンは相殺されない。

相殺後に適用されるマージンの値は下記の方法で計算される。

• 隣接するマージンがすべて正の値の場合は、もっとも大きいマージンの値が適用される。
• 隣接するマージンが負と正の値の組み合わせの場合は、両方を合計した値が適用される。
• 隣接するマージンがすべて負の値の場合は、もっとも小さい（絶対値が最大のもの）マージンの値が適用される。

参考文献：

• Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則 p.69

:link、:visited、:hover、:activeの記述順

:link、:visited、:hover、:activeといった擬似クラスを指定する場合は、正しい順序で指定しないと効果が打ち消されて意図した結果が得られなくなる。
a要素にそれぞれの擬似クラスを指定する場合、通常は次のような順序で行う。

もし、マウスポインタが重なったりアクティブになったりしても、すでに訪問済みのリンクのスタイルを変化させたくないというのであれば、:visitedを最後に記述すればよい。

参考文献：

• Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則 p.76

CSSで指定したスタイルが適用される優先順位

CSSで指定したスタイルが適用される優先順位についてまとめてみる。参考にしたのは『Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則』という本の66〜67ページ。

1. CSSの提供元による優先順位
   下記の順に優先される。
1. Webページの制作者が作成した「制作者スタイルシート」
2. Webブラウザのユーザーが作成した「ユーザースタイルシート」
3. Webブラウザがデフォルトで適用する「デフォルトスタイルシート」
2. 個別性による優先順位
   個別性の高いものが優先される。（詳細は後述）
3. 記述位置による優先順位
   あとから出てきたものが優先される。
4. !importantルール
   !important宣言の付いたスタイルが最優先される。
   !important宣言によって提供元による優先順位が入れ替わる。
1. ユーザースタイルシート（!important宣言付き）
2. 制作者スタイルシート（!important宣言付き）
3. 制作者スタイルシート
4. ユーザースタイルシート
5. デフォルトスタイルシート

重要だが少々ややこしいのは、「個別性による優先順位」のルールだ。このルールは、ある要素に対するスタイルの指定が競合する場合に、より「個別性」の高いスタイルが優先されるという原則にもとづく。個別性は以下のようにして、最大４桁の正整数で表現される（値が大きいほど個別性が高い）。

• 要素に対して直接style属性が指定された場合は、1000の位を1つカウント
• セレクタに含まれているid属性の数だけ、100の位をカウント
• セレクタに含まれているid以外の属性と擬似クラスの数だけ、10の位をカウント
• セレクタに含まれている要素、擬似要素の数だけ、1の位をカウント

個別性の計算例

記述例	1000の位	100の位	10の位	1の位	個別性
* { }	0	0	0	0	0
li { }	0	0	0	1	1
li:first-line { }	0	0	0	2	2
ul li { }	0	0	0	2	2
ul ol+li { }	0	0	0	3	3
p[class="memo"] { }	0	0	1	1	11
ul ol li.menu { }	0	0	1	3	13
li.menu.service { }	0	0	2	1	21
#example { }	0	1	0	0	100
div#example { }	0	1	0	1	101
style=""	1	0	0	0	1000

HTMLの要素に直接aligh属性などを指定した場合の個別性の値は0と計算される。したがって、HTML属性の指定と、CSSのスタイル指定が競合する場合は、CSSが優先される。

Chrome Extensionのポップアップでリンクを有効化（ポップアップ内で遷移）

「Chrome Extensionのポップアップでリンクを有効化」では、ポップアップのリンクがクリックされたときに、新しく開いたブラウザのタブにページを表示する方法を紹介したが、iframeを利用すれば、ポップアップの中でページ遷移を行うこともできる。
スマートフォン用のWebページを持っているのであれば、それをそのままiframeに表示するというのも悪くないかもしれない。

Chrome Extensionのポップアップでリンクを有効化

Chrome Extensionのポップアップ・ウィンドウ（popup.html）にリンク（アンカー・タグ）を仕込んでも、そのままではページ遷移することができない。リンクをクリックしても、何も起こらない。

リンクがクリックされたときに、タブにリンク先ページが表示されるようにするには、popup.htmlのhead要素に<base target="_blank" />を付け足せばよい。 base要素にtarget="_blank"を指定する代わりに、a要素にtarget="_blank"を指定するのでもよい。

なお、target="_self"を指定しても、ポップアップの中でページ遷移を行うことはできない。
ページ内で遷移を行いたい場合は、ここで紹介するようにiframeを使えば良い。

Chrome Extensionで現在表示中のページのURLとタイトルを取得

Chrome Extensionで、アイコンがクリックされたときに現在表示中のページのURLとタイトルを使って何かやりたい場合は、以下のようにしてURLとタイトルを取得する。 document.titleやlocation.hrefを、popup.html（アイコンをクリックしたときに表示されるポップアップ）で呼び出しても、表示中のタブのURLやタイトルを取得することはできないので要注意。