意外と便利なRSSメニューのJavascriptを公開します。自分のRSSでも他人のRSSでもスキなようにChrome拡張で追加できます。

こんなメニューあってもそんな使わないなって思っていたんですが、あるとあったで、なんだか意外と便利でしたので、公開したいと思います。

利用しているのはChromeブラウザーのStylishとScriptAutoRunnerです。

ちなみに参考にしたサイトは

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

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld

ロジックは上記より、コピー＆ペーストにて加工してます。ちょっとだけね。

だから、画像取得部分のロジックが違うので、画像がメニューに表示されません。そこはご愛嬌ということで、ちゃんと画像も表示したい人は、ちょっと修正してください（笑）

まずはRSSメニューのStylishから

header {
 position: fixed;
 top: 150px;
 left: 0;
 z-index: 12;
 width: 25%;
 transition: .3s;
/* 好きな色があればここでスタイル指定しましょう。 */
}
div.overlay a{
/* 好きな色があればここでスタイル指定しましょう。 */
}

ScriptAutoRunnerへは

jquery-3.2.1.minのコードは

//code.jquery.com/jquery-3.2.1.min.js

header div.overlayのコードは

$('body').prepend('<header><div class="overlay"></div></header>');

note.muでAjaxにてRSS取得のコードは

$.ajax({
    url:'https://note.mu/otspace0715/rss',
    success: function(data){
      var rss_url = 'https://note.mu/otspace0715/rss';
      var htmlstr = "";
      htmlstr += '<div class="rec">';
      htmlstr += '<h2>' + rss_url + '</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="sec">';
              htmlstr += '<p class="pimg"><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) { // 表示件数 ＋1件多いのでカウント間違えてるぞ（笑）
                  return false;
              };
          });

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

          //div.overlayに挿入する
          $('.overlay').prepend(htmlstr);
          $('.overlay').fadeIn('slow');
      });
    }
});

note.muでRSSウィンドウの表示非表示制御のコード

  $(function() {
   var $win = $(window),
       $header = $('header'),
       headerHeight = $header.outerHeight(),
       headerWidth = $header.outerWidth()+10,
       startPos = 100;
//ちなみにHeaderHeightは0のままですので
   $win.on('load scroll', function() {
     var value = $(this).scrollTop();
     if ( value > startPos && value > headerHeight ) {
        //左へ消えます（笑）
       $header.css('left', '-' + headerWidth + 'px');
     } else {
       $header.css('left', '0');
     }
     startPos = value;
   });
 });

と、このような感じです。

こんな拡張機能追加してみたいなあというご相談や公式に対応してもらいたいけど、拡張機能でサクッと追加できるなら追加したいなというChromeブラウザー愛好家の皆さん、もしよろしければ教えてください♪

私に作れそうならちょっと作ってみますよ♪

うん。それは公式が対応しないと無理っていうのもあると思いますが、こういう機能欲しいっていう情報お待ちしております♪

私はnote.muをこよなく愛する活動くぁ～～のつもりですから……