hail2u.net

FirefoxのuserChrome.cssネタ #11

Posted at 2006-10-31T17:57:00+09:00 in Software

Firefox 2のデフォルト・テーマは悪くは無い。けれども画像で作ったタブとか画像で作ったタブとか画像で作ったタブとか画像で作ったタブとか画像で作ったタブとかはなんだかなーと思ってしまう。というわけで以前書いたフラットなタブを実現するuserChrome.cssネタをFirefox 2に対応させたりとか他にもいくつか。

タブをフラットなボタンにする(Firefox 2向け)

.tabbrowser-tabs {
  background-image: none !important;
}

.tabbrowser-tab {
  margin-right: 3px !important;
}

.tabbrowser-tab[selected="true"] {
  font-weight: normal !important;
}

.tabbrowser-tab > .tab-image-left {
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  border-left: 1px solid threedshadow !important;
  width: 4px !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
  -moz-border-radius-topleft: 0px !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-left {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color: -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-left {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  border-left: 1px solid threedhighlight !important;
  height: 24px !important;
  background-image: none !important;
}

.tabbrowser-tab > .tab-image-middle {
  padding: 0px !important;
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-middle {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color:  -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-middle {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  height: 24px !important;
  background-image: none !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-icon > .tab-icon-image {
  margin-top: 0px !important;
}

.tabbrowser-tab > .tab-image-middle > .tab-text {
  margin-top: 0px !important;
  border: none !important;
}

.tabbrowser-tab > .tab-image-right {
  border-top: 1px solid threedshadow !important;
  border-bottom: 1px solid threedhighlight !important;
  border-right: 1px solid threedhighlight!important;
  width: 1px !important;
  color: infotext !important;
  background-color: infobackground !important;
  background-image: none !important;
  -moz-border-radius-topright: 0px !important;
}

.tabbrowser-tab:not([selected="true"]) > .tab-image-right {
  margin: 0px !important;
  border-color: -moz-dialog !important;
  height: 24px !important;
  color:  -moz-dialogtext !important;
  background-color: -moz-dialog !important;
  background-image: none !important;
}

.tabbrowser-tab:hover:not([selected="true"]) > .tab-image-right {
  margin: 0px !important;
  border-top: 1px solid threedhighlight !important;
  border-bottom: 1px solid threedshadow !important;
  border-right: 1px solid threedshadow !important;
  height: 24px !important;
  background-image: none !important;
}

.tabs-left,
.tabs-right,
.tabs-bottom {
  display: none !important;
}

長い。ちょっと詰めて無いので無駄なところが多いのかもしれない。

という感じの表示になる。左からアクティブなタブ・カーソルでポイントした非アクティブなタブ・非アクティブなタブのプレビュー。

タブを選択した時に表示される点線を消す

.tabbrowser-tab > .tab-image-middle > .tab-text {
  border: none !important;
}

何気にoutlineからborderになってる。

ロケーション・バーの枠線をへこませる

#urlbar {
  border: 2px solid !important;
  -moz-border-top-colors: threedshadow threeddarkshadow !important;
  -moz-border-right-colors: threedhighlight threedlightshadow !important;
  -moz-border-bottom-colors: threedhighlight threedlightshadow !important;
  -moz-border-left-colors: threedshadow threeddarkshadow !important;
}

なんでもフラットにすりゃー良いってモノではない。逆に何でもネイティブっぽくすりゃー良いってモノでもない。

ロケーション・バーのドロップダウン・ボタンを飛び出させる

.autocomplete-history-dropmarker {
  border: 2px solid !important;
  -moz-border-top-colors: threedlightshadow threedhighlight !important;
  -moz-border-right-colors: threeddarkshadow threedshadow !important;
  -moz-border-bottom-colors: threeddarkshadow threedshadow !important;
  -moz-border-left-colors: threedlightshadow threedhighlight !important;
}

.autocomplete-dropmarker-bkgnd-top,
.autocomplete-dropmarker-bkgnd-mid-top,
.autocomplete-dropmarker-bkgnd-mid-bottom,
.autocomplete-dropmarker-bkgnd-bottom {
  list-style-image: none !important;
  background-image: none !important;
}

上記変更によりURL履歴を出すドロップダウン・ボタンがちょっと微妙な感じになるので、Internet Explorerっぽく修正。

デフォルト・テーマはそこそこキレイではあると思うのだけど、デザイン重視なわけでもなく、OSとの融合重視なわけでもない微妙な位置な出来という感想。その微妙さを良いとこ取りと思えるのなら好きになれるテーマだと思う。「Firefox 1.5のデフォルト・テーマの方が良かった！！！」という人はFirefox 2向けのWinstripeが出ているので、これをインストールすれば良さそう。

追記

タブをフラットなボタンにする(Firefox 2向け)を導入した時にどんな感じにタブが表示されるかのプレビュー画像を追加しておいた。

Firefoxで素早くdel.icio.usへ投稿

Posted at 2006-10-19T00:30:00+09:00 in Software

Firefoxでは各ブックマークにKeywordを割り当てることができ、割り当てたKeywordをロケーション・バーで入力してEnterまたはGoボタンを押すことによってそのブックマークを開くことが出来る。このSmart Keywordsと呼ばれている機能はロケーション・バーから検索エンジンを利用した検索を行う場合などに利用する場合が多いが、Bookmarkletなどを含めどんなブックマークにも割り当てることが出来るので、del.icio.usへ投稿するBookmarkletにKeywordとしてdを指定すると、Alt+D D Enterという連続したキー・タイプでdel.icio.usに投稿できるようになる(Alt+Dはロケーション・バーにフォーカスを当てるショートカット)。知人が見ている時にこれを使ってdel.icio.usにササッと投稿するところを見せつけると「デキる男(女)」を演出できます。

上記画像のようにBookmarkletのプロパティを開いて、Keyword欄にdを指定してやるだけ。勿論del.icio.usに限らずはてなブックマークへの投稿を行うBookmarkletに指定しても問題ない。

BookmarkletにKeywordを割り当てるというテクニックは、つまるところFirefoxにちょっとしたコマンドを追加するというテクニックという感じで、

• 閲覧中のページをGoogle 翻訳で英語から日本語に翻訳するBookmarkletにe2jというキーワードを割り当てる
• 閲覧中のページのドメイン情報をWho.isで調べるBookmarkletにwhoisというキーワードを割り当てる
• 閲覧中のページをW3C Markup Validation ServiceでチェックするBookmarkletにhtmlというキーワードを割り当てる
• 閲覧中のページをW3C CSS Validation ServiceでチェックするBookmarkletにcssというキーワードを割り当てる
• 閲覧中のページをlivedoor Readerで購読開始するBookmarkletにsubというキーワードを割り当てる

などといった利用例が考えられる(上記例は自分でも使っている)。Keywordを覚えきれなかったりとかあるだろうと思うので、何でもかんでも割り当てれば良いというわけではないけれど、よく使うものにKeywordを割り当てておくとちょっぴり幸せになれる。

設定を外部JavaScriptファイルから読み込む

Posted at 2006-10-11T08:25:00+09:00 in Coding

JSONで記述した設定ファイルをどこかのサーバーに置き、それを動的にscript要素を追加するアレで読み込み、適用するという試み。タイトルまんま。設定を保存するということは難しいので、使いどころはとても限られる。Bookmarkletでゴニョゴニョするサイトなんかで細かい指定パラメータの代わりに使うとかが唯一に近い光明。

とりあえず設定ファイルを指定するとデフォルトの設定とマージして適用するサンプルを作った。

1. 設定ファイル指定無し
2. 設定ファイル指定有り

二番目のようにクエリでfileパラメータの値に設定ファイルのURLを指定すると、デフォルトの設定

{
  "username" : "anonymous",
  "top" : "0px",
  "left" : "0px",
  "width" : "320px",
  "height" : "240px",
  "color" : "#ffffff",
  "bgcolor" : "#336699"
}

と、設定ファイルで指定した設定

{
  "username" : "Kitty",
  "left" : "80px",
  "width" : "240px",
  "color" : "#ffffff",
  "bgcolor" : "#996633"
}

がマージされて適用される。ここではユーザー名・X方向の位置・幅・背景色を設定ファイルで変更している(マージなので指定されていない設定はデフォルトの設定が適用される)。JSONのマージは、prototype.jsのHashオブジェクトのmergeメソッドを利用して行った(考えるのが面倒だったので)。

アサマシHTML作成ツールで似たようなことを既にやっているのだけど、これがテンプレート・ファイルの読み込み限定なのに対して、こちらはWindowsのINIファイルっぽく扱える感じ。セクション作れないけど。

単体で機能するライブラリにして、設定のロードをもっと手軽に扱えるような形にすればそこそこ利用価値のあるものになりそうだけど、所詮は読み込み限定なのでライブラリ化するほどのモノでもない気がする。そもそも使い道思いつかないし。

不明なflavour回避パッチの問題点

Posted at 2006-10-05T00:19:00+09:00 in Blosxom

かなり前に書いた不明なflavourというエントリで紹介したパッチは概ねうまく機能しているのだけど、検索エンジンなどで意図しないURLが検索結果に出てきてしまうことがあるという問題が。通常は多くのページでリンクを張られている.htmlで終わるURLの方が圧倒的に強く、Web全体からの検索などではあまり問題にならないが、サイト内検索などではかなりゴミとして目立ってしまう。ので、redirectif_noflavourを使い、存在しないflavourの場合は.htmlで終わるURLにリダイレクトさせることにした。

redirectif_noflavourはflavourが見つからなかった場合、設定で指定したflavourのURLに302 Foundでリダイレクトさせるというプラグイン。301 Moved Permanentlyを使いたかったり、設定させなくても$blosxom::default_flavour使えば良さそうと思ったので、

# Blosxom Plugin: redirectif_noflavour
# Author(s): motormean, Kyo Nagashima <kyo@hail2u.net>
# Version: 2006-10-04
# Blosxom Home/Docs/Licensing: http://www.blosxom.com/

package redirectif_noflavour;

use strict;

# --- Configurable variables -----------

# --- Plug-in package variables --------

# --------------------------------------

sub start {
  1;
}

sub skip {
  my $path = $blosxom::path_info;

  do {
    return 0 if -e "$blosxom::datadir/$path/story.$blosxom::flavour";
  } while ($path =~ s/(\/*[^\/]*)$// and $1);

  $path = $blosxom::path_info;
  $path =~ s/\..+?$/.$blosxom::default_flavour/;
  $blosxom::header->{-status} = '301 Moved Permanently';
  $blosxom::header->{-Location} = "$blosxom::url/$path";
  $blosxom::output = '';

  return 1;
}

1;

と、少しだけ改造した。自前でflavourを漁らなくても何とかなりそうな気はする。けどコード考えるのがめんどくさい。303 See Otherのが良いかな？微妙だ。移動させたわけじゃないから303 See Otherのほうが妥当かもしれない。

こういうケースは404 Not Foundでももちろん良いと思う。というか本来は404 Not Foundであるべきなのだけど、301 Moved Permanently(などのリダイレクトするHTTPステータスコード)を使った方が訪問者を逃さないので、サイト・オーナー的にはプラスだと思う。訪問者にも(多くの場合は)プラスになるはず。

redirectif_noflavourは使いたくないけどerror flavourなページを検索エンジンに拾わせたくないなどという場合は、blosxom.cgiの最後のに書いてあるerror flavourの定義に、

<meta name="robots" content="noindex, nofollow" />

といったロボット対策のmeta要素を追加するとかが良さそう。

XPIパッケージにまとめるバッチ・スクリプト

Posted at 2006-10-02T12:56:00+09:00 in Coding

作成したFirefoxのExtensionをXPIパッケージにまとめる方法の一つとして、バッチ・スクリプトがHow to create Firefox extensionsでかなり昔から公開されている。これはbuild.batをいちいちコピーしなきゃならなかったりとか.svnフォルダなども含んでしまったりする。それをbuild.batをどこかにおいておけばドラッグ・アンド・ドロップでXPIパッケージが作れるようにしたりとか改造してみた。

@echo off

set x=%1
X:
cd %x%

set x=%cd%

md "%x%\build\chrome"
cd "%x%\chrome"
7z a -tzip "%x%.jar" -mx=0 * -xr!.svn
move "%x%.jar" ..\build\chrome

cd ..\
xcopy components build\components /c /i /s
xcopy defaults build\defaults /c /i /s
copy chrome.manifest build
copy install.rdf build
cd build
7z a -tzip "%x%.xpi" -mx=9 * -r -xr!.svn
move "%x%.xpi" ..\..\

cd ..\
rd build /s /q

pause

これをどっかに保存しておけばドラッグ・アンド・ドロップでXPIパッケージを作れるようになる(4行目のX:はExtensionを開発しているドライブ・レターに変更する必要がある)。僕は[defaults]とか[components]とかが必要なExtensionは作っていないので、そこらへんの動作は保障はできない。

少し前にFirefox 2.0 RC1に対応させたこのサイトで公開されているFirefox extensionは上記バッチファイルを使ってXPIパッケージを作成してみた。ちゃんと動いている模様。

そういやFirefox Product Teamから、

10/1深夜までにExtensionをFirefox 2に対応させてaddons.mozilla.orgにアップロードした人全てに、限定版の"Bon Echo" Extensionチーム・Tシャツを送る・・・つもり。

みたいな(超訳)メールが来てたんだけど、本当に送るのかな？送料だけでかなり大変そうだ。