rcmdnk's blog
  1. Top
  2. › Blog
  3. › Octopress

20141224_hatebulist_200_200

サイドバーにつけてるPopular Postは はてなブックマークの数の多い順のリストで、 CSSを上書きしたりして不必要な部分を見えなくしたり 無理やりやってますが、 最初から余計なものを読み込まないように出来たらと思いやってみました。

また、公式で配布されてるコードだと httpsなページで表示できないので、 はてなブックマークの数取得をhttpsでも出来るようにする でやったついでにhttpsでも全部きちんと見れるようにしよう、ということもあって作ってみました。

公式スクリプト

公式のブログパーツの設定 からパーツを作ると

1
2
3
4
5
6
7
8
9
10

<script language="javascript" type="text/javascript" src="http://b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url   = "http://rcmdnk.github.io";
Hatena.BookmarkWidget.title = "エントリー";
Hatena.BookmarkWidget.sort  = "count";
Hatena.BookmarkWidget.width = 0;
Hatena.BookmarkWidget.num   = 5;
Hatena.BookmarkWidget.theme = "notheme";
Hatena.BookmarkWidget.load();
</script>

こんな感じのスクリプトが取得できます。 themeをnothemeとすると余計なCSSが加えられないので 自分で調整する必要がありますが、 その状態でもちょっと余計なheaderとfooterが着いたりするので それを自分で消したりしていました。

呼んでるJavaScriptは http://b.hatena.ne.jp/js/widget.js で、 スクリプト自体はhttp:を消しても呼べるんですが、 このスクリプトの中身を見ると http://...と呼んでしまってるところがあり、 これによってhttpsなページから呼ぶとスクリプトがきちんと実行できなくなります。

widget.jsの中で必要な部分は http://b.hatena.ne.jp/entrylist/json を呼んでる部分です。 これが人気ポストのlink、count、titleのリスト を返してくれるのでそれを直接使うようにしてみます。

自作してみる

Ajaxを使った例がこんな感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="hatena-bookmark-widget" class="hatena-bookmark hatena-bookmark-widget-notheme"><div>
  <div class="hatena-bookmark-widget-body">
     <ul>
     </ul>
   </div>
</div>
<script>
(function() {
  var url = 'http://rcmdnk.github.io';
  var sort = 'count';
  var num = 10;
  $.ajax({
    type: 'GET',
    dataType: 'jsonp',
    url: '//b.hatena.ne.jp/entrylist/json',
    data: {
      url: url,
      sort: sort,
    },
    success: function(data) {
      var f = document.createDocumentFragment();
      //t.appendChild(document.createTextNode('test'));
      if(data && data.length>0){
        for(var i=0; i<num&&i<data.length; i++) {
          var j = data[i];
          var l = document.createElement('li');
          var title = document.createElement('a');
          title.href = j.link.replace('%23', '#');
          title.className = 'hatena-bookmark-entrytitle';
          title.appendChild(document.createTextNode(j.title));
          l.appendChild(title);
          var s = document.createElement('span');
          s.className = 'hatena-bookmark-count';
          var count = document.createElement('a');
          count.href = '//b.hatena.ne.jp/entry/' + j.link.replace('%23', '#');
          count.appendChild(document.createTextNode(j.count + 'users'));
          if(j.count > 10){
            var st = document.createElement('strong');
            st.appendChild(count);
            s.appendChild(st);
          }else if(j.count >= 5){
            var em = document.createElement('em');
            em.appendChild(count);
            s.appendChild(em);
          }else{
            s.appendChild(count);
          }
          l.appendChild(s);
          f.appendChild(l);
        }
      }else{
        var l = document.createElement('li');
        var tx = document.cerateTextNdoe('No Hatena Bookmarks');
        l.appendChild(tx);
        f.appendChild(l);
      }
      var t = document.getElementById('hatena-bookmark-widget').getElementsByTagName('ul')[0];
      t.appendChild(f);
    }
  });
}());
</script>

