ブックマークレット作ってみた

新幹線の中にある電光掲示板みたいに、ニュースが流れるようなブックマークレットを作ってみました。気になる記事をクリックすると、その記事に飛べます。

ここをクリック!

これをブラウザのブックマークに登録すると、ブックマークレットとして使えます。


ソースはこれ。

(function(d, f) {
  // Load jQuery
  var s = d.createElement('script');
  s.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
  s.onload = function() {
    f(jQuery.noConflict(true));
  };
  d.body.appendChild(s);
})(document, function($) {
  // Load Google Feed API
  $.getScript('https://www.google.com/jsapi', function() {
    google.load('feeds', '1', {
      'callback': function() {
        // Load Google News RSS
        var feed = new google.feeds.Feed('http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss');
        feed.setNumEntries(20);
        feed.load(function(result) {
          if(!result.error) {
            // Append on the bottom
            var footer;
            $('body').append(footer = $('<footer>').css({
              'position': 'fixed',
              'height': '16px',
              'left': '0',
              'bottom': '0',
              'white-space': 'nowrap',
              'overflow': 'hidden',
              'font-size': '14px',
              'padding': '2px',
              'background-color': 'white'
            }));
            for(var i = 0, len = result.feed.entries.length; i < len; i++) {
              var entry = result.feed.entries[i];
              footer.append($('<a>').attr('href', entry.link).text(entry.title +' / '));
            }
            var move = 0;
            var update = function() {
              var w = window.innerWidth;
              move--;
              if(w < (-move)){
                move = 0;
              }
              footer.css({
                'width': w - move + 'px',
                'left': move + 'px'
              });
              setTimeout(update, 20);
            };
            setTimeout(update);
          }
        });
      }
    });
  });
});

Google Feed API を使ってます。Google Feed API Developer's Guide - Google Feed API — Google Developersこれは、javascriptで簡単にRSSを読み込んで扱えるAPIですね。結構便利。


jQueryを動的に読み込み、Google Feed API を使ってGoogleさんのニュースRSSを取ってきて、あとはタグでぐるぐる流してる感じですね。


当然だけどjavascriptなので、結構なんでもできちゃう。ブックマークレットは便利な反面、セキュリティ的にちょっと気をつけないとかな。