Hatena::ブログ(Diary)

IT戦記 このページをアンテナに追加 RSSフィード

2011-01-08

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

たっち!

f:id:amachang:20110109030350j:image

みなさん、こんにちは

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

さてさて

最近は、フェイスブックミクシィツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。

そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね!」ボタンだったり、「ツイート」ボタンだったりするわけですね。

というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。

ここで紹介する方法は、ちゃんと理解して置きたい人向けXMLHTML を分かっている人向けとなります。

はてなダイアリーには自由な 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>

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

これで

グーグルガジェットは作れるようになりましたね。

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

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

ツイッター用のツイートボタンは、以下のページから作ることが出来ます。

Twitter / ?

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

f:id:amachang:20110109025002j:image

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

f:id:amachang:20110109025003j:image

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

f:id:amachang:20110109025004j:image

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

f:id:amachang:20110109025005j:image

言語は日本語で

f:id:amachang:20110109025006j:image

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

f:id:amachang:20110109025007j:image

そうすると、 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>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/001.xml

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

フェイスブックのいいね!ボタンは以下のページで作ることができます。

いいね!ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

以下のように作ります

f:id:amachang:20110109025010j:image

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

f:id:amachang:20110109025011j:image

「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>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/002.xml

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

はてなブックマークのボタンは以下のページで作ることができます。

はてなブックマークボタンの作成・設置について - はてなブックマーク

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

f:id:amachang:20110109025012j:image

適当に 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>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/003.xml

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

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

まず、 mixi Plugin の登録をする

以下のページに行きます

ソーシャル・ネットワーキング サービス [mixi(ミクシィ)]

f:id:amachang:20110109025013j:image

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

f:id:amachang:20110109025014j:image

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

HTML を取得する

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

f:id:amachang:20110109025015j:image

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

で、貼り付けるとグーグルガジェット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>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/004.xml

対象 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>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>
この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/005.xml

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

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

以下のように構造化して、適当に 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>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<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>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

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

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/006.xml

実際に貼り付ける

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

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

f:id:amachang:20110109025016j:image

び、微妙ですね。

不要な部分を 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 として設定しておくのもいいかもしれません。

というわけで

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

f:id:amachang:20110109025017j:image

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

そういう人のために、汎用化したものも作っておきました。

Error 404 (Not Found)!!1

ここで生成された 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>
ちなみに僕のブログでは以下のようなの使ってます!

Error 404 (Not Found)!!1

というわけで

みなさんも、はてなダイアリーにいいねボタン貼り付けてみませんか?