http://b.hatena.ne.jp/js/widget.js で作る物用に作ったCSSがそのまま使えるように クラス名とかも同じになるようにしています。

それから、jQueryを読み込まなくても出来る様なバージョンも作ってみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<div id="hatena-bookmark-widget" class="hatena-bookmark hatena-bookmark-widget-notheme"><div>
  <div class="hatena-bookmark-widget-body">
     <ul>
     </ul>
   </div>
</div>
<script>
(function() {
  var url = 'http://rcmdnk.github.io';
  var sort = 'count';
  var num = 10;
  hatebuCallback = function (data) {
    var f = document.createDocumentFragment();
    if(data && data.length>0){
      for(var i=0; i<num&&i<data.length; i++) {
        var j = data[i];
        var l = document.createElement('li');
        var title = document.createElement('a');
        title.href = j.link.replace('%23', '#');
        title.className = 'hatena-bookmark-entrytitle';
        title.appendChild(document.createTextNode(j.title));
        l.appendChild(title);
        var s = document.createElement('span');
        s.className = 'hatena-bookmark-count';
        var count = document.createElement('a');
        count.href = '//b.hatena.ne.jp/entry/' + j.link.replace('%23', '#');
        count.appendChild(document.createTextNode(j.count + 'users'));
        if(j.count > 10){
          var st = document.createElement('strong');
          st.appendChild(count);
          s.appendChild(st);
        }else if(j.count >= 5){
          var em = document.createElement('em');
          em.appendChild(count);
          s.appendChild(em);
        }else{
          s.appendChild(count);
        }
        l.appendChild(s);
        f.appendChild(l);
      }
    }else{
      var l = document.createElement('li');
      var tx = document.cerateTextNdoe('No Hatena Bookmarks');
      l.appendChild(tx);
      f.appendChild(l);
    }
    var t = document.getElementById('hatena-bookmark-widget').getElementsByTagName('ul')[0];
    t.appendChild(f);
  };
  var s = document.getElementsByTagName('script')[0];
  var news = document.createElement('script');
  news.src = '//b.hatena.ne.jp/entrylist/json?callback=hatebuCallback&url='+url+'&sort='+sort;
  s.parentNode.insertBefore(news, s);
}());
</script>

こんな感じ。

CSSはこんな感じで作っています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

.hatena-bookmark-widget-notheme .hatena-bookmark-widget-title img {
  display: none;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-footer {
  display: none;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul {
  list-style-type: none;
  border-bottom: none;
  width: 300px;
  font-size: 0.8em;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li {
  padding: 0 5px;
  margin: 0 !important;
  text-align: right;
  height: 4.5em;
  position: relative;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li * {
  vertical-align: bottom;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li a.hatena-bookmark-entrytitle {
  display: block;
  text-align: left;
  padding: 5px 0;
  height: 2em;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li .hatena-bookmark-count {
  position: absolute;
  bottom: 3px;
  right: 5px;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li .hatena-bookmark-count a {
  text-decoration: underline;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li .hatena-bookmark-count em a {
  background-color: #fff0f0;
  font-weight: bold;
  display: inline;
  font-style: normal;
  color: #ff6666;
}
.hatena-bookmark-widget-notheme .hatena-bookmark-widget-body ul li .hatena-bookmark-count strong a {
  background-color: #ffcccc;
  font-weight: bold;
  font-style: normal;
  display: inline;
  color: red;
}

テストページがこちら:

全部一緒です。ロードする時間もこれだけだと殆ど変わらない感じです。

また、httpsな接続をしてみると、自作板の方だけきちんと表示されることが分かります。

Sponsored Links
Sponsored Links

« はてなブックマークの数取得をhttpsでも出来るようにする Vimで'E887: Sorry, this command is disabled, the Python's site module could not be loaded.'なエラー »

}