はてなブログでjQueryを使って記事下にRSSを読み込んで、タグに関連している記事を表示する。 #JavaScript

前回の「はてなブログでjQueryを使ってRSS読み込んで、記事下に関連記事を表示させる」はRSSを読み込んで記事を表示させるスクリプトを発展させて見ました。
記事のタグを取得して、記事のタグと表示する記事のタグのマッチ度により、表示させる内容を変えてみました。

前回同様jQueryの読み込みを行います。

jQueryの読み込み

CDNでjQueryの「jquery-3.1.1.min.js」を読み込みます。「slim」とか追加ているものは含まれている機能が違うので、読み込んでもうまく表示してくれません。

  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>

スクリプト内の解説

カテゴリの読み込み

まずは、記事で使われているタグを抽出します。

hatena_recomend_0.1.js

//記事中のカテゴリ個数と内容を把握
var categoly_array = new Array;
  $(".entry-categories a").each(function(){
    //記事で使用されているURLを取得
    var categolyU = $(this).attr("href").split('/');
    //記事のカテゴリを文字列で抽出→配列に追加
    categoly_array.push(decodeURI(categolyU[5]));
  });

はてなブログでは記事内の「.entry-categories」というのがカテゴリのクラスになります。このクラスで使われているaタグが対象になります。なので、その「href」のURLを「/」で分解して最後の文字列を取得します。

RSSフィールド内のカテゴリを抽出

前回同様にまずはRSSを読み込みます。
読み込んだRSSの一つのitemからcategoryを取得します。
はてなブログのRSS自体がブログ全体を配信していないため、検索対象の範囲もそれに相当して狭くなります。

hatena_recomend_0.1.js

    //RSS中でアイテム内のカテゴリを抽出
    var elcategoly = [];
    $(this).find("category").each(function(){
    elcategoly.push($(this).text());
});

「elcategoly」という配列に「category」のテキストを一つづつ入れます。

カテゴリの比較

次に取得したカテゴリ通しを比較して、どのくらい同じものが使われているかを明らかにします。

hatena_recomend_0.1.js

        //1つのアイテム内に入っているカテゴリタグと比較
        $.each(categoly_array, function(y){
          //カテゴチがあっている場合は加算
          //カテゴリがないものはリストに格納しない
          if($.inArray(categoly_array[y], elcategoly) > 0){
            matchP = matchP + 1; //カテゴリのマッチが何個あるかを検出
          };
        });

        if(matchP > 0){
          list.push({"matchP":matchP, "itemEL":$(this)});
        };
      });

それぞれ抽出したカテゴリを一つづつ比較して、ヒットしたら、ポイント（matchP）に点数をつけていきます。
最後に、点数とitemを連結配列に入れていきます。

連結配列のソート

先の連結配列の格納とこのソートの部分が悩んでしまった点であります。
こちらのサイトを参考にさせていただきました。

hatena_recomend_0.1.js

      //連結配列のソート（大きいもの順）
      list.sort(
        function(a,b){
            var aName = a["matchP"];
            var bName = b["matchP"];
            if( aName > bName ) return -1;
            if( aName < bName ) return 1;
            return 0;
        }
      );

参考：配列の内容を順番に処理するには？（$.each）

最後にHTMLにぶっ込みます

hatena_recomend_0.1.js

      //html作成
      var htmlstr = "";
      htmlstr += '<div class="recomend">';
      htmlstr += '<h2>関連記事</h2>';
      htmlstr += '<ul>';

      $.each(list, function(z){

        var elitem = list[z].itemEL;
        var elimg = elitem.find("enclosure").attr("url");

        htmlstr += '<li class="section">';
        htmlstr += '<p class="imgP"><img src="' + elimg + '" alt="" width="170" ></p>';
        htmlstr += '<a href="' + elitem.find("link").text() + '" title="' + elitem.find("title").text() + '" target="_blank">' + elitem.find("title").text() + ' <br> ' + elitem.find("category").text() + '</a>';
        htmlstr += '</li>';
      });

      htmlstr += '</ul>';
      htmlstr += '</div>';

      //footer前に挿入する
      $('footer').before(htmlstr);

実装サンプル

Githubでソースを公開しています。
hatena_recomend_0.1.js

はてなブログのRSSがサイト全体の記事を配信していないため、表示する対象が絞られてしまうことがわかりました。
次回はサイト全体の記事からマッチ度の高いものを表示できる様に考えたいと思います。