OTCHY.NET

縦に長く画像のリンクが大量にあるようなページで、ページに含まれている画像を全てサムネイル一覧にまとめて、そのサムネイルの内容をスライドショーのように表示する事が出来るブックマークレットです。
下のリンクをブックマークバー等にドラッグしてクリックすると利用出来ます。

とりあえずこのページで試してみる場合は、そのまま “imageview” をクリックしてみて下さい。

imageview

javascript:(function(d){var%20s=d.createElement('script');s.src='http://www.otchy.net/js/imageview.js';d.getElementsByTagName('head')[0].appendChild(s);})(document);

動作

下記のように、サムネイル画像の img 要素があってそれに大きい画像がリンクしているような部分をページ上から抜き出して、サムネイル一覧を生成します。
<a href=”***.jpg”><img src=”***_mini.jpg” /></a>
HTML のロードが完了していない時は、HTML のロードが完了するまで待ってから動作します。

サムネイル一覧を作成する時、いったんページの最下部まで自動的にスクロールする事で、GIGAZINE のように、画像が遅延ロードされるページでも全ての画像を取得出来るように配慮しています。

サムネイル一覧から任意の画像をクリックすると、その場で大きな画像が開きます。
画像の上でクリックしたり、矢印キーの左右で、画像を切り替える事が出来ます。

画面キャプチャ

こういう感じの画像まとめ、よくありますよね。

ここでブックマークレットを実行すると読み込みが始まり、読み込みが完了するとサムネイル一覧が作成されます。

サムネイルから画像を選択すると、その場で拡大表示されます。

対象ブラウザ

Google Chrome 14 と、Firefox 3.6 で動作確認しています。恐らく、Firefox 4+ と Safari 4+ あたりでは動作すると思われます。
IE に関してはほとんど未確認ですが、IE6 は動作しません。IE7、IE8 もたぶん動作しません。IE9 はもしかしたら動作するかも知れません。

(追記)
利用者の方から Firefox 7 と IE9 で正常動作するとの報告をいただきました。ありがとうございます。

古いアプリをメンテしてて、元々の jQuery のバージョンが 1.0 だの 1.1 だのだとすごく残念な気持ちになりますね。やっぱり、最新の jQuery でサクサク書きたいものです。
バージョンを上げてしまえればいいんですが、動作確認の手間まで考えると、そこまでやる時間もない。いま、ちょっとこの画面だけ手直し出来ればいいんだけど…という場合は、複数のバージョンの jQuery を共存させてしまいましょう。

jQuery には $ の競合を避けるための jQuery.noConflict という function が用意されていますが、これに引数で true を渡すと、window.jQuery オブジェクトの競合も避けるように動作します。

ですので以下のように書けば、複数のバージョンの jQuery が共存出来ます。
現実的にやる事はないと思いますが、onload を追加する事で、3つでも 4 つでも共存可能という事です。

<script>
$(function() {
    var func = function() {
        // 実際に動作させたい部分
        var $16 = jQuery.noConflict(true);
        alert($.fn.jquery);  // old version
        alert($16.fn.jquery);  // ver 1.6
    }
    // 使いたいバージョンの jQuery を用意し、load イベントを設定
    var s = $('<script>').attr('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js').load(func).get(0);
    // IE の場合は script の onload が発生しないので onreadystatechange で検知
    s.onreadystatechange = function() {
        if (this.readyState == 'loaded' || this.readyState == 'complete') {
            func();
        }
    }
    // jQuery.append だと load イベントが発生しない(？)ようなので、生 DOM で head に script を追加
    $('head').get(0).appendChild(s);
});
</script>

title 要素で「スパムフォローをまとめてブロック」と謳っているくせに、せいぜいブロック出来るだけで、アプリ上からのスパム報告に対応していなかった TwitMgr に、ようやくスパム報告機能を実装しました。

ぶっちゃけこの機能が無いせいで、作者自身いちいち公式サイトに飛んでからスパム報告してたので、今回とても便利になって嬉しいです。
1時間足らずで実装出来るならさっさとやってれば良かったです…。

あとはあれですね、リスト登録機能が欲しいですよね。
当たり前ですが、投げっぱなしで終わりのスパム報告よりもリスト周りの API の方が複雑なので、こっちはちょっと時間がかかると思います。

TwitMgrのリニューアルに際して、今風のタブとツールバーを CSS3 だけで書いたので、その内容を順を追って説明してみます。

完成品

こんな感じのタブとツールバーを、CSS 3 だけで書いていきます。

マークアップ

