はてなブログの月別アーカイブをリストからプルダウンに書き換える

このブログは、遠くmixi日記時代からの記事をストックしているので、サイドバーの『月別アーカイブ』が

• 2012 / 11 (xx)
• 2012 / 10 (xx)
• 2012 / 9 (xx)
• ...
• 2006 / 2 (xx)

というふうに縦長になってしまい、ちょっと不恰好になってました。

そこで、jQueryを使ってリストからプルダウンにHTMLを書き換えることにしました。

で、調べてみますと、驚いたことにどうも『月別アーカイブ』のHTMLは最初からソースの中には埋め込まれてないようなのです。

右クリックでこのページのソースを見てみるとよくわかるのですが、『月別アーカイブ』のHTMLは以下のようになっています。

<div class="hatena-module-archive">
  <div class="hatena-module-title">
    月別アーカイブ
  </div>
  <div class="hatena-module-body">
  </div>
</div>

おそらく、ページを読み込んだ後でこのbody部内にJavaScriptを使ってアーカイブのHTMLを書き込んでるものと思われます。

なので、今度はその処理の記述部分を探したところ、こちらの11003行目に次のような記述がありました。

Hatena.Diary.Pages.Blogs['*'].setupArchiveModule = function () {
    var $archives = $('.hatena-module-archive');
    if ( $archives.length === 0 ) return;

    $.ajax({
        type: 'get',
        url: '/archive_module',
        dataType: 'html'
    }).done(function(res) {
        $archives.find('.hatena-module-body').append(res);
    });
};

つまり、このページのHTMLを取得して先ほどのbody部内に書き込んでいた、というわけですね。

ここまでくればあと一息です。

上記の最後の箇所、すなわち取得したHTMLをappendしているところを書き換えてやり、こいつをブログ内のどこかに配置してやればよさそうです。

自分の場合は、次のように書き換えたものをサイドバーに配置しました。

<script type="text/javascript">
Hatena.Diary.Pages.Blogs['*'].setupArchiveModule = function () {
    var $archives = $('.hatena-module-archive');
    if ( $archives.length === 0 ) return;

    $.ajax({
        type: 'get',
        url: '/archive_module',
        dataType: 'html'
    }).done(function(res) {
         // ここから書き換え
         var pulldown = $('<select>').change(function(){
             var url = $(this).val();
             location.href = url;
         });

         $(res).find('a').each(function(){
             var a = $(this);
             var text = a.text();
             var url = a.attr('href');
             $('<option>').text(text).val(url).appendTo(pulldown);
         });

         $archives.find('.hatena-module-body').append(pulldown);
         // ここまで書き換え
    });
};
</script>

結果ですが、これはもうこのブログのサイドバーの『月別アーカイブ』をご覧いただければおわかりいただけるかと。*1

思うところあって、プルダウンはやめてリストのままコンパクトにするようにしました。 

これで少しは見栄えも良くなったかなぁ。

*1:optgroupタグで年単位にグルーピングするともっとよいかもしれません。