2009年10月14日

はてなブックマークウィジェットのJavascriptを改変してみた

このブログの右側に付いてる、「人気エントリー」という項目について。

あれは、はてなブックマークが提供しているサービスの1つで、HTMLとJavascriptをコピペするだけで簡単に指定したホストの人気エントリーが表示できてしまう、便利な機能です。


【参考URL】あなたのブログの人気・新着エントリーをブログパーツとして、貼り付けることができます。
http://b.hatena.ne.jp/entrylist/widget?url=http://www.yahoo.co.jp/


貼ってみたらデザインが当ブログに合わなかったので、CSSをいじってスタイルを変えてみたのですが、今ひとつ綺麗に収まらなかったり、設定するのが少し面倒だったり。

なので、途中で頭にきてJavascript側を改変してしまいました。


気づいたら、こんな風に指定すると人気エントリーが出るようになってました。


ソース
<!-- HTMLは外出しして自由に設定できるようにしました -->
<div style="border:dotted 1px;" width:200px;>人気エントリー</div>

<!-- 大枠です。IDは「hatena_entry」固定です。 -->
<div id="hatena_entry">
  <!-- ダミーの行エレメントです。IDは「hatena_entry_row」固定です。 -->
  <div id="hatena_entry_row" style="border: 1px dotted 
rgb(128, 128, 128); padding: 5px; width: 190px;">
    <!-- コンテンツへのリンクのダミーです。styleやclassを自由に指定できます。 -->
    <a href="javascript:void(0)" id="hatena_entry_link" style="color:gray"></a>&nbsp;
    <!-- ○○usersと出るところのダミーです。文字usersは書換え可能。 -->
    <a href="javascript:void(0)" id="hatena_entry_comment_link" 
style='color:crimson'>users</a>
  </div>
</div>
<script type="text/javascript" src="http://www.mwsoft.jp/js/blog.js" 
charset="utf-8"></script>
<script type="text/javascript">
Hatebu.Widget.url   = "http://blog.mwsoft.jp/";
Hatebu.Widget.sort  = "";
Hatebu.Widget.num   = 5;
Hatebu.Widget.load();
</script>

どうなってるかというと、HTML側でダミーのレイアウトを先に書いておきます。
それぞれエレメントのIDを、以下のように指定します。

hatena_entry : 大枠
hatena_entry_row : 行
hatena_entry_link : コンテンツへのリンク
hatena_entry_comment_link : ○○usersのように表示される部分

で、JavaScript側(http://www.mwsoft.jp/js/blog.js)では、ダミーで渡された行を複製してIDを変え、コンテンツのタイトルやリンク先、ユーザ数などを設定した行エレメントを追加し、最後にダミーの行を削除しています。

これで頻繁にブログのスタイルを変えたくなっても、HTMLを触るだけなので、割と楽に直せます。


こういう使い方ってして良いのだろうか。使用方法にはスタイルとかはCSSで変えていいよと書いてあったけど、Javascript側については特に何も書いてなかった。APIが用意されていたのでそこから取っても良かったのだけど、1から作るのは面倒だったので……


探したら他にもいろいろやってる人がいて、少し安心した

【参考URL】はてなブックマークウィジェットをhackする
http://www.h-fj.com/blog/archives/2007/12/02-093206.php

【参考URL】はてなブックマークウィジェットをちょっといじってみた
http://pooneil.sakura.ne.jp/archives/permalink/001175.php