2009-12-10

はてなブックマークのブックマークレットをlightbox化

はてなブックマークのデフォルトのブックマークレットは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拡張はベータテスト中です。