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

はてなブログに関連記事を出したいと思い、色々と調べました。こちらのサイトで詳しく紹介しています。
はてなブログで記事下に関連記事を表示する9つの方法

一番有名なのが「あわせて読みたいG」になります。
多くの関連記事ツールのベースがGoogle Feed APIを使用していますが、2015年に配信が停止になり、使えなくなっているケースが多いです。「あわせて読みたいG」は配信停止になって改善している様なので、使用する事ができます。
他にも公式の関連記事枠は設定されているのですが、サイドメニューの中に表示させるだけで、記事下に表示できなかったっり、あまり都合が良いものが見当たらなかったので。自分で作ろうと思いました。
まだ、荒削りなので、今後調整が必要になるかと思いますが、一応備忘録として記載しておきます。

jQueryの読み込み

まずは、jQueryを読み込みます。最初につっかかったのがjQueryの読み込みです。jQueryはバージョンなどにより、機能が違っていたりするケースがあります。しかし、フルのバージョンを使うと読み込みに時間がかかるなどの問題があるため、ちょうど良いものを探す必要がります。
前回紹介した「はてなブログで自動的に目次を作成するjs」で使っているJSは「3.1.1.slim.min」なので機能が削られているものの様です。

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

今回はこちらの「3.1.1.min」を使用します。

RSSの読み込み

次にRSSを読み込みます。jQueryのajax関数を使用して、次の様に書きます。
「http://noriyasu-katano.hatenablog.com/rss」の部分を書き換えていただければつけます。
はてなブログでは、各個人のブログトップのアドレスの最後に「/rss」をつけると、rssが利用できます。

$.ajax({
        //はてなrssファイルを読み込む
        //ブログのアドレスの最後にrssをつける
     url:'http://noriyasu-katano.hatenablog.com/rss',
     success: function(data){

                    //はてなrssの読み込み
                    var rss_url = 'http://noriyasu-katano.hatenablog.com/rss';

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

                    //アイテムの調整
          $.get(rss_url, function(data) {
               $(data).find("item").each(function (i) {
                    var el = $(this);
                    var elimg = el.find("enclosure").attr("url");

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

                    if(i === 5) { // 表示件数の設定
                        return false;
                        };
               });

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

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

この内容で、画像とタイトルを取得して、上位５件をタグの前に挿入する様になります。

CSSの調整

CSSはこちらの様に設定しました。「.recomend」というクラスが振られます。

/**
 * 関連記事
 */
 .recomend{
   width:560px;
 }
 .recomend ul{
   margin:0;
   padding:0;
 }
 .recomend li{
   display: inline-block;
   vertical-align: top;
   width:170px;
   margin-right:15px;
   list-style: none;
   padding: 0;
   margin-bottom: 20px;
 }
 .recomend li:nth-child(3){
   margin-right:0;
 }
.recomend li p{
  font-size:80%;
}

p.imgP{
  width: 170px;  /* トリミングしたい幅 */
  height: 100px;  /* トリミングしたい高さ */
  overflow: hidden;
  position: relative;
}

 .imgP img{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
 }

コンテンツ幅に合わせて横に3件表示されます。

実装サンプル

組み込み

外部ファイルから読み込みさせるCDN形式で作ろうと思ったのですが、なかなかRSSの読み込みなのか、多くのJSが動いているため、表示されたりされなかったりと原因がわからないので、今回は記事下にスクリプトを埋め込む形で
設定してみました。
「関連記事」と行ってもRSSを読み込んでいるだけなので、実質「新着記事」になります。今後は、カテゴリなどでRSS読み込みそれぞれに関連性の高い記事を出せる様に設定していきたいと思います。