未整理のブックマークをブックマークツールバーに表示
Posted at 2010-01-06T14:09:00+09:00 in Software
最近はブックマークを適切なフォルダに整理することを放棄して、どんどん未整理のブックマークに放り込み、ロケーションバーから絞込みしやすいように適当に半角英数でタグ付けするだけな感じで生活している。これで大抵の場合は問題ないが、Fx3.5では未整理のブックマークには履歴とブックマークの管理のウィンドウからしかアクセスできない(よね？)ので、一覧したい時などにかなり不便。ブックマークツールバーにでも表示させられれば良いのになぁとちょっと調べてみたら結構簡単に出来たのでメモ。
未整理のブックマークはFirefox内では以下のようなで参照されているので、これをブックマークすれば良い。
place:folder=UNFILED_BOOKMARKS
具体的には下記スクリーンショットのようにしてブックマークを作成するだけ。いきなりブックマークツールバー上に作成すると、フォルダにならずクリックしても「place というプロトコルは……」と怒られるので、適当な場所に一旦作成してから改めてブックマークツールバーにドロップすると良いと思う。また、あとで名前を変更しようとしても出来ないので、名前を変えたい場合は作り直す必要があることには注意が必要。
普段はどうせロケーションバーからアクセスするのでそんな便利でもない。ただ、未整理のブックマークにメニューのブックマークからアクセス出来ないのを改善できるという点ではポイント高い。
FirefoxはドラスティックなUIの変更を行う前にもっとやるべき事がきっとある。例えば上記ブックマークの追加ダイアログで「追加」がデフォルトボタンになのにデフォルトボタンに見えないこととか。Fx3.6でメニューバーが隠せるようになったのにメニューのいくつかの項目をツールバーボタンにすることを怠ったこととか。
2009年に買ったマンガ
Posted at 2009-12-29T21:37:00+09:00 in Media
備忘録一割アサマシ九割。
誰も寝てはならぬ (11)
豆ゴハンからずっと読んでるので。マキオちゃんにシンパシーを感じて困る。バスマニアではないけど。というか大清水と美奈子がどうにかなったのかどうか気になったままはや10年。
黄金のラフ (27)
予選落ちしたりマンデー落ちしたり最終日までいくことの方が珍しいゴルフマンガ。ゴルフは好きでも何でもないけどなぜか愛読。坂田信弘って書いてないゴルフマンガは面白いな。
ヴァムピール (3)
樹スキーなので。獣王星スキー。OZスキー。八雲立つとかはあんまり……。デーモンのアレもあんまり……。この巻のモノ作りの話は身に覚えのある人はけっこう痛い話。痛い痛い。
ワンダフルデイズ (4)
人間あまり出てこないマンガ。きらら系では異色な感じなので、そういうのを期待するとアレ。この巻のテコ入れで失敗した気がするのは多分気のせいだと思……いたい。
龍の花わずらい (7)
十二秘色のパレットの方を先に読んで、こっちも読むようになった。終わり方がもうちょっとどうにかなったんじゃないかとかそういうのはあるけど、すっぱりと終わったのでまぁいいや。まとめて読むと
ジャンルが被らないように5つセレクトしてみた。黄金のラフではひからび王が好きすぎて夢に出てきたことがある。優勝インタビューのコメントがかっこよかったなぁ。
Path::Class(::File)のslurp()でバイナリ・ファイルががが
Posted at 2009-12-22T13:28:00+09:00 in Coding
添付ファイル付きのメールを作成・送信するオレオレスクリプトを作ってて、ファイル名とかの扱いが簡単そうだったのでPath::Classを使ってみた。添付ファイルの読み込みもPath::Class(::File)のslurp()でやろうとしたのだけど、バイナリ・ファイルを添付する時にbinmodeして読み込む方法がわからなくちょっと困った。そしてどうやるのが正解なのかまだわからない……。
Path::Class(::File)のslurp()を含むopen()関連のメソッドはIO::Fileを使っているようなので、こういう風に書けばとりあえず目的は達成できるらしい。
use Path::Class;
my $file = file("foo.png");
my $fh = $file->openr();
$fh->binmode();
local $/;
my $content = <$fh>;
slurp()のコード読んで一行追加しただけ。
use Path::Class;
my $file = file("foo.png");
my $content = $file->slurp(binmode => 1);
とか書きたい。
CSSグラデーションのちょっとしたテクニック #2
Posted at 2009-12-20T12:36:00+09:00 in Web Design
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。
以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。
Vista風のテカってるボタン
ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と、二つに分けてグラデーションをかけているだけ。
background-color: rgb(102, 102, 102); background-image: -moz-linear-gradient( top, rgb(138, 138, 138) 0, rgb(102, 102, 102) 50%, rgb( 36, 36, 36) 50%, rgb( 0, 0, 0) 100% ); background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgb(138, 138, 138)), color-stop(0.5, rgb(102, 102, 102)), color-stop(0.5, rgb( 36, 36, 36)), color-stop(1.0, rgb( 0, 0, 0)) );
テカりをうまく出すのは結構大変だけど、腐るほどあるPhotoshop向けのチュートリアルとかが大いに参考になるので読みあさると良い。
Firefoxでは-moz-radial-gradientを使って:hoverの時に枠の上下がちょっと光るエフェクトも付けてみた。かなりコードはややこしい。上下の光をまとめて作るのはできないことはなさそうだけど面倒なことは間違いないので、それぞれ別々に指定する。以下のコードで下の光が作れる。
background-image: -moz-radial-gradient( /* 開始位置を中央下に => 半楕円のグラデーションになる */ center bottom, /* デフォルト値と同じなので未指定でも良い */ ellipse farthest-side, /* rgba()を使って光っぽく */ rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 100% ); /* 繰り返しはしない */ background-repeat: no-repeat; /* 位置をボックスの下端中央に */ background-position: center bottom; /* サイズを横80%・縦2pxに */ -moz-background-size: 80% 2px;
普通に(楕)円状のグラデーションを置いただけでは光っぽくならないので、開始位置をずらしてやることによって半(楕)円状にしてやり光が拡散している感じを出す。上の光もほぼコードは一緒だが、幅を100%にして光を強めてある。SafariやChromeでは楕円のグラデーションを作るのが大変そうだったので諦めた。
doubleなborderの隙間を意図した色で塗るためにはbackground-colorが必須。それでもSafariやChromeではborderがdoubleの時の隙間が変に塗られるのでちょっと汚い(Firefoxもちょっと変だけど、サンプルでは-moz-border-*-colorsで制御した)。変というか挙動をはっきりと理解していないのでうまく塗れないだけかも。
-moz-border-*-colors
-moz-border-*-colorsは複数の色をボーダーに使用するためのMozillaの独自拡張プロパティ。SafariやChromeには同等のプロパティはない。以下のように空白区切り(カンマ区切りではないので注意)で複数の色を指定する。
-moz-border-top-colors: none rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255) transparent;
noneの場合はborder-colorで塗られ、transparentの場合はbackground-colorで塗られる……はずだが挙動不審なので使う場合はきっちり色を指定した方が良さそう。
pre要素で行ごとに色を変える
シンタックス・ハイライトするJavaScriptライブラリに良くあるデザインだが、これもCSSグラデーションでいける。CSSグラデーションは複数の色で単純に塗り分けるというようなことも可能だということは覚えておくと良い。
background-image: -moz-linear-gradient( top, rgb(255, 255, 255) 0, rgb(255, 255, 255) 18px, rgb(243, 246, 252) 18px, rgb(243, 246, 252) 36px ); -moz-background-size: 1px 36px;
上端から18pxまではrgb(255, 255, 255)で塗り、18pxから36pxまではrgb(243, 246, 252)で塗るように指定する。あとはこれが並ぶはず……と思いきや並ばず、pre要素の下端までrgb(243, 246, 252)で塗られてしまう。Firefoxでbackground-repeatを有効にするためにはbackground-sizeで明示的に背景画像のサイズをしてやる必要がある。本来は-moz-repeating-linear-gradientを使うべきなのかもしれないがSafariやChromeには無いので、同じようなアプローチで記述できるbackground-repeatと-moz-background-sizeで書いた方が混乱しない。
background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgb(255, 255, 255)), color-stop(0.5, rgb(255, 255, 255)), color-stop(0.5, rgb(243, 246, 252)), color-stop(1.0, rgb(243, 246, 252)) ); -webkit-background-size: 1px 36px;
一方SafariやChromeではピクセル単位でグラデーションを制御することはできないので一見無理そうだが、こちらもbackground-sizeを明示的にしてやれば計算でピクセル単位で制御できるようになる。#1の最後でちょっと触れてたが、このアプローチで問題なく上手くいく。整数にならない場合の丸め方が一定ではないので、確実に整数値になるように計算できるサイズと割合に調節した方が良い。
ここではわかりやすくpxでゴリゴリ指定したが、それぞれの単位はemでも良いのでフォントサイズに合わせて柔軟に変化するようにも書くことができる。今時のブラウザならpxで良さそうではあるけど、emとかを使った方がメンテナンス性が高い。
テーブルクロスっぽいチェックの背景
もはやCSSを読んでも何をやっているのか解らない……。書いた自分ですらもう一度書けといわれても難しい感じ。こんなこともできるよということで。
background-color: rgb(180, 30, 30);
background-image:
-moz-linear-gradient(
top,
rgba( 0, 0, 0, 0.2) 0px,
rgba( 0, 0, 0, 0.2) 4px,
rgba(255, 255, 255, 0.5) 4px,
rgba(255, 255, 255, 0.5) 8px,
transparent 8px,
transparent 28px,
rgba(255, 255, 255, 0.5) 28px,
rgba(255, 255, 255, 0.5) 32px
),
-moz-linear-gradient(
left,
rgba( 0, 0, 0, 0.2) 0px,
rgba( 0, 0, 0, 0.2) 4px,
rgba(255, 255, 255, 0.5) 4px,
rgba(255, 255, 255, 0.5) 8px,
transparent 8px,
transparent 28px,
rgba(255, 255, 255, 0.5) 28px,
rgba(255, 255, 255, 0.5) 32px
)
;
複数の背景画像を使って格子を形成する。一つ目が横方向の縞で、二つ目が縦方向の縞。普通に四角を並べる感じで作れそうな気がするが(多分)無理で、rgba()をうまく使って濃淡をつけるしか方法を思いつかなかった。ベースとなる部分はtransparentで塗っておいて、background-colorでそのベースの色を指定。WebKit向けのコードも似たような感じで、読みづらい以外は特に変わったところも無いため割愛。斜めのチェック模様とかもFireとSafariやChromeと挙動を合わせるための計算が面倒なだけで、それほど難しくはないと思う。
本当はもっとタータンチェックっぽくドットを組み合わせたものにしようと思ってたけど面倒すぎる(無理かも)ので簡単に作った。-moz-diamond-gradientとかがあればタータンチェックも簡単に出来そう。
linearなグラデーションを書く場合は-webkit-gradientの方がPhotoshopとかのグラデーション製作フローをそのままコードにした感じでまだ読みやすい。Firefoxの開始位置と方向の角度でグラデーションの向きを決めるってあんまり直感的ではない気がする。デフォルトでそんな操作させるペイント・ソフトとか触ったことないし。
一方、radialなグラデーションの場合は-webkit-gradientはもはや人間には読めない。その分-moz-radial-gradientよりも複雑(怪奇)なことができるけど。-moz-radial-gradientでは単純な(楕)円状グラデーションしか作れない反面、お馴染みのワードで指定できる開始位置と単純な二つの形状・直感的な呼称の終了位置の3つを指定して作成するのでイメージしやすく、ペイント・ソフトの挙動と似ていて馴染みやすい。
Mozillaの……というかCSS3の文法の方がまだマシな感じではあるので、WebKitが合わせてくれると良いな。-webkit-gradientはそのまま残せば良いわけだし。
それぞれエントリにすれば良かった……。
Vimのcommandで-complete=custom(list)を使う
Posted at 2009-12-19T07:58:00+09:00 in Software
Vimのコマンドでの引数の補完にカスタム関数を使うというのを撫でてみた。customなら補完候補を改行で連結した文字列を、customlistなら補完候補のlistを返してやる関数を作れば良いだけで、思っていたよりも簡単そう。
補完のために適当なファイル(行ごとに補完したい単語が並べたいわゆる辞書ファイル)を用意してやるというありがちなケースでは、readfile()でlistが返ってくるので特に簡単だった。例えば各行にメールアドレスが並んでいる$HOME/addressbook.txtというファイルがあるとすると、以下のようなカスタム補完関数で絞り込みつつ補完できるようになる。
function! ListMailAddress(A, L, P)
let addresses = readfile(expand('$HOME/addressbook.txt'))
let matches = []
for address in addresses
if address =~? '^' . strpart(a:A, 1)
call add(matches, shellescape(address))
endif
endfor
return matches
endfunction
command! -nargs=1 -complete=customlist,ListMailAddress Mail :execute '! start mailto:' . <args>
第一引数で入力済みの文字列を拾えるので、それで適当に絞り込みをかけるだけ。簡単！shellescape()してるのはメールアドレスの@でアレなことになるからなので、そういうのが無いのならもっと簡単に書ける。第二引数はコマンドラインで入力されたすべての文字列、第三引数がカーソル位置だが、両者の使い道は思いつかなかった……。第二引数は複数のコマンドで補完関数を共有する時とかに使うのかなぁ。
デフォルトのコマンドラインの補完モード(wildmode)は、コマンド・プロンプトの補完と似た感じのシンプルなもの(statuslineに表示される候補を次々と選択していくもの)でちょっと使いづらい感じだったが、色々試して、
set wildmode=longest,list
というbashな感じに落ち着いた。listを入れとくとfun <SNR>の後に<Tab>でスクリプト番号付きの関数が一覧出来たりとか(どうでも良い)。wildmodeの設定はちょっと解りづらかった……。
FeedBurnerからTwitterへ
Posted at 2009-12-15T18:21:00+09:00 in Internet
最近になって「エントリ書いた」つぶやきをTwitterに投げるようになった。Twitterfeedとかを使うのは何かに負けた気がすると思ったので、エントリをPublishするPerlスクリプト内でTwitterに投げていたが、FeedBurnerでできるようになったらしいのでそれに乗り換えてみた。設定してActivateボタンを押したら502エラーとか出たけど設定は正常に行われたらしい。
と、導入出来たかどうか確認のためにエントリを書く。
設定画面はまだ日本語化されていない。TwitterのアカウントはFeedBurnerのアカウントに対しては複数設定可能だが、フィードに対しては一つだけなので、フィードが更新されたらTwitterの複数アカウントでつぶやくとかは無理そう。Hash tagsはcategory要素をハッシュ・タグとして付加してくれる。RSS 1.0でtaxo:topicsとかを使ったカテゴリ(タグ)の表現とかでもOKだった。
Twitterの140文字制限のためのURL短縮にはこれもまた新しく登場したgoo.gl URL短縮が使われる(fb/が必ず挿入される)。短縮される元のURLはFeedBurnerの生成したURLになので、クリック監視とかを設定していても大丈夫。
設定画面の最後には、
This feature utilizes a Google service to create short versions of your feed links, e.g. http://goo.gl/xyzxyz. Please note that Google may choose to publicly display aggregate and non-personally identifiable statistics about shortened links, such as the number of end user clicks.
と書いてあって、短縮されたURLのトラフィックの統計を誰でも閲覧できるようにするかもしれないよとのことなので、将来的にgoo.glはbit.lyのような感じになりそう。注意書きを薄い色で書くなとちょっとだけ思った。
それ(どうせすぐに)Googleで出来る(ようになる)よ！
この機能は任意のフィードをTwitterで購読できるという意味でもあるので、はてなブックマークのブックマークされたよフィードとかをFeedBurner経由にしてやって、Socialize設定でTwitterのサブアカウントに投げるようにすると、ブックマークされたらTwitterで知ることが出来て便利かも。Pipesとかを使ってガリゴリいじってやらないと読みづらそうだし、最大8つまでしか投げてくれないので有名サイトとかだとガンガン取りこぼしそうだけど。
先ほど間違えてメインのアカウントに被ブクマを流してしまったことについては大変遺憾に思っております。
追記@2009-12-15T21:46:14+09:00
導入はちゃんとできた模様。以下、気づいた点をメモ。
- FeedBurnerへpingを送信した後、1分もしないでつぶやかれる
- 短縮されたURLは
http://goo.gl/fb/で始まり、FeedBurnerでのものとひと目でわかる - 短縮URLは直ぐに機能するがFeedBurnerのクリック追跡用URLが少し遅れて機能するようになるようで、つぶやかれた直後は404 Not Foundになった(かなり問題ある)
- 短縮URLはFeedBurnerのクリック追跡用URLに
utm_source=feedburner&utm_medium=twitterという隠しパラメータが設定されている(そのうちFeedBurnerのフィード集計に載るのかも) - Post contentをTitle and Bodyにした場合、
content:encodedやatom:content(なければdescriptionやatom:summary)をプレーンテキスト化したものの先頭が切り出されて使われる - ハッシュタグは小文字化される
反映の速さと導入の簡単さとコストの低さは魅力的だが、短い間だけどつぶやきに含まれるURLが機能しないことがあるのがちょっと致命的。
Google Closure Compiler ServiceでJavaScriptファイルをコンパイルするPerlスクリプト
Posted at 2009-12-13T14:08:00+09:00 in Coding
最近になってGoogleのClosure Compiler Serviceを良く使うようになった。今まで使っていたYUI Compressorと比較すると、複数のJavaScriptファイルをまとめて圧縮出来ることと圧縮にとどまらない最適化を行うことも出来ることがメリットで、CSSの圧縮には対応していないことがデメリット。ウェブのUIで圧縮するのは面倒になってきたので、REST APIを利用してウェブのUIと同じようにコメントで設定を記述してコンパイルするPerlスクリプトを書いてみた。タイトル長い！
#!/usr/bin/perl
# gccs.pl - Compile your JavaScript code with Google Closure Compiler Service
# Usage: gccs.pl < <original file> > <compiled file>
# Author: Kyo Nagashima <kyo@hail2u.net>, http://hail2u.net/
# License: MIT license (http://opensource.org/licenses/mit-license.php)
# Modified: 2009-12-12T00:57:02+09:00
use strict;
use warnings;
use JSON;
use LWP::UserAgent;
my @params = (
"output_info", "compiled_code",
"output_format", "json",
);
&main;
exit;
sub main {
my @code = <STDIN>;
push @params, "js_code", join("", @code);
my $idx = 0;
my $found_metadata = 0;
while (my $line = $code[$idx++]) {
if ($line =~ /^\/\/ ==ClosureCompiler==/) {
$found_metadata = 1;
last;
}
}
if ($found_metadata) {
while (my $line = $code[$idx++]) {
if ($line =~ /^\/\/ ==\/ClosureCompiler==/) {
last;
} elsif ($line =~ /^\/\/ @(\S+)\s*(.*)$/) {
push @params, $1, $2;
}
}
}
&compile(@params);
}
sub compile {
my $ua = LWP::UserAgent->new;
my $res = $ua->post("http://closure-compiler.appspot.com/compile", \@_);
if ($res->is_success) {
my $c = from_json($res->decoded_content);
if (defined $c->{"serverErrors"}) {
foreach (@{$c->{"serverErrors"}}) {
warn "Error(" . $_->{"code"} . "): " . $_->{"error"};
}
die "Failed to compile";
} else {
print $c->{"compiledCode"};
}
} else {
die $res->status_line;
}
}
使い方は、
$ gccs.pl < original.js > compiled.js
コンパイルするfoobar.jsにはコンパイル設定を書くこともできる(設定を書かなくても圧縮される)。設定は以下のようにコメントとして記述(ウェブUIと同じ)。
// ==ClosureCompiler==
// @code_url http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// ==/ClosureCompiler==
$(function () {
var who = "Google Closure Compiler Service";
alert("Hello " + who + "!");
});
細かい設定はAPIリファレンスを参照。code_urlはいくつでも指定できる。compilation_levelはデフォルトでSIMPLE_OPTIMIZATIONSに設定されているので省略可能。パラメータは丸投げなのでリファレンスに載っていない適当なパラメータなども設定できてしまうが、実害はないと思う。結果がJSONで返ってくるとみなしてパースしているので、output_formatは指定しない方が良い。また警告やエラーの出力にはまったく対応していないのでoutput_infoやwarning_levelを指定しても無意味。
foobar.jsには設定だけ書いても構わない。その場合はcode_urlが必須になる。
// ==ClosureCompiler== // @code_url http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js // @code_url http://hail2u.net/scripts/prettify/lang-css.js // @code_url http://hail2u.net/scripts/prettify/loader.js // ==/ClosureCompiler==
以上のように書いただけでもちゃんとコンパイルされる。
Vimから簡単に使えるように$MYVIMRCには以下のように書いた。
" Compile JavaScript file with Google Closure Compiler Service
" :GCCS [<path>]
command! -nargs=? -complete=file GCCS :call s:CompileScript('<args>')
function! s:CompileScript(file)
if a:file == ''
silent normal ggVG
'<,'>!perl -S gccs.pl
silent normal V
else
execute '!perl -S gccs.pl < ' . expand('%') . ' > ' . a:file
endif
endfunction
コマンドGCCSにファイルのパスが渡されたらそのファイルに出力、そうでない場合は全選択して差し替えるというもの。
google-code-prettifyを導入した
Posted at 2009-12-11T14:29:00+09:00 in Web Design
どっかのサイトがシンタックス・ハイライトを導入していたので真似した。ローカルでやろうかと思ったけどフィードに<span class="kwd">function</span>とかがたくさん入るのが嫌だったので、JavaScriptでハイライトしてくれるgoogle-code-prettifyにした。正式名称はJavascript code prettifierらしい。
google-code-prettifyにしたのは、必要な機能がシンタックス・ハイライトだけでできればフォーマットの自動判定があれば良いかなーくらいだったので。自動判定に頑張って貰おうとして、
$(function () {
$("pre").addClass("prettyprint");
prettyPrint();
});
とか書いて全てのpre要素を自動的にハイライトさせてみたんだけど、非対応なものとかでアレなことになってしまったので、結局半手作業でハイライトさせたいpre要素のクラス名にprettyprintを振ってやった……。
CSSのシンタックス・ハイライトはコアに含まれていないので、利用したい場合は以下のように書く必要があった。
<script type="text/javascript" src="prettify.js"></script> <script type="text/javascript" src="lang-css.js"></script>
順序が重要でlang-css.jsはprettify.jsより後ろに書かなくてはならない。当たり前といえば当たり前なんだけどうっかり逆の順序で書いてしまってはまった……。Closure Compiler Serviceを使えば複数のJavaScriptファイルをまとめたりもできるので、まとめてしまうとそういう間違も起こさず良いかもしれない。流行りのHTTPリクエストの節約にもなる(この場合は一つだけどね！)。実際にこのサイトで使用しているprettify.min.jsはClosure Compiler Serviceでコンパイルしたもの。
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name prettify.min.js
// @code_url http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js
// @code_url http://hail2u.net/scripts/prettify/lang-css.js
// ==/ClosureCompiler==
$(function () {
prettyPrint();
});
Closure Compiler Serviceのフォームには上記のように入力してコンパイルした。lang-css.jsはrgba()やhsla?()をサポートさせたりプロパティ名のハイライト色を変更したかったので、このサイトにカスタマイズしたものを置いてそれを読み込ませている。ついでにjQueryを使ってprettyPrint()が自動的に呼ばれるようにして、<body onload="prettyPrint()">とか書かなくて済むようにもした。
CSSテーマはir_blackを適当にカスタマイズしたものでwidget.cssに書いてある。一応ir_black.cssやh2u_black.cssとかも書いたけど使ってない……。
はてなブックマークのブックマークレットをlightbox化
Posted at 2009-12-10T10:00:00+09:00 in Coding
はてなブックマークのデフォルトのブックマークレットはiframeでオーバーレイ表示されるが、サイズ的にも位置的にも見づらい気がするので、ユーザースタイルシートをいくつか書いてみた。最初はオーバーレイ表示ではない旧バージョンのブックマークレットを使い、そのページのスタイルシートを書き換えてみたのだけど、見やすいことは見やすいがイマイチな感じだった。そこでもっと単純にオーバーレイ表示のサイズと位置を変更するだけのものを書いたりしてみたが、これもイマイチ。最終的にlightboxっぽく表示してやれば良いんじゃないかと思い、試してみたらなかなか良さそうな感じだった。
投稿フォームはブラウザ・ウィンドウのど真ん中に表示される。調節するのが面倒だったのでサイズの変更はしていない。ユーザースタイルシートのコードは以下の通り。
.hatena-bookmark-bookmarklet-container {
padding: 0 !important;
display: table !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: transparent !important;
}
.hatena-bookmark-bookmarklet-container div {
padding: 0 !important;
background-image: none !important;
text-align: center !important;
}
.hatena-bookmark-bookmarklet-header {
display: none !important;
}
.hatena-bookmark-bookmarklet-header + div {
display: table-cell !important;
vertical-align: middle !important;
background-color: rgba(0, 0, 0, 0.75) !important;
}
.hatena-bookmark-bookmarklet-container iframe {
padding: 0 !important;
background-image: none !important;
}
あらゆるサイトに表示される可能性があるので、@-moz-document domain()等は使わ(え)ない。このユーザースタイルシートで元々の投稿フォームのヘッダにある閉じるボタン(やシェードボタン)が機能しなくなってしまうので、投稿フォームを閉じるにはリロードする必要がある(ヘッダは残してやっても意味が無いようなので削除した)。これだと非常に操作性が悪いので、投稿フォーム以外の半透明な部分をクリックするとフォームが消え、再度ブックマークレットを実行すると再表示されるブックマークレットは書いてみた。表示・非表示のトグル以外はデフォルトのものと同じ。非表示にするだけなのでフォームに入力した内容とかは維持される。
Bookmarklet: ブックマークする
あんまり試してないのでちゃんと動くかわからない……。単純にタイマーで投稿フォームが作成されたかどうか監視して、作成されたら投稿フォームをトグルするコードを仕込むというだけのもの(なのにやたら長い)。もちろん上記ユーザースタイルシートと共に使わないと意味はない。
拡張使え！拡張使え！拡張使え！Chromeで！！１はてなブックマークのGoogle Chrome拡張はベータテスト中です。
追記@2009-12-10T13:03:41+09:00
Chromeにはユーザースタイルシート的なものがないので、スタイルを追加する簡単なユーザースクリプトを書いてみた。現在の最新ベータ版(4.0.249.30)ではrawをクリックすると拡張としてインストールされる。試してみた限りではうまく動いている模様。
Dummy element for AutoPagerize.