読者です 読者をやめる 読者になる 読者になる

はてなブログで同じカテゴリーの記事へのリンクを表示するスクリプト

2014/01/31 22:49 追記

スクリプトを改良しましたので、こちらへどうぞ。

【スマホ表示に対応】はてなブログで同じカテゴリーの記事へのリンクを表示する

追記ここまで

はてなブログでは、表示中の記事に対して自分のブログの関連記事を表示する機能が今のところありません。 なので、同じカテゴリーの記事へのリンクを表示するスクリプトをJavaScriptで書いてみました。

処理の大ざっぱな流れとしては、非同期通信でカテゴリーのページのHTMLを取得して 記事へのリンクを抽出。先頭から5件をリスト表示する。というものです。

仕様

  • 表示中の記事についてはリンクを表示しない。
  • 対象となるカテゴリーの件数が1件しかない場合も表示しない
  • 複数のカテゴリーが設定されている場合は、先頭のカテゴリーを表示する

課題(いいわけ)

  • IE、Chrome、Firefoxで表示されることは確認したけど、バージョンによっては動かないかもしれない
  • スマートフォンからの閲覧には対応できてない*1
  • DOMの操作やinnerHTMLの使用とか、セキュリティ的に問題ないのかあやしい
  • 毎回カテゴリーのページにアクセスするので無駄*2
  • 変数の命名とか全体的に書き方が雑
  • SEOへの影響は良くも悪くも不明

というわけで、公開していいものか悩ましいところですが、以下がソース。 デザインのカスタマイズで「記事下」にそのまま追加すればたぶん使えるはず。

もし使用する場合は自己責任でお願いします。念のため。変更等は自由にしてもらって構いません。 どんな感じで表示されるのかは個別記事の一番下を参考にしてください。

<script type="text/javascript">
  var agent = navigator.userAgent;
  if (agent.indexOf('iPhone') == -1 && agent.indexOf('iPad') == -1 && agent.indexOf('iPod') == -1 && agent.indexOf('Android') == -1) {
    var category_element = document.querySelector("div.categories a");

    if(category_element !== undefined && category_element != null) {
      category_url = category_element.href.replace("/category","/archive/category");
      category_title = category_element.text;

      var req = new XMLHttpRequest();

      req.onreadystatechange = function() {
        if (req.readyState == 4) {
          if (req.status == 200) {
            var dom = document.createElement("dom");
            dom.innerHTML = req.responseText;
            var elements = dom.querySelectorAll("a.entry-title");

            if(elements.length > 1) {
              var disp_entry_number = 5; // 記事を表示する件数
              var ul = document.createElement("ul");

              if(disp_entry_number > elements.length) {
                disp_entry_number = elements.length;
              }

              for(var i=0; i<disp_entry_number; i++) {
                if(elements[i].href != location.href){
                  var li = document.createElement("li");
                  li.appendChild(elements[i]);
                  ul.appendChild(li);
                }else if(elements.length > disp_entry_number) {
                  disp_entry_number += 1;
                }
              }
              var category_entry = document.getElementById("category-entry");
              category_entry.innerHTML = "<h3>カテゴリー 「" + category_title + "」 の記事</h3>"; // 見出し
              category_entry.appendChild(ul);
            }
          }
        } 
      }
      
      req.open('GET', category_url, true);
      req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
      req.send();
    }
  }
</script>

<div id="category-entry"></div><!-- 記事を表示する -->

正直なところZenbackやLinkWithinあたりを使ったほうが高機能だと思うし、 はてなブログ標準で、カテゴリーや関連記事の表示が実装されることを願いたい。

*1:HTMLやCSSの構造が異なるみたいで、実装するにはさらに力技になりそう。誰かやってください

*2:はてなから怒られないか若干心配