IT戦記

ただただがむしゃらにソフト開発をしていたい

はてなダイアリーにいいねボタンを置く方法

たっち!


みなさん、こんにちは

お元気ですか、僕はアイスのあとラーメンを食べて気持ち悪い状態ですが元気です。

さてさて

最近は、フェイスブックミクシィツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。
そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね!」ボタンだったり、「ツイート」ボタンだったりするわけですね。
というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。
ここで紹介する方法は、ちゃんと理解して置きたい人向けXML や HTML を分かっている人向けとなります。

はてなダイアリーには自由な HTML を貼り付けられない

まあ、普通に自由に HTML を貼り付けられる環境であれば、ただ単に提供されるボタン用の HTML を張り付けるだけなので簡単です。
でも、はてなダイアリーの場合は自由な HTML を貼り付けることが出来ません。*1
と言うわけで、はてなの許可された形の HTML 内で貼り付ける必要があるわけですね

グーグルガジェットの作り方

グーグルガジェットとは、様々なページに貼り付けやすいように設計されたブログパーツみたいなもんです。
はてなダイアリーにはグーグルガジェット用の HTML を張り付けることが出来るので、グーグルガジェットとして様々なボタンを貼り付けようということですね。

まず、簡単な XML を書く

グーグルガジェットは、以下のような XML ファイルをどこか URL を持つ場所に公開すれば良いです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

ここにボタンの HTML を貼り付ける

]]></Content>
</Module>
XML からグーグルガジェット用の HTML を取得する

たとえば、上の XMLhttp://callee.jp/socialbuttons/sample/000.xml に置いてみました。
これから HTML を作るには http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/000.xml にアクセスして、「Get the Code」を押します。そうすると HTML が表示されると思います。
具体的には以下のようなものです。

<script src="http://www.gmodules.com/ig/ifr?url=http://callee.jp/socialbuttons/sample/000.xml&amp;synd=open&amp;w=720&amp;h=150&amp;title=%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

これをはてなダイアリーの日記に貼り付ければ良いのです。

これで

グーグルガジェットは作れるようになりましたね。
次は、具体的に様々なボタンをこのグーグルガジェットを書いてみましょう。

グーグルガジェットにツイッターのボタンを貼り付ける

ツイッター用のツイートボタンは、以下のページから作ることが出来ます。
http://twitter.com/goodies/tweetbutton

今回は以下のように作りました


水平方向にカウントを表示

とりあえずツイートテキストは適当に入れておきます(グーグルガジェットの場合、タイトルの自動取得はうまくいきません。)

とりあえず URL も適当に入れておきます(グーグルガジェット内の場合、 URL の自動取得はうまくいきません。)

言語は日本語で

一緒にツイッターユーザー名もツイートさせることもできますが、これは使いません(とくに理由はありません)

そうすると、 HTML が出来ますね。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>

次に、フェイスブックのボタンを貼り付ける

フェイスブックのいいね!ボタンは以下のページで作ることができます。
いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

以下のように作ります


なるべく、シンプルなボタンになるようにしてみました。

「Get Code」ボタンを押して、上のほうの iframe って書いてあるテキストボックスから HTML をコピーします。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>

次に、はてなブックマークのボタンを貼る

はてなブックマークのボタンは以下のページで作ることができます。
はてなブックマークボタンの作成・設置について - はてなブックマーク

以下のように作ってみました


適当に URL とタイトルを入れて、アイコンのタイプを選びます。
右側の HTML をグーグルガジェットの XML に貼り付けます。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

]]></Content>
</Module>

最後にミクシィイイネ!ボタンを貼り付ける

ミクシィのチェックボタンを作るのは結構めんどくさいです。

まず、 mixi Plugin の登録をする

以下のページに行きます
ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]

新規サービスの追加を押します。

このように必要事項を埋めて、同意→作成と進みます

HTML を取得する

このページの一覧から、以下のようなページに進むことが出来ます

上記のように設定してタグを取得してみます

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

]]></Content>
</Module>

対象 URL、タイトルをカスタマイズ可能にする

とりあえずだいぶ出来てきましたが、この手順を毎回ブログを書くたびに行うのは面倒です。なので、 URL やタイトルなどはカスタマイズ可能にしておきましょう。

UserPref という仕組みを使う

さっきまでの URL に以下のように UserPref というタグを追加します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[
...省略
]]></Content>
</Module>
UserPref の値を HTML の中で使う

