Feedlyの購読者数付きボタンを使ってみた

RSS Food Photo by acagamic (Lennart Nacke)

前回、以下の記事で、Foodly..（食べ物かよっ）もといw、Feedlyの購読者数を調べる方法を取り上げましたね。

はてなブログのRSS配信URLは２つあった！ - tarのブログるっ

今回は、購読者数付きのFeedly登録ボタンをブログに付けてみました。

f:id:tarVolcano:20140404002005p:plain

やっぱり、目を引きますよね〜しばらく記事下に表示されるようにしてみました。これで購読者が増えると嬉しいですけどね^^

今回のこのボタンを付けるにあたって、こちらの２つのサイトを参考にさせていただきました。

[Å] feedlyの購読者数付きボックスボタン効果は抜群！？作り方を晒しました！ | あかめ女子のwebメモ

レンタルブログでもFeedlyの読者数カウントつきボタンを設置する方法 - 現代版徒然草 (地方より)

１つめのあかめ女子さんの記事は、このボタンの産みの親という記事で、このボタンのCSSを公開してくださってます。

２つめのid:lettuce0831さんの記事は、はてなブログを含むレンタルブログでの設定の仕方が、とても丁寧に書いてあります。

お二人とも良記事をありがとうございます。

とはいえ、参照元の記事のままボタンをつけたのでは、ひねりが足りないな〜と思いまして、ちょっとだけ私流にアレンジしてみましたので、今回はその部分と、貼付ける作業の概要をご紹介しちゃいますっ。何かの参考になれば嬉しい限りです^^

ボタン貼付けの作業概要

Webスクレイピングする
はてなブログ側にJavaScriptとCSSを設定する
ボタンを表示させる

では、順を追って説明していきますね。

クロスドメイン制約を回避する為のWebスクレイピング

通常、スクリプトを使って違うドメインのWebページからデータを持ってくることはセキュリティ上制限されています。（同一生成元ポリシーの制約）
ここでは、サイトを跨ぐアクセスを許可できるように、あらかじめウェブスクレイピングしたデータを自前で持ち、自分のブログからそのデータを呼び出すようにする、という事になります。

参考サイト
HTTP access control (CORS) | MDN
同一生成元ポリシー - JavaScript | MDN

ちなみにウェブスクレイピングとは、

WWWから自動的に情報を収集する処理に他ならない

via ウェブスクレイピング - Wikipedia

という意味です。

さあ実践です。今回「 ScraperWiki 」を使ってスクレイピングをしてます。

以下にScraperWikiを使う手順を、ざっくり示しておきますね。

ユーザー登録
登録は基本無料ですが、メールアドレスが必要で、サイトで仮登録後、メールで本登録URLが送られてきます。そこでパスワードを設定して登録完了です。
スクレイピング用のスクリプトを書く
ScraperWikiにログインして、「Create a New Dataset」から、「Code in your Browse」でスクリプトを登録します。
スクリプトには私の好きなRubyを使いました。後述にソースがありますので、試してみたい方はそれを参考にしてください。
スクリプトをスケジュール実行するように設定
上で書いたスクリプトを「Run」してエラーなく動く事を確認して、スケジュール化します。私は１日１回、9pm UTC（=6am JST）に設定しました。
公開URLの確認
同Datasetで「More tools...」から「Query with SQL」を追加し、「JSON API」を実行すると、公開URLが開きますので、そのURLをメモしておきます。このURLは次で使います。

スクレイピングスクリプトのソース

前回の記事でお話したRSS配信URLごとに購読者数が分かれてしまうという事象があったのを覚えてますでしょうか。せっかくなので、スクレイピングしたときにこの件数を合算してみました。

今回作ったRubyのソースはこんな感じです。何かの参考になればと思い、晒しておきますので、よかったら見てください。

#!/usr/bin/env ruby

require 'scraperwiki'

require 'rubygems'
require 'json'
require 'net/http'
require "cgi"

#ブログのRSS配信URLを登録
feedUrlList = [
  'http://tar.blogru.me/feed',
  'http://tar.blogru.me/rss',
  'http://tar.hatenablog.com/feed',
  'http://tar.hatenablog.com/rss'
]

#Feedlyで購読されている件数を合算する
subs = 0
feedUrlList.each {|feedUrl|
  uri = 'http://cloud.feedly.com/v3/feeds/feed%2F' + CGI.escape(feedUrl)
  resp = Net::HTTP.get_response(URI.parse(uri))
  jresp = JSON.parse(resp.body)
  subs = subs + jresp['subscribers']
}

#データを保存する
unique_keys = [ 'id' ]
data = {
    'id' => 1,
    'subscribers' => subs
}
#puts data.to_json
ScraperWiki.save_sqlite(unique_keys, data)

このときに参考にしたのがIBMのこの記事です。IBMにRubyの記事があるとは驚きでしたけどね^^;

Ruby を使用して Web から情報を抽出する

はてなブログの詳細設定でJavascriptコードとCSSを設定する

次ははてなブログ側での設定です。

今回は、パソコンのブラウザとスマフォの両方からこのボタンを使えるようにするために、ブログ設定の「詳細設定」内にある「headに要素を追加」欄に後述のコードを追加します。（あかめ女子さん、lettuce0831さんからの転載になります）

<style>
/* 購読者数つきFeedlyボタン
---------------------------------------------*/
#feedly-followers {
  display: block;
  width:72px;
}

#feedly-followers img{
  width:72px;
  height:30px;
  border:none;
}
/* 購読者数の表示部分 */
#feedlyCount {
  margin:0 auto 6px auto;
  width: 62px;
  height: 31px;
  background-color: #FFF;
  position: relative;
  border: 1px solid #669966;
  border-radius: 4px;
  padding: 0 4px;
  font-family: Arial;
  font-size: 16px;
  line-height: 31px;
  text-align: center;
  display: block;
  background: white;
}
/* 購読者数吹き出し部分 */
.subscribers:after,
.subscribers:before {
  border: solid transparent;
  content: ' ';
  right: 43%;
  position: absolute;
}
.subscribers:before {
  border-width: 3px;
  border-top-color: #B0C1D8;
  top: 32px;
}
.subscribers:after {
  border-width: 3px;
  border-top-color: #FFF;
  top: 30px;
}
</style>
<script>
  function getJSON(){
    var req = new XMLHttpRequest();
    var span = document.getElementById("feedlyCount");

    if (req) {
      req.onload = function(){
        if (req.status >= 200 && req.status < 400) {
          // 成功
          var json = JSON.parse(req.responseText);

          span.innerHTML = json[0]["subscribers"];
          console.log(json[0]["subscribers"]);

        }else{
          span.innerHTML = 'error1';
          console.log("なんらかの失敗");
        }
      };
      req.onerror = function(){
        span.innerHTML = 'error2';
        console.log("通信の失敗");
      };

      var url = "***さっきのJSON APIのURL***";
      req.open('GET', url);
      req.send();
    }
  }
  document.addEventListener( "DOMContentLoaded", getJSON, false );
</script>

なお、上の***さっきのJSON APIのURL***と記載されたところを、ScraperWikiでメモしたURLと置き換えましょうね。

登録が済んだら、設定内容を保存しておく事をお忘れなくっ。

さあ、最後にボタンを表示させていきます。

記事下にボタンを表示させる

今度はブログのデザイン画面から「カスタマイズ」を選び、「記事下」欄に下のHTMLコードを登録します。（こちらもlettuce0831さんからの転載です）

<div id="feedly-followers" class="over">
    <span class="subscribers" id="feedlyCount"></span>
    <a href='***自分のFeedlyfollowURL***'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
</div>