実際の TwitMgr で使ってるものとは違いますが、説明の都合上 HTML は下記のようなマークアップで行います。まだ何も CSS を適用していない状態なので、何がなにやらという状態ですね。

<div class="tab selected">フォローしている</div>
<div class="tab">フォローされている</div>
<div class="toolbar">
<ul class="pager">
  <li class="button enable">1</li>
  <li class="button enable">2</li>
  <li class="button current">3</li>
  <li class="button enable">4</li>
  <li class="button enable">5</li>
  <li class="period">...</li>
  <li class="button enable">≫</li>
</ul>
</div>

レイアウト

各部品の場所を決めていきます。位置関係が分かりやすいよう、仮で青のボーダーを入れました。ここはあまり特筆する点がありませんね。display と float を使って、適切な位置に要素を配置していくだけです。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
}
.toolbar {
  clear: both;
  height: 30px;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
}

色の指定

文字の色と背景色を指定しました。普通に color と background-color を指定しただけですが、css3 らしい事としては、選択中のページを表す li.current に半透明の白色を指定する事で、その部分がハイライトされたような効果を出しています。
このようにする事で、背景色が変わったとしてもハイライト色を変える必要が無くなります。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
}
.selected {
  background-color: #5a5;
  color: #fff;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
}

ボーダーの指定

今度は各要素のボーダーを指定していきます。
いわゆる角丸を多用しています。四隅の特定の角だけを丸める事もできるので、タブっぽいデザインを書く時に便利です。ここまでくると何となくそれらしくなってきますね。

ページャー部分のボーダーは、背景色に合わせて半透明の白色にしています。背景色も文字もそれに含まれる要素も、全て一斉に半透明にする時は opacity で、背景色・ボーダーなど部分に応じて半透明にする時は rgba という使い分けをすると吉です。

またベンダープレフィックスとしてここでは、webkit (Chrome / Safari 等) と moz (Firefox 等) を付けています。他にも o (Opera) や ms (IE8+) もあるので、必要に応じて使い分けて下さい。

ただ、この状態では当たり前なのですが、選択中のタブとツールバーの間にも線が見えてしまっていますね。ここは綺麗に繋がってくれないと困ります。この問題は後で解決します。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
  border-style: solid;
  border-color: #383;
  border-width: 1px 1px 0 1px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}
.selected {
  background-color: #5a5;
  color: #fff;
  border-color: #373;
  border-bottom: 1px #5a5;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
  border: solid 1px #373;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
  border: solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.toolbar .pager li.enable {
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
  border: 0;
}

グラデーションの指定

ツールバー部分にグラデーションをかけました。グラデーションの上端の色を選択中のタブの色と合わせる事で、シームレスに繋がるようにします。
このグラデーションの指定ですが、手作業で書くにはちょっと辛いので、Ultimate CSS Gradient Generator のようなジェネレータを使って書くのが良いかと思います。
ベンダープレフィックス付きの css を出力してくれるので、そのまま貼り付けるだけになります。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
  border-style: solid;
  border-color: #383;
  border-width: 1px 1px 0 1px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}