_IG_Prefs というオブジェクトを HTML の中の JavaScript から使うことが出来ます。
最終的には、以下のような感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[

<iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a>

<a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

<iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

<script type="text/javascript">
/* Get UserPrefs Values */
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

グーグルガジェット内のデザインを調整

次に、グーグルガジェット内のデザインを調整

以下のように構造化して、適当に CSS を書きます
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#FFFFFF" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

続けるにはENTERを押すかコマンドを入力してください
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#F9F9F9" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" target="_top" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" target="_top" href="" class="hatena-bookmark-button" data-hatena-bookmark-title="" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

背景の色は、 IT 戦記の背景色に合わせてみました。

実際に貼り付ける

次は実際に貼り付けてみましょう。ぺた

以下のように微妙な感じになります


び、微妙ですね。

不要な部分を CSS で隠します

貼り付けられたグーグルガジェットは、以下のような HTML の構造をしています。

  • table.gadget
    • tbody
      • tr
        • td
          • span.title
            • a
      • tr
        • td
      • tr
        • td
          • div
            • iframe (これ以外は不要!!!)
      • tr
        • td
          • a
            • img
        • td
          • span.powered
            • a
            • #text

貼り付ける HTML のそばに以下のような CSS を一緒に貼り付けます。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>

この CSS は大変便利なのではてなダイアリーの詳細デザイン設定で、ブログ全体の CSS として設定しておくのもいいかもしれません。

というわけで

ついに完成!!!お疲れ様でした!

こんなめんどくさいことできない><!!!

そういう人のために、汎用化したものも作っておきました。
http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/complete.xml
ここで生成された HTML を、前述した以下の CSS と一緒に貼り付けてくださいね。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>
ちなみに僕のブログでは以下のようなの使ってます!

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/buttons.new.xml?v9

というわけで

みなさんも、はてなダイアリーにいいねボタン貼り付けてみませんか?
ではではーヽ(´ー`)ノ

*1:管理ページが記事ページとが同じオリジン(Same origin)であるため

ツイッターのふぁぼられ時間表に色を付けてみた

はじめに

何曜日の何時ごろにどれだけふぁぼられているかも表にしてみました。

Twitterで最もふぁぼられる時間帯は? - さまざまなめりっと

おおおお。おもしろーい。

と、言うわけで

じゃーん、色付けしてみた。

10 fav 以上


50 fav 以上


おおお

色を付けると見やすいですね。
昼ごはんの帯と、うっすらと起床時間の帯が見えてますね。
やっぱり、金曜日だけピーク時間がちょっと早いんですねえ。すごく意外な感じがします。
みんな、金曜は楽しい気持ちで早くねちゃうのかなあ。

色付け用ブックマークレットはこちら

javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/maname_table_color/maname_table_color.js'; document.body.appendChild(s); })(document.createElement('script'))

元のページに行って、ロケーションバー(URL が書いてあるところ)に貼り付けてエンターキーを叩くと色付けされます!
でも、 IE では動きません><ごめんなさい><

はてなブックマークを「ツイッター戦闘力」順にならべるブックマークレット

みなさん、こんにちは!

はてなブックマークがまたまたアップデートしましたね!

Twitter に投稿した URL が何回クリックされたかチェックや、(中略)など、便利な機能が盛りだくさんです。

はてなブックマーク Twitter 連携機能を大幅に機能強化・キャンペーンも開始 - はてなブックマーク日記 - 機能変更、お知らせなど



おおおお!これはすごい!
なんと、ツイッターに投稿した URL がどれだけクリックされたか分かっちゃうんです!!!
ますます、色んなページをブックマークしまくりたくなりますね!
今まで bit.ly にもこれ系の機能はあったのですが、みんなで共有できる(他の人に見せられる)ってのがはてブの新しいところですね!
みなさんもがんがん使っていきましょう!!

というわけで

はてブのエントリーページをツイッターのクリック数で並べ替えるブックマークレットを作ってみました!
クリック数で並べ替える - Hatena::Let
じゃんじゃん使ってください!

使い方

使い方の手順を書いておきます

1. まず、以下のページに行く

クリック数で並べ替える - Hatena::Let

2. ブックマークレットを登録する

そこにあるブックマークレットをブックマーク(お気に入り)に登録しましょう!

3. はてブエントリーページへ行く

たとえば、 http://b.hatena.ne.jp/entry/b.hatena.ne.jp/campaign/twitter に行く

4. ブックマークレットを実行!

ここで、さっき登録したブックマークレットを実行します。

おおおお、「ツイッター戦闘力順」にならびましたね!

まとめ

はてブツイッター良い組み合わせですよね!
と言うわけで、皆さんもこのブックマークレットを使ってガンガン、ツイッター戦闘力を測っていきましょう!!
ではでは!

アメブロツイッタラーをクラスタリングしてみた

はじめに

以前、 ツイッタラーたちは何処からやってきたのか - IT戦記 でツイッタラーのプロフィールにアメブロのリンクを貼ってる人が多いというのが気になり、
なんとなく、アメブロのリンクを貼っているツイッタラーをクラスタリングしてみました。

方法

結果

クラスター名 クラスターに属する人(Twitter ID)
フォロー, お願い, 感謝 クラスタ q2e2d2, miyagawaakira, changelife888, mzoffice, masaharu_kato, itskillup, haya1111, 007tora, Miura_Kazuhisa, fp_sugimo, ckmari, cokeme999, Tweet_kaz, youkihi01, lillykatsuta, Otomari, groomyz, idolnow, twitteidol, claytherapy, conferlist, GENCHOOKDIINA, kashimanarita, ryuichi1222, lohas_ex, miyasemutsuo
笑 クラスタ faridyu, Shuhei_Y, stoic_star, bluewill, haradashota, wadahiromi, arienaikasegika, ayumifujisawa, honnayoko, sumi1118e, LoveLoveDragon, lplmizo, 2xkatayama, ikekei355, maki194, nozooooo, yamamoto_yuuki, UN1982, masahikotaira, kgmsys, winegroove, orise05, mommacoach, hikkyusan, Yurico_y, adnalser, sayaichii, etoleil_chika, Leader_X, miyagi_mai, enyukari, Gidayu, daiyousan
笑, お願い, 自分 クラスタ maruruchan, manaboo_y, yu2club, nagayoshiman, hiroyokko, yukie0339, omeishi, yamashita_mizue, tomoyukitanaka, snowkey_ameba, dengen_cafe, ochi__masato, wakokei, otoshi_FX, YuichiTorii, acocoro, cacatokori, dobatty, ari_miyamoto, inarich, kankyoishige, hibizensin, 00043, J_A_S_M_I_N_E_, greyheron1966, tomaatlas, vitaminssmile, simpleworks_jp, erisaworld, doichan21, nihonchiro, kayano55, chokorabi, chibatomo, derahero, minna_nikkei, belink_tanaka, moeotsuka, mika_fujisawa
笑, 仕事 クラスタ tanakarie, ayakotakayama, Anne_Suzuki, shigotonayami, YUTTY52, aizawa_nagoya, rosheana, imalu_official, champloo_sato, mario9531, OcarinaTottoro, kanoyui, 722idea, amesige, royuu, DailyDruckerBOT, MayJamileh, coropaki, iwaojunko, ekechang, hidelog21, Zipang_Club, finder02, yassan_T, mitsu2001, terrysaito, mirai_camui, various_tone, ameri1u1, ka_sumi, sudacho, taichi_ahobaka, myomyo0814, team_natsuko, cafemari, yukatocha, mandokoro, rankingtv, kakujuku
自分, 言葉, 夢 クラスタ Eiichi_Kimura, hayatogoto, mitesiro, okamurashuichi, yuhohsuka1955, bvaka, nutshakase, angel_voices, samuraihiroshi, kikuutan, ekotova, ueda_manami, hayashitadayuki, mihomari, naminghikaru, umelns, So_Yoshida, take1647, cainarita, taiankeiko, no1egao, atelie_arie379, imamurasatoru, rakuen_sugimoto, assistmansky
カレー クラスタ ayupro, curryNOprince, jienotsu, NKYMN, HIBIKITOKIWA, djhasebe, buchi5, DARTHREIDER, loveucaly, amako_m, ooharaya
セミナー, 自分, 笑, フォロー, お願い, 更新, ビジネス クラスタ eye22, yukahoshino, takepure1108, onikohshi, igokyoto, aoyamahanako, matuhashi, wisdomdesign, t_tateishi, beehivetany, sakaitoshimi, prana10, a_makinoya, kuwabarakouji, momo_uplinks, oda1ra, yamatakuro, babanobaba, KIWAMU_NAKANO, aita_takashi, seikonplanner, firstclassshin, hiramaria, himawari28, hideomi, hamadanoboru, Mayumi_K_, siroikuma, tokutakeatsushi, tensaikojo2, schemerweb, BrainLab_obe, kazumakazumi, voiceupharu, suzukimasayuki
お願い クラスタ higashitiji, 555hamako, bellepesce, kensaku63, tamaoshimizu, hideuezu1225, studio9069, yoshi44world, minavocal, garlic_tea, itsuki_aha, takatomo_i, seki2000, satokofu, rickyjapan, hhhram, caoluno, miwanakabayashi, kasoken, shimojr, terryasakawa, 2525mimi, oto_chang, yoshidamasaki, graceedyuna, okome_ichiban, HomeInspector_A, bijin_tokei, ruriharuta, rinaponpon
更新 クラスタ strawberry2, kadomaita, kiyoharu1968, shirator, haikara30, trnobu, taka_2011, gsc_mikatan, maximaswin, sunaga_t, ToshiAizawa, SHUYAKYOTOJAZZ, happychaka, no1kigyou, marii_furukawa, AngelTouchPlus, dohatsuten_crew, pikanchu, sansukesaga, empathy01, maiway, funfuntango, usiotoko, chanokoOSAKA, Ogi_wara, yahoofisco
フォロー, お願い クラスタ susumu_fujita, max_ecconnex, ahoyoko, eco7595, ohayasu1411, shokenchan, hontomaya, shikaku_ishida, takayanagi_a, jicooforce, yoshiyuki_taka, moeka_y, kobe217, YHirahara, gexbenchan, 1stepup, iwamatsumasaki, allone_ikko, raoh1974, rtwmania, Hayator, frebulldog, l_adagio, tetusawakita, daihanjo, anrakun, mi2atom, imamaru00, tomorocchi, hokenmax, yoshi451, usarei, pikake8, mamo1970, vividhue, hinodewalking, ActiveBrainF1, jin_suzuka
社長 クラスタ takapon_jp, masatomatsuura, tmiya555, boo_ooi, motoyasu_yamada, specium, mahalo_pr, hamayan777, oshida_hiroaki, sacocci, norionow, ariga10, super_naomix, rfge, r_grey, tanakanaoto, DJCELORY, chibasports, hide3008, miraiyosoo, kenbo072, takraw501, noronoro093, ge_ha_mob
セミナー クラスタ shibutake79, mitibata1, keisuke_matsuda, okesitamari, nagashimaosamu, mugen_kidou, usapon, gototakuhiro, oginoconsul, Shukatsu_News, simplemapping, bikkuriman2sei, hkunimitsu, sakurapress, igajun, motoakisaito, kawakamimisa, tezukahiroki, lovesyoku, carlhirano, shin_634, tryal, kakipu, minagaki001, fp_enchan, yamashitahiro, miyaguchi_kioku, ameblo_takeshi, zaima310, iblanc, kojima_masasige, SAITO_YASUYUKI, suzukitakae, mijptomida, mira1mira, abitcapricious
自分 クラスタ halu1224, arisakamari, gaku_mc, valshe9, yanakahatunecho, 1031produce, yasasiioto, kyoto__, Jazztronik_, shigenotaiyo, kawaka2, shimadakaoru, reirei_bijin, souuntakeda, toneshinichiro, pupi_niconico, 1192_sachiko, shigotonin0303, maus4000, SUROUEITA, a_d_m_a_n, kusumoto0621, yugiri3, starplatinumthe, yuko817, tgbkeke, freebird0102, designerMA2DA, sakura_toyota, taisei_sasaki, yokorin405, masacosan, kozakai_hidell, daichihaji, asanuma_mayumi, yasnao, yonep, aiminowa, HiroKIKUYAMA, ohmiyan, tsurugimikito
つぶやき クラスタ LivingAid, wiwi7373, sheena_ichio, te_cyan, Kakuta03, kosado, hamattyo, h_kuroto, yokohama_fp, gugitter, oono_akira, sin0923, banno, nari_front, ogura_encho, fmama, benz_w126
名古屋 クラスタ miyaneseijidesu, Yatsuiichiro, koikestyle, KuhoinZero, YUCALI_HALCALI, businessjin, teardrops_hope, yuri_hachinohe, amezari_hirai, katahira_tenki, aisai, morimotojunko, shunsama, konan_yade, tanukinheart, KENTHE390, windy_story, amemiyatomoe, tanakamisaki3, leah_dizon, junna_kojima, jiriki_karen, utare, SingerMoomin, fortyniner045, milestone01, tomoyastone, yusuke_sakai, summer_jyu, reppis55, vittle27
め クラスタ BAKARHYTHM, inadatomoyuki, fukudamoe, ryumi0626, RumiShishido, clear_clear, dasoku_niconico, kyanchiaki, dancom, andomary, MY_MURMUR, hbkr, amu2525, mayumayu777, aqua_park, relaxedly, tkawaguchi, kk789we, Mac_Air, kaz_win, Yo_Shimazaki, mimitane, Shunji, Tark_Platinum, philip_bot, moonysan, syounen_t, tobinaga, sasaki_jun, amarihime, nekoniconico, mappietokio, omizu1212, shiorikawana, TAROSOUL, akiraccyo, ichitaso, erikoichinohe, takagieichi, DJkiyoco, cielx, asahi111

うーん

割とちゃんとクラスタリングできてる箇所もあれば、わけの分からないクラスターになってるところもありますね。
もうすこしキーワードを厳選する必要がありそうです。

おまけ

今回のデータです
http://amachang.sakura.ne.jp/misc/hatena_top_500/cl_cluster.txt (UTF-8 です)
1行が一人分のデータを表していて

  • 1カラム目は所属クラスタの ID
  • 2カラム目は Twitter の screen_name
  • 3カラム目はそのクラスタ内でのフォロワー順位
  • 4カラム目は全体のアメブロイッタラー内のフォロワー順位
  • 5カラム以降は、キーワード、そのキーワードの強さを順に

並べています。

はてなツイッタラー 500 人の「被フォロー数」と「ページランク」を調べてみた

先日

○○のランキングアルゴリズムは「被リンク」にすべきか「ページランク」すべきか

みたいな話になって

どう違うの???

って思いました。

で、

この前作った @amachang/hatena-top-500 on Twitter 内に入ってる人同士のフォロー関係を

二つのアルゴリズムでランキングしてみた。

ページランクの順位 被フォロー数の順位 Twitterの名前 ページランク 被フォロー数
1 1 @ 0.0118464101105928 324
2 2 @ 0.0105108274146914 240
3 3 @ 0.0101890312507749 234
4 4 @ 0.0100012738257647 200
5 6 @ 0.00877386610955 174
6 7 @ 0.00850311014801264 162
7 5 @ 0.00839514750987291 194
8 8 @ 0.00829952489584684 159
9 10 @ 0.00796913541853428 152
10 14 @ 0.00773264467716217 135
11 15 @ 0.00685745757073164 132
12 16 @ 0.00683795846998692 126
13 9 @ 0.00652230437844992 153
14 12 @ 0.00650876760482788 138
15 13 @ 0.00648699281737208 137
16 26 @ 0.00648644380271435 104
17 19 @ 0.00643831491470337 118
18 17 @ 0.00640010414645076 125
19 11 @ 0.00636021047830582 144
20 21 @ 0.00614628475159407 111
21 18 @ 0.00595784187316895 122
22 30 @ 0.00587010988965631 96
23 28 @ 0.00586634734645486 97
24 22 @ 0.00581651832908392 107
25 41 @ 0.00567269325256348 86
26 33 @ 0.00561975315213203 87
27 20 @ 0.00556177040562034 113
28 40 @ 0.00550053501501679 86
29 32 @ 0.00549950124695897 90
30 38 @ 0.0054531036876142 86
31 43 @ 0.00533740827813745 85
32 23 @ 0.00531188864260912 106
33 36 @ 0.00531110959127545 87
34 25 @ 0.00529682449996471 105
35 37 @ 0.0052954382263124 86
36 39 @ 0.00522034848108888 86
37 35 @ 0.00515855336561799 87
38 42 @ 0.00499498564749956 86
39 29 @ 0.00495223328471184 96
40 46 @ 0.00490148738026619 80
41 24 @ 0.0048721763305366 105
42 34 @ 0.00484398938715458 87
43 27 @ 0.00484151532873511 101
44 54 @ 0.00481517892330885 74
45 50 @ 0.00473536923527718 76
46 45 @ 0.00467204581946135 82
47 66 @ 0.00459423987194896 68
48 31 @ 0.00458325864747167 95
49 52 @ 0.00455918209627271 74
50 64 @ 0.0044563626870513 68
51 60 @ 0.00442194426432252 70
52 53 @ 0.00441449042409658 74
53 61 @ 0.00438655354082584 69
54 55 @ 0.00437374645844102 74
55 59 @ 0.0043630083091557 70
56 44 @ 0.0042973798699677 84
57 62 @ 0.00429440895095468 69
58 63 @ 0.00425871461629868 69
59 71 @ 0.00425495812669396 65
60 56 @ 0.00421883864328265 72
61 58 @ 0.00421058246865869 71
62 49 @ 0.00416007358580828 76
63 57 @ 0.00415574386715889 72
64 79 @ 0.00412167375907302 61
65 87 @ 0.00411082478240132 58
66 81 @ 0.00410349620506167 60
67 77 @ 0.00401764549314976 61
68 91 @ 0.00400935113430023 57
69 47 @ 0.00393437407910824 79
70 70 @ 0.00390138360671699 65
71 67 @ 0.00383856752887368 67
72 65 @ 0.00381511775776744 68
73 69 @ 0.00379173387773335 65
74 80 @ 0.00375227560289204 60
75 84 @ 0.0037445283960551 59
76 90 @ 0.0037277084775269 57
77 75 @ 0.00370301445946097 63
78 51 @ 0.00368972029536963 75
79 48 @ 0.00367820472456515 77
80 92 @ 0.00364217977039516 57
81 88 @ 0.0036379040684551 57
82 99 @ 0.0036173346452415 52
83 72 @ 0.00360369798727334 65
84 119 @ 0.00357448402792215 45
85 73 @ 0.00356997479684651 63
86 95 @ 0.00355198909528553 55
87 97 @ 0.00354568031616509 55
88 76 @ 0.00347199314273894 62
89 89 @ 0.00343517540022731 57
90 98 @ 0.00342968548648059 53
91 100 @ 0.00341589353047311 52
92 74 @ 0.00340697262436152 63
93 86 @ 0.00340114231221378 58
94 94 @ 0.00339995743706822 55
95 105 @ 0.00339915766380727 50
96 82 @ 0.00337951420806348 60
97 104 @ 0.00335570122115314 50
98 93 @ 0.00334356492385268 56
99 106 @ 0.00332386838272214 50
100 108 @ 0.003317711642012 48

こんな感じ

被フォロー数が多い人は「人気のある人、友達の多い人」、ページランクが高い人は「有名な人」という感じでいいんでしょうかね。
なんか、エンジニアはページランクが高い傾向にある気がするなあ。
あと、「情報発信のツール」として使ってる人は相対的にページランクが高くて、「コミュニケーションのツール」として使ってる人は被フォロー数が高い傾向にある気がする。
気がするだけかも。

おまけ

また、例によってデータを並べておきます。

ツイッタラーたちは何処からやってきたのか

こんにちは


最近、ツイッターが流行ってますね!
みなさんは使っていますか?僕は使っています!
よかったらフォローしてくださいね><
http://twitter.com/amachang (←くりっく!

さてさて

そんな、ツイッターを見ていてふと思ったんです。

このひとたちは何処からやってきたのだろう?

というわけで

ツイッターのプロフィールに貼ってある URL を調べてみよう!
それを調べるために、

  • ミーユー からフォロワーの多い人トップ 5000 の Twitter ID を取得
  • その 5000 人の Twitter のプロフィールを参照して、URL が貼ってあればそれを取得
  • 取得した URL が短縮 URL だった場合は、元の URL に戻す
  • さらにその URL を Pathtraq API で正規化
  • URL からドメインを取得
  • 並べる

という風にランキングを作ってみました。

順位 URLのドメイン URLを貼ってる人数 1番フォロワーが多い人 2番目 3番目
1 ameblo.jp 494 @ @ @
2 hatena.ne.jp 185 @ @ @
3 twilog.org 147 @ @ @
4 fc2.com 121 @ @ @
5 livedoor.jp 86 @ @ @
6 iddy.jp 64 @ @ @
7 blogspot.com 54 @ @ @
8 laff.jp 47 @ @ @
9 twitter.com 42 @ @ @
10 seesaa.net 41 @ @ @
11 cocolog-nifty.com 40 @ @ @
12 rakuten.co.jp 39 @ @ @
13 nicovideo.jp 34 @ @ @
14 myspace.com 30 @ @ @
15 yahoo.co.jp 29 @ @ @
16 exblog.jp 28 @ @ @
17 tumblr.com 25 @ @ @
18 goo.ne.jp 23 @ @ @
19 google.com 23 @ @ @
20 mixi.jp 20 @ @ @
21 facebook.com 19 @ @ @
22 amazon.co.jp 19 @ @ @
23 jugem.jp 18 @ @ @
24 livedoor.biz 17 @ @ @
25 itmedia.co.jp 16 @ @ @
26 sakura.ne.jp 15 @ @ @
27 yaplog.jp 15 @ @ @
28 ameba.jp 13 @ @ @
29 webry.info 12 @ @ @
30 wikipedia.org 12 @ @ @
31 mag2.com 11 @ @ @
32 tbs.co.jp 10 @ @ @
33 youtube.com 10 @ @ @
34 twitpic.com 10 @ @ @
35 pixiv.net 10 @ @ @

おおおお

ameblo.jp がすごい強いですね!
ツイッターのフォロワートップ 5000 人のうち 494 人がアメブロからやってきたとは!
さすがです!
でも、ちょっと待ってください。
なんと 2 位が hatena.ne.jp ですよ!
これは、大健闘ではないでしょうか!

雑感

それなりに苦労した割には、あまり面白みのないランキングになってしまいました。
やっぱり、有名な人は独自ドメインで活動してたりするんですよね。
うん><

おまけ

アメンバーさんがあまりにも多かったので、調子に乗ってまた top-500 リストを作ってみた
@amachang/ameba-top-500 on Twitter
うーんなんというかこうして作ってみると、アメブロって芸能人のイメージが強いんですけど、結構ビジネスっぽい人も多いんですねえ。

おまけ 2

今回使ったデータを公開しておきます。
http://amachang.sakura.ne.jp/misc/hatena_top_500/twitter_domain_url_rank.txt

Twitter で「はてなダイアラー」ときゃっふきゃっふしよう!

はじめに


はっ

  ( ゚д゚ )
_(__つ/ ̄ ̄ ̄/_ 
  \/    /
     ̄ ̄ ̄

amachang です。
みなさん、こんにちはお元気ですか。僕は元気です。

もっと

もっと、熱くなれよおお、じゃなくて、もっとツイッターはてなダイアラーと絡みたい!

と言うわけで

ツイッターをやっているはてなダイアラーランキング Top 100 を作ってみた!

順位 はてな ID Twitter ID
1 id:finalvent @
2 id:amachang @
3 id:naoya @
4 id:shi3z @
5 id:kanose @
6 id:mkusunok @
7 id:Hamachiya2 @
8 id:nitoyon @
9 id:takerunba @
10 id:ululun @
11 id:y_arim @
12 id:tsumiyama @
13 id:gothedistance @
14 id:jkondo @
15 id:kokorosha @
16 id:keitaro2272 @
17 id:FUKAMACHI @
18 id:michikaifu @
19 id:rikuo @
20 id:heimin @
21 id:hejihogu @
22 id:gamella @
23 id:LM-7 @
24 id:elm200 @
25 id:yomoyomo @
26 id:pha @
27 id:LittleBoy @
28 id:rx7 @
29 id:zyesuta @
30 id:hrkt0115311 @
31 id:umeten @
32 id:TERRAZI @
33 id:heatwave_p2p @
34 id:sikii_j @
35 id:acqua_alta @
36 id:hyoshiok @
37 id:tanemori @
38 id:wadap @
39 id:nakakzs @
40 id:kiyo560808 @
41 id:love_chocolate @
42 id:moto_maka @
43 id:kawango @
44 id:chnpk @
45 id:hirose31 @
46 id:repon @
47 id:GiGir @
48 id:amatanoyo @
49 id:HolyGrail @
50 id:RPM @
51 id:kawasaki @
52 id:DocSeri @
53 id:reikon @
54 id:kusigahama @
55 id:Asmodeus-DB @
56 id:kaerudayo @
57 id:active_galactic @
58 id:nowokay @
59 id:ZIGOROu @
60 id:dacs @
61 id:hatayasan @
62 id:ryuka01 @
63 id:mamoruk @
64 id:white_cake @
65 id:orangestar @
66 id:mohri @
67 id:os0x @
68 id:adgt @
69 id:shinichiroinaba @
70 id:Baatarism @
71 id:stanaka @
72 id:Lhankor_Mhy @
73 id:kurimax @
74 id:Erlkonig @
75 id:coconutsfine @
76 id:t_yano @
77 id:fk_2000 @
78 id:masayang @
79 id:hakobe932 @
80 id:aerodynamik @
81 id:YUYUKOALA @
82 id:taan @
83 id:hagakurekakugo @
84 id:RyoAnna @
85 id:shimooka @
86 id:kousuke-i @
87 id:kskmeuk @
88 id:banraidou @
89 id:javascripter @
90 id:shibata616 @
91 id:tittea @
92 id:mellowmymind @
93 id:todesking @
94 id:kutabirehateko @
95 id:goldhead @
96 id:tkng @
97 id:kobeni_08 @
98 id:tt_clown @
99 id:ockeghem @
100 id:Yoshiori @

さらに

500 位までの人を以下のリストにまとめてみました
@amachang/hatena-top-500 on Twitter
けっこう、おもしろいタイムラインになっております!
じゃんじゃんフォローしちゃおう!きゃっふきゃっふしよう><

まとめ

こうやって見ると、みんなけっこうツイッターやってるんですね!
つんつくつん (σ・e・)σ(≧ェ≦;)
べ、べつに Twitter 記法を使ってみたかったわけじゃないんだからね!(///

おまけ「このリストの作り方」

最後にこのリストを作る方法を紹介します。

1. TopHatenar から「はてブ数」の多い「はてなダイアラー」を抽出する

まずは、 ブログランキングサイト [TopHatenar] から上から 5000 人のはてな ID を以下のプログラムを使って抽出してきます。

#! /usr/bin/perl

use strict;
use warnings;

use LWP::Simple;
use HTML::TreeBuilder::XPath;

sub get_rank_url {
    my $offset = shift;
    $offset += 1;
    return 'http://tophatenar.com/ranking/bookmark/' . $offset . '?blog=hatena';
}

sub get_tree {
    my $url = shift;
    my $tree = HTML::TreeBuilder::XPath->new;
    my $content = get($url);
    $tree->parse($content);
    $tree->eof();
}

sub main {
    for (my $i = 0; $i < 100; $i++) {
        my $url = get_rank_url($i * 50);
        my $tree = get_tree($url);
        my @nodes = $tree->findnodes('//table[contains(@class, "ranking")]//tr/td[2]/a');
        for my $node (@nodes) {
            print($node->as_text() . "\n");
        }
        warn($url . "\n");
        sleep(2)
    }
}

main();
2. 抽出した「はてなダイアラー」から id:furyu-tei さんが作った APITwitter ID を抽出する

はてなID ⇔ Twitterユーザー名の相互変換APIを作ってみました - 風柳メモ
この API は、 http://www.hatena.ne.jp/はてなID のページから Twitter にリンクされてる場合に Twitter ID を抽出できます。
ですので、この時点でだいぶ絞られることになりますね。
以下のプログラムは、 hatena_id と twitter_id の対を CSV 形式で出力します。

#! /usr/bin/perl

use strict;
use warnings;

use LWP::Simple;
use JSON::XS;

my $diary_id;
while ($diary_id = <>) {
    chomp($diary_id);
    my $content = get('http://hatena-anohito.appspot.com/c/?hatena_id=' . $diary_id);
    my $obj = decode_json($content);
    if (defined($obj->{twitter}->{screen_name})) {
        print($obj->{hatena}->{id} . ',' . $obj->{twitter}->{screen_name} . "\n");
    }
    warn('http://hatena-anohito.appspot.com/c/?hatena_id=' . $diary_id . "\n");
    sleep(2);
}
3. はてな記法の出力

以下のプログラムで、 はてな記法を出力します。

#! /usr/bin/perl

use strict;
use warnings;

my $rank = 1;
my $line;
while ($line = <>) {
    chomp($line);
    if ($line =~ m/^([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/) {
        warn $line . "\n";
        my $diary_id = $1;
        my $twitter_id = $2;
        print('|' . $rank . '|id:' . $diary_id . '|twitter:@' . $twitter_id . "|\n");
    }
    else {
        die 'bad line';
    }
    $rank ++;
}
4. Twitter のリストに追加する

以下のプログラムで、 @amachang/hatena-top-500 on Twitter に Top 500 人を追加します。

#! /usr/bin/perl

use strict;
use warnings;

use Net::Twitter::Lite;

my $username = 'ゆーざーめい';
my $password = 'ぱすわーど';
my $listname = 'りすとめい';

my $twitter = Net::Twitter::Lite->new( username => $username, password => $password );

my $line;
my $count = 0;
while ($line = <>) {
    chomp($line);
    if ($line =~ m/^([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/) {
        warn $line . "\n";
        my $user = $2;
        eval {
            $twitter->add_list_member($username, $listname, $user);
        };
    }
    else {
        die 'bad line';
    }
    $count++;
    unless ($count < 600) {
        last;
    }
}
5. あとは、ちょこっと文章書いて!

投稿するだけ!