読者です 読者をやめる 読者になる 読者になる

tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

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

Ruby インターネット WEB JavaScript CSS

RSS Food
RSS Food Photo by acagamic (Lennart Nacke)

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

はてなブログのRSS配信URLは2つあった! - tarのブログるっはてなブックマーク - はてなブログのRSS配信URLは2つあった! - tarのブログるっ

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

f:id:tarVolcano:20140404002005p:plain

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

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

[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ[Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモはてなブックマーク - [Å] feedlyの購読者数付きボックスボタン 効果は抜群!?作り方を晒しました! | あかめ女子のwebメモ

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

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

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

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

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

ボタン貼付けの作業概要

  1. Webスクレイピングする

  2. はてなブログ側にJavaScriptとCSSを設定する

  3. ボタンを表示させる

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

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

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

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

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

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

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

という意味です。

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

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

  1. ユーザー登録
    登録は基本無料ですが、メールアドレスが必要で、サイトで仮登録後、メールで本登録URLが送られてきます。そこでパスワードを設定して登録完了です。

  2. スクレイピング用のスクリプトを書く
    ScraperWikiにログインして、「Create a New Dataset」から、「Code in your Browse」でスクリプトを登録します。
    スクリプトには私の好きなRubyを使いました。後述にソースがありますので、試してみたい方はそれを参考にしてください。

  3. スクリプトをスケジュール実行するように設定
    上で書いたスクリプトを「Run」してエラーなく動く事を確認して、スケジュール化します。私は1日1回、9pm UTC(=6am JST)に設定しました。

  4. 公開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 から情報を抽出する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>

また***自分のFeedlyfollowURL***と記載されたところは、ブログのFeedly登録URLに置き換えてくださいね。

これで購読者数付きののFeedly登録ボタンの出来上がりですヾ(●⌒∇⌒●)ノ

あとがき

今回はRubyのスクリプト以外のコードは、すべて転載となりました。ホント、なんとお礼を言った良いのやら^^;

また、タイムリーなことに、あかめ女子さんの別記事でコメントを残したところ、それがご縁でツイッター上でお話しする機会がありました。とても気さくな感じのかたで、すぐにファンになってしまいましたよw

私も「ブログは読者のことを考えながら、楽しんだもの勝ち」を地で行きたいものです。

Feedly Reader
無料
(2014.04.04時点)
posted with ポチレバ
  • このエントリーをはてなブックマークに追加