ではではーヽ(´ー`)ノ

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

2010-09-19

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

はじめに

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

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

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

と、言うわけで

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

10 fav 以上

f:id:amachang:20100919083852p:image

50 fav 以上

f:id:amachang:20100919083853p:image

おおお

色を付けると見やすいですね。

昼ごはんの帯と、うっすらと起床時間の帯が見えてますね。

やっぱり、金曜日だけピーク時間がちょっと早いんですねえ。すごく意外な感じがします。

みんな、金曜は楽しい気持ちで早くねちゃうのかなあ。

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

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 では動きません><ごめんなさい><

2010-06-28

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

みなさん、こんにちは!

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

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

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

f:id:amachang:20100628130239j:image

f:id:amachang:20100628131003j:image

おおおお!これはすごい!

なんと、ツイッターに投稿した URL がどれだけクリックされたか分かっちゃうんです!!!

ますます、色んなページをブックマークしまくりたくなりますね!

今まで bit.ly にもこれ系の機能はあったのですが、みんなで共有できる(他の人に見せられる)ってのがはてブの新しいところですね!

みなさんもがんがん使っていきましょう!!

というわけで

はてブのエントリーページをツイッターのクリック数で並べ替えるブックマークレットを作ってみました!

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

じゃんじゃん使ってください!

使い方

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

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

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

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

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

f:id:amachang:20100628130240j:image

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

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

f:id:amachang:20100628130242p:image

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

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

f:id:amachang:20100628130241j:image

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

まとめ

はてブとツイッター良い組み合わせですよね!

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

ではでは!

2010-06-19

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

はじめに

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

なんとなく、アメブロのリンクを貼っているツイッタラーをクラスタリングしてみました。

方法

  • この記事のアメブロツイッタラー 494 人の直近 200 件のツイートを取得
  • TF-IDF でキーワード抽出
  • K-Means++ でクラスタリング

結果

クラスター名クラスターに属する人(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カラム以降は、キーワード、そのキーワードの強さを順に

並べています。

2010-06-16

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

先日

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

みたいな話になって

どう違うの???

って思いました。

で、

この前作った @amachang/hatena-top-500さんはTwitterを利用しています 内に入ってる人同士のフォロー関係を

  • 被フォロー数
  • ページランク

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

ページランクの順位被フォロー数の順位Twitterの名前ページランク被フォロー数
11@0.0118464101105928324
22@0.0105108274146914240
33@0.0101890312507749234
44@0.0100012738257647200
56@0.00877386610955174
67@0.00850311014801264162
75@0.00839514750987291194
88@0.00829952489584684159
910@0.00796913541853428152
1014@0.00773264467716217135
1115@0.00685745757073164132
1216@0.00683795846998692126
139@0.00652230437844992153
1412@0.00650876760482788138
1513@0.00648699281737208137
1626@0.00648644380271435104
1719@0.00643831491470337118
1817@0.00640010414645076125
1911@0.00636021047830582144
2021@0.00614628475159407111
2118@0.00595784187316895122
2230@0.0058701098896563196
2328@0.0058663473464548697
2422@0.00581651832908392107
2541@0.0056726932525634886
2633@0.0056197531521320387
2720@0.00556177040562034113
2840@0.0055005350150167986
2932@0.0054995012469589790
3038@0.005453103687614286
3143@0.0053374082781374585
3223@0.00531188864260912106
3336@0.0053111095912754587
3425@0.00529682449996471105
3537@0.005295438226312486
3639@0.0052203484810888886
3735@0.0051585533656179987
3842@0.0049949856474995686
3929@0.0049522332847118496
4046@0.0049014873802661980
4124@0.0048721763305366105
4234@0.0048439893871545887
4327@0.00484151532873511101
4454@0.0048151789233088574
4550@0.0047353692352771876
4645@0.0046720458194613582
4766@0.0045942398719489668
4831@0.0045832586474716795
4952@0.0045591820962727174
5064@0.004456362687051368
5160@0.0044219442643225270
5253@0.0044144904240965874
5361@0.0043865535408258469
5455@0.0043737464584410274
5559@0.004363008309155770
5644@0.004297379869967784
5762@0.0042944089509546869
5863@0.0042587146162986869
5971@0.0042549581266939665
6056@0.0042188386432826572
6158@0.0042105824686586971
6249@0.0041600735858082876
6357@0.0041557438671588972
6479@0.0041216737590730261
6587@0.0041108247824013258
6681@0.0041034962050616760
6777@0.0040176454931497661
6891@0.0040093511343002357
6947@0.0039343740791082479
7070@0.0039013836067169965
7167@0.0038385675288736867
7265@0.0038151177577674468
7369@0.0037917338777333565
7480@0.0037522756028920460
7584@0.003744528396055159
7690@0.003727708477526957
7775@0.0037030144594609763
7851@0.0036897202953696375
7948@0.0036782047245651577
8092@0.0036421797703951657
8188@0.003637904068455157
8299@0.003617334645241552
8372@0.0036036979872733465
84119@0.0035744840279221545
8573@0.0035699747968465163
8695@0.0035519890952855355
8797@0.0035456803161650955
8876@0.0034719931427389462
8989@0.0034351754002273157
9098@0.0034296854864805953
91100@0.0034158935304731152
9274@0.0034069726243615263
9386@0.0034011423122137858
9494@0.0033999574370682255
95105@0.0033991576638072750
9682@0.0033795142080634860
97104@0.0033557012211531450
9893@0.0033435649238526856
99106@0.0033238683827221450
100108@0.00331771164201248

こんな感じ

被フォロー数が多い人は「人気のある人、友達の多い人」、ページランクが高い人は「有名な人」という感じでいいんでしょうかね。

なんか、エンジニアはページランクが高い傾向にある気がするなあ。

あと、「情報発信のツール」として使ってる人は相対的にページランクが高くて、「コミュニケーションのツール」として使ってる人は被フォロー数が高い傾向にある気がする。

気がするだけかも。

おまけ

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