.selected {
  background-color: #5a5;
  color: #fff;
  border-color: #373;
  border-bottom: 1px #5a5;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
  border: solid 1px #373;
  background: -webkit-linear-gradient(top, #5a5 1%, #383 100%);
  background: -moz-linear-gradient(top, #5a5 1%, #383 100%);
  background: linear-gradient(top, #5a5 1%,#383 100%);
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
  border: solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.toolbar .pager li.enable {
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
  border: 0;
}

1px ラインの追加

デザイン系の記事で良く取り上げられる、1px の魔法を css で追加します。
具体的には右に 1px、下に 1px、ぼかし無しの状態で、要素の内側にボックスシャドウをかけます。こうするとちょうど、左上に 1px のラインを引いたような効果が出せます。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
  border-style: solid;
  border-color: #383;
  border-width: 1px 1px 0 1px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}
.selected {
  background-color: #5a5;
  color: #fff;
  border-color: #373;
  border-bottom: 1px #5a5;
  padding-right: 8px;
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
  border: solid 1px #373;
  background: -webkit-linear-gradient(top, #5a5 1%, #383 100%);
  background: -moz-linear-gradient(top, #5a5 1%, #383 100%);
  background: linear-gradient(top, #5a5 1%,#383 100%);
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
  border: solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.toolbar .pager li.enable {
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
  border: 0;
}

タブとツールバーをつなぐ

ボーダーを追加して以来ずっと気になっていた、選択中のタブとツールバーの間の線を隠します。
まずタブの高さ自体がそもそも 14px になっているので、選択中のタブはそれにボーダー幅 1px と、ボックスシャドウ幅 1px を足した 16px にします。
そのままだと、非選択のタブと選択中のタブの高さが変わって、片方が浮いてしまう感じになるので、さらに margin-bottom を -2px にします。

こうする事で選択中のタブが占める高さは非選択のタブと同じ高さになるものの、背景の描画自体は 2px 分下に伸びる形になるので、ツールバーとの間にあった線を隠す事ができます。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
  border-style: solid;
  border-color: #383;
  border-width: 1px 1px 0 1px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}
.selected {
  height: 16px;
  margin-bottom: -2px;
  background-color: #5a5;
  color: #fff;
  border-color: #373;
  border-bottom: 1px #5a5;
  -webkit-border-bottom-right-radius: 2px;
  -moz-border-radius-bottomright: 2px;
  border-bottom-right-radius: 2px;
  padding-right: 8px;
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
  border: solid 1px #373;
  background: -webkit-linear-gradient(top, #5a5 1%, #383 100%);
  background: -moz-linear-gradient(top, #5a5 1%, #383 100%);
  background: linear-gradient(top, #5a5 1%,#383 100%);
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
  border: solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.toolbar .pager li.enable {
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
  border: 0;
}

テキストの書式を調整する

残りは微調整になりますが、テキストの書式を指定していきます。
センタリングやフォントサイズの調整の他、選択中のタブやページを強調するためにテキストシャドウを指定しました。
下に 1px の位置にぼかし無しのシャドウを付けています。あまり離したり、ぼかしすぎたりすると 90 年代テイストの野暮ったさになってしまうので気を付けたいところです。

ところでこのテキストシャドウ、本当は 1px 程度はぼかした方が見た目が柔らかくなっていいのですが、XP 上の Chrome 限定で、「本来アンチエイリアスがかかっていないフォントに、テキストシャドウをぼかして適用するとアンチエイリアスがかかる」という仕様 (バグ？) があって、隣のシャドウ無しのフォントと見た目が変わってしまうので、あえてぼかし無しにしています。
自分が XP 上で Chrome を使っていて気になるというだけなので、気にせずぼかしを適用しても良いかも知れません。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
  border-style: solid;
  border-color: #383;
  border-width: 1px 1px 0 1px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}
.selected {
  height: 16px;
  margin-bottom: -2px;
  background-color: #5a5;
  color: #fff;
  border-color: #373;
  border-bottom: 1px #5a5;
  padding-right: 8px;
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
  text-shadow: 0 1px 0 #333;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
  border: solid 1px #373;
  background: -webkit-linear-gradient(top, #5a5 1%, #383 100%);
  background: -moz-linear-gradient(top, #5a5 1%, #383 100%);
  background: linear-gradient(top, #5a5 1%,#383 100%);
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
  text-align: center;
  font-size: 90%;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
  border: solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.toolbar .pager li.enable {
  border-color: rgba(255, 255, 255, 0.5);
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 #333;
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
  border: 0;
}

ユーザビリティを向上させる

静的な見た目についてはすでに完成していますが、オンマウス時の挙動を指定する事でユーザビリティを向上させます。

まずクリック可能な要素に対して cursor を pointer にするのは基本中の基本です。a 要素を使えばデフォルトのスタイルがそうなるのですが、HTML の思想からしてページ遷移 (ページ内ジャンプを含む) 以外で a 要素を使うのは正しいとは言えません。
余談ですが、a 要素の name 属性も HTML5 で廃止されました。要素に名前を付けるために a を使うなという事です。

なお、クリック時の動作自体は、JavaScript で動的に付与します。onclick 属性は Ajax で HTML を差し込む時に便利だったのですが、jQuery の live を使えば、後から追加される要素にも動的にイベントを付与出来るので、昔ながらの手法はそろそろ終わりにしましょう。

後は、hover 時のスタイルを追加します。タブが上に伸びたようになるのは、padding-top を増やした分、margin-top を減らす事で表現しています。
この時 transition を使えばさらにアニメーションさせる事もできるかと思ったのですが、padding と margin を同時に変化させると、アニメーションがガタガタしてしまうことが分かったので適用していません。

.tab {
  margin: 10px 5px 0 0;
  padding: 5px 7px;
  float: left;
  height: 14px;
  color: #383;
  border-style: solid;
  border-color: #383;
  border-width: 1px 1px 0 1px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  cursor: pointer;
}
.tab:hover {
  padding-top: 7px;
  margin-top: 8px;
}
.selected {
  height: 16px;
  margin-bottom: -2px;
  background-color: #5a5;
  color: #fff;
  border-color: #373;
  border-bottom: 1px #5a5;
  padding-right: 8px;
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
  text-shadow: 0 1px 0 #333;
}
.toolbar {
  clear: both;
  height: 30px;
  background-color: #5a5;
  border: solid 1px #373;
  background: -webkit-linear-gradient(top, #5a5 1%, #383 100%);
  background: -moz-linear-gradient(top, #5a5 1%, #383 100%);
  background: linear-gradient(top, #5a5 1%,#383 100%);
  -webkit-box-shadow: 1px 1px 0 #9c9 inset;
  -moz-box-shadow: 1px 1px 0 #9c9 inset;
  box-shadow: 1px 1px 0 #9c9 inset;
}
.toolbar .pager {
  display: block;
  float: right;
  margin: 6px;
}
.toolbar .pager li {
  display: block;
  float: left;
  margin-left: 2px;
  color: #fff;
  text-align: center;
  font-size: 90%;
}
.toolbar .pager li.button {
  width: 20px;
  padding: 1px;
  border: solid 1px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.toolbar .pager li.enable {
  border-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.toolbar .pager li.enable:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.toolbar .pager li.current {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 #333;
}
.toolbar .pager li.period {
  width: auto;
  padding: 1px 2px;
  border: 0;
}

さいごに

CSS3 を使う時は、ついつい派手に使いたくなるのですが、さりげなくワンポイントずつ使うと、比較的こなれた仕上がりになるようです。

また、例によって IE のようなレガシーブラウザでは、意図したとおりの見た目にはなりません。
IE6 でのキャプチャは以下のようになります。

このままだと厳しそうですが、選択中のページの背景色を半透明以外にも指定しておけば、ぎりぎり意図は伝えられるレベルですね。
プログレッシブエンハンスメント (長すぎ！略称募集) も意識したデザインをやっていければいいなと思います。

Twitter API の仕様変更により動作しなくなっていた TwitMgr をフルスクラッチで書き直して Ver.2.0.0 としてリリースしました。

Ver.2 を名乗る割に、機能的には Ver.1 を踏襲しただけというのが残念ではありますが、適宜先読みを行ったり、取得したデータをキャッシュする事で、従来版よりキビキビと動くようになっています。
その分、メモリの消費は増えているのですが、昨今のトレンドに沿った修正ですし問題ないと思っています。

デザインに関しては、HTML5 / CSS3 の構成で作っています。最近、個人でサイトを作る時は全力で IE を無視するので、HTML5 / CSS3 の機能を存分に使えて気持ちいいです。

今回、webkit に限ってですが、transition を初めて使ってみました。これ、これまで食わず嫌いで使ってなかったのを後悔しましたよ。「あっても無くても機能には支障ないけど、あるとちょっと嬉しいワンポイントアニメ」とかが、楽に表現出来ます。
散々言われていた事ですが、自分で使ってみて初めて本当に理解するっていう感じです。

それと、CSS3 を使い込んで頑張ってみたのがツールバー＆タブのデザイン。

これを画像無しに表現出来るようになるとは驚きです。
ツールバー部分だけを抜き出してみれば、マークアップもシンプルです。

<h3 class="tab selected">フォローしている</h3>
<h3 class="tab ">フォローされている</h3>
<div class="toolbar"></div>

最近の Web デザイン系の記事に触発されて 1px のラインを入れてみたりしてます。
この CSS だけ取り出しても面白いかと思うので、そこはまた別の記事におこします。

最後に、ソーシャル系のボタンとして、はてブ・Twitter・Facebook を付けてみました。
それぞれ公式のスクリプトを生成して貼り付けた感じですが、はてブと Facebook は URL とかページタイトルの指定が固定で入るような形だったので、そこは動的に取るようにしています。

その点、Twitter のボタンはどんなページでも共通のスクリプトを貼り付けるだけでよいので楽ですね。一方、「このサイトのボタンは、どんなページにあってもサイトのトップに対するボタンにしたい」ってのが Twitter だとできないです。
まあ、プロモーション上、サイトのトップにソーシャルのアクセスを集中させたい気持ちは分からないではないんですが、ユーザは「今見てるページ」をブクマしたかったり「いいね！」したかったりすると思うので、そういうのは避けたいです。

さて、せっかく TwitMgr 自体を綺麗に書き直したので、今後は少し機能拡張もやろうと思ってます。
初代 TwitMgr リリース時点では機能が存在していなかったリストへの対応とスパム報告への対応が当面の目標です。
この 2 つは、いま自分で TwitMgr を使うにあたって欲しいと思ってる機能なので、確実に実現させると思います。
その他にも何かフィードバックがあれば、是非教えて下